I am extremely new to HTML/CSS and have been messing with it exclusively for about 2 weeks now. Attempting to make a website and was doing fairly well for my layout until I noticed that upon resizing the window, some of the text is being pushed around far to much.
Everything else stays put fairly well, the text inside the <"p"> tags are not however.
Any help is appreciated and criticism is welcome!
Here is the HTML
<!doctype html>
<html>
<header>
<title>CakesbyKay</title>
<link href="cakes.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" type="text/css">
</header>
<body>
<span class="topheader">
<img src="Pictures/awningheader.png" class="awningtop">
<img src="Pictures/Logo.png" class="logotop">
<img src="Pictures/mainboxmid.png" class="mainboxmid">
</span>
<div class="bgbreak">
</div>
<div class="headernav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="Cakes.html">Cakes</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Catering</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</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>
</div>Here is the 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;
}Here is the JFiddle - https://jsfiddle.net/wm6r6rw5/
The problematic CSS is this:
.weddingcaketext {
bottom:220px;
right:255px;
}
Remove or sustitute them by left and top properties, example:
.weddingcaketext {
left:220px;
top:255px;
}