I can't erase the gap between the image div and my header which contains
my nav?
Here is the relevant html (with the image at the top of my page and then
the header containing my nav: `
</style>
<body>
<div id="wrapper">
<ul id="nav">
<li class="current"><a href="http://www.webdesignerwall.com">Home</a></li>
<li><a href="http://www.ndesign-studio.com">Sports</a>
<ul>
<li><a href="#">NFL========></a>
<ul>
<li><a href="http://www.nfl.com/teams">Teams</a></li>
<li><a href="http://www.nfl.com/standings">Tables</a></li>
<li><a href="http://www.nfl.com/news">News</a></li>
<li><a
href="http://www.nfl.com/fantasyfootball">Fantasy</a></li>
<li><a href="#">Discuss</a></li>
</ul>
</li>
<li><a href="#">NBA========></a>
<ul>
<li><a href="http://www.nba.com/teams/">Teams</a></li>
<li><a
href="http://www.nba.com/standings/team_record_comparison/conferenceNew_Std_Cnf.html">Standings</a></li>
<li><a href="http://www.nba.com/news/">News</a></li>
<li><a href="http://www.nba.com/fantasy/">Fantasy</a></li>
<li><a href="#">Discuss</a></li>
</ul>
</li>
<li><a href="#">Football=====></a>
<ul>
<li><a
href="http://www.premierleague.com/en-gb.html">BPL</a></li>
<li><a
href="http://www.premierleague.com/en-gb/matchday/league-table.html">BPL
Table</a></li>
<li><a
href="http://www.bbc.co.uk/sport/football/tables">Tables</a></li>
<li><a
href="http://www.bbc.co.uk/sport/0/football/">News</a></li>
<li><a
href="http://fantasy.premierleague.com/">Fantasy</a></li>
</ul>
</li>
<li><a href="#">Cricket======></a>
<ul>
<li><a href="http://www.ecb.co.uk/">England</a></li>
<li><a
href="http://www.bbc.co.uk/sport/cricket/county-championship-division-one/table">Table</a></li>
<li><a
href="http://www.bbc.co.uk/sport/0/cricket/">News</a></li>
<li><a href="http://www.cricket20.com/">T20</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Games</a>
<ul>
<li><a href="#">Populars====></a>
<ul>
<li><a href="#">game1</a></il>
<li><a href="#">game2</a></il>
<li><a href="#">game3</a></il>
<li><a href="#">game4</a></il>
<li><a href="#">game5</a></il>
</ul>
</il>
<li><a href="#">Recent=====></a>
<ul>
<li><a href="#">game1</a></il>
<li><a href="#">game2</a></il>
<li><a href="#">game3</a></il>
<li><a href="#">game4</a></il>
<li><a href="#">game5</a></il>
</ul>
</il>
<li><a href="#">Categories</a></li>
</ul>
</li>
<li><a href="#">Cool Shit</a>
<ul>
<li><a href="#">Populars====></a>
<ul>
<li><a href="#">thing1</a></il>
<li><a href="#">thing2</a></il>
<li><a href="#">thing3</a></il>
<li><a href="#">thing4</a></il>
<li><a href="#">thing5</a></il>
</ul>
</il>
<li><a href="#">Recent=====></a>
<ul>
<li><a href="#">game1</a></il>
<li><a href="#">game2</a></il>
<li><a href="#">game3</a></il>
</ul>
</il>
<li><a href="#">The Rest</a></li>
</ul>
</li>
<li><a href="#">Forums</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Contact Us</a></li>
</ul><!-- End Nav -->
</header><!-- End Header -->`
And this is the css which effects the nav and above:
/* Body
--------------------------------------------*/
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 1200px;
margin: 100px auto;
color: #666;
}
#wrapper {
background-color: #ccc;
margin: 0;
width: 1200px;
display: block;
padding: 0;
}
/* Header
--------------------------------------------*/
header {
background-color: #170a6e;
height: 100px;
width: 1200px;
margin: 0;
padding: 0;
}
header h1 {
font-size: 4.5em;
float: left;
margin: 20px;
padding: 5px;
}
#something {
text-align: center;
padding: 0;
margin: 0;
display: block;
}
#title {
float: left;
margin-left: 25px;
margin-top: 11px;
}
/* Nav
--------------------------------------------*/
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
-webkit-border-top-left-radius: 2em;
-moz-border-radius-topleft: 2em;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
-webkit-border-bottom-left-radius: 2em;
-moz-border-radius-bottomleft: 2em;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
alignment-adjust: central;
background: #0e0575; /* for non-css3 browsers */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9',
endColorstr='#7a7a7a'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9),
to(#7a7a7a)); /* for webkit browsers */
background: -moz-linear-gradient(top, #a9a9a9, #7a7a7a); /* for firefox
3.6+ */
border: solid 1px #6d6d6d;
display: inline-block;
float: right;
}
#nav li {
margin: 0 6px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-top-left-radius: 1.6em;
-moz-border-radius-topleft: 1.6em;
-webkit-border-top-right-radius: 1.6em;
-moz-border-radius-topright: 1.6em;
-webkit-border-bottom-left-radius: 1.6em;
-moz-border-radius-bottomleft: 1.6em;
-webkit-border-bottom-right-radius: 1.6em;
-moz-border-radius-bottomright: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb',
endColorstr='#a1a1a1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb),
to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox
3.6+ */
color: #030375;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #1f049f;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec',
endColorstr='#0186ba'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec),
to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #04acec, #0186ba) !important; /*
for firefox 3.6+ */
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',
endColorstr='#cfcfcf'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff),
to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox
3.6+ */
display: none;
margin: 0 5px;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: left;
margin: 0;
padding: 3px;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -7px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
Thanks and just to be clear I want to get rid of the gap between my image
div and header.
No comments:
Post a Comment