1

ナビゲーション ボタンをロールオーバーしたときに、ナビゲーション ボタンに余分なパディングが表示される理由を突き止めようとして、夢中になっています。ただし、それらの左右にしか表示されていません。これがどのように見えるかのスクリーンショットへのリンクは次のとおりです。

http://i179.photobucket.com/albums/w319/jdauel/Screenshot2012-09-13at25417PM.png

私のCSSと関係があると思いますが、もうわかりません。私を助けてください？？？私はFirebugを使ってそれを理解しようとしましたが、優勢ではありませんでした。

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Farren's Photography</title>
<style type="text/css">
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
}
#container {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.2em;
color: #000;
background-color: #06F;
text-align: left;
padding: 0px;
height: 650px;
width: 960px;
margin-right: auto;
margin-left: auto;
background-image: url(images/background_image.png);
background-repeat: no-repeat;
margin-top: 45px;
}
a:link {
color: #FFF;
}
a:visited {
color: #FFF;
}
a:hover {
color: #FFF;
}
#container #logo {
}
#container #logo #fp-logo {
background-image: url(images/logo.png);
height: 137px;
width: 408px;
text-indent: -9999px;
display: block;
}
#logo {
height: 137px;
width: 408px;
position: relative;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 35px;
}
#main {
background-color: #FFF;
min-height: 383px;
width: 707px;
position: relative;
left: 217px;
top: 16px;
right: 36px;
bottom: 113px;
}
#container #navbar {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFF;
text-align: right;
height: 45px;
background-color: #CC0000;
position: relative;
top: 8px;
bottom: 0px;
left: 0px;
right: 0px;
}
#container #navbar ul li a {
text-decoration: none;
}
#container #navbar ul {
list-style-type: none;
padding-top: 16px;
}
#container #navbar ul li {
display: inline;
background-color: #280803;
margin: 0px;
height: 0px;
width: 0px;
position: relative;
padding-top: 16px;
padding-right: 15px;
padding-bottom: 17px;
padding-left: 15px;
}
#container #navbar ul li a:link {
text-decoration: none;
color: #FFF;
}
#container #navbar ul li a:visited {
text-decoration: none;
color: #FFF;
}
#container #navbar ul li a:hover {
text-decoration: none;
color: #FFF;
background-color: #027e8e;
padding-top: 16px;
padding-right: 15px;
padding-bottom: 17px;
padding-left: 15px;
margin: 0px;
}
#footer {
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
height: 28px;
position: relative;
top: 8px;
color: #FFF;
font-style: italic;
}
</style>
</head>

<body>
<div id="container">
<div id="logo"><a href="http://www.farrensphotography.com" title="Farren's Photography"     
target="_self" id="fp-logo">Farren's Photography</a></div><!-- end logo -->
<div id="main">
<div id="content">
</div><!-- end content -->
</div><!-- end main -->
<div id="navbar">
<ul>
 <li><a href="index.html" target="_self">Home</a></li>
 <li><a href="portfolio.html" target="_self">Portfolio</a></li>
 <li><a href="mystyle.html" target="_self">My Style</a></li>
 <li><a href="specials.html" target="_self">Specials</a></li>
 <li><a href="pricing.html" target="_self">Pricing</a></li>
 <li><a href="contact.html" target="_self">Contact</a></li>
</ul>
</div>
<!-- end navbar -->
<div id="footer">
<div id="copyright">All images copyright© Farrens Photography
</div><!-- end copyright -->
<div id="network">Facebook button
</div><!-- end network -->
</div><!-- end footer -->
</div><!-- end container -->
</body>
</html>
4

1 に答える 1

0

デモ ...........................。

こんにちは今、このようにあなたのcssを変更してください

#container #navbar ul {
list-style-type: none;
margin:0;
padding:0;}

#container #navbar ul li {
display: inline-block;
vertical-align:top;
  background-color: #280803;
margin:0;
  padding:0;
position: relative;

}
#container #navbar ul li a:link {
text-decoration: none;
color: #FFF;
}
#container #navbar ul li a:visited {
text-decoration: none;
color: #FFF;
}


#container #navbar ul li a{
  display:block;
  line-height:45px;
  padding-left:10px;
  padding-right:10px;
}
#container #navbar ul li a:hover {
color: #FFF;
background-color: #027e8e;
}

デモライブ

于 2012-09-14T05:10:44.427 に答える