Hi, I am coding this website: http://pinkpartiestest.webs.com
what I am trying to do is: Center the "text" (images) in between the shadow areas
to do it just now I have used margins, it works fine on my computer how ever, on some browsers / computers it doesn't work, the images stay still but the margins move (if you get what I mean!)
Ideally, I would like it to be "the same" on every computer, I hate using images in websites like this as I know I cannot do it, but its my aunts n she wants it so tried it out!
the other problem that occured was:
I could not get the "shadows" to be parallel to each other, the right one would drop
even although I used a float on it!
here is my code!
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pink Parties</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="content">
<div class="header">
</div>
<div id="name">
</div>
<div id="enter">
<a href="home.php" border="0">
<img src="images/enter.png" border="0" />
</a>
</div>
<div id="service">
</div>
</div>
<div class="right">
</div>
</div>
</body>
</html>
Code:
body {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:url(images/background.jpg) #ed0d95 repeat-x top center;
}
.wrapper {
margin:0 auto;
width:90%;
min-height:768px;
}
.left {
width:114px;
height:768px;
float:left;
background:url(images/leftcontent.png) repeat-y;
display:inline;
}
.right {
width:114px;
height:768px;
margin-top:-460px;
float:right;
background:url(images/rightcontent.png) repeat-y;
}
.content {
margin:0 auto;
}
.header {
background:url(images/logo.png) no-repeat;
margin:0 0 0 28em;
width:775px;
height:242px;
}
#name {
background: url(images/service.png) no-repeat;
width:467px;
height:35px;
margin-top:-90px;
margin-left:30em;
}
#enter {
width: 271px;
height: 124px;
margin-top:50px;
margin-left:40em;
}
#service {
background:url(images/bus.png) no-repeat;
width:719px;
height:302px;
margin:-100px auto;
}
|
