PDA

View Full Version : how to keep center positioning when window is resized



xjuicy
Feb 3rd, 2010, 02:33 AM
I'm having a few issues with my layout.

1. I want to have my layout image and div content centered. I centered the image and will use div positioning to position it where it needs to be. But when I resize the browser window, the positioning moves around and it's no longer correctly aligned.

2. I want to eliminate the space in between the top and the image layout.

3. I can't get my background image to be aligned in the center with my layout image.


EDIT:
I fixed most of the problems, but I can't seem the keep the image perfectly centered. I positioned it using percentages because absolute and fixed positioning didn't seem to work. It looks like this right now: http://www.visioninhd.com/sjcandy



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>SJ/CANDY</title>


<style>
BODY {
scrollbar-base-color:none;
scrollbar-face-color:none;
scrollbar-shadow-color:#EFE9E1;
scrollbar-highlight-color:#EFE9E1;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-track-color:transparent;
scrollbar-arrow-color:#FFFFFF;
padding: 8px;
background-color: #FFFFFF;
}

body, td, p, A, UL, div, .standard {
font-size:8pt;
color:#000000;
cursor:sw-resize;
font-family:trebuchet ms;
letter-spacing: 0px;
line-height: 12px;
text-align:center;
}

a:link {
color:#000000;
text-decoration:none;
cursor:se-resize;
font-weight:none;
height:12px;
letter-spacing: 0px;
}

a:visited {
color:000000;
text-decoration:none;
cursor:se-resize;
font-weight:none;
height:12px;
letter-spacing: 0px;
}

a:active {
color:#000000;
text-decoration:none;
cursor:se-resize;
font-weight:none;
height:12px;
letter-spacing: 0px;
}

a:hover {
color:#000000;
text-decoration:none;
cursor:se-resize;
font-weight:none;
height:12px;
letter-spacing: 0px;
text-decoration:none;
border:solid 0pt #000000;
}

b {color:2D2D2D;}
u {color: 2D2D2D;text-decoration:underline;}
s {color:2D2D2D;text-decoration:strikeout;}
i {color: 2D2D2D;}

#main {
background: #f7f0f4;
width:800px;
height:700px;
background: url(http://www.visioninhd.com/sjcandy/images/layout.jpg) no-repeat top center;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0px;
left: 15%;
}

#content {
background: #f7f0f4;
padding: 25px;
margin: 0px;
text-align: center;
width: 640px;
height:600px;
top: 325px;
left: 72px;
position: absolute;
}


IMG.header1 {
display: block;
margin-left: auto;
margin-right: auto;
}

input, dropdown, option, select {
color: #000000;
background:none;
font-size: 8pt;
font-weight: regular;
text-decoration: none;
letter-spacing: 0px;
font-family:trebuchet ms;
text-align: left;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
</style>



<div id="main">
<div id="content">

jenius
Feb 3rd, 2010, 07:00 AM
add the following properties to your main div:



#main {
margin-left: auto;
marin-right: auto;
}


and you really gotta start inserting spaces between new styles, it looks like the entire thing is one huge block except for the bottom two classes, and it pains my eyeballs

Also take those inline styles out of your main div tag and add them to your styelsheet

xjuicy
Feb 3rd, 2010, 08:41 AM
sorry all that coding up there was from another file that i copied from.

anyway... i've done this so far for the header.php file:
the only thing is i can't seem the center the image perfectly. i want the image to always be centered whenever the window is resized (similar to http://www.urbandecay.com)

i positioned the image using "left" and percentages because using positioning didn't seem to work, but this still doesn't keep the image completely centered.



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>SJ/CANDY</title>


<style>
BODY {
scrollbar-base-color:none;
scrollbar-face-color:none;
scrollbar-shadow-color:#EFE9E1;
scrollbar-highlight-color:#EFE9E1;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-track-color:transparent;
scrollbar-arrow-color:#FFFFFF;
padding: 8px;
background-color: #FFFFFF;
}

body, td, p, A, UL, div, .standard {
font-size:8pt;
color:#000000;
cursor:sw-resize;
font-family:trebuchet ms;
letter-spacing: 0px;
line-height: 12px;
text-align:center;
}

a:link {
color:#000000;
text-decoration:none;
cursor:se-resize;
font-weight:none;
height:12px;
letter-spacing: 0px;
}

a:visited {
color:000000;
text-decoration:none;
cursor:se-resize;
font-weight:none;
height:12px;
letter-spacing: 0px;
}

a:active {
color:#000000;
text-decoration:none;
cursor:se-resize;
font-weight:none;
height:12px;
letter-spacing: 0px;
}

a:hover {
color:#000000;
text-decoration:none;
cursor:se-resize;
font-weight:none;
height:12px;
letter-spacing: 0px;
text-decoration:none;
border:solid 0pt #000000;
}

b {color:2D2D2D;}
u {color: 2D2D2D;text-decoration:underline;}
s {color:2D2D2D;text-decoration:strikeout;}
i {color: 2D2D2D;}

#main {
background: #f7f0f4;
width:800px;
height:700px;
background: url(http://www.visioninhd.com/sjcandy/images/layout.jpg) no-repeat top center;
display: block;
margin-left: auto;
margin-right: auto;
position: absolute;
top: 0px;
left: 15%;
}

#content {
background: #f7f0f4;
padding: 25px;
margin: 0px;
text-align: center;
width: 640px;
height:600px;
top: 325px;
left: 72px;
position: absolute;
}


IMG.header1 {
display: block;
margin-left: auto;
margin-right: auto;
}

input, dropdown, option, select {
color: #000000;
background:none;
font-size: 8pt;
font-weight: regular;
text-decoration: none;
letter-spacing: 0px;
font-family:trebuchet ms;
text-align: left;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
</style>



<div id="main">
<div id="content">

mbaker
Feb 3rd, 2010, 10:54 AM
Mixing margin: 0 auto; with left:15% is probably not a good idea.

I looked at the source for http://www.visioninhd.com/sjcandy/ and found that your stylesheet is duplicated. The second copy being slightly different from the first.

The shaded background on your image is not centred which is quite likely the source of at least some of your problems.

To see what is happening I find div {border:solid red 1px;} is a useful debugging aid.

If you add a <div id="content-background"> immediately inside of <div id="content"> and replace your CSS for #main and #content with:


#main {
background: #f7f0f4;
width:833px;
height:700px;
background: url(http://www.visioninhd.com/sjcandy/images/layout.jpg) no-repeat top left;
display: block;
margin-left: auto;
margin-right: auto;
/* position: absolute; */
/* top: 0px; */
/* left: 15%; */
}

#content {
/* background: #f7f0f4; */
padding: 25px;
margin: 0px;
text-align: center;
width: 690px;
height:600px;
padding-top: 325px;
/* left: 72px; */
position:relative;
margin-left: auto;
margin-right: auto;
}

#content-background {
background: #f7f0f4;
width: 690px;
height:600px;
/* border:solid red 1px; /* debugging aid */
}

I think you will get the effect you are after.