I have the following html for a simple navigation:
<header>
<div class="login">
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</header>
I have the following css:
header {
height: 145px;
border: 1px solid #f00;
}
.login {
float: right;
}
.login ul {
list-style: none;
margin: 0;
padding: 0;
}
.login li {
display: inline;
}
.login li a {
color: #fff;
background-color: #666;
padding: 5px 10px;
}
I am using HTML5 boilerplate so my header is displayed as a block element. When I view the page in a modern browser the result looks like:
Why is the anchor padding extending outside of the red border/header element? What is causing this behavior?
Furthermore, when I view the same page in IE compatibility view, it now looks like:
Here it seems like the padding is not applied at all or cut off by the containing div. I tried setting a height for the div but the result was still the same. What is causing this behavior?
Thanks
Try putting a display:block on .login li a and put a float:left on the .login li
Also you can shorten your code and take out the unnecessary div and just put the class on the ul.
HTML:
<header>
<ul class="login">
<li>Link</li>
<li>Link</li>
</ul>
</header>
CSS:
header {
height: 145px;
border: 1px solid #f00;
}
.login {
list-style: none;
margin: 0;
padding: 0;
float:right;
}
.login li {
float:left;
}
.login li a {
color: #fff;
background-color: #666;
padding: 5px 10px;
display:block;
}
http://jsfiddle.net/KPzUv/
What you are seeing is the body margin or padding. Set the margin to zero and it should go away. This is probably also a follow on problem caused by "margin collapse" between the header and the body causing the padding of the following element to leak through but I don't have time to check right now.
Related
I Apologise in advance, but I've searched this website (and google) for hours and can't find a solution. I'm working on this Freecodecamp project.
https://codepen.io/alex1014/pen/XWMaEGg
Problem is: in my navbar (pink), the 3 links are not positioned all the way to the left in the same way the text PREMIUM TROMBONES (in the red div) is... they are slightly pushed towards the centre. It looks like there is some type of margin left, and I can't figure out where it's coming from since I've set to 0 every html/browser default margin.
I have also noticed, that if I text-align: right the links will perfectly go all the way to the right... but if I align left, there will still be margins...
* {
margin: 0;
box-sizing: border-box;
}
body, html {
background: white;
font-size: 16px;
font-family: 'Montserrat', sans-serif;
margin: 0;
}
#container {
background-color: cyan;
width: 80%;
margin: auto;
}
header {
background-color: cyan;
}
#logo {
background-color: red;
}
#navbar {
background-color: pink;
}
ul li {
display: inline-block;
list-style-type: none;
background-color: white;
}
<div id="container">
<header id="header">
<div id="logo"><h3>Premium Trombones</h3></div>
<nav id="navbar">
<ul>
<li>Subscribe</li>
<li>Services</li>
<li>Products</li>
</ul>
</nav>
</header>
...
...
...
</div>
ul elements have padding, add:
ul {
padding: 0;
}
That should remove the indentation.
I have a div (navigation) that is "float:left;".
After this div main content comes. And second divs comes over the first one.
If I add style="clear:both;" after the first dif, then it works.
However, i wonder if this is the right way to do this, this is my only question.
<div class="nav">
<ul>
<li>text</li>...
</ul>
</div>
<div style="clear:both;"></div>
<div id="content-wrapper"></div>
.nav{
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
}
.nav li{
float: left;
margin: 0 2px;
}
.nav li a{
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #fff;
border-right: 1px solid #ccc;
background-color: #3b3d49;
-webkit-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
}
Yes, that works fine. However, you don't need another element to clear the content, you can add the style to the content wrapper.
In your style sheet:
#content-wrapper { clear: both; }
Another approach is to add a container around the floating element, and make it contain its children using the overflow style:
<div class="nav-container">
<div class="nav">
<ul>
<li>text</li>...
</ul>
</div>
</div>
<div id="content-wrapper">
</div>
Then in your style sheet add:
.nav-container { overflow: hidden; }
The main use of the above mentioned "clear:both"
The clear property specifies which sides of an element where other floating elements are not allowed.
"clear:both"
means No floating elements allowed on either the left or the right side.
In answer to your question, cleaning floats with clear:both; is a pretty standard way of doing this, yes.
this is the best way, just add class .group to your container
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
yes it is correct to see this example from the creators of html
http://www.w3schools.com/cssref/pr_class_clear.asp
You could use <br clear="all" /> for short hand. And another way is that you could use clearfix method, you could search it on google for the best. this is the method that #conner explained it.
Should look like this:
(source: gyazo.com)
My attempt
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
I use Current class for the current page background.
Added the header
.header {
width: 100%;
height: 86px;
background-image: url("../img/gradient.png");
background-repeat: repeat-x;
border-bottom: solid 1px #a2a2a2;
}
Floated menu to right, made it display inline and centered the text
.menu {
float: right;
padding: 2.7%;
}
.menu a{
color: #1e1e1e;
}
.menu a:hover{
color: #5e5e5e;
}
.menu li {
display: inline;
float: left;
margin-left: 10px;
padding-left: 20px;
padding-top: 5px;
}
Now the part of the current background
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
width: 78px;
height: 36px;
padding-left: 20px;
padding-top: 5px;
color: white;
}
Result:
(source: gyazo.com)
Can you see theres a big space between the current and other items? How do I remove this? make it equal to others spaces.
Things I tried:
Adding position relative
result:
Menu item 'current' goes over the menu item 'forums'
I could not find any other way to do so, what am I doing wrong?
Try the following HTML:
<div class="header">
<div class="container">
<img id="logo" src="img/logo.png"/>
<ul class="menu">
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
</div>
</div>
With the following amends to your CSS:
.menu {
float: right;
padding: 2.7%;
}
.menu li {
float: left;
margin-left: 10px;
}
.menu a{
color: #1e1e1e;
display: block;
padding-left: 20px;
padding-top: 5px;
}
.menu a:hover{
color: #5e5e5e;
}
.current {
background-image: url("../img/hoverdiamond.png");
background-repeat: no-repeat;
color: white;
}
Your HTML was structured incorrectly ... you shouldn't be placing the <li> elements inside the anchor elements.
You also don't need to have display: inline; on the list items, as they are floated left anyway, they should already be inline.
In future, you may want to check that your HTML is valid using the W3C validator, it should explain any errors in your HTML and how you can fix them.
Let me know if the above doesn't fix it and I'll happily have another look.
EDIT: Forgot to also state that I removed the height and width on the current css declaration, that was unnecessary, and almost definitely causing the spacing issues.
Remove the width on .current. That is what's adding the extra spacing.
If you don't want to change that, change the spacing on the the adjacent li:
.current + li {
padding-left: 0;
}
Here is a simplified demo of what you are trying to accomplish. Learn from it:
HTML
<ul>
<li class="current">Home</li>
<li>Forums</li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
</ul>
CSS
ul {
float: right;
}
li {
display: inline;
padding: 10px;
}
.current {
background-image: url('http://placekitten.com/200/200');
}
Demo
I have an CSS issue with a menu.
Through CSS I´ve added padding to li's.
The li's have display: inline.
It works when I set to inline-block, but I want to know why it doesn't work with inline. In my understanding padding should work with inline elements.
HTML
<header>
<nav>
<ul id="mainmenu">
<li>Home</li>
<li>Users</li>
<li>Rankings</li>
<li>In the press</li>
<li>Blog</li>
</ul>
</nav>
</header>
CSS
body { font-family: Arial; font-size: 11px; margin: 0; padding: 0; }
header nav { height: 25px; background: #eeeeee; }
header nav ul { list-style-type: none; margin: 0 auto; padding: 0; width: 960px; }
header nav li { display: inline; padding: 10px 5px; }
Working demo
http://jsfiddle.net/4QLmp/
PS browser is Chrome Canary
The padding is there, but since the <li>s are defined as inline, they're aligned to the same text baseline. That cuts off the top padding beyond the top of the page border. If you do change the css to:
header nav li { display: inline; padding: 20px 5px; border: 1px solid red; position: relative; top: 50px;}
so that the <ul>s get pushed down, you'll see the padding present. inline-block doesn't follow the same text-alignment rules, so everything gets pushed down so the whole block is visible.
header nav li { display: inline; padding: 10px 5px; }
UPD:
The W3C’s CSS2 spec states that for Inline, non-replaced elements, "the ‘height’ property doesn’t apply, but the height of the box is given by the ‘line-height’ property".
Well, I'm working an an ul - li multilevel menu and have problem.
Firstly, some code (I know it's not perfect but the crappy div is automatically added by Wordpress):
<nav id="page-navigation">
<div class="menu-menu-container">
<ul id="menu-menu" class="menu">
<li>Home</li>
<li>Blog</li>
<li>Portfolio</li>
<li>Pages
<ul class="sub-menu">
<li>One Column</li>
<li>Two Columns</li>
<li>Three Columns</li>
</ul>
</li>
</ul>
</div>
In my stylesheet I'll be pointing only to page-navigation id & sub-menu class so you can totally skip other ids/classes.
The problem is I can't change WIDTH of links in sub-menu. I don't know how. I'm totally lost.
As far as I can see this code overwrites them:
#page-navigation ul li {
float: left;
padding: 0;
font-size: 1.2em;
line-height: 1.2em;
background-repeat: no-repeat;
width: 200px;
height: 65px;
}
#page-navigation ul li a {
display: inline-block;
text-align: center;
padding: 10px 0 0 0;
text-shadow: #222 1px 1px 1px;
width: 200px;
height: 65px;
}
And here's the code for sub-menu items:
.sub-menu {
border-radius: 5px;
border: solid 1px #000;
box-shadow: 0px 0px 25px #000;
background-color: #222;
height: 200px;
width: 500px; /* THIS LINE DOESN'T WORK */
}
.sub-menu li {
width: 500px; /* THIS LINE ALSO DOESN'T WORK ! */
}
.sub-menu li a {
font: 10px Verdana;
tex-shadow: 1px 1px 0px #000;
width: 100px; /* doesn't work :) */
height: 100px; /* doesn't work :) */
}
I know the whole sub-menu is inside of a <li>, but can do nothing with that (default Wordpress behavior).
What now? :(
Thaanks
You need to specify the full path, the higher level items are currently more specific. Try this:
#page-navigation ul li .sub-menu li {
width: 100px;
}
Your .sub-menu width, the first of your "doesn't work" actually does work for me. For the second, you can do two things.
Make it width: 500px !important so it overrides anyway. But I would advise to instead...
Put the ID at the beginning of the selector. .sub-menu li is overridden by any selector with an ID in it. So change it to #page-navigation .sub-menu li.
The selector #page-navigation ul li is more specific than .sub-menu li, so it takes precedence.
You can either work this out by adding an !important annotation to your CSS rules like this:
.sub-menu li {
width: 500px !important;
}
or specify the rule as more specific:
#page-navigation ul.sub-menu li {
width: 500px;
}
For problems like this, please resort to Firebug - you'll have a nice view of what is overwritten by what. This helps a lot :)