2013-08-31 51 views
0

下面是相關的HTML(與圖像在我的頁面的頂部,然後包含我的導航欄的標題:我需要使我的標題和圖像div之間的差距消失?

</head> 
    <div id="something"><img src="Images/guysonlycopy.jpg" alt="image" width="1200" height="300" /></div> 
     <header> 
      <style type="text/css"> 

</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 --> 

這是影響資產淨值及以上的CSS:

/* 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%; 
} 

只是要清楚,我想擺脫自己的形象股利和頭之間的差距。

感謝很多:)

+0

如果斯科蒂的回答沒有解決它,你可以把代碼放在jsfiddle?我有一個快速的去,一旦HTML被排序似乎沒問題,但沒有看到實際的問題,很難知道 – 2013-08-31 07:35:06

回答

0

你的HTML被搞砸了......你已經在開幕主題標籤前有一個div和一個開頭標籤。不知道,如果這是你的問題,但一個正確的DOM樹可能是一個開始故障排除的好地方。