Element Alignment

[defearian]

[/b]

 

[jlhaslip]

Lose the position: absolute

and add a strict Doctype

[defearian]

Thanks, that worked somewhat. I added

 

but wheather the position is absolute or relative the element goes about 5px off to the right when I down size the window vertically.

 

Any suggestions?

[Andrea]

This works: http://www.aandbwebdesign.com/misc/center.html

 

I changed the color so you can see better where body and content are. Also gave it an HTML 4.01 doctype - no need for XHTML.

 

Changed the div id="Center" to lower case. Works either way, but id and class names are case sensitive, and if you sometimes cap them and sometimes not, sooner or later, you'll wonder why your styles aren't working and it'll be a case issue. So it's simpler to just consistently use lower case. Saves you some trouble later on.

 

I also removed the 'display: table'. If you'll be using it, put it on one of the actual divisions, not on the body.

 

I added the * {padding: 0; margin: 0;} to prevent issues with different browser default settings, and only put a padding: 10px; back into the body tag so you can see the centered background image.

[defearian]

Thank you very much for you help and your advice, It worked like a charm as I'm sure you know. I really appreciate the extra effort of creating a page on your site. Thanks again and Peace.

 

Mario

[defearian]

At firsts I had all my css code on the html page as seen in my first post but as the css code got larger I created a seperate .css sheet but now for some reason the background jpg is no longer visble on the page. here is the css:

 

body {

 

font: 80%/160% Arial, Helvetica, sans-serif;

 

background: #ffffff url(images/BG.jpg) no-repeat center top;

 

color: #333333;

 

padding: 10px;

}

* {

margin: 0;

padding: 0;

}

img {

 

border: none;

 

}

#content {

 

height: 2275px;

 

width: 890px;

 

margin: 0 auto;

 

position: relative;

 

}

#logo {

 

position: relative;

 

top: 55px;

 

left: 52px;

 

}

#topLn {

 

position: relative;

 

top: 47px;

 

left: 38px;

 

}

#kBase {

 

position: relative;

 

top: -170px;

 

left: 480px;

 

}and here is the ref to the stylesheet:

 

Once again, any sugestions on what I may be doing wrong?

Edited June 1, 2009 by defearian

[Wickham]

It's almost certainly a path problem.

 

You now have layout.css inside a folder called images and inside layout.css you have BG.jpg also within a folder called images, but in that case there would have to be a folder called images inside the other folder called images!

 

Put the layout.css in the folder with the html file, not in images folder and edit the stylesheet link to:-

[defearian]

Thank you for that I should have caught that one.