I am looking to get my everything on my menu bar vertically aligned in the center, with the a elements taking up 100% of the available height of the menubar (text would be veritcally-centered). HOWEVER, I do not wish to fix the height of my menu bar. (If I was to fix the height, I'd just use line-height for vertical alignment).
HTML:
<div id="head">
<h1>My header</h1>
<ul id="nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
CSS:
#head {
background: #ccc;
width: 100%;
}
h1 { margin: 0; }
h1, #nav, #nav li { display: inline-block; }
#nav a:hover { background: red; }
JsFiddle: http://jsfiddle.net/m3qGs/
The effect I am trying to achieve is like the menu bar from JsFiddle but without the height being fixed. I'd prefer to do this in just CSS (ie no Javascript)
Add vertical-align:middle in the following class.
h1, #nav, #nav li { display: inline-block; vertical-align:middle; }
DEMO
Add vertical-align:middle; to your inline-block elements, this will overwrite the default baseline vertical-align
Code:
h1, #nav, #nav li { display: inline-block; vertical-align:middle;}
jsfiddle demo here link
Related
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
So my html is this:
<div id="background">
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</div>
and my CSS is this:
#background {
min-widh: 960px;
}
#navigation {
min-width: 960px;
}
#navigation ul {
min-width: 960px;
}
#navigation ul li {
display: inline;
width: 100px;
height: 50px;
background-color: red;
}
Now, this does create an inline bar except no matter how much I change the width and height of
#navigation ul li
the background color (red) just stays strictly around the letters and nothing else. It seems as if the width and heights of the actual li's are not changing no matter what number I change it to. Any idea why it is doing this?
Use display:inline-block instead or display:inline.
#navigation ul li {
display: inline-block;
}
jsFiddle here
Alternatively, you can also float the elements for a similar effect:
#navigation ul li {
float:left;
}
jsFiddle here
Aside from both of the above solutions, if you wanted to use display:inline, you could just add padding as opposed to trying to set a height/width.
#navigation ul li {
display:inline;
padding:20px;
}
jsFiddle here
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.
I'm trying to center this bottom nav on a test site:
http://heroicdreams.com/kktest/
The ul li uses float:left; which is what I think is making it stay stuck to the left. I'm trying to figure out how to get it to be centered.
To get the links displayed horizontally I needed to float them left, but now I can't get the whole nav to be centered. Is there a way?
often using:
.divStyle {
text-align: center;
}
ul.styleName {
margin: 0 auto;
text-align: left;
}
will do the trick.
Applying an "auto" margin to the left and right of the ul like this will cause it to center itself in the div whenever the div has centered text. This is how many websites center the div that serves as the main content of their page.
Here is how I solved it, and is for dynamically generated menus also.
Assume this is the dynamically generated menu:
<div id="menu">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
and this is the CSS:
.menu {
width:300px;
text-align: center; /*Set a width and text-align on the main div*/
}
.menu ul{
margin:0;
padding:0;
display:inline-block;
list-style: none; /*Set display to inline-block to the ul*/
}
.menu ul li {
float: left;
margin-right: 1.3em; /*this is the usual*/
padding: 0;
}
Now, for the list to be centered you need to add an empty paragraph to clear the float. You can do it manually if the menu is static or using jQuery like this:
$(document).ready(function() {
$("<p class='clear'></p>").insertAfter('.menu-header ul li:last-child');
})
and the CSS of the .clear paragraph will be:
p.clear{
clear:both;
margin:0;
padding:0;
height: 0;
width: 0;
}
and that's it!
Add style="text-align: center;" to the parent div of the ul.
Add style=" display:inline-table;" to the ul.
Either CSS:
margin: 0px auto;
or
/*on the nav's parent*/
text-align: center;
/*on the nav*/
text-align: left;
In order for margin:0 auto to work, you need to set a width on your ul and remove the display:inline:
#footerLinks ul {
list-style:none;
margin:0 auto;
padding:0;
width:400px;
}
Hmm, I think the KISS rule applies here:
ul { text-align: center; }
ul li { display: inline-block; }