In css, have a div which is 300px wide by 120px with an image and two links inside it. I want it to be aligned center horizontally and aligned center vertically in all major browsers in 1024x768 & 800x600 resolutions...
But in theory this works lol... you'll have to wait till i get home, and then ill write the code out.
you could possibley add this to the body class, yea i know its not a class but i cant think what its called.
body{
}
A psychopath with dyslexia
NuvoForum LeaderVPS - Virtual Prince of the Server
If you had used percentile sizing, this would be childs play:
[html]
<html>
<head>
<style type="text/css" media="screen">
.centered { width: 50%; height: 20%; position: absolute: left: 25%; top: 40%; }
</style>
</head>
<body>
<div class="centered">
Div contents
</div>
</body>
</html>
[/html]
Of course, some playing about with percentages would be required (this also has the advantage of working in a browser window of almost any size as it changes to fit).
Since you're using pixel widths, I don't know exactly how you'd go about getting good vertically centered results unless you use something like valign, which would suck as it's not CSS
PHP, CSS, XHTML, Delphi, Ruby on Rails & more. Current project: CMS Object. Most recent change: Theme support is up and running... So long as I use my theme resource loaders instead of that in the Rails plug-in. Release date: NEVER!!!
kinkserious memberVPS - Virtual Prince of the Server
Python
Forum LeaderThe Royal RAM
Comments
Anyone know of any ways around it?
The vertical-align statement doesnt seem to work
The Royal Ram
Have a gander at http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Although it didn't seem to work for me...
[HTML]
#content_box{
padding-top:50%;
padding-bottom:50%
}
[/HTML]
But in theory this works lol... you'll have to wait till i get home, and then ill write the code out.
you could possibley add this to the body class, yea i know its not a class but i cant think what its called.
body{
}
[html]
<html>
<head>
<style type="text/css" media="screen">
.centered { width: 50%; height: 20%; position: absolute: left: 25%; top: 40%; }
</style>
</head>
<body>
<div class="centered">
Div contents
</div>
</body>
</html>
[/html]
Of course, some playing about with percentages would be required (this also has the advantage of working in a browser window of almost any size as it changes to fit).
Since you're using pixel widths, I don't know exactly how you'd go about getting good vertically centered results unless you use something like valign, which would suck as it's not CSS
Current project: CMS Object.
Most recent change: Theme support is up and running... So long as I use my theme resource loaders instead of that in the Rails plug-in.
Release date: NEVER!!!
<div width="300" height="120" style="position:absolute; top: 50%; left: 50%;">
<img src="ax">
<a href="kkk">hello</a>
<a href="kkk">hello</a>
</div>
That makes the top left corner of the div centered.
The Royal Ram