Align ap div scrolling window?

Mumrik

06-03-2012, 02:12 PM

Hello I have a problem making the ap div scrolling element thingy align to the center of a...table cell I'm using. Well here is the 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>BrightHotel</title>
<link href="SC.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-image: url(Bilder/Bakgrund.png);
}
#apDiv1 {
position:absolute;
width:1121px;
height:auto;
z-index:1;
overflow: scroll;
left: 150px;
top: 313px;
vertical-align: auto;
text-align: left;
}
</style>
</head>

<body>
<table width="100%" border="1" align="center" cellpadding="0">
<tr>
<th height="892" class="Background" scope="col"><p><img src="" alt="" name="Header" width="95%" height="202" id="Header" /></p>
<table width="95%" height="62" border="1" align="center" cellpadding="0">
<tr>
<td width="100%" align="center"><img src="" alt="" name="Valkommen" width="280" height="46" id="Valkommen" /> <img src="" alt="" name="Aktiviteter" width="280" height="46" id="Valkommen2" /> <img src="" alt="" name="Rum" width="280" height="46" id="Valkommen3" /> <img src="" alt="" name="Kontakta" width="280" height="46" id="Valkommen4" /></td>
</tr>
</table>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div id="apDiv1">
<p> </p>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></th>
</tr>
</table>
</body>
</html>
Keep in mind that I'm working in dreamweaver and don't really have any knowledge about code. It's also strange because when I preview it inside Dreamweaver it looks good. But when I open it in chrome the scrolling window isn't aligned to the center. I have tried to fiddle around using percent values and pixels and whatnot. But nothing seems to make it work. If you want I can send you the html file too. Anyone who know how to fix it?

Excavator

06-03-2012, 02:44 PM

Hello Mumrik,
Combining % widths with pixel widths doesn't usually work too well.

These changes should center your 1121px wide ap element as long as your 100% width table is wide enough to fit it.

#apDiv1 {
position:absolute;
width:1121px;
z-index:1;
overflow: scroll;
top: 313px;
left: 50%;
margin: 0 0 0 -560px;
vertical-align: auto;
text-align: left;

Have a look at the link about tables in my signature line.

Mumrik

06-03-2012, 02:50 PM

Excavator

06-03-2012, 04:03 PM

Thanks! Ahh so left 50% makes it appear in the middle. That margin attribute, what is that? I'm not familiar with the term...I was trying to use something like horizontal-align: center when trying to center it with code xD

Anyway thanks.

The left: 50%; places the left edge of the element in the center. The negative margin is half the width of the element and pulls it to the left of that 50% centerline... does that make sense?

See this explanation - http://www.css-lab.com/misc-test/AP-centered.html

Excavator

06-03-2012, 04:05 PM

There is really no need for using absolute positioning at all though -
To center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

Like this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
html, body {
margin: 0;
background: #fc6;
}
#container {
width: 800px;
margin: 30px auto;
padding: 200px 0 300px;
background: #fff;
box-shadow: 0 0 20px #8493A6;
overflow: auto;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>