こんにちは、これらのページに分かれた 4 ページの Web サイトがあります。
- 索引
- 約
- 私の仕事
- コンタクト
インデックスページではnivoslider、高さが 350px です。
about 7 の連絡先ページには、高さ 350px の div もあります。
私の作品ページには、高さのない div があり、コンテンツで垂直方向に拡張されます。
なんらかの理由で、作業ページの div を 350px を超えて増やすコンテンツを追加すると、メイン コンテナーの div がわずかに左に移動します。コンテナはすべてのページで同じであり、それを引き起こす唯一のコンテンツです。テキスト、画像、その他の div を試してみましたが、それらはすべて同じ問題を引き起こします。
HTML:
body {
background-color: #efe0b5;
background-image: url(images/stripe.png);
background-repeat: repeat-x;
background-position: left top;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="images/logo.png" width="145" height="40" alt="Joanne Stansfield Logo" />
</div>
<div id="nav">
<ul class="nav-bar">
<li class="home"><a href="index.html">Home</a></li>
<li class="about"><a href="about.html">About Us</a></li>
<li class="mywork"><a href="mywork.html">My Work</a></li>
<li class="getintouch"><a href="getintouch.html">Get in Touch</a></li>
</ul>
</div>
</div>
<div id="main4">
<img src="images/mywork-header.png" width="920" height="70" alt="About Me" />
</div>
<div id="footer"></div>
</div>
</div>
</body>
</html>
CSS
* {
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
@font-face {
font-family: 'CoopLightRegular';
src: url(/cooplight-webfont.eot) format('embedded-opentype'),
url(/cooplight-webfont.eot?#iefix) format('embedded-opentype'),
url(/cooplight-webfont.woff) format('woff'),
url(/cooplight-webfont.ttf) format('truetype'),
url(/cooplight-webfont.svg#CoopLightRegular) format('svg');
font-weight: normal;
font-style: normal;
}
#wrapper {
width: 960px;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#wrapper #header {
height: 200px;
width: 100%;
margin-top: 25px;
float: left;
}
#wrapper #header #logo {
float: left;
height: 200px;
width: 560px;
}
#wrapper #header #logo img {
height: 40px;
width: 145px;
margin-top: 60px;
}
#wrapper #header #nav {
position:relative;
width: 400px;
height: 200px;
float:right;
overflow: hidden;
}
#wrapper #header .nav-bar li {
position: absolute;
list-style: none;
}
#wrapper #header .nav-bar li a {
display: block;
width: 200px;
height: 200px;
text-indent: -9999px;
}
#wrapper #nav .nav-bar li.home { left: 70px; top: -30px; }
#wrapper #nav .nav-bar li.home a { background:url(../images/home.png) no-repeat; }
#wrapper #nav .nav-bar li.home a:hover { background:url(../images/home.png) no-repeat 0 -200px; }
#wrapper #nav .nav-bar li.about { left: 130px; top: -30px;}
#wrapper #nav .nav-bar li.about a { background:url(../images/aboutme.png) no-repeat; }
#wrapper #nav .nav-bar li.about a:hover { background:url(../images/aboutme.png) no-repeat 0 -200px; }
#wrapper #nav .nav-bar li.mywork { left: 190px; top: -30px; }
#wrapper #nav .nav-bar li.mywork a { background:url(../images/mywork.png) no-repeat; }
#wrapper #nav .nav-bar li.mywork a:hover { background:url(../images/mywork.png) no-repeat 0 -200px; }
#wrapper #nav .nav-bar li.getintouch { left: 250px; top: -30px; }
#wrapper #nav .nav-bar li.getintouch a { background:url(../images/getintouch.png) no-repeat; }
#wrapper #nav .nav-bar li.getintouch a:hover { background:url(../images/getintouch.png) no-repeat 0 -200px; }
#wrapper #main {
background-color: #FFF;
width: 100%;
height: 350px;
float: left;
}
#wrapper #main3 {
background-color
: #FFF;
width: 100%;
height: 350px;
float: left;
}
#container #wrapper #main3 #left {
background-color: #999;
float: left;
height: 200px;
width: 440px;
margin-right: 10px;
margin-left: 10px;
margin-top: 30px;
}
#container #wrapper #main3 #right {
background-color: #666;
float: right;
height: 200px;
width: 440px;
margin-right: 10px;
margin-left: 10px;
margin-top: 30px;
}
#container #wrapper #main3 #form {
background-color: #CCC;
height: 200px;
width: 920px;
margin-top: 30px;
}
#wrapper #main4 {
background-color: #FFF;
width: 100%;
min-height: 350px;
float:left;
}
#container #wrapper #main4 .gallery {
background-color: #03C;
height: 200px;
width: 960px;
margin-top: 30px;
margin-bottom: 30px;
float: left;
}
#wrapper .title {
height: 70px;
width: 100%;
float: left;
}
.nivoSlider {
position:relative;
width:960px; /* Change this to your images width */
height:350px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
#wrapper #footer {
height: 70px;
width: 960px;
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999;
text-align: center;
line-height: 20px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
float: left;
}
#wrapper #footer img {
height: 20px;
width: 55px;
}