...

View Full Version : Centering Problem, but not how to center - help?



ch4sethe5un
07-14-2008, 05:16 AM
Hi,

When i start to minimize my page, in IE and FF, the left content side (on my page) will continue to pass the left browser side... I don't really know how to explain it so i went to find examples on the web because my site isn't online yet.

These were the first sites that came to mind that i checked.

If you look at www.myspace.com;

When you minimize the site the background will continue off the left side of the browser, which is what i do not want my center content div to do.

But if you look at the 'today on myspace' box, right below it, it will stop moving left when it hits the left browser wall, which is what i want my site to do.

A good example of what i want my site to is:
www.yahoo.com

when you minimize yahoo, all the tables and everything will hit the left browser wall and then stop moving left.

I can't seem to figure out why my page is doing this.

Any help is welcome. :D

Thanks in advance


<!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">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="external2.css" />
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="layout">
<div id="bgHeaderStripe">
</div>
<div id="bgContainer">
<div id="center">

<!--site nav section divisions-start-->
<div id="sctNavigation">
<div id="siteNav">
<div id="banner">
a</div>
<div id="navButton">
a</div>
<div id="dirHeader">
a</div>
</div>
<div id="siteHeader">
</div>
</div>
<!--site nav section divisions-end-->

<!--site content section divisons-start-->
<div id="sctMdlContent">
</div>
<div id="sctBtmContent">
a</div>
<!--site content section divisions-end-->

</div>
</div>
</div>

</body>

</html>



/*LAYOUT PARAMS*/
* {
margin:0;
padding:0;
}

html, body {
height:100&#37;;
width:100%;
}
#bgHeaderStripe {
height: 100px;
background-color: #00FFFF;
margin-top: 125px;
width: 100%;
border: 1px dashed #000000;
}
#layout {
width: 100%;
height: 1000px;
}
#center {
width: 800px;
margin: 0 auto;
height: 1000px;
}
#sctNavigation {
height: 225px;
width: 100%;
}
#siteHeader {
border: 1px dashed #000000;
width: auto;
height: 100px;
background-image: url('images/contentHeaderStripe.gif');
}
#siteNav {
height: 125px;
width: auto;
}
#bgContainer {
width: 820px;
position: absolute;
margin: 0 auto 0 -410px;
left: 50%;
height: 1000px;
background-color: #FFFFFF;
top: 0px;
}
#dirHeader {
width: auto;
height: 30px;
}
#navButton {
width:auto;
height:30px;
}
#banner {
width:auto;
height:65px;
}
#bgHeaderStripe {
height: 100px;
background-color: #666666;
margin-top: 125px;
width: 100%;
border: 1px dashed #000000;
}

_Aerospace_Eng_
07-14-2008, 06:35 AM
You'll need to lose the absolute positioning.

ch4sethe5un
07-14-2008, 10:12 AM
thanks aerospace, i tried what you said, but i cant overlap the two divs if i remove the absolute position.

Also i am using the negative margin method of centering the overlapping div. When i left the div with absolute position and tried to center with margin: 0 auto; it would not center the overlapped div

But i can't figure it out, either i get rid of the absolute position and find another way to overlap divs (?)

#bgContainer {
width: 820px;
margin: 0 auto;
height: 1000px;
background-color: #FFFFFF;
top: 0;
}

This doesn't overlap...

or i leave absolute position and find another way to center (?) that doesn't involve 'margin: 0 auto' or 'negative margin centering'.

#bgContainer {
width: 820px;
position: absolute;
margin: 0 auto;
height: 1000px;
background-color: #FFFFFF;
top: 0;
}

This doesn't center...

Both of which kind of solve the problem, although i don't know how to implement the second half of either method...

thanks in advance

kuse50
07-14-2008, 11:31 AM
<!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">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style>
/*LAYOUT PARAMS*/
* {
margin:0;
padding:0;
}

html, body {
height:100%;
width:100%;
}

#layout {
width: 100%;
height: 1000px;
}
#center {
width: 800px;
margin: 0 auto;
height: 1000px;
}
#sctNavigation {
height: 225px;
width: 100%;
}
#siteHeader {
border: 1px dashed #000000;
width: auto;
height: 100px;
background-image: url('images/contentHeaderStripe.gif');
}
#siteNav {
height: 125px;
width: auto;
}
#bgContainer {
position:relative;
width: 820px;
border:1px solid red;
margin: 0 auto;
height: 1000px;
background: #Ff0;
}
#dirHeader {
width: auto;
height: 30px;
border:1px solid black;
}
#navButton {
width:auto;
height:30px;
border:1px solid black;
}
#banner {
width:auto;
height:65px;
border:1px solid black;
}
#bgHeaderStripe {
position:absolute;
height: 100px;
background-color: #f0f;
margin-top: 125px;
width: 100%;
}
</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="layout">
<div id="bgHeaderStripe">bgHeaderStripe</div>

<div id="bgContainer">
<div id="center">

<!--site nav section divisions-start-->
<div id="sctNavigation">
<div id="siteNav">
<div id="banner">Banner here</div>
<div id="navButton">navigation button</div>
<div id="dirHeader">header</div>
</div>
<div id="siteHeader">site header</div>
</div>
<!--site nav section divisions-end-->

<!--site content section divisons-start-->
<div id="sctMdlContent">middle content</div>
<div id="sctBtmContent">bottom content</div>
<!--site content section divisions-end-->

</div>
</div>
</div>

</body>

</html>


try to fix it ... is it work??

effpeetee
07-14-2008, 02:27 PM
Don't forget that z-index (controls the layers.) will help you to overlap. But I believe; only if you set the position selector.

Frank

ch4sethe5un
07-14-2008, 11:54 PM
ok, so i looked at what kuse posted and it answered my first problem, but created more. IE and FF both had problems so i played with it a little and deleted (on a 2nd test page) everything that wasn't the problem.

also effpeetee the z-index was a good idea, but i realized i didn't need it with the code that kuse posted. Thanks to both of you for your help.

Kuse mainly changed the bgHeaderStripe position to absolute and the bgContainer position to relative.

I was able to fix the problem with the help of kuse, aerospace, and effpeetee, but i'm worried that the code in this css is a little awkward. Is this alright...code?

Because if you take the two lines out of the block below the header will line up its left side with the left side of the center column.

Thanks people for your help :D

Right here:


margin-left: -50%;
left: 50%;


It came from this block:

#bgHeaderStripe {
position: absolute;
height: 100px;
background-color: #0099FF;
margin-top: 125px;
width: 100%;
margin-left: -50%;
left: 50%;
}




This is the entire code
I came up with:


<!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">

<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>bgHeaderStripe</title>
<style>
/*LAYOUT PARAMS*/
* {
margin:0;
padding:0;
}

html, body {
height:100%;
width:100%;
}

#layout {
width: 100%;
height: 1000px;
}
#bgContainer {
position: relative;
width: 820px;
margin: 0 auto;
height: 1000px;
background: #Ff0;
}
#bgHeaderStripe {
position: absolute;
height: 100px;
background-color: #0099FF;
margin-top: 125px;
width: 100%;
margin-left: -50%;
left: 50%;
}
</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="layout">
<div id="bgHeaderStripe">bgHeaderStripe
</div>
<div id="bgContainer">
bgContainer</div>
</div>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum