I am building my first website after reading through CSS and HTML.I was able to bring the header on my index page with nav bar and the brand. For the brand, I aligned it in the center using the margin-top property and set the navigation links using float property. However, when I inspect the ul element using firefox,
I see a margin-top and margin-bottom of 16 px each which I do not have a clue on how its getting added.
Is aligning the brand using the margin-top property the right way to center align?
Why is the ul element not taking the entire height of 44 px set for the header.
I am adding the plunker url for more details: http://plnkr.co/edit/RjQtIR?p=preview
Code for more details:
<header class="main-header">
<nav class="top-bar clearfix">
<span class="brand">Money Plant Services</span>
<section class="nav-menu">
<ul class="nav-items">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Downloads</li>
<li>Contact Us</li>
</ul>
</section>
</nav>
</header>
CSS:
.main-header{
width: 100%;
height:44px;
background-color: #3A3A3A;
}
.brand{
float: left;
margin-top: 12px;
padding-left: 10px;
color: #FFFFFF;
}
.nav-menu{
float:right;
}
.nav-items{
list-style: none;
}
.nav-items li{
float: left;
margin-right: 5px;
padding: 5px;
background-color: #FFFFFF;
}
li > a{
color: black;
text-decoration: none;
}
I hope this will helps you. Just replace the below code with yours it will works...
CSS:
.nav-items {
list-style: none;
margin: 0;
padding: 0;
margin-top:8px;
display: inline-block;
}
Ul has a default margin so you can remove that by adding....
<ul style="margin:0px">
Also margins are different from browser to browser so its worth checking out info online about it or test it for yourself using inspect element.
When aligning horixontally there are many ways to do it...
you could use the text-align method or the margin auto method or the custom padding way.(there are also other ways).
Example:
<div style="width:400px;height:20px;text-align:center;">
<div style="width:20px;height:20px;">
</div></div>
Example:
<div style="width:400px;height:20px;">
<div style="width:20px;height:20px;margin-left:auto;margin-right:auto;">
</div></div>
Vertical align is a bit harder but can be done with table cells (there are also other methods).
The right way to align is either using the text-align property or using auto margins as said by the w3c validation service.
Related
header ul {
display: inline; }
header ul .nav-header li {
list-style: none;
margin-right: 1em;
float: left; }
header ul a {
text-decoration: none; }
*{ border: 0; margin: 0; padding: 0; }
this is my css now using the reset wildcard seems to cancel out the display: inline; anyone know a fix?
The issue here is if you delete the wild card the Welcome header is displayed on the line after the navbar. Where as currently its on the same line, using display: inline; should remove that but didn't.
http://jsfiddle.net/P8QmL/
You need to apply your display:inline to the header not the header ul.
You should also remove the divs within your ul.
html:
<header>
<ul class='nav-header'>
<li>
Kali # 1000 Commercial
</li>
<li>
Home
</li>
<li>
Products
</li>
<li>
About
</li>
</ul>
</header>
<section class='body-wrapper'>
<h1>Welcome</h1>
</section>
<footer>
<div class='nav-footer'>
<ul>
<li>
Contact Us
</li>
</ul>
</div>
</footer>
css:
header {
display: inline; }
header .nav-header li {
list-style: none;
margin-right: 1em;
float: left; }
header ul a {
text-decoration: none; }
Okay, I understand now.
Here's the problem:
An element (e.g. <header>) containing all floating elements "loses" its size. Thus, your <header> element has a width and height of 0, even though it contains non-zero elements. As a consequence, the subsequent elements ignore the header element (since its size is 0) and appear to "float" to the right.
There are a few fixes, but the best one is probably to use the css clear property on your subsequent elements:
section {
clear: both;
}
I have taken the liberty to improve your HTML & CSS:
http://jsfiddle.net/P8QmL/4/
I should note this still doesn't give your <header> element any size, so should you wish to style your header, you'll notice nothing happens since the header is still of size 0.
So if you need your header to have e.g. a background color, you have to use a different solution. The easiest one to give an element with floating children a size is to use overflow: auto. It's kind of hacky, but it works.
header {
background-color: red;
overflow: auto;
}
I’m sure somebody has had this problem before, but I can’t seem to find the right way of describing it.
I’ve got a row of icons like so:
Which is produced like so...
HTML:
<nav class="nav-global">
<ul>
<li>
Home
</li>
<li>
Our Story
</li>
...
<li>
Login
</li>
</ul>
</nav>
CSS:
.nav-global ul {
padding: 0;
text-align: center;
}
.nav-global li {
display: inline;
}
.nav-global li a {
background-image: url(/try/img/nav-global-icon.png);
background-repeat: no-repeat;
background-position: center 0;
}
My problem happens when I want to add padding to the top of the <a> to get the icons to sit on top.
By adding padding-top: 35px; to .nav-global li a:
Here’s what the inspector is telling me:
I’ve tried using inline-block, tried making the <a> display: block, using clearfix and a few other things but can’t seem to figure it out.
Any suggestions?
you should also try adding padding to li element (.nav-global li), and display it as inline-block
.nav-global li {
display: inline-block;
padding-top: 35px;
}
I trying to come up with a simple css layout which should look like this:
This is my html code for the header and nav bar:
<div id="header">
<h1>LOGO</h1>
<ul>
<li> Home </li>
<li> Logout </li>
</ul>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>Help
<li>Contact Us
<li>Customers
</div>
And I'm already doing some styling on the navigation bar, however I'd like to be able to keep the two links within the header right aligned and the logo image left aligned.
When I try to edit those links in the header, it all gets messed up because I'm confused about how to differentiate between the navigation list items and header list items.
Could someone please help me with the header positioning?
#header ul { float: left; }
or
#header ul { position: absolute; right: 0; }
In the header, you need to float the h1 left, and the ul right, and then add display: inline to your links (to keep them on the same line).
To target the list items in the header, you can simply use a parent selector, like this: #header li.
Here's what you need:
#header {
border: 1px solid #ccc;
overflow: hidden; /* clearfix */
}
#header h1 {
float: left;
}
#header ul {
float: right;
}
#header li {
display: inline;
}
See DEMO.
I have a simple menu coded up like this
<ul id="main-menu" class="container">
<li>About Us</li>
<li>Home</li>
<li>Villas & Yachts</li>
<li>Islands</li>
<li>Gallery</li>
<li>Blog</li>
<li>Get In Touch</li>
</ul>
which looks like this
The little dots in-between each menu item are created using the :after pseudo element. Eveything is working fine, but I also need sub menus, which will be nested lists.
The problem is, when i add a line break to the menu like this
<ul id="main-menu" class="container">
<li>About Us</li>
<li>Home</li>
<li>Villas & Yachts
<!-- LINE BREAK -->
</li>
<li>Islands
<!-- LINE BREAK -->
</li>
<li>Gallery</li>
<li>Blog</li>
<li>Get In Touch</li>
</ul>
I get this result in Safari & Chrome (But not Firefox)...
It seems to me as though webkit is treating the whitespace as 'pre'. The CSS for the :after element looks like this
ul#main-menu li:after
{
content: "\00b7";
width: 61px;
float: right;
text-align: center;
border: rgba(225,225,225,0.25) 1px solid;
}
I've also tried setting white-space: normal/nowrap on the ul, li and :after elements which doesn't affect anything.
Can anyone see where I'm going wrong, or is this a problem with Webkit/Firefox?
UPDATE
I've created a demo at http://jsfiddle.net/zmVbH/
The issue is that the line break is white space which makes the floated content drop a line. The issue can be reproduced by adding a single space between the </a> and </li>. Try making the inserted content display:inline-block instead of floated.
ul#main-menu li:after
{
content: "\00b7";
width: 61px;
display:inline-block;
text-align: center;
border: rgba(0,0,0,0.25) 1px solid;
white-space: normal;
}
Updated JSFiddle.
UPDATE BY OP
Yup, inline-block fixes this, but it's not quite that simple since inline-block has some patchy browser support.
ul#main-menu li:after
{
content: "\00b7";
width: 61px;
float: right;
text-align: center;
border: rgba(225,225,225,0.25) 1px solid;
/* FIX */
display:-moz-inline-stack; /* For older versions of Firefox */
display:inline-block; /* Anything that supports inline-block */
/* IE FIX */
zoom:1;
*display:inline;
}
I'm trying to make a CSS/javascript dropdown menu (based on this example. This works. But I want to have a background color for my whole menu. I tried to place the <ul> inside a div and give this div a background color. However, the actual menu items do not appear inside the div when I view the page, they are under it. After some experimenting, I found out that this was caused by setting float: left; on the li elements that comprises the main menu items. (of cause, taking float: left; away means that the menu items are stacked on top of eachother in stead of side by side).
Does anyone know how to fix this?
If you are just trying to get a background color for your main menu items, you can add overflow:auto; or float:left; to the containing div tag.
If you want to set the background color of the sub-items, add it to the li ul rule.
Brief example here: http://www.danfsmith.com/so/css/suckerfish/menu.html
try adding the CSS property overflow: auto; to your <div/> or <ul/> which has the background.
I think what you are asking is how to set a background color for each link in your dropdown menu. If you create the menu with:
<ul class="navigation">
<li id="youarehere">Home</li>
<li>Blog</li>
<li>Papers</li>
<li>Programs</li>
<li>Activities</li>
<li>Contact</li>
<li>About</li>
</ul>
Then the CSS to set the background color is:
ul.navigation li a {
width: 111px;
padding: .5em 1em;
background-color: #993333;
color: #fff;
text-decoration: none;
text-align: left;
float: left;
border-bottom: solid 0px #fff;
border-top: solid 0px #fff;
border-left: solid 1px #000;
}
If you want the background colour for the div to show you'll need to clear the floats.
<div style="background-color: red">
<ul>
<li>asda</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
<span style="clear: both"></span>
</div>
Notice the span with the "clear: both" style in. That should do it.
Heres a link to a nice quirks mode post about it
http://www.quirksmode.org/css/clearing.html