I want my navigation menu to have 3 links on the left, the logo in the middle, and 3 more links to the right,
This is the first way I have tried:
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
</ul>
<h1> portfolio </h1>
<ul>
<li>services</li>
<li>blog</li>
<li>contact</li>
</ul>
Is this a good way?
Sorry I've never done this before so I just want to make sure I am doing it a good way
You need to float your menus and center header:
Html
<div id="header">
<ul class="left">
<li>home</li>
<li>about</li>
<li>portfolio</li>
</ul>
<h1> portfolio </h1>
<ul class="right">
<li>services</li>
<li>blog</li>
<li>contact</li>
</ul>
</div>
Css
#header h1 { display:block; text-align:center; }
#header .left { float:left; }
#header .right { float:right; }
http://jsfiddle.net/Ub3cP/
That would be just fine. Then you would have to use the CSS float property to get everything in line.
It's OK, but there's a gotcha to watch out for. You describe it as a navigation menu, and so it is, and I'm assuming that the <h1> is a page header. Now, if you were making a HTML5 page, you'd want to mark your navigation menu appropriately with a <nav> element. So you might do this:
<nav>
<ul>
<li>home</li>
<li>about</li>
<li>portfolio</li>
</ul>
<h1> portfolio </h1>
<ul>
<li>services</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
The problem is that this changes the semantics of the <h1> element. It would then be the heading of the nav area, not the heading of the page.
To guard against this, it might be better to have the <h1> element either before or after the navigation menu in the markup, and move it into the display position between the two <ul>s with CSS.
For example: http://jsfiddle.net/mJELq/
Related
"Every anchor link inside the navigation menu should have a font size of 1.5 rem. (Hint: Two elements!)"
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Chat</li>
</ul>
</nav>
would this work?
nav ul{font-size:1.5rem;}
This way only makes sense if the <ul> element is a direct child of the nav. Which in your case, works just fine.
nav > ul {
font-size:1.5rem;
}
If the <ul> was not a direct child to your <nav> then I would apply a class like so:
.font-size {
font-size: 2rem;
}
<nav>
<ul class="font-size">
<li>Home</li>
<li>Blog</li>
<li>About</li>
<li>Chat</li>
</ul>
</nav>
Ok, so I'm trying to create my first website and I've got all the HTML pages I want to link together, so when I click on "contact" for example, it opens that page, but I can't seem to make it work. I've looked everywhere and tried everything and nothing seems to do the trick.
Here's my code so you can see if i did something wrong:
<header>
<nav>
<ul>
<li>Index</li>
<li>Contact</li>
<li>More</li>
</ul>
</nav>
</header>
I've also tried this:
<header>
<nav>
<ul>
<li>Idex</li>
<li>Contact</li>
<li>More</li>
</ul>
</nav>
</header>
<div id="contact" name="contact">
Hopefully you can help me! Thanks.
The 1st one code is right, but be sure that all files in same directory.
<html>
<body>
<header>
<nav>
<ul>
<li>Index</li>
<li>Contact</li>
<li>More</li>
</ul>
</nav>
</header>
</body>
</html>
It seems that jsfiddle does not let me use multiple html pages so i cannot post both pages. The issue is when i click a link my nav, i notice the logo move a little to the right instead of staying in the same place. the second html page has the exact same html code and css so i don't know why the logo would move once i click a link.
<header>
<div class="header">
<h1 class="logo">New York</h1>
<nav class="main-navigation">
<ul>
<li class="active">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
I have a simple html menu that is styled using CSS.
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
What I am looking for is a way to show the user what page is currently in use by way of a coloured background on the correct bit of the navigation menu. E.g. when the user is on the career page, the li box would be a different colour to the rest of the menu to show that it is in use.
What you're going to want to do is add a class to whatever menu item is currently active. For example, the HTML markup for index.html would look like this:
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
And the markup for career.html would look like this:
<div id="menu">
<ul>
<li>Home</li>
<li>Growing Up and School</li>
<li class="active">Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then style the class accordingly:
.active {
background-color: red;
}
You can do this by adding an'active' class.
When you are on a certain page, you will add the class="active" to your link ( or li element ) . This is how wordpress and many other web application solve this.
Look here : http://jsfiddle.net/Bm9E4/2/
On the active page, add a class of .active to the LI for that page.
<div id="menu">
<ul>
<li class="active">Home</li>
<li>Growing Up and School</li>
<li>Films</li>
<li>James Bond</li>
<li>Pictures</li>
</ul>
</div>
Then do CSS for the background:
#main li.active { background-color:red; }
I have multiple menus (ul) and each have li's inside them. For example, the main navigation menu for the site is horizontal. But, I also have several other menus for products on a page, and those menus are vertical.
I don't want to go adding class="verticalMenuOption" to all of the menus that I want to be vertical, because that just makes things look ugly in the code, and ugliness is very distracting for me.
Is there a way to have 1 menu with horizontal li's, and every other menu on the site horizontal li's?
Horizontal:
<ul class="menu">
<li class="selected">Home</li>
<li>Products</li>
<li>About Us</li>
<li>Help & Support</li>
<li>Contact Us</li>
<li class="selected">My Account</li>
</ul>
Vertical:
<ul class="menu">
<li class="selected">sample</li>
<li>sample</li>
<li>sample</li>
<li>sample</li>
<li>sample</li>
<li class="selected">sample</li>
</ul>
I think you meant to say 1 horizontal, the others all vertical. But anyway, if vertical is the rule, and there's only one exception, style your ul to be vertical (which is default), and then make a single exception for the nav. If your nav has an id, you can use that as a css selector, like #nav, so you don't need to add a new css class.
make the default menu vertical (by accessing .menu class), and add a horizontal class to the one you want as horizontal + style it as horizontal.
Add an id to the menu you want to be horizontal
<ul id="horizontal" class="menu">
...
</ul>
<ul class="menu"> ... </ul>
then in your CSS file
#horizontal { display:inline }
usually each of those menus would be likely to have different ancestors, or parent divs.. maybe the horizontal one is in a div called "header" and the vertical content one in a div called "content" or "sidebar" - it doesn't matter if they're direct parents or not as long as they are unique in the ascendency
you can then target each list separately
#header .menu {.. your styles ..}
.content .menu {.. your styles ..}
There's not really enough code here to explain properly, but there is usually a way of isolating an element without having to add more classes, if not then as already mentioned you can do that or you can add in the wrapper divs with ID's
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
#vertical li {
display: block;
float: left;
padding-right: 15px;
list-style-type: none;
}
</style>
</head>
<body>
<ul class="menu" id="horizontal">
<li class="selected">Home</li>
<li>Products</li>
<li>About Us</li>
<li>Help & Support</li>
<li>Contact Us</li>
<li class="selected">My Account</li>
</ul>
<ul class="menu" id="vertical">
<li class="selected">sample</li>
<li>sample</li>
<li>sample</li>
<li>sample</li>
<li>sample</li>
<li class="selected">sample</li>
</ul>
</body>
</html>