...

View Full Version : Controlling DIVS



Uzair
02-04-2007, 05:35 AM
I designed a layout using Layers. Everything looks fine on my local machine but when I upload the files to the server, below problems occure...

1- Main DIV "wrapper" moves to the left of the page, while on my local machine it looks at the center of the page & remain in the center while I resize the browser window. Whats the problem, why does it change its position on server?

2- "Pro" DIV also changes its position. Currently I've give a top value in -ve digits. How can I control its position?

I'm giving the Code of both HTML & CSS. Please guide me where is the problem & how can I fix it?

CSS:

HTML, BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: ;
background-image: url(images/pbg.jpg);
margin: 5px 0px;
}

#wrapper {
margin: 0px auto;
width: 779px;
height: 758px;
text-align: left;
background: url(images/cntbg.jpg);
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#who {
position: relative;
top: 140px;
left: 180px;
width: 270px;
text-align: justify;
line-height: 16px;
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#exp {
position: relative;
top: 190px;
left: 180px;
width: 270px;
text-align: justify;
line-height: 16px;
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#pro {
position: relative;
top: -37px;
left: 490px;
width: 270px;
text-align: justify;
line-height: 16px;
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

STRONG {
font-size: 14px;
color: #009900;
}

TD {
padding: 2px;
color: #FFFFFF;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

TD.pad2 {
padding: 10px 2px 2px 2px;
}

.yel {
color: #FFFF00;
font-weight: bold;
}

A:link {
color: #99FF66;
text-decoration: none;
border-bottom: 1px dashed #99FF66;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
A:visited {
color: #99FF66;
text-decoration: none;
border-bottom: 1px dashed #99FF66;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
A:hover {
color: #99FF66;
text-decoration: none;
border-bottom: 1px solid #99FF66;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}


HTML:

<body>
<div id="wrapper" align="center">
<div id="who">
<strong>Something</strong><br />
kjhdfkgh kjhgfkfdhgkjgfdkjfdgjdg djfhgk djhgfkdjjkdg kjhdgk hkjfdkjfdgkjfdkjfkjfj jfjfkdjhgjfjfjjfjfdkj dgjhdd kjg dkd</div>
<div id="exp">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><strong>Something</strong></td>
</tr>
<tr>
<td width="80%" class="yel">dgdgdfg</td><td class="yel">dfgdfgdfg</td>
</tr>
<tr>
<td width="70%">Link</td>
<td>A+</td>
</tr>
<tr>
<td width="70%">Link</td>
<td>A+</td>
</tr>
<tr>
<td width="70%">Link</td>
<td>B</td>
</tr>
<tr>
<td width="70%">Link</td>
<td>A+</td>
</tr>
<tr>
<td width="70%">Link</td>
<td>B</td>
</tr>
<tr>
<td colspan="2" class="pad2 yel">Link</td>
</tr>
<tr>
<td width="70%">Link</td>
<td>A+</td>
</tr>
<tr>
<td width="70%">Link</td>
<td>A+</td>
</tr>
<tr>
<td width="70%">Link</td>
<td>A+</td>
</tr>
</table>
</div>
<div id="pro">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><strong>Projects on my credit...</strong></td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
<tr>
<td>Link</td>
</tr>
</table>
</div>
</div>
</body>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum