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
Related
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
That is the list that has the things in it.
nav ul li{
list-style: none;
float: left;
}
nav ul li a{
text-decoration: none;
display: block;
float: left;
padding: 5px 15px;
color: white;
}
Those are the CSS things it currently has, I can't seem to make them be centered. I've looked around for about an hour, but I'm pretty much not having any luck with my current skill in this field.
Flexbox is a good way to make things go where you want.
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
}
nav li {
margin: 0 30px;
}
You want to make the <li>'s line up and sit in the center. First you need to grab their parent (the <ul>) and tell it to use Flexbox.
Flex direction can be row or column. You want them to line up in a row.
Once they're lined up, justify them in the center.
The margin on the <li> itself just keeps them from overlapping.
Using the float: css style directly moves the content to its set side. To center an element, use auto set for your margins or padding. margin-left: auto; margin-right: auto; will center an element within it's container by having the same amount of margin or padding on both sides.
a quicker way to do this is margin: y-margins auto; the first value is your margin-top and margin-bottom values, the second value is your left and right.
to center text within its container, such as a <p> tag, use text-align: center;
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%;
}
The title is probably kind of confusing.
I have a list of some elements, that each have a CSS hover effect applied (the background lightens). However, I would like each element to fill all of the space in its container, which they currently don't do.
Ex:
How it should be:
In addition, I need the elements to be close together, inline-element style, as seen in the first example. I have looked into display:inline and display:inline-block on a div tag; however, that caused the div to behave like in the first example (the element doesn't fill all of its horizontal space, visible from the hover effect). Ex:
<div style="display:inline-block">Example 1</div>
On the other hand, using a span has the inverse effect, causing a second-example-esque problem. Ex:
<span style="display:block">Example 1</span>
Is there any way to do both? i.e. Is there any type of element or CSS trick with inline-element-like vertical padding and block-element-like horizontal padding?
Add width: 100%
(Demo)
<span style="display: inline-block; width: 100%;">
You may follow something like the following:
CSS:
#nav{
width: 33%;
border: 2px dotted #000;
}
#nav ul{
padding: 0px 0px 0px 0px;
}
#nav ul li {
width: 100%;
list-style: none;
display: inline-block;
}
#nav ul li:hover{
background-color: #ffccaa;
}
#nav ul li a{
padding: 5px 0px 5px 10px;
text-decoration: none;
}
HTML
<div id="nav">
<ul>
<li>Example 1</li>
<li>Example 2</li>
</ul>
</div>
Checkout this DEMO
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
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.