I seem to have come across an error within my navigation bar. When I navigate from my "Technologies" page to Home page it works. However when I navigate from the Home Page to the Technologies page nothing happens. Can you explain this error because it honestly doesn't make any sense.
HTML: Home page
<body>
<h1 class = "name"><font color = "#3399FF"> Prog-Assist | </font><font size = "12"> Where Collaboration is Welcomed</font></h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav" class= "text-left">
<li>Home</li>
<li>Technologies</li>
<li>Programs</li>
<li>Blog</li>
</ul>
<ul id = "nav" class = "text-right">
<li><strong>Sign Up</li>
<li>Sign In</li>
<li>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
Tech Page:
<body>
<h1 class = "name" ><font color = "#3399FF"> Prog-Assist | </font><font size = "12"> Where Collaboration is Welcomed</font></h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav" class= "text-left">
<li>Home</li>
<li>Technologies</li>
<li>Programs</li>
<li>Blog</li>
</ul>
<ul id = "nav" class = "text-right">
<li><strong>Sign Up</li>
<li>Sign In</li>
<li>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
CSS for links:
#nav {
list-style: none;
}
.nav a {
text-decoration: none; /*remove underline*/
text-transform: uppercase;
color: #00002E;
}
.nav li {
display: inline;
float: left;
padding: 10px;
}
.text-left {
float: left;
padding-left: 30px;
}
My folder with files:
When I try to inspect element
Some steps to solve this issue:
lowercase your filenames. Main.html becomes main.html, same for all other html files.
use proper <html> open and closing tags. this is important!
you might use a <link> tag to include your style (stylesheet.css)
i've add "I'm the Main Page" and a title to show that navigation works
you might apply the same stuff to your tech.html
navigation works and css style, too.
File: main.html
<html>
<head>
<title>Main Page</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
I'm the Main Page.
<h1 class = "name">
<font color = "#3399FF"> Prog-Assist | </font><font size = "12"> Where Collaboration is Welcomed</font>
</h1>
<div id = "header">
<div id = "gradient">
<div class = "nav">
<!-- container-fluid gives full width container of whole viewport -->
<div class = "container-fluid">
<ul id = "nav" class= "text-left">
<li>Home</li>
<li>Technologies</li>
<li>Programs</li>
<li>Blog</li>
</ul>
<ul id = "nav" class = "text-right">
<li><strong>Sign Up</li>
<li>Sign In</li>
<li>Contact</strong></li>
</ul>
</div><!-- end container-fluid-->
</div><!--end nav-->
</div>
</div> <!-- end header -->
</body>
</html>
Related
i have a menu bar that has 3 anchor elements and i want to load the content of those elements while staying on the same page.
i want to do so without making linking to another html file that has those contents.
i have tried adding id's to the divs and linking to them with an anchor element but that doesnt make the other content disappear no matter what link i am on
<div class = "logo">
<img src="logo-removebg-preview.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Programs</li>
<li>Library</li>
<li>Gallery</li>
<li>عربي</li>
</ul>
</nav>
</header>
<main>
<section class = "inner-section">
<div class="sub-menu">
<ul>
<li>Who We Are</li>
<li>Our Values</li>
<li>History & Structure</li>
</ul>
</div>
<div class="wrapper">
<div id ="who-wrapper"class="who-body">
<h3>Who We Are?</h3>
here is the image
You can use anchor tag to call the specific section
Anchor content
<section id="id_of_section">
some content here
</section>
This is my Problem : I'm making a website and when I try to resize it the divs that I added (which are empty) stop scaling my whole website after a certain point. This is very basic but I'm not sure what's going wrong.
html-
<body>
<!-- navbar 01 starts here -->
<nav class = "navbar navbar-inverse col-lg-12">
<div class = "container">
<nav class = "navbar navbar-default">
<div class = "container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class = "navbar-header">
<button class = "navbar-toggle collapsed"
data-target = "#defaultNavbar1"
data-toggle = "collapse"
type = "button">
<span class = "sr-only">
Toggle navigation
</span>
<span class = "icon-bar">
</span>
<span class = "icon-bar">
</span>
<span class = "icon-bar">
</span>
</button>
<a class = "navbar-brand" href = "#">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div id = "defaultNavbar1"
class = "collapse navbar-collapse">
<ul class = "nav navbar-nav">
<li>
<a href = "#">
Home
</a>
</li>
<li>
<a href = "#">
Contact Us
</a>
</li>
</ul>
<form class = "navbar-form navbar-left"
role = "search">
<div class = "form-group">
</div>
</form>
<ul class = "nav navbar-nav navbar-right">
<li>
<a href = "#">
Support
</a>
</li>
<li>
<a href = "#">
Get Started
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</nav>
<!-- empty div 1 -->
<div class = "index-section01">
</div>
<!--empty div 2-->
<div class = "index-section02">
</div>
<!--image-half-way-logo to home-->
<div class = "index-logo01">
<a href = "index.html">
<img class = "img-responsive"
alt = ""
src = "images/3logo_home.png"
width = "1360"
height = "138"/>
</a>
</div>
<!--empty div 3-->
<div class = "index-section03">
</div>
<script src = "js/jquery-1.11.2.min.js"
type = "text/javascript">
</script>
<script src = "js/bootstrap.js"
type = "text/javascript">
</script>
</body>
And the css code...
body
{
background-image : url(images/Final_Web_Home.jpg);
background-repeat : no-repeat;
background-size : cover;
}
.index-section01
{
min-width : 100%;
padding-bottom : 500px;
padding-right : 127px;
padding-top : 500px;
}
.index-section02
{
min-width : 100%;
padding-bottom : 770px;
padding-top : 600px;
}
.index-section03
{
min-width : 100%;
min-width : 0px;
padding-bottom : 578px;
padding-top : 833px;
}
.index-logo01
{
display : block;
padding-bottom : 85px;
padding-left : 132px;
padding-right : 0px;
padding-top : 224px;
}
.navbar-default
{
background-color : #FFE016;
padding-top : 17px;
}
.navbar-inverse
{
background-color : #FFE016;
}
This is done on the dreamweaver platform.
You are using bootstrap.
You put all the content inside <div class="container">
From the documentation:
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
Use .container for a responsive fixed width container.
So, yes, it stops getting wider when you hit the maximum width of your container. That's the point of that class.
Use .container-fluid for a full width container, spanning the entire width of your viewport.
I made a footer with this following HTML:
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<p class="navbar-text pull-left">Copyright © OLShop.com 2016</p>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</div>
</nav>
Everything worked perfectly when I set it to fixed. But when I set footer to be not fixed, it wasn't located at the bottom of the page (floating) and had border radius. How to set it to the bottom of the page (not fixed) and remove the border-radius?
Any guidance will be very much appreciated.
You need to position the nav at the bottom of the page with CSS positioning. Refer to my earlier post on positioning.
Also you should override the media query from bootstrap to remove border-radius.
I have attached a code snippet but it will not work in this form.
You should copy the HTML code and a create a new external stylesheet using the CSS styles in the snippet and then add it after bootstrap.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="stylesheet.css"/>
footer {
position:absolute;
left:0;
bottom:0;
width:100%;
}
#media (min-width: 768px) {
.navbar {
border-radius: 0;
}
}
.navbar{
margin-bottom:0;
bottom:0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<footer>
<nav class="navbar navbar-inverse navbar-bottom">
<div class="container">
<p class="navbar-text pull-left">Copyright © OLShop.com 2016</p>
<ul class="nav navbar-nav navbar-right">
<li>About Us</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</div>
</nav>
</footer>
It's simple. Just try this:
<nav>
<div class="container">
<p class="navbar-text">Copyright © OLShop.com 2016</p>
<ul class="text-center inline-me">
<li>About Us</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
</ul>
</div>
</nav>
in Custom CSS, add this:
ul.inline-me li a {display:inline; padding-right:4px;}
Hope that helps.
How to put it down to the bottom of page (not fixed)?
You can just put it's html in the right place (probably inside a footer tag).
JsFiddle : http://jsfiddle.net/nnndfcad/1/
Or you can use an absolute positioning like #santon's answer explained.
But I highly disapprove this type of approach.
How to remove the border-radius?
According to your code, a simple
.navbar-inverse {
border-radius: 0px;
}
Should solve it.
Problem:
Writing common CSS code in order to be applied for two nav elements. I have searched all over Google and Stackoverflow without any success. It seems it's not common to use two nav elements while W3C allows it.
HTML code:
<!-- Global navigation -->
<nav role="main">
<ul>
<li>Startpage</li>
<li>Cars</li>
<li>About us</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari</li>
<li>BMW</li>
<li>Volvo</li>
</ul>
</nav>
CSS code:
How would I write CSS code in order for the two navigation elements to have the same layout, but different styling (color, font size, etc.)?
You could do something like this:
nav ul li {
width:100px;
display:inline-block;
margin:5px;
padding:5px;
color:#333;
text-align: center;
}
nav[role="main"] ul li {
background-color:#aaa;
}
nav[role="sub"] ul li {
background-color:#eee;
}
<!-- Global navigation -->
<nav role="main">
<ul>
<li>Startpage</li>
<li>Cars</li>
<li>About us</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari</li>
<li>BMW</li>
<li>Volvo</li>
</ul>
</nav>
Not sure what you mean by
same appearance but different styling
You can use the role attribute as a CSS selector, as shown here:
nav[role="main"],
nav[role="sub"] {
background: #222;
color: #f40;
}
nav[role="main"] a,
nav[role="sub"] a {
color: #fff;
}
<nav role="main">
<ul>
<li>Startpage
</li>
<li>Cars
</li>
<li>About us
</li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li>Ferrari
</li>
<li>BMW
</li>
<li>Volvo
</li>
</ul>
</nav>
I have my navbar of links and when the user is on a page that corresponds to one of the links I want to change the background color of that link. For example, when the user is on the home page I want to change the background color of the home link. I tried with #navbar li a:current but that doesn't work.Is this possible with css?
html:
<div id="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
CSS:
#navbar li a.current {
background-color: #FFF;}
Your CSS is wrong. It should be #navbar li a.current {
background-color: #FFF;} You had a colon after a:current.
Your HTML should be like this:
<div id="navbar"><ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
<div id="navbar">
<ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
Now create a background color for the class of "current". You'll have to apply that class with the backend logic. CSS cannot workout the logic by itself. It only handles the styles
You could use javascript(jQuery) like this:
var currenturl = window.location.pathname.split( '/' );
$('#navbar>li>a[href="'+currenturl[1]+'"]').css({background: 'some_color'})
If you want to accomplish this only with CSS, maybe you can use the parent's IDs:
<div id="parent1">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
<div id="parent2">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
And then...
#parent1 li.home {
background: red;
}
#parent2 li.home {
background: black;
}
You could do this using Javascript/JQuery (although a server-side approach is probably better):
var currentPath = window.location.pathname;
var pageName = currentPath.substr(currentPath.lastIndexOf('/')+1); // "index.html", etc
$("a[href=" + pageName + "]").parent().css("background", "#FFF");
The above requires JQuery, but you can do something similar in pure Javascript:
var targets = document.querySelectorAll('a[href=' + pageName + ']');
if (targets.length > 0) {
targets[0].parentNode.style.background = "#FFF";
}
(Fiddle)
Offcourse it is possible with pure css3. You could give an id to all your 'li' s.
like ,
li id="sample"
then modify your anchor to
a href="index.html#sample"
use CSS :target selector
li:target{
// apply your styles here
}
simple