13 replies [Last post]
tiffythom
Offline
newbie
California
Last seen: 14 years 2 weeks ago
California
Joined: 2007-11-14
Posts: 7
Points: 0

I've googled and searched. I've added the suggested code. My page will still not center align in any of my test browsers.

Here's my code - the WHOLE PAGE:

Untitled Document

#wrapper {
width: 887px;
margin-left: auto;
margin-right: auto;
text-align: left;

}
#header {
position: absolute;
left: 0px;
top: 10px;
width: 887px;
}
#sidebar {
position: absolute;
left: 0px;
top: 168px;
width: 180px;
height: 438px;
padding-top: 0px;
padding-left: 7px;
padding-right: 7px;
background-color: #833b3b;

}

#sidebar-long {
position: absolute;
left: 0px;
top: 168px;
width: 180px;
height: 542px;
padding-top: 0px;
padding-left: 7px;
padding-right: 7px;
background-color: #833b3b;

}
#body {
position: absolute;
width: 653px;
height: 418px;
left: 194px;
top: 168px;
background-image: url(images/main-pg/dm-body-reg.jpg);
background-repeat: no-repeat;
padding: 5px 15px 15px;
text-align:left
}

#footer {
position:absolute;
left: 0px;
top: 606px;
height: 25px;
width: 882px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
background-color: #CCCCCC;
text-align: right;
padding-right: 5px;
vertical-align: bottom;
text-transform: none;
}

#thumbnails {
float: left;
padding-right: 10px;
width: 100px;
text-align: center;
height: 410px;
max-height: inherit;
min-height: inherit;
overflow: scroll;
overflow-x: hidden;
overflow-y:scroll;
}

#gallery {
left: 405px;
width: 415px;
height: 410px;
}

#imageplace {
float: left;
padding-left: 5px;
padding-right: 10px;
padding-bottom: 5px;

}

body {
margin: 0;
padding: 0;
text-align: center;
background-image: url(images/main-pg/forestback.jpg);
}


body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #333333;
}
a:active {
text-decoration: none;
color: #000000;
}
.red-heading-text {
color: #7A3D3A;
font-weight: bold;
}
.small-body-text {font-size: small}
.red-bullet {
list-style-image: url(images/bullets/red.gif);
}
.underline {
text-decoration: underline;
}

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

Link to DM10

Link to DM11

Link to DM15 Link to DM20 Link to DM22 Link to DM30 Link to DM56 Link to DM63 Link to DM70A Link to DM70B Link to DM71 Link to DM73 Link to DM74 Link to DM75A Link to DM75B Link to DM76 Link to DM77 Link to CIS7 Link to Another page

dm10 thumb image

dm10 thumb image

dm10 thumb image

dm10 thumb image

dm10 thumb image


dm10 thumb image


dm10 thumb image


dm10 thumb image



DM10 Student Art Image
DM10 Student Projects

And then where does the text go when I type it here?


Ok this can work. wow! I did it!!!



Tell me where I went wrong....and THANKS IN ADVANCE!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 20 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

wow, good thing you ignored

wow, good thing you ignored the <code> tags.

Also, with your use of absolute positioning, of course it won't be centered... drop the pos:abs

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

tiffythom
Offline
newbie
California
Last seen: 14 years 2 weeks ago
California
Joined: 2007-11-14
Posts: 7
Points: 0

Can't Center ...

OK, I just deleted all of the "position: absolute;" from all the coding... I didn't replace them with anything. The page still will not center - looks exactly the same.

Help again?

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 23 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

When posting code please put

When posting code please put it between <code> and </code> tags. There's a button with <> on it above where you enter your question (along with I, B etc). Just highlight the code and press the button and the code tags will be inserted for you.

Better still a link if you have the site up somewhere. Smile

Those who can help you will need to see all your CSS and HTML.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

tiffythom
Offline
newbie
California
Last seen: 14 years 2 weeks ago
California
Joined: 2007-11-14
Posts: 7
Points: 0

Can't Center Page Layout!

That was most helpful info for a newbie like me, Smee! Now I understand what "Deuce" was talking about.

I wish someone could help me with my question tho...

Here's the code placed in the "code" tags. It's not hosted yet.

Untitled Document

#wrapper {
width: 887px;
margin-left: auto;
margin-right: auto;
text-align: left;

}
#header {
left: 0px;
top: 10px;
width: 887px;
}
#sidebar {
left: 0px;
top: 168px;
width: 180px;
height: 438px;
padding-top: 0px;
padding-left: 7px;
padding-right: 7px;
background-color: #833b3b;

}

