0
私はクライアントのサイトで作業していますが、問題は、ウィンドウのサイズを変更するたびにナビゲーションバーのボタンがすべて一緒になってしまうことです。問題の原因は私には分かりませんので、私はここにいくつかの助けを求めるために来ました。ブラウザウィンドウが最大化されたときにもナビバーがうまく見えますが、クライアントのためにページの中央にツイッターボタンが表示されます。彼女の画面は私のものよりも小さいので解決の問題だと思っていますが、これを解決する方法はありますか？CSS/HTMLナビゲーションバーの問題
ウェブサイト：
the crue cart
HTML
<title>the crue cart</title>
<link rel="shortcut icon" href="images/favicon.png">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="http://platform.twitter.com/anywhere.js?id=yQDKaggXesWYWPCPFNXn1Q&v=1">
</script>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<ul>
<li><div id="logo">
<h1 class="thecruecart">the crue cart
<img src="images/leaf.png" width="15" height="15" class="leaf"></h1>
<h1 class="wholesnackerie">whole snackerie<h1>
</div></li>
<!--Who What When Where Why Help!-->
<li class="navigation"><a href="home.html" class="navigation">Who<span class="green">?</span></a></li>
<li class="navigation"><a href="thewhat.html" class="navigation">What<span class="green">?</span></a></li>
<li class="navigation"><a href="thewhenwhere.html" class="navigation">When & Where<span class="green">?</span></a></li>
<li class="navigation"><a href="thewhy.html" class="navigation">Why<span class="green">?</span></a></li>
<li class="navigation"><a href="help.html" class="navigation">Help<span class="green">!</span></a></li>
<li class="navigation"><a href="order.html" class="navigation">ORDER<span class="green">!</span></a></li>
<li class="navigation"><div id="share">
<iframe src="http://www.facebook.com/plugins/like.php?href=facebook.com%2Fthecruecart&layout=button_count&show_faces=true&width=450&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>
<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.twitter.com/thecruecart" data-text="Check out The Crue Cart!" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div></li>
</ul>
</div>
<div id="navbar"></div>
<div id="title">
<h2 class="title">Catering? Hungry?</h2>
</div>
<div id="body">
<p>The Crue Cart is a mobile bakery that finds its home in Bellevue. We love animals and nutrition, and our cupcakes show that.<br/> No wheat, no animal products (or by-products) and no processed sugar. Also, our products will be organic and locally produced<br/> whenever possible. We love supporting local agriculture and economy.</p>
<br/>
<p>Want to chat? <span class="chunky">Email us: [email protected]</span></p>
</div>
<div class="clearfooter"></div>
</div>
<div id="footer">
<p class="ft">© the crue cart 2010. All Rights Reserved.</p>
</div>
</body>
CSS
@font-face { font-family: chunkfive; src: url("fonts/Chunkfive.otf") format("opentype"); }
@font-face {
font-family: aller;
src: url("fonts/aller.ttf") format("truetype");
}
@font-face {
font-family: tgheros;
src: url("fonts/tgheros.otf") format("opentype");
}
@font-face {
font-family: tgheros-bold;
src: url("fonts/tgheros-bold.otf") format("opentype");
}
html {}
body {
width:auto;
height:100%;
background-color:#ffffff;
margin:0px;
margin-left:auto;
margin-right:auto;
padding:0px;
}
h1, h2, h3, h4, h5, h6 {
font-family:chunkfive;
color:#0000ff;
margin:0px;
}
h1 {
font-family:chunkfive;
color:#0000ff;
font-size:30px;
margin:0px;
padding:0px;
}
h1.thecruecart {
font-family:chunkfive;
color:#0000ff;
font-size:30px;
margin-left:auto;
}
h1.wholesnackerie {
font-family:chunkfive;
color:#44aa00;
font-size:15px;
margin-left:40px;
}
h2.title {
font-size:35px;
margin-top:10px;
margin-left:10px;
}
h2 a{
font-size:35px;
color:#44aa00;
margin-top:10px;
margin-left:10px;
}
img {
margin:0px;
}
img.leaf {
position:relative;
top:2px;
left:-8px;
}
p {
font-family:tgheros-bold;
font-size:18px;
color:#0000ff;
margin:0px;
margin-left:10px;
}
p.order{
font-family:tgheros-bold;
font-size:16px;
color:#0000ff;
margin:0px;
margin-left:10px;
}
p.facebook {
display:inline;
font-family:tgheros-bold;
font-size:18px;
color:#0000ff;
margin:0px;
margin-left:5px;
}
p.ft {
color:#0000ff;
font-family:chunkfive;
font-size:14px;
letter-spacing:1px;
margin:0px;
padding:0px;
}
a {
color:#44aa00;
font-family:chunkfive;
font-size:20px;
letter-spacing:1px;
text-decoration:none;
margin:0px;
padding:0px;
}
a:link, a:visited, a:hover, a:active {
}
a.navigation {
color:#0000ff;
font-family:chunkfive;
font-size:20px;
text-decoration:none;
}
ul {
list-style-type:none;
margin:0px;
padding:0px;
}
li {
float:left;
}
li.navigation{
display:inline;
position:relative;
top:33px;
float:left;
margin-left:45px;
}
iframe {
display:inline;
margin-top:0px;
margin-left:10px;
}
/*Facebook Stuffs*/
/*Twitter Stuffs*/
.chunky {
color:#44aa00;
font-family:chunkfive;
font-size:20px;
letter-spacing:1px;
margin:0px;
padding:0px;
}
.green {
color:#44aa00;
}
.clearfooter {
height:1px;
clear:both;
}
#container {
min-height:100%;
margin-bottom: -20px;
position: relative;
}
#header {
display:block;
width:auto;
height:58px;
padding-right:5px;
padding-left:5px;
}
#logo {
margin-top:0px;
margin-left:10px;
}
#navbar {
display:block;
width:auto;
height:2px;
background-color:#0000ff;
}
#share {
display:inline;
margin:0px;
}
#body {
width:1330px;
margin:0px;
margin-bottom:30px;
padding:0px;
}
#footer {
display:block;
width:auto;
height:10px;
position:realtive;
text-align:center;
clear:both;
}</code>