I have a simple UL navigation menu with width of 1000px:
<ul class="menu">
<li class="first">google</li>
<li>google</li>
<li>google</li>
</ul>
So, how can I set the first element to fit the entire UL width and push the other list items on the right (all LIs should be on the same line - horisontal menu)?
I know I could float:left the first and float:right the rest, but this will reverse the order of the right - floated elements.
I need a quick, CSS only solution, working even in IE6.
Thanks in advance!
UPDATE: To clarify, the first element is a logo, the final result is like the header of 9gag.com except the logo should be on the left and all links to the right.
Logo usually should not be a part of navigation menu. It's more appropriate to mark-up it as header (H1 on home page, and H3 on rest pages).
<h3>MyBrand</h3>
<ul>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
You can use then float: right for your UL list itself to align menu to the right.
See this example, i don't know your menu is dynamic, but if you have a 'width' for other's li's, is more easier
Demo: http://jsfiddle.net/e6SWD/12/
.menu {
margin-left: 84px; /* width others 2 li's */
width: 1000px
}
.menu li {
display: inline;
}
.menu li.first {
display: block;
float: left;
margin-left: -84px; /* width others 2 li's */
width: 100%
}
Now with more clarification:
http://jsfiddle.net/6DkVx/2/
ul {
width: 1000px;
position: relative;
text-align: right;
}
li {
display: inline-block;
}
.first {
position: absolute;
top: 0; left: 0;
}
Just use this CSS
.menu li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}
As stated before separate the logo from the main navigation. Do something like this instead.
<div id="header>
<div id="logo">Logo here</div>
<ul><li>Rest of links here</li></ul>
</div>
The header div is the wrapping div. You could change this to <header></header> if you want to do HTML5 (this will work in all browsers even old ones).
Then set the width of the logo, you can use a link there aswell. And float the ul and logo to the left.
Related
I currently have a navigation bar that has several items in an unordered list which float left, as well as a dropdown button in a div that floats right. Currently the dropdown menu gets moved below the other menu items, like this:
I don't want this spacing; I want the div to be aligned with the items in the ul. How can I achieve this?
Note: I can't place the div in the ul because the ul is populated by an outside data source. Here's my current relevant css:
.overallContainer {
display: inline;
}
.menuItems {
float: left;
}
.dropdownButton {
float: right;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
And the HTML:
<div class="overallContainer">
<ul class="menuItems" id="menuItems" data-sly-list="${topnav.root.listChildren}">
<li>
${item.title}
</li>
</ul>
<div class="dropdownButton" data-sly-resource="*resource*"></div>
</div>
Place both the ul and the div inside a new div; then use float: left; or display: inline-block; on both the ul and the nested div. (Or Flexbox, if you want.). You'll want to set a width on both elements, since by default they will have 100% which means they won't nicely align with each other. You may also need to consider any default vertical margins, padding, line height on ul or div elements if you want the text to be perfectly aligned.
I'm trying to create a horizontal navigation that floats to the right. Once it floats to the right and I then float all list items to the left. The last list item breaks onto a new line.
The problems disappears when I remove any margin properties. But margin is very important to me because I've displayed the anchor tags to block in order to make the whole area clickable. I've done this for touch screen purposes.
Can anyone help me to make all the words in my ul display on one line as it all floats to the right while still using margin and padding?
https://jsfiddle.net/samuelcrockford/4a8oovjs/1/#&togetherjs=P0dq57flOy
Please see example using the js fiddle link above
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
nav {
float:right;
overflow: auto;
}
nav ul {
float:right;
list-style: none;
}
nav ul li {
float: left;
margin-left: 4%;
}
nav ul li:first-child { margin-left: 0;}
nav ul li a {
display: block;
float: left;
font-size: 1em;
padding: 0 2%;
}
Set all elements' box-sizing property to border-box:
*{
box-sizing: border-box;
}
This will include both border widths and padding sizes in the complete width of an element- fixing the problem in terms of padding.
Use px values for the margins, to fix that issue.
Add 100% width to the ul tag
nav ul {
width:100%;
}
I have a nav bar that needs to display 100% of the screen.
<body>
<div class="nav">
<div>
<img src="./logo.png">
</div>
<ul>
<li>Home</li>
<li>Browse</li>
<li>Contact</li>
</ul>
</div>
</body>
Here is the fiddle.
The nav css has width: 100%, and left and right padding of 10%. The logo floats left and ul floats right. I want the background colour of the img and the rest of the nav bar to the left in red, and the rest of the nav to the right of the img in black. I could change the background color of the img to red and the background color of the nav to black, but I cannot change the color to the left of the img.
One of the issues you have is floats. With float the elements are removed from the normal document flow, this means their parent (in this instance the nav div) will collapse, losing its background color. A common fix for this is the "clearfix", a simpler option is to float the nav container too. You also have to counter the box model which add padding on top of width.
I prefer to tackle this with inline-block instead of floats:
.nav {
padding-right: 10%;
background-color: black;
}
.nav img {
background-color: red;
width: 40px;
display: inline-block;
vertical-align: bottom;
padding-left: 10%;
}
.nav ul {
display: inline-block;
margin: 0;
vertical-align: bottom;
width: 78%;
text-align: right;
}
.nav li {
display: inline;
text-align: left;
}
.nav a {color:#FFF;}
<div class="nav">
<img src="./logo.png">
<ul>
<li>Home
</li>
<li>Browse
</li>
<li>Contact
</li>
</ul>
</div>
See this article for some pros and con's of inline block. One of which it white space between elements, this is the reason for the ul having a width of 78% instead of 80%
Try adding overflow:hidden to the .nav.
As #JonP explained, the floated items are taken out of the normal flow, and now have block formatting context. Adding the overflow, makes the parent gain context as well.
You can read about it here: developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
Couldn't think of a good way to word my question.
Here is the design in question
I want it so that the social media banners at the top right move down when you hover over each one of them. I'm using margin-top to do that and each banner is a list item.
When I hover over one of the images, all of the other ones drop down too!
My question is: how can I make it so that the one that the cursor on is the only one that moves down?
HTML:
<ul id="social-media">
<li><img></li>
<li><img></li>
<li><img></li>
</ul>
CSS:
#social-media {
float: right;
margin: 0px;
margin-left: 80%;
position: absolute;
}
#social-media li { display: inline-block; margin-top: -15px; }
#social-media li:hover { margin-top: 0; }
Thanks in advance!
Add vertical-align:top to the li elements. This ensures that the elements are aligned properly, otherwise it uses the baseline and produces the effect you see.
If you go to http://www.leapfm.com and scroll down to the footer you'll see that the links are on the right bottom hand side.
How can I put em' in the center?
Please use Firebug or inspect element for easy access to the code.
So I'll start top down from the div class="footer", you'll need to change or add these css properties:
.footer {
display: block;
text-align: center;
width: auto;
}
The li for the links inside footer:
.footer li {
display: inline-block;
}
Then the a tags inside the above li tags:
.footer li a {
display: inline-block;
float: none;
}
Enclose the li-elements properly in a ul, and set margin: 0 auto on it.
Instead of using li-elements as separators, you could use li + li:before { content: "|"; }
Remove the CSS float:right for the class declaration.
.footer a {
float: right; //Remove this
display: block;
margin-right: 5px;
color: black;
}
Try to enclose the <li> tag with <ul>
and after that add this css :
.footer {
display: block;
text-align: center;
}
.footer ul {
margin: 0 auto;
}
.footer li {
float: left;
display: inline-block;
}
Remove float:right; from .footer a and enclose you are li tags with ul
<div class="footer">
<ul>
<li>Submit |</li>
<li class="divider"></li>
<li>FAQ | </li>
<li class="divider"></li>
<li>Contact Us </li>
</ul>
</div>
First of all you should enclose each of these LI's in a UL or OL.
Contrary to what the others have pointed out, you dont need to give the UL/OL a margin of 0 auto because it will already take up the entire space it has. Or give a display:block to the footer and text align. So when you set a text-align:center to the li; they will magically go in the center of the element. No need to center the parent element(the ul).
Also, if you want to do things the right way, get rid of the br tag and use margin or padding to space your way around your layout.
So; all you need to add to your code is this:
ul{
text-align:center;
}
ul li{
display:inline-block;
}
Sorry to put this in an answer. I would have rather be a comment to the top answer. I dont have enough rep for that. Not glory hunting!
Hope this helps