I can't work out why any object will not go straight under the 3 divs.
Here is the HTML
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css">
<meta charset="utf-8">
<title>The Trek</title>
</head><body>
<div id="wrap">
<div id="main">
<div id="bucket"><img src="img/golf.png" width="100%"><div id="button">Text</div></div>
<div id="bucket"><img src="img/4wd.png" width="100%"><div id="button">Text</div></div>
<div id="bucket"><img src="img/mara.png" width="100%"><div id="button">Text</div></div>
<p>Text</p>
</div>
</div>
</div>
</body>
</html>
Here is the CSS
*{padding:0px;margin:0px;font-family:geneva;}
body{background-image:url(img/bg.png);background-repeat:repeat;}
#wrap{padding:50px;}
#main{margin:auto;padding:40px; width:900px;height:850px; position:relative;}
#bucket{width:30.2%;float:left; margin-right:40px;height:auto;display:block;}
#main div:last-child{margin-right:0px;}
#button {float:left;width:100%;height:auto;text-decoration:none;text-align:center;color:#eee;width:96.5%;height:100%; background:#633;text-decoration:none; padding:5px; font-size:20px;}
Any help will be appreciated!
First of all you are using the same ID for multiple elements... Change this to a class. An ID must always be unique.
Clearing the floating is one way, but i don't like it as it becomes a bit messy later on.
My suggestion is to wrap your "bucket" elements into a div. This will solve your problem.
EXAMPLE
HTML
<div id="wrap">
<div id="main">
<div id="buckets">
<div class="bucket">
<img src="img/golf.png" width="100%" />
<div class="button">Text</div>
</div>
<div class="bucket">
<img src="img/4wd.png" width="100%" />
<div class="button">Text</div>
</div>
<div class="bucket">
<img src="img/mara.png" width="100%" />
<div class="button">Text</div>
</div>
</div>
<p>Text</p>
</div>
</div>
CSS
* {
padding:0px;
margin:0px;
font-family:geneva;
}
body {
background-image:url(img/bg.png);
background-repeat:repeat;
}
#wrap {
padding:50px;
}
#main {
margin:auto;
padding:40px;
width:900px;
height:850px;
position:relative;
}
.bucket {
width:30.2%;
float:left;
margin-right:40px;
height:auto;
display:block;
}
#main div:last-child {
margin-right:0px;
}
.button {
float:left;
width:100%;
height:auto;
text-decoration:none;
text-align:center;
color:#eee;
width:96.5%;
height:100%;
background:#633;
text-decoration:none;
padding:5px;
font-size:20px;
}
Hope this helps
So there's a few suggestions I'll make about your code first, id="" is only used on a element that is only used once, typically you don't use them, instead use class="" which can be used as many times as needed on a page, you can select this by . instead of # in your CSS. The reason your <p> element was going beside is was because there was room for it next to the 3 <div>. Obviously a quick fix to this could be like #plalx said use clear: both; property but that's just covering up your error and not really fixing it. You could also use display: block on what ever element you want to go below. To really fix this issue you need to make use that the 3 <div> fill the width of it's container. I've cleaned up your code let me know if you have any questions, good luck!
EXAMPLE
HTML
<div class="wrap">
<div class="main">
<div class="bucket">
<img src="http://placehold.it/350x150"/>
<div class="button">Text</div>
</div>
<div class="bucket">
<img src="http://placehold.it/350x150"/>
<div class="button">Text</div>
</div>
<div class="bucket">
<img src="http://placehold.it/350x150"/>
<div class="button">Text</div>
</div>
<p>Text</p>
</div>
</div>
CSS
/* RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
strong {
font-weight: bold;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
*,*:before,*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-image: url(img/bg.png);
background-repeat: repeat;
font-family: geneva;
}
img {
display: block;
max-width: 100%;
}
.wrap {
padding: 20px;
width: 960px;
}
.main {
margin: 0 auto;
padding: 20px;
}
.bucket {
display: inline-block;
width: 31.33%;
margin-right: 20px;
}
.bucket:last-of-type { margin-right: 0;}
.button {
width:100%;
text-decoration:none;
text-align:center;
color:#eee;
background:#633;
padding:5px;
font-size:20px;
}
It's because you did not cleared the left floating. There are several ways to achieve this, like:
#main p {
clear: both;
}
This will prevent floated elements to the left or right of all p tags withing the #main element.
Related
In this fiddle : http://jsfiddle.net/thbuf/110/
The div "test" is appearing before the | element. This is occurring despite that the "test" is added after | . Is there an issue with css ?
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
/*table, tbody, tfoot, thead, tr, th, td*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
html, body {
height: 100%;
background-color:#333;
color:#CCC;
font-family:Myriad Pro, Verdana;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#page{
padding:0 0 100px 0;
}
#content{
padding:15px;
}
#content h1{
font-size:3em;
}
#footer {
position: relative;
bottom:0;
width: 100%;
background-color:#CCC;
color:#333;
padding:20px;
}
<div id='container'>
<div id='page'>
<div id='content'>
<h1>title</h1>
<p>some content would go here</p>
<p>Loet consectetur elementum, faucibus in nulla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
</div>
</div>
<div id='footer'>
<div style="display: inline">here is your footer</div>
<div style="display: inline; float:right;">|</div>
<div style="display: inline; float:right">test</div>
</div>
</div>
That is because of the float: right on both the elements. This makes them act as though they are stacked from the right side of the screen and so the first element in the document order becomes the first from the right followed by the second element.
To reverse them, you just need to reverse the order.
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
/*table, tbody, tfoot, thead, tr, th, td*/
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
}
html, body {
height: 100%;
background-color:#333;
color:#CCC;
font-family:Myriad Pro, Verdana;
}
#container {
position: relative;
min-height: 100%;
height: 100%;
height: auto;
}
html>body #container {
height: auto;
}
#page{
padding:0 0 100px 0;
}
#content{
padding:15px;
}
#content h1{
font-size:3em;
}
#footer {
position: relative;
bottom:0;
width: 100%;
background-color:#CCC;
color:#333;
padding:20px;
}
<div id='page'>
<div id='content'>
<h1>title</h1>
<p>some content would go here</p>
<p>Loet consectetur elementum, faucibus in nulla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;.</p>
</div>
</div>
<div id='footer'>
<div style="display: inline">here is your footer</div>
<div style="display: inline; float:right">test</div>
<div style="display: inline; float:right">test</div>
</div>
Just add new div to contain the sub divs like so:
<div style="float:right">
Hind the working fiddle: here
I am trying to design a layout with html5 tags. they work when I don't use float. But when I use float they don't work. when I use "float:left" property and want to show articles inline, the articles come out from section. But when I don't use "float" property the articles display as block and remain inside the section. What I have to do if I want to show my articles inline, Not as block? Codes are below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {
font-family: Verdana, sans-serif;
font-size:0.8em;
}
header, nav, section, footer{
border:1px solid grey;
margin:5px;
padding:8px;
}
article{
border:1px solid grey;
margin:5px;
padding:8px;
width: 28%;
float: left;
}
nav ul {
margin:0;
padding:0;
}
nav ul li {
display:inline;
margin:5px;
}
footer{
clear: both;
}
</style>
</head>
<body>
<header>
<h1>HTML5 Skeleton</h1>
</header>
<nav>
<ul>
<li>HTML5 Semantic</li>
<li>HTML5 Geolocation</li>
<li>HTML5 Graphics</li>
</ul>
</nav>
<section>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center </p>
</article>
</section>
<footer>
<p>© 2014 W3Schools. All rights reserved.</p>
</footer>
</body>
</html>
I believe you're looking for inline-block display:
article {display: inline-block}
body {
font-family: Verdana, sans-serif;
font-size:0.8em;
}
header, nav, section, footer{
border:1px solid grey;
margin:5px;
padding:8px;
}
article{
border:1px solid grey;
margin:5px;
padding:8px;
width: 25%;
display: inline-block;
}
nav ul {
margin:0;
padding:0;
}
nav ul li {
display:inline;
margin:5px;
}
footer{
clear: both;
}
<header>
<h1>HTML5 Skeleton</h1>
</header>
<nav>
<ul>
<li>HTML5 Semantic</li>
<li>HTML5 Geolocation</li>
<li>HTML5 Graphics</li>
</ul>
</nav>
<section>
<h2>Famous Cities</h2>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center </p>
</article>
</section>
<footer>
<p>© 2014 W3Schools. All rights reserved.</p>
</footer>
It has nothing to do with HTML5 elements specifically!
It's float, when ever you use float the elements get out of normal document flow.
Solution: Use famous clearfix hack.
.clearfix:before, .clearfix:after {
content: "";
display: table;
line-height: 0;
}
.clearfix:after {
clear: both;
}
Apply class clearfix on the parent of elements that are floated in your case section tag.
DEMO
I'm trying to create a fluid grid layout with different columns. I have one wrapper with 2 50% columns and one wrapper with 4 25% columns. This is working well in all browsers exept safari there is a tiny gab (1 pixel?) after the last column. After adding margin and padding its getting worse, the gab is much bigger and different width when resizing the browser.
I can't find what is causing this behaviour, what am I doing wrong here??
The HTML:
<div id="column2">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
<div id="column4">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="clear"></div>
</div>
CSS (I left out the reset css it's included in the fiddle):
#column2 {
width:84%;
height:auto;
padding-left:8%;
padding-right:8%;
margin-left:auto;
margin-right:auto;
background-color:#FFFFCC;
}
.left {
float:left;
width:50%;
height:100px;
background-color:#FFFF66
}
.right {
float:left;
width:50%;
height:100px;
background-color:#FF9900;
}
#column4 {
width:84%;
height:auto;
padding-left:8%;
padding-right:8%;
margin-left:auto;
margin-right:auto;
background-color:#66FFFF;
}
#column4 .box1, #column4 .box2, #column4 .box3, #column4 .box4{
float:left;
width:22.25%;
height:100px;
padding-left:1%;
padding-right:1%;
margin-left:1%;
}
#column4 .box1 {
background-color: #FF3300;
margin-left:0;
}
.box2 {
background-color: #333399;
}
.box3 {
background-color: #3366FF;
}
.box4 {
background-color: #009900;
}
.clear {
clear:both;
}
I've setup a quick basic fiddle here: http://jsfiddle.net/emmetje/7ttsE/2/
Many thanks in advance for your help!
its not working 100%
but this better : http://jsfiddle.net/7ttsE/4/
<div id="column2">
<div id="spaces">%8</div>
<div class="left">left</div>
<div class="right">right</div>
<div id="spaces">%8</div>
<div class="clear"></div>
</div>
<div id="column4">
<div id="spaces">%8</div>
<div class="box1">box1</div>
<div id="margin"> </div>
<div class="box2">box2</div>
<div id="margin"> </div>
<div class="box3">box3</div>
<div id="margin"> </div>
<div class="box4">box4</div>
<div id="spaces">%8</div>
<div class="clear"></div>
</div>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
#spaces {
width:8%;
float:left;
}
#margin {
float:left;
width:1%;
}
#column2 {
width:100%;
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#FFFFCC;
}
.left {
float:left;
width:42%;
height:100px;
background-color:#FFFF66
}
.right {
float:left;
width:42%;
height:100px;
background-color:#FF9900;
}
#column4 {
height:auto;
margin-left:auto;
margin-right:auto;
background-color:#66FFFF;
}
#column4 .box1, #column4 .box2, #column4 .box3, #column4 .box4{
float:left;
width:20.25%;
height:100px;
}
#column4 .box1 {
background-color: #FF3300;
margin-left:0;
}
.box2 {
background-color: #333399;
}
.box3 {
background-color: #3366FF;
}
.box4 {
background-color: #009900;
}
.clear {
clear:both;
}
I was after a little help with z-index...
I'm playing with the code and need my id="hidebar" to sit on top of the "content" and "content-inner" divs. Sorry if this seems really basic, but I struggle =D
My CSS structure file:
body
{
margin: 0;
padding: 0;
height:100%;
width:100%;
background-color: #FFF;
z-index:-1;
}
#content
{
width: 100%;
height: 640px;
background-color:#060;
position:relative;
z-index:-1;
}
#content-inner
{
width: 960px;
height: 640px;
background-color:#666;
margin-left:auto;
margin-right:auto;
position:relative;
z-index:-1;
}
#hidebar
{
width: 100%;
height: 50px;
background-color:#0FF;
position:relative;
z-index:2;
}
#navbar
{
width: 100%;
height: 257px;
background-color:#F00;
position:relative;
}
#navbar-inner
{
width: 960px;
height: 257px;
background-color:#666;
margin-left:auto;
margin-right:auto;
position:relative;
}
#footer
{
width: 100%;
height: 181px;
background-image:url(images/gray-pixel.png);
position:relative;
}
#footer-inner
{
width: 960px;
height: 181px;
background-color:#666;
margin-left:auto;
margin-right:auto;
position:relative;
}
#footer-small
{
width:230px;
float:left;
height:100%;
background-color:#999;
position:relative;
}
#footer-large
{
width:500px;
float:left;
height:100%;
background-color:#CCC;
position:relative;
}
#colour-bar
{
width: 100%;
height: 13px;
background-color:#639;
position:relative;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, figcaption, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, summary, time {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ul {
list-style-type:none;
}
ul li a{
font:700 49px/1.2em Arial, Helvetica, sans-serif;
color:#fff;
text-decoration:none;
height:59px;
display:inline-block;
list-style-type:none;
text-align:center;
position::relative;
vertical-align: baseline;
}
ul li a:hover{
color:#e25709;
}
div.table
{
border: 0px solid black;
display: table;
margin-left:auto;
margin-right:auto;
}
div.tr {border: 0px solid black; display: table-row; }
div.td {border: 0px solid black; display: table-cell; }
h3
{
color:#FFF;
font-size:22px;
font-family:Arial, Helvetica, sans-serif;
padding-top:30px;
padding-left:25px;
padding-bottom:20px;
}
h4
{
color:#FFF;
font-size:13px;
font-style:normal;
font-family:Arial, Helvetica, sans-serif;
padding-left:25px;
padding-right:25px;
line-height:1.2em;
}
My Source Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/structure.css"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="content">
<div id="content-inner">
<a href="index.html">
<img src="images/logo.jpg"/ alt>
</a>
</div>
</div>
<div id="hidebar">
</div>
<div id="colour-bar"></div>
<div id="navbar">
<div id="navbar-inner">
<ul>
<li><button1>About us</button1></li>
<li><button2>Partners</button2></li>
<li><button3>Solutions</button3></li>
<li><button4>Services</button4></li>
</ul>
</div>
</div>
<div id="footer">
<div id="footer-inner">
<div id="footer-small"></div>
<div id="footer-large">
<div class="table">
<div class="tr">
<div class="td">
<h3>Contact Us:</h3>
</div>
<div class="td">
</div>
</div>
<div class="tr">
<div class="td">
<h4>AUS - Melbourne<br />
101 Main Street<br />
Glen Iris VIC 3146</h4>
</div>
<div class="td">
<h4>Email: mail#website.com<br />
Phone: (03) 9888 8888<br />
Fax: (03) 9888 8888</h4>
</div>
</div>
</div>
</div>
<div id="footer-small"></div>
</div>
</div>
<script>
$("button1").click(function () {
$("h4").toggle("slow");
$("button1").toggle();
$("button2").show();
$("button3").show();
$("button4").show();
});
$("button2").click(function () {
$("h4").toggle("slow");
$("button2").toggle();
$("button1").show();
$("button3").show();
$("button4").show();
});
$("button3").click(function () {
$("h4").toggle("slow");
$("button3").toggle();
$("button1").show();
$("button2").show();
$("button4").show();
});
$("button4").click(function () {
$("h4").toggle("slow");
$("button4").toggle();
$("button1").show();
$("button2").show();
$("button3").show();
});
</script>
</body>
</html>
Any help would be amazing <3
If you want #hidebar to be on top of #contents and #content-inner then just reposition the #hidebar.
<div id="content">
<div id="content-inner">
<div id="hidebar">
</div>
<a href="index.html">
<img src="images/logo.jpg" />
</a>
</div>
</div>
The navigation bar looks like this
HOME LOGIN ABOUT
Based on suggestion on this topic: CSS - How to add dot between navigation title
I add the following css rule to append a * to the front of each item.
.twoColFixRt #nav-primary .nav li.libar:before {
content:'*';
}
<div id="nav-primary">
<div class="wrapper">
<ul class="nav">
<li class="tab" id="nav-home">
<span>HOME</span>
</li>
...
</ul>
</div>
</div>
Now the navigation bar looks like this
HOME * ABOUT
LOGIN
As you can see, the inserted * pushes the item below.
How to fix this issue?
Here is the complete html file for testing:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Edit My Profile | LinkedIn</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style TYPE="text/css">
#header {
margin-bottom:15px;
}
#header, #body, #footer {
clear:both;
margin:0 auto;
max-width:95%;
min-width:980px;
width:98em;
}
body {
background-color:#FFFFFF;
}
body {
border:0 none;
color:#000000;
font:62.5%/1.2 Arial,Helvetica,"Nimbus Sans L",sans-serif;
margin:0;
outline:0 none;
padding:0;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border:0 none;
font-family:inherit;
font-size:100%;
font-style:inherit;
font-weight:inherit;
margin:0;
outline:0 none;
padding:0;
vertical-align:baseline;
}
#nav-utility {
margin:5px 8px;
position:relative;
text-align:right;
}
#nav-utility p {
color:#666666;
font-size:110%;
padding-right:2px;
text-decoration: none;
}
#nav-utility a {
color: #666666;
}
#nav-utility ul, #nav-utility li, #nav-utility p {
display:inline;
}
#header {
width: 970px;
margin-left: auto ;
margin-right: auto ;
}
#header ul, #header li, #header p, #header fieldset {
border:medium none;
list-style-type:none;
margin:0;
padding:0;
}
#nav-utility li {
color:#666666;
font-size:110%;
padding-right:2px;
}
ol, ul {
list-style:none outside none;
}
#nav-utility ul, #nav-utility li, #nav-utility p {
display:inline;
}
#header ul, #header li, #header p, #header fieldset {
border:medium none;
list-style-type:none;
margin:0;
padding:0;
}
#nav-add-connections a {
color:#006600;
}
strong {
font-weight:bold;
}
#nav-utility li:last-child {
padding-right:0;
}
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
#nav-primary .wrapper {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -510px transparent;
height:39px;
padding:0 5px;
}
#logo-linkedin {
float:left;
margin:8px 10px 0 4px;
position:relative;
}
#logo-linkedin h1 a {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 0 transparent;
display:block;
height:23px;
text-indent:-12345px;
width:88px;
}
a {
color:#006699;
outline:medium none;
text-decoration:none;
}
a:hover {
text-deoration: underline
}
#nav-primary ul, #nav-primary li, #nav-primary p, #nav-primary fieldset {
border:medium none;
list-style-type:none;
margin:0;
padding:0;
}
#nav-primary .nav li.tab {
float:left;
font-size:130%;
font-weight:bold;
line-height:36px;
margin:1px 0 0;
}
#nav-primary .nav a, #nav-primary .nav a:visited, #header #nav-primary .nav li li a, #header #nav-primary .nav li li a:visited {
color:#006699;
text-decoration:none;
}
#nav-primary .nav a span {
display:block;
padding:0 10px;
font-size: 15px;
}
#nav-primary .nav li.libar:before {
content:'*';
}
</style>
</head>
<body>
<div class="member" id="header">
<div class="wrapper">
<div id="nav-primary">
<div class="wrapper">
<ul class="nav">
<li class="tab libar" id="nav-primary-home">
<span>Home</span>
</li>
<li class="tab libar" id="nav-primary-profile">
<span>Profile</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you
Edited version posted here: http://jsfiddle.net/bDpUM/1/
Next time, try to take note of how they did it and write your own code to replicate it, instead of randomly splicing in other website's codes into your own and end up with the sort of monstrosity you have posted up there.