Hey. Ive searched the archives and

gwar2k1 · Aug 6, 2003

Hey. Ive searched the archives and checked the FAQs, I cant find one that helps. But maybe Im just unable to spot a good answer...

I would like to center a div object so it'll always be in the middle when the page resizes. If I was guaranteed that every user had 1024 x 768 resolution, it wouldn't be a problem but obviously nothing's easy.

I currently use the code below, though... it doesnt work at all. Everything just shifts to the left as if the center tag doesn't exist.

<center>
<div class="everything">

<div class="banner">

<div class="topleft"><img src="topleft.png" width="155" height="47"><div>
<div class="middle"></div>
<div class="topright"><img src="topright.png" width="320" height="37"></div>
<div class="navigation"><img src="navigation.png" width="760" height="29"></div>
<div class="corporate"><img src="corporate.png" width="760" height="22"></div>
<input class="search">
<select class="searcharea">

</div>

</div>
</center>

I'm using IE 6.1, notepad and a stylesheet:

div.everything {
height: 822;
width: 760;
}

That did have a position: absolute and x,y coordinates but I removed them because I don't want it to be resolution specific.

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

RISTMO · Aug 6, 2003

Your code is correct. Try pressing CTRL + F5 to refresh the page because your browser might be cached.

Rick

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

http://www.reference-guides.com/

Reference Guides

gwar2k1 · Aug 6, 2003

Thats what I thought ^^ stupid MS. But a refresh doesnt work either

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

pwesson · Aug 6, 2003

In place of your <center> tag, try this:

<div align="center">
.
. your code between these tags
.
</div>

Paul Wesson, Programmer/Analyst

http://www.ipaw.net

gwar2k1 · Aug 6, 2003

No joy

Is it browser specific? I read somewhere DIV aligns were stopped in like IE 5 and NS4 or something?

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

RISTMO · Aug 7, 2003

Please post the entire html page code, entire css stylesheet, and everything else used.

Rick

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

http://www.reference-guides.com/

Reference Guides

gwar2k1 · Aug 7, 2003

------------
Style sheet:
------------

body {
background-image: url(background.png);
color: #ffffff;
font-family: Arial;
font-size: 10pt;
}

div.everything {
height: 822;
width: 760;
}

div.banner {
position: absolute;
top: 0;
left: 0;
height: 98;
width: 760;
}
div.topleft {
position: absolute;
top: 13;
left: 0;
height: 47;
width: 155;
}
div.topmiddle {
position: absolute;
top: 27;
left: 155;
background-image: url(filler.png);
height: 20;
width: 293;
}
div.topright {
position: absolute;
top: 10;
left: 440;
height: 37;
width: 320;
}
div.navigation {
position: absolute;
top: 47;
left: 0;
height: 29;
width: 760;
}
div.corporate {
position: absolute;
top: 76;
left: 0;
height: 22;
width: 760;
}
div.memboptions {
position: absolute;
top: 98;
left: 0;
height: 18;
width: 760;
background-image: url(statusbg.png);
}

div.right {
position: absolute;
top: 98;
left: 552;
}
div.memblogin {
position: absolute;
top: 18;
left: 0;
height: 134;
width: 184;
background-image: url(loginbg.png);
}
div.membbenefit {
position: absolute;
top: 152;
left: 0;
height: 211;
width: 184;
background-image: url(benefits.png);
}

div.main {
position: absolute;
top: 116;
left: 0;
height: 668;
width: 760;
z-index: -1
}
div.upperleft {
position: absolute;
top: 0;
left: 0;
height: 106;
width: 15;
}
div.upperright {
position: absolute;
top: 0;
left: 745;
height: 106;
width: 15;
}
div.middle {
position: absolute;
top: 0;
left: 9;
height: 667;
width: 742;
z-index: -1;
background-image: url(middlebg.png);
background-reapeat: repeat-y;
}
div.lowerleft {
position: absolute;
top: 521;
left: 0;
height: 146;
width: 15;
}
div.lowerright {
position: absolute;
top: 521;
left: 736;
height: 146;
width: 15;
}

div.mainimage {
position: absolute;
top: 125;
left: 24;
height: 116;
width: 519;
}

