PDA

View Full Version : How to centre a <div> in NS6 using CSS?



head8k
06-20-2002, 05:12 PM
I'm having a few woes with Netscape 6 and CSS. I want to centre a <div> horizontally in the centre of the screen but it won't budge from the left hand side.

I want to do this using CSS and not by adding align="center" attributes because this will be an XHTML page.

How can this <div> be centred on the screen in NS6? Also, how can the <div> be made to fill the whole height of the screen like it does in IE?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style>
<!--
body {
height: 95%;
width: 95%;
text-align: center;
padding: 0px;
background-color: #cccccc;
}

div.centerdiv {
text-align: center;
}

div.content {
background-color: #ffffff;
width: 600px;
height: 98%;
text-align: left;
padding: 6px;
border: solid 1px #003399;
}
//-->
</style>
</head>

<body>

<div class="centerdiv">
<div class="content">
text goes here.
</div>
<div>

</body>
</html>

whackaxe
06-20-2002, 05:28 PM
ant specificy help u on that but if you download topstyle lite
http://www.bradsoft.com/topstyle/index.asp
it has a table whee you can select the browser you wna tit to be compativle with (+ an all safe table!) and you get all the options there.

jkd
06-20-2002, 05:33 PM
An example of a 50% width div centered, with its height being the full rendering window:


html, body {
height: 100%;
margin: 0;
}

div {
position: relative;
left: 25%;
width: 50%;
height: 100%;
}

:)

head8k
06-20-2002, 05:57 PM
jkd, that code does what you say but it still doesn't help me get my <div> centered. Is it possible to have a <div> with width 600px centred on the screen rather than have to use a relative width?

Help! This is driving me mad!

ledzep
06-20-2002, 07:24 PM
Hi

I just tried

<div align="center">text</div>

and this worked in NS6

ledzep
06-20-2002, 07:24 PM
oops sorry didn't read the whole thing!!!!! :(

jkd
06-20-2002, 07:42 PM
I'm not sure if you can center exactly with CSS specs when using non-relative units.

px are perhaps the worst units to use for web pages (this is according to W3C), because they don't scale when someone has a 21" monitor at an ungodly resolution, and when someone has a 15" monitor at 800*600.

I always try using % and em units when designing nowadays because of this fact...

To center align block level elements with absolute widths, I think XHTML 1.0 and better are not your choice. Sorry. :(

head8k
06-20-2002, 08:44 PM
Okay, thanks jkd. I thought that would be the case but wasn't sure. Back to the drawing board I suppose...

Roy Sinclair
06-20-2002, 09:26 PM
Simple answer:

<div style="text-align:center;">Content</div>

applesauce
06-20-2002, 10:24 PM
css

vertical-align:middle

should be valid for nn4 and up, but i haven't tried it.

this is a good source for css:
http://www.w3schools.com/css/css_reference.asp

:p

jkd
06-21-2002, 12:49 AM
Originally posted by Roy Sinclair
Simple answer:

<div style="text-align:center;">Content</div>

That only centers inline elements inside the DIV. They want to center the DIV itself (which is a block-level element).

As for veritical-align, that is the vertical placement, and has nothing to do with centering horizontally. :)

MCookie
06-21-2002, 09:06 AM
...to center a DIV horizontally: position: relative; margin-left: auto; margin-right: auto;

head8k
06-21-2002, 12:21 PM
MCookie is on to something there! I have amagend to acheive the look I was after but now have to get it looking the same in NS4.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<style>
<!--

html,body {
margin: 0px;
margin-top: 3px;
height: 96%;
width: 98%;
background-color: #cccccc;
}

div.test {
position: relative;
width: 600px;
height: 100%;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
border: solid 1px #003399;
padding: 8px;
}

//-->
</style>
</head>

<body>

<div class="test">test</div>

</body>
</html>

jkd
06-21-2002, 05:48 PM
Originally posted by MCookie
...to center a DIV horizontally: position: relative; margin-left: auto; margin-right: auto;

Ah, tricky! I guess you do learn something new everyday. ;)

Thanks for sharing that. :)

Roy Sinclair
06-21-2002, 10:56 PM
Originally posted by jkd:

That only centers inline elements inside the DIV. They want to center the DIV itself (which is a block-level element).

I tested the code I posted, it works in IE, Netscape 4 and Mozilla 1.0 and worked as requested.

To reiterate:

<div style="text-align:center;">Content</div> does the trick. While you might think this should cause the text inside the div to be centered it actually centers the div itself within the containing block. :D

jkd
06-21-2002, 11:24 PM
I think you're confused:



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jasonkarldavis.com</title>
<style type="text/css">
div {
width: 80%;
background: red;
text-align: center;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>


The text is centered, but the DIV is aligned to the left. Exactly like I said before.

Since div's default to 100% width, perhaps you were thinking of something else? :)

Irid
06-22-2002, 01:49 AM
Originally posted by MCookie
...to center a DIV horizontally: position: relative; margin-left: auto; margin-right: auto;

Very good! Looks like we have a smart Cookie here ;)

La Gal
06-22-2002, 07:09 AM
IE5/Win does not like the margin widths set to “auto”. A hack is required. Check out this example:

http://bluerobot.com/web/css/center1.html

applesauce
06-24-2002, 11:05 PM
by jkd



As for veritical-align, that is the vertical placement, and has nothing to do with centering horizontally.

i know :D i just figured "center" had been covered

Roy Sinclair
06-24-2002, 11:29 PM
Originally posted by jkd
I think you're confused:



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>jasonkarldavis.com</title>
<style type="text/css">
div {
width: 80%;
background: red;
text-align: center;
}
</style>
</head>
<body>
<div>test</div>
</body>
</html>


The text is centered, but the DIV is aligned to the left. Exactly like I said before.

Since div's default to 100% width, perhaps you were thinking of something else? :)

Yep, the 100% default width got me. If I'd added a border or set a smaller width I'd have seen it.

What we really need is a style like float: center; but it seems that one has escaped the CSS committee.

dauvm
09-27-2002, 02:13 AM
Another neat trick I picked up somewhere for horizontally centering a div is, for <div id="Content">




#Content {
position: absolute;
left: 50%;
width: 500px;
margin-left: -266px;
padding: 15px;

}



Still working on the vertical align!!

And since I'm posting... a follow up question: what's a good URL to learn about the "em" as opposed to px or %... I don't even know what "em" represents...

dauvm
09-27-2002, 02:27 AM
Yea I just realized someone showed this example like 3 posts up... now I remember where I learned this technique :o
sorry, just trying to help... forgot to check the second page heh