...

View Full Version : Absolute center with CSS -> misc



tipone
08-16-2005, 12:52 PM
This code below show exactly what I need to be, but when I resize window vertically smaller than 584px there is some space hidden and I can't see the upper content of DIV even scrolling them. Any ideas?



<html>
<head>
<style>
#center {
width:780px;
height:584px;
position:absolute;
top:50%;
left:50%;
margin:-294px auto auto -390px;
border:0px solid black;
text-align:center;
}
</style>

</head>

<body>
<div id="center">
blablabla
</div>
</body>
</html>

iota
08-16-2005, 01:39 PM
If you set the width and height by percentage, then you get what you want even if you resize the window. Maybe you must or should delete position absolute top left value.



<style>
#center {
width:100%;
height:90%

margin:-294px auto auto -390px;
border:0px solid black;
text-align:center;
}
</style>


However this effect may differ in browsers.That's so called "Liquid Design".

http://forum.flashband.net/viewtopic.php?t=249

harbingerOTV
08-16-2005, 02:09 PM
Or you can keep the fixed height and width and add a table to hold everything. Not quite as graceful as a total CSS method but every total CSS method I've seen so far fails in one browser or another or requires a pge full of browser specific hacks to make them all play along.



<html>
<head>
<style type="text/css">
table {
width: 100%;
height: 100%;
}
td {
vertical-align: middle;
text-align: center;
}
#center {
width:780px;
height:584px;
border: 1px solid #000;
position: relative;
margin: 0 auto;
text-align: left;
}
</style>
</head>
<body>
<table><tr><td>
<div id="center">
blablabla
</div>
</td></tr></table>
</body>
</html>

tipone
08-16-2005, 02:17 PM
Yes, that seem to be the stable of all version.

harbingerOTV
08-16-2005, 02:37 PM
Not really upping this post ;)

Last time I posted the table way of doing this I didn't know the Doctype to use. So here's the valid code with all the header stuff:



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>center</title>
<style type="text/css">
table {
width: 100%;
height: 100%;
}
td {
vertical-align: middle;
text-align: center;
}
#center {
width:780px;
height:584px;
border: 1px solid #000;
position: relative;
margin: auto;
text-align: left;
}
</style>
</head>
<body>
<table><tr><td>
<div id="center">
blablabla
</div>
</td></tr></table>
</body>
</html>

Brian F
10-10-2009, 12:30 PM
On the top part of the blue frame surrounding MyAppleSpace.com there is a png with "meeting new Apple friends from all over the world"

I have been trying to position it in absolute center so it keeps the center position even if you make the browser window wider.

Here is the current CSS code:
/*----------------------------------------------------------------------
"meeting new Apple friends from all over the world (#xg_border_title)
----------------------------------------------------------------------*/
#body_border_title {

position:absolute;
left:577px;
top:74px;
}

abduraooft
10-10-2009, 01:13 PM
Take a look at the dead centre (http://www.wpdfd.com/editorial/thebox/deadcentre4.html)

Brian F
10-10-2009, 06:06 PM
Take a look at the dead centre (http://www.wpdfd.com/editorial/thebox/deadcentre4.html)

Thanks !

This turned out to work:
#body_border_title {

position:absolute;
margin-left:-227px;

left: 50%;
top:80px;
width: 500px
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum