0
我對HTML/CSS非常陌生，現在已經獨佔了它大約2周的時間。試圖建立一個網站，並且對我的佈局做得相當好，直到我注意到在調整窗口大小時，一些文本被推得很遠。當窗口被調整大小/最小化時，屏幕上的某些文本正在被推動。
其他所有東西都保持得很好，<「p」>標籤內部的文本不是。
任何幫助表示讚賞和批評是值得歡迎的！
這裏是HTML
<!doctype html>
<html>
<header>
\t <title>CakesbyKay</title>
\t <link href="cakes.css" rel="stylesheet" type="text/css">
\t <link href="http://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">
</header>
<body>
\t <span class="topheader">
\t <img src="Pictures/awningheader.png" class="awningtop">
\t <img src="Pictures/Logo.png" class="logotop">
\t <img src="Pictures/mainboxmid.png" class="mainboxmid">
\t </span>
<div class="bgbreak">
</div>
<div class="headernav">
\t <ul>
\t \t <li><a href="index.html">Home</a></li>
\t \t <li><a href="Cakes.html">Cakes</a></li>
\t \t <li><a href="#">Pricing</a></li>
\t \t <li><a href="#">Catering</a></li>
\t \t <li><a href="#">About Me</a></li>
\t \t <li><a href="#">Contact</a></li>
\t </ul>
</div>
<div class="polaroid">
<p class="weddingcaketext">Wedding Cakes</p>
<img src="Pictures/weddingcakethumbnail.jpg" class="weddingthumbnail">
<p class="babyshowertext">Babyshower Cakes</p>
<img src="Pictures/babyshowercakethumbnail.jpg" class="babyshowerthumbnail">
<p class="birthdaycaketext">Birthday Cakes</p>
<img src="Pictures/birthdaycakethumbnail.jpg" class="birthdaycakethumbnail">
<p class="holidaycaketext">Holiday Cakes</p>
<img src="Pictures/holidaycakethumbnail.jpg" class="holidaycakethumbnail">
</div>
\t
</div>這裏是CSS
.awningtop {
position: absolute; left:400px; right:0 top:0; margin: 0;
z-index:4;
width:1000px;
}
.logotop {
position:absolute; left:450px; top:120px;
z-index:20;
}
.mainboxmid {
position:absolute; left:380px; top:300px;
width:1100px;
height:900px;
z-index:2;
}
body {
background: url(Pictures/background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin-right:auto;
margin-left:auto;
width:960px;
}
.headernav {
background-image:url(Pictures/blue-gradient-header.jpg);
z-index:19;
position:absolute; top:270px; left:690px;
width:639px;
border-color:black;
border-style:solid;
}
.headernav li {
display:inline;
padding-left:35px;
position:relative; top:3px;
z-index:20;
font-size:1.2em;
border:white;
}
a:hover {
border: 1px solid blue;
margin: 0; border-radius: 5px;
-moz-border-radius: 5px;
background-image:url(Pictures/BlueVectorBackground.jpg);
}
.headernav a {
color:white;
text-decoration:none;
font-size:;
border:white;
}
.bgbreak {
height: 270px;
width:830px;
background: url(Pictures/bluechevy.png);
background-color:#3366CC;
border:black solid;
position:absolute;left:500px; top:100px;
background-size: cover;
}
---------------
$Thumbnails$
---------------
.polaroid {
position: absolute;
width: 220px;
z-index:10;
}
.weddingthumbnail {
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px 3px #777;
box-shadow: 3px 3px 3px 3px #777;
z-index:10;
position:absolute; left:600px; top:400px;
width:10%;
}
.babyshowerthumbnail {
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px 3px #777;
box-shadow: 3px 3px 3px 3px #777;
z-index:10;
position:absolute; left:900px; top:400px;
width:15%;
}
.birthdaycakethumbnail {
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px 3px #777;
box-shadow: 3px 3px 3px 3px #777;
z-index:10;
position:absolute; left:600px; top:750px;
width:15%;
}
.holidaycakethumbnail {
border: 10px solid #fff;
border-bottom: 45px solid #fff;
-webkit-box-shadow: 3px 3px 3px 3px #777;
-moz-box-shadow: 3px 3px 3px 3px #777;
box-shadow: 3px 3px 3px 3px #777;
z-index:10;
position:absolute; top:680px; left:950px;
width:15%;
}
.babyshowertext {
position: absolute; bottom:260px; left:590px;
text-align:center;
width: 50%;
color: black;
z-index:11;
overflow:hidden;
}
.birthdaycaketext {
position: absolute; left:297px; bottom:-87px;
text-align:center;
width: 50%;
overflow:hidden;
font: 400 18px/1 'Kaushan Script', cursive;
color: black;
z-index:11;
}
.weddingcaketext {
position: absolute; bottom:220px; right:255px;
width: 50%;
font: 400 18px/1 'Kaushan Script', cursive;
color: black;
overflow:hidden;
z-index:11;
}
.holidaycaketext {
position: absolute; left:640px; bottom:-190px;
text-align:center;
width: 50%;
overflow:hidden;
font: 400 18px/1 'Kaushan Script', cursive;
color: black;
z-index:11;
}這裏是JFiddle - https://jsfiddle.net/wm6r6rw5/
歡迎計算器！請閱讀http://stackoverflow.com/help/mcve – connexo