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/
Добро пожаловать в StackOverflow! Пожалуйста, ознакомьтесь с http://stackoverflow.com/help/mcve – connexo