img {
border: 0;
}
a {
color: #a8d2fd;
text-decoration: none;
font-weight: bold;
}
input,select {
font-family: Veranda;
font-size: 10px;
color: #330066;
background-color: #ffffff;
border: 1px solid #999999;
width: 110;
height: 18;
}
.search {
position: absolute;
top: 18;
left: 500;
}
.searcharea {
position: absolute;
top: 18;
left: 620;
}

----
HTML
----

<html>

<head>
<link rel="stylesheet" type="text/css" href="layout.css">
</head>

<body>

<div class="everything" align="center">

<div class="banner">

<div class="topleft"><img src="nintendo.png" width="155" height="47"><div>
<div class="topmiddle"></div>
<div class="topright"><img src="topright.png" width="320" height="37"></div>
<div class="navigation"><img src="navigation.png" width="760" height="29"></div>
<div class="corporate"><img src="corporate.png" width="760" height="22"></div>
<div class="memboptions"></div>
<input class="search">
<select class="searcharea">

</div>

<div class="right">

<div class="memblogin"></div>
<div class="membbenefit"></div>

</div>

<div class="main">

<div class="upperleft"><img src="upperleft.png"></div>
<div class="upperright"><img src="upperright.png"></div>
<div class="middle"></div>
<div class="lowerleft"><img src="lowerleft.png"></div>
<div class="lowerright"><img src="lowerright.png"></div>

</div>

<div class="mainimage"><img src="gbaspbanner.png"></div>

</div>
<center>

</body>

</html>

-----------------

Thats everything. Ive noticed another problem. It doesnt display anything but the div class="border" in an IE window, though in MS Frontpage it shows everything. Im only using frontpage to test how it looks, im using notepad to make it.

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

RISTMO · Aug 7, 2003

Oh...that's totally your problem...you're using position:absolute; for practically every class, which overrides the center....Use the <center> tag like I said instead of 'align="center"', since that's depricated.

After that, go through the stylesheet and make everything relative where it says absolute. You can then re-calculate the positions.

Rick

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

http://www.reference-guides.com/

Reference Guides

gwar2k1 · Aug 8, 2003

relative is to the screen not the parent element right?

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

RISTMO · Aug 8, 2003

No--absolute is to the browser window. Relative is to the parent element.

Rick

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

http://www.reference-guides.com/

Reference Guides

gwar2k1 · Aug 8, 2003

are you sure cause Im using absolute with a lot of 0s and it works to the parent element. this is why im asking lol. i get confused between the two

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

RISTMO · Aug 8, 2003

Yes--I'm sure. Actually, that is why your page doesn't work. Your parent element (the first div) is centered, yet because you use absolute positioning, the sub-elements appear aligned to the left of the browser. Also, "absolute" means regardless of everything else....position:absolute;left:30px; means that regardless of the rest of the page, put that element 30px from the left of the page....even if it was in a div that was centered. The "absolute" overrides the <center>. That's why your page doesn't work. If you use "relative", instead, and find out the right values to put them back in their right places, you can do anything you want to the parent div, and the innerhtml will adjust to stay in the same positions relative to each other, NOT the page, like they're doing now.

Did that make sence?

Rick

-----------------------------------------------------------

http://www.ristmo.com/

RISTMO Designs

http://www.arabchurch.com/

Arab Church

http://www.reference-guides.com/

Reference Guides

gwar2k1 · Aug 9, 2003

It did... yeah

No it did. Ive managed to do it my making only the main div relative. So I dunno if this blows your idea of CSS wide open or if you think (as I do) I have magical powers and code fears me for said reason.

Yes, Im crazy =D

Cheerz

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Hey. Ive searched the archives and

gwar2k1

Programmer

RISTMO

Programmer

gwar2k1

Programmer

pwesson

Programmer

gwar2k1

Programmer

RISTMO

Programmer

gwar2k1

Programmer

RISTMO

Programmer

gwar2k1

Programmer

RISTMO

Programmer

gwar2k1

Programmer

RISTMO

Programmer

gwar2k1

Programmer

Similar threads

Part and Inventory Search

Sponsor