#sidebar-long {
left: 0px;
top: 168px;
width: 180px;
height: 542px;
padding-top: 0px;
padding-left: 7px;
padding-right: 7px;
background-color: #833b3b;

}
#body {
width: 653px;
height: 418px;
left: 194px;
top: 168px;
background-image: url(images/main-pg/dm-body-reg.jpg);
background-repeat: no-repeat;
padding: 5px 15px 15px;
text-align:left
}

#footer {
left: 0px;
top: 606px;
height: 25px;
width: 882px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
background-color: #CCCCCC;
text-align: right;
padding-right: 5px;
vertical-align: bottom;
text-transform: none;
}

#thumbnails {
float: left;
padding-right: 10px;
width: 100px;
text-align: center;
height: 410px;
max-height: inherit;
min-height: inherit;
overflow: scroll;
overflow-x: hidden;
overflow-y:scroll;
}

#gallery {
left: 405px;
width: 415px;
height: 410px;
}

#imageplace {
float: left;
padding-left: 5px;
padding-right: 10px;
padding-bottom: 5px;

}

body {
margin: 0;
padding: 0;
text-align: center;
background-image: url(images/main-pg/forestback.jpg);
}


body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #333333;
}
a:active {
text-decoration: none;
color: #000000;
}
.red-heading-text {
color: #7A3D3A;
font-weight: bold;
}
.small-body-text {font-size: small}
.red-bullet {
list-style-image: url(images/bullets/red.gif);
}
.underline {
text-decoration: underline;
}

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

Link to DM10

Link to DM11

Link to DM15 Link to DM20 Link to DM22 Link to DM30 Link to DM56 Link to DM63 Link to DM70A Link to DM70B Link to DM71 Link to DM73 Link to DM74 Link to DM75A Link to DM75B Link to DM76 Link to DM77 Link to CIS7 Link to Another page

dm10 thumb image

dm10 thumb image

dm10 thumb image

dm10 thumb image

dm10 thumb image


dm10 thumb image


dm10 thumb image


dm10 thumb image



DM10 Student Art Image
DM10 Student Projects

Class info goes here.


Class info goes here.



Thanks in Advance for anyone's help.

Raszul
Offline
newbie
Germany
Last seen: 14 years 2 weeks ago
Germany
Timezone: GMT+1
Joined: 2007-11-15
Posts: 5
Points: 0

1st: text-align this tag

1st: text-align
this tag does only work on text-type-elements (p, b, i, ...) and not on design/layout-elements (div, table, ...).
Therefore all your css code that uses

[..] left: ???px; [..]

will mostly refer to the inner borders of their respective parent elements. (most likely the body).

2nd: left & margin-left
instead you might try to use the following (here as a simplified example)

HTML


[..]

CSS
#center {
width: 500px;

position: absolute;
left: 50%;
margin-left: -250px;
}

I'll explain the code:
width: 500px
this is only used so one knows where (in pixel) on the element is it's center.
left: 50%;
this puts the element into the center of the page - but the left side of the element will be the part thats centered - not the center of the element.
margin-left: -250px;
by telling the element to start half it's width left of the entire page it will appear as though it's centered, even though it's left side is centered and then moved to the left by half it's width.
(the element then appears as centered - at least in all browsers where I could test the code until now)

- Raszul

Triumph (not verified)
Anonymous's picture
Guru

Could you go ahead and

Could you go ahead and validate your code for me? I'm almost certain that fixing the error would help with your problem. Also, what are your test browsers? So far the page centered in every thing I've tried.

tiffythom
Offline
newbie
California
Last seen: 14 years 2 weeks ago
California
Joined: 2007-11-14
Posts: 7
Points: 0

Can't Center Page Layout!

I don't know why it is being so stubborn.

I validated my code again and there are only errors concerning a scroll of an overflow but it is working in my browsers.

I tried what Raszul suggested, changing the pixel dimensions to 887px (my page dimension) and the neg margin to -443px. My page stays stubbornly glued to the left side of the browser window.

I am previewing in IE6, Firefox, Safari for Windows and Opera.

I have previewed the page on the system at my jc as well and same thing...

Thanks anyway. I may just rebuild the page or something... Sad

Triumph (not verified)
Anonymous's picture
Guru

tiffythom wrote:... I

tiffythom wrote:
... I validated my code again and there are only errors concerning a scroll of an overflow but it is working in my browsers. ...

I'm talking about validating your markup not the CSS. First things first.

http://validator.w3.org

tiffythom
Offline
newbie
California
Last seen: 14 years 2 weeks ago
California
Joined: 2007-11-14
Posts: 7
Points: 0

Can't Center Page Layout!

Wow, lots of errors! This is my very first CSS written page. I want to get away from tables! I'll work of fixing and then get back...

Thanks!

tiffythom
Offline
newbie
California
Last seen: 14 years 2 weeks ago
California
Joined: 2007-11-14
Posts: 7
Points: 0

Still won't center :/

Here's the fixed html mark up version:

Untitled Document

body {
margin: 0;
padding: 0;
text-align: center;
background-image: url(images/main-pg/forestback.jpg);
}

#wrapper {
width: 887px;
margin-left: auto;
margin-right: auto;
text-align: left;

}
#header {
left: 0px;
top: 10px;
width: 887px;
}
#sidebar {
left: 0px;
top: 168px;
width: 180px;
height: 438px;
padding-top: 0px;
padding-left: 7px;
padding-right: 7px;
background-color: #833b3b;

}

#sidebar-long {
left: 0px;
top: 168px;
width: 180px;
height: 542px;
padding-top: 0px;
padding-left: 7px;
padding-right: 7px;
background-color: #833b3b;

}
#body {
width: 653px;
height: 418px;
left: 194px;
top: 168px;
background-image: url(images/main-pg/dm-body-reg.jpg);
background-repeat: no-repeat;
padding: 5px 15px 15px;
text-align:left
}

#footer {
left: 0px;
top: 606px;
height: 25px;
width: 882px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
font-weight: bold;
background-color: #CCCCCC;
text-align: right;
padding-right: 5px;
vertical-align: bottom;
text-transform: none;
}

#thumbnails {
float: left;
padding-right: 10px;
width: 100px;
text-align: center;
height: 410px;
max-height: inherit;
min-height: inherit;
overflow: scroll;
overflow-x: hidden;
overflow-y:scroll;
}

#gallery {
left: 405px;
width: 415px;
height: 410px;
}

#imageplace {
float: left;
padding-left: 5px;
padding-right: 10px;
padding-bottom: 5px;

}

body,td,th {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
}
a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #333333;
}
a:active {
text-decoration: none;
color: #000000;
}
.red-heading-text {
color: #7A3D3A;
font-weight: bold;
}
.small-body-text {font-size: small}
.red-bullet {
list-style-image: url(images/bullets/red.gif);
}
.underline {
text-decoration: underline;
}

0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i

Link to DM10

Link to DM11

Link to DM15 Link to DM20 Link to DM22 Link to DM30 Link to DM56 Link to DM63 Link to DM70A Link to DM70B Link to DM71 Link to DM73 Link to DM74 Link to DM75A Link to DM75B Link to DM76 Link to DM77 Link to CIS7 Link to Another page

dm10 thumb image

dm10 thumb image

dm10 thumb image

dm10 thumb image

dm10 thumb image


dm10 thumb image


dm10 thumb image


dm10 thumb image

DM10 Student Art Image
DM10 Student Projects

Class info goes here.


Class info goes here.



Maybe I'll try building the page again now. :[

mikes02
mikes02's picture
Offline
Enthusiast
fresno, ca
Last seen: 11 years 16 weeks ago
fresno, ca
Timezone: GMT-7
Joined: 2007-09-17
Posts: 106
Points: 4

i don't think anyone has

i don't think anyone has mentioned this yet, but you really need to upload your files and then test and not just test locally. are you using a program like dreamweaver and testing out of there? are you using old versions of these browsers to test? because that could be a problem too .

jinoturistica
Offline
Enthusiast
Jinotega, Nicaragua
Last seen: 13 years 40 weeks ago
Jinotega, Nicaragua
Timezone: GMT-6
Joined: 2007-11-16
Posts: 152
Points: 0

pos abs missing

Put a position:absolute on your #body style
Can't use TOP and LEFT without using positioning.

Personally, I dislike using IDs that are the same as HTML tags but its legal so there you go.

Just doin' my best at www.jinotega.com
Tony Robins

tiffythom
Offline
newbie
California
Last seen: 14 years 2 weeks ago
California
Joined: 2007-11-14
Posts: 7
Points: 0

Thanks Raszul

Your tecnique worked! It wasn't working at first because I left out the "#" before the "center" id for the div. Simple beginner's mistake. The angels are singing now and I am so happy!! Yay, Clap Clap Clap Clap!!

Thanks so much! :thumbsup: