Xapti
msg:3564542 | 3:02 am on Feb 2, 2008 (gmt 0) |
Center vertically, I assume? Are you referring to Internet Explorer? because IE6 does not support display:table-cell.
|
brancook
msg:3564586 | 5:04 am on Feb 2, 2008 (gmt 0) |
Yes sorry, center vertically. What I currently have posted was from a tutorial posting I found after a google search. It didn't work in Firefox either which is what I usually do all of my testing with.
|
PokeTech
msg:3564764 | 3:12 pm on Feb 2, 2008 (gmt 0) |
Can you just use <center>? If thats what your asking, but I could be wrong.
|
brancook
msg:3564826 | 4:41 pm on Feb 2, 2008 (gmt 0) |
The <center> element has be depreciated in HTML 4.01 and is not supported in XHTML 1.0 Strict DTD. I just haven't been able to find a good way to center vertically with css. I know I'm probably just over looking something but I can't figure it out.
|
swa66
msg:3564926 | 8:47 pm on Feb 2, 2008 (gmt 0) |
I've looked into fully centering things a while ago (just needed a placeholder page with a centered logo on it). Perhaps some of it might help you. Bottom line of what I found: It sucks. There is an obvious standard way to center stuff vertically: auto margins. A second trick: " position: absolute; top: 0; right: 0; bottom: 0; left: 0;", it might not be usable in tables, hard to say as I don't do tables unless I have to represent tabular or matrix data. For IE a centered image on the background worked somewhat, but it was far from optimal. The code I used for a few weeks:
(donating it to the public domain, feel free to use): index.html:
--->8---
<?xml version="1.0" encoding="ISO-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>example</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
</head>
<body>
<h1>Welcome</h1>
<img id="mainlogo" src="logo.gif" alt="LOGO" />
</body>
</html>
---8<--- css.css:
--->8---
* {margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif;}
body {background-color: rgb(255,128,0); color: black; text-align: center;}
h1 {font-size: 16pt}
#mainlogo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 359px; height: 498px; margin:auto; }
---8<--- ie.css:
--->8---
body {background-position: center center; background-image: url(logo.gif); background-repeat: no-repeat; height: 600px}
#mainlogo {display:none}
---8<--- I'm sure it can be done better, but I had little time and
as long as it had the look the customers want it was good.
|
Xapti
msg:3565561 | 4:50 am on Feb 4, 2008 (gmt 0) |
Huh, I have not heard of that method. I like it (I've tried playing around with auto-height margins before, but couldn't figure out how to get them). But can it work on variable/unspecified (get from image properties) heights of the image? (you included size in yours, whether or not it was necessary) Not only am I curious, but that's what the original poster needs. [edited by: Xapti at 4:51 am (utc) on Feb. 4, 2008]
|
|
