PDA

View Full Version : need some help with position for my website

Riazy
04-11-2008, 10:23 AM
Hi there, I am new here and I have quite a serious problem here with my code.
I am new to html and designing.

This is how I designed my website

1. I designed it in photoshop
2. Exported it to divs (Because I feel it's easier to work with them)
3. I got the website in divs , but now to the problem: I can't center align it! someone has told me it doesn't work because the positions for my slices are absolute. I tried to change it into relative but now everything on the site is ruined.

I will paste the code for the first output of the site (with abosulute)


<!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>
<title>testsite2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (testsite2.psd) -->
<style type="text/css">
<!--

div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:800px;
height:800px;
}

div.coolsite-01_ {
position:absolute;
left:0px;
top:0px;
width:800px;
height:152px;
background-image: url(images/coolsite_01.gif);
}

div.coolsite-02_ {
position:absolute;
left:0px;
top:152px;
width:800px;
height:90px;
background-image: url(images/coolsite_02.gif);
}

div.coolsite-03_ {
position:absolute;
left:0px;
top:242px;
width:800px;
height:15px;
background-image: url(images/coolsite_03.gif);
}

div.coolsite-04_ {
position:absolute;
left:0px;
top:257px;
width:67px;
height:543px;
background-image: url(images/coolsite_04.gif);
}

div.coolsite-05_ {
position:absolute;
left:67px;
top:257px;
width:683px;
height:495px;
background-image: url(images/coolsite_05.gif);
}

div.coolsite-06_ {
position:absolute;
left:750px;
top:257px;
width:50px;
height:543px;
background-image: url(images/coolsite_06.gif);
}

div.coolsite-07_ {
position:absolute;
left:67px;
top:752px;
width:683px;
height:48px;
background-image: url(images/coolsite_07.gif);
}
#apDiv1 {
position:absolute;
left:78px;
top:331px;
width:655px;
height:103px;
z-index:1;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

body {
background-color: #FFFFFF; margin-left:auto; margin-right:auto;
}

-->
</style>
<!-- End ImageReady Styles -->
<link href="mall.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (testsite2.psd) -->
<div id="layout">
<div class="Table_01">
<div class="coolsite-01_">
<div align="center"></div>
</div>
<div class="coolsite-02_"></div>
<div class="coolsite-03_"></div>
<div class="coolsite-04_"></div>
<div class="coolsite-05_"></div>
<div class="coolsite-06_"></div>
<div class="coolsite-07_"></div>
</div>
<div id="apDiv1">Hello welcome to my website! Finally it's here! hope you will enjoy the things I have got on here.</div>
<div align="center">
<!-- End ImageReady Slices -->
</div></div>
</body>
</html>



Now I asked a teacher at my highschool to help me, but the teacher couldn't solve the problem but she told me to make a remote css layout..



<!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>
<title>testsite2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- ImageReady Styles (testsite2.psd) -->
<style type="text/css">
<!--

div.Table_01 {
position:relative;
left:0px;
top:0px;
width:800px;
}

div.coolsite-01_ {
position:relative;
left:0px;
top:0px;
width:800px;
background-image: url(images/coolsite_01.gif);
height: 152;
}

div.coolsite-02_ {
position:relative;
left:0px;
top:152px;
width:800px;
height:90px;
background-image: url(images/coolsite_02.gif);
}

div.coolsite-03_ {
position:relative;
left:0px;
top:242px;
width:800px;
height:15px;
background-image: url(images/coolsite_03.gif);
}

div.coolsite-04_ {
position:relative;
left:0px;
top:257px;
width:67px;
height:543px;
background-image: url(images/coolsite_04.gif);
}

div.coolsite-05_ {
position:relative;
left:67px;
top:257px;
width:683px;
height:495px;
background-image: url(images/coolsite_05.gif);
}

div.coolsite-06_ {
position:relative;
left:750px;
top:257px;
width:50px;
height:543px;
background-image: url(images/coolsite_06.gif);
}

div.coolsite-07_ {
position:relative;
left:67px;
top:752px;
width:683px;
height:48px;
background-image: url(images/coolsite_07.gif);
}
#apDiv1 {
position:relative;
left:78px;
top:331px;
width:655px;
height:103px;
z-index:1;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

body {
background-color: #FFFFFF; margin-left:auto; margin-right:auto;
}

-->
</style>
<!-- End ImageReady Styles -->
<link href="mall.css" rel="stylesheet" type="text/css" />
</head>
<body style="background-color:#FFFFFF;">
<!-- ImageReady Slices (testsite2.psd) -->
<div id="layout">
<div class="Table_01">
<div class="coolsite-01_">
<div align="center"></div>
</div>
<div class="coolsite-02_"></div>
<div class="coolsite-03_"></div>
</div>
<div class="coolsite-04_"></div>
<div class="Table_01">



and here is my external stylesheet

#layout {
width: 800px; margin-right:auto; margin-left:auto;
}



Now I am quite stuck, because I am really into photoshop designing and making nice designs for websites, but I don't know how to convert them properly into css / html
Recently I wanted to get know how to export to divs so I looked up a tutorial on www.good-tutorials.com and found a tutorial with the name "How to export divs with photoshop" or with some similiar name. so now really Im stuck here need some help really.

I believe I have perhaps exported my design in a wrong way.

So if someone would like to tell me how to do this the proper way, I would be very grateful


// Riazy
abduraooft
04-11-2008, 11:15 AM
Please read and follow this sticky thread while posting your code here, http://www.codingforums.com/showthread.php?t=82672

Don't use absolute positions in this fashion, allow the elements to follow normal flow and apply some slight variations, if required.

For the time being, a style like
body {
background-color: #FFFFFF;
text-align:center;
}
#layout {
width: 800px; margin-right:auto; margin-left:auto;
position:realtive;
} may fix the issue but I strongly recommend you to have a look at some standard layouts at http://bonrouge.com/2c-hf-fixed.php and follow a suitable one.