PDA

View Full Version : Centering Issue With my Site


lookingattherats
06-03-2010, 09:35 PM
After working on my site and uploading it on the net, (http://screenandshoutprinting.com/) I come to the realization that I haven't put the thumbnails you can see aligned center like everything else. If you change your browser size, you can see what I'm talking about.

How can I fix this so that everything's aligned centered together and correct? I'm not a web programmer, but I need to have this site corrected and I'm really at a lost on what to do. Any help is appreciated. Thanks!

urbanrays
06-04-2010, 12:03 AM
Hi

Looking at your site, and lets cut to the chase, you need to understand the box model of CSS.
The way your site is laid out you could get away with building it with:-

#container
.header
.box
.box img
#footer


html

<div id="container">
<div class="header"></div>
<div class="box">
<img name="image1" src="img/image1.jpg" width="##" height="##" alt="This image 1" />
</div>
<div class="box">
<img name="image2" src="img/image2.jpg" width="##" height="##" alt="This image 2" />
</div>
<div id="footer"></div>

</div>

Have a read of this

http://www.w3schools.com/css/css_boxmodel.asp

suzybee
06-04-2010, 12:06 AM
If they are set up in a table... get rid of the green box and just put a boarder on the table. Or check your style sheet to be sure the items are set to center. Hope this helps.
Suzy

edbr
06-04-2010, 01:19 AM
your problems stem mainly from using absolute positioning.
as suggested check out css and use relative positioning for layout . i prfer only to use absolute positioning for element i want in specific places within those divs

urbanrays
06-04-2010, 03:52 PM
your problems stem mainly from using absolute positioning.

You need to listen to the advice given, last night your images floated to the left and today your images are floating right, and your still using absolute positioning.
Like I said and I am in a more sober state now your page is quite an easy one to achieve with a small amount of CSS and html


<!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>Untitled Document</title>
<style type="text/css">
<!--
#container {
width: 790px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
border: 4px solid #9F9;
}
.header {
width: 790px;
background-image: url(img/logo.png);
background-repeat: no-repeat;
background-position: center center;
height: 157px;
}
.box {
float: left;
height: 160px;
width: 160px;
margin-top: 15px;
margin-left: 30px;
margin-bottom: 15px;
}
.box img {
height: 160px;
width: 160px;
}
#footer {
clear: both;
height: 30px;
width: 790px;
}
-->
</style>
</head>
<body>
<div id="container">
<div class="header"></div>
<div class="box"><img name="Img1" src="" width="160" height="160" alt="img1" /></div>
<div class="box"><img name="Img2" src="" width="160" height="160" alt="img2" /></div>
<div class="box"><img name="Img3" src="" width="160" height="160" alt="img3" /></div>
<div class="box"><img name="Img4" src="" width="160" height="160" alt="img4" /></div>
<div class="box"><img name="Img5" src="" width="160" height="160" alt="img5" /></div>
<div class="box"><img name="Img6" src="" width="160" height="160" alt="img6" /></div>
<div class="box"><img name="Img7" src="" width="160" height="160" alt="img7" /></div>
<div class="box"><img name="Img8" src="" width="160" height="160" alt="img8" /></div>
<div class="box"><img name="Img9" src="" width="160" height="160" alt="img9" /></div>
<div class="box"><img name="Img10" src="" width="160" height="160" alt="img10" /></div>
<div class="box"><img name="Img11" src="" width="160" height="160" alt="img11" /></div>
<div id="footer">spam-my-inbox@ivebeenspammed.com</div>
</div>
</body>
</html>


All done

And I have given you a clue with the email address when you use mailto:

that will be 342.26 + VAT
Thanks