Why Is My Text Not Lining Up Correctly?

[nottheface]

Hello,

I am having some issues trying to get my text to align correctly with my layout. I am pretty new to css so any assistance would be greatly appreciated. I can get the text to align correctly vertically, but not horizontally because it becomes skewed when changing the browser width (doesn't follow layout).

Here is the page I am working on:
http://velvetwaltz.com/

This is the how I would like the text areas to be postioned over the images.
http://img194.imageshack.us/img194/7905/mojosample5bv8.jpg

I would be very grateful if someone could help me out.

[Kravvitz]

Why did you apply so many styles to a <span> inside the <p>?

Please fix your XHTML errors. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fvelvetwaltz.com%2F)

No more Transitional DOCTYPEs, please (http://www.456bereastreet.com/archive/200609/no_more_transitional_doctypes_please/)
It's Time To Kill Off Transitional DOCTYPES (http://accessites.org/gbcms_xml/news_page.php?id=23)
Transitional vs. Strict Markup (http://24ways.org/advent/transitional-vs-strict-markup)

[nottheface]

Thanks for your reply Kravvitz.

I applied the styles inside the span because I was getting fustrated with the text alignment and was trying out different methods. I guess this is frowned upon and I should define the text inside the style, right?

I will work on it and define the text inside the css, but I am assuming the text will still show up the same because the positioning properties will still be the same.

Any other suggestions?

[Kravvitz]

You can't define text in CSS.

Using a span like that is frowned upon because it doesn't make sense.

The way you are going about coding that is very strange.

I suggest you put everything in body in a centered div.

Take a look at these:
Tips on Debugging Layouts (http://www.dynamicsitesolutions.com/css/debugging_layouts/)
Four ways to Center Elements with CSS (in IE5+/Win and other browsers) (http://www.dynamicsitesolutions.com/css/center_element/)

[nottheface]

I just did what I thought you were telling me to do by taking the span out and defining the text in the style. I will look at those links and see if I get a clue as to what I am doing wrong.

[mark_yieh]

If you're going to use absolute positioning, then I would not use margins and padding. I would just use left top right or bottom. Also in your situation, instead of using z-index, it would be a lot simpler to just use background images instead. Also, your markup is not very well set up. You have your footer before your content divs. You should arrange your elements according to the natural flow of the document.

The best advice I can give you is to use background images instead of z-indexes. But if you're going to keep your markup the way it is, then I think the reason for the text not lining properly is because of the margin: 10% style.

[WebJoel]

Just by way of example:

#Layer1 {
position:absolute;
left:64px;
top:252px;
width:343px;
height:122px;
z-index:1;
}

This is ineffectual, as anything "position:absolute;" is out of the document flow and effectively 'off the page' anyway. Think of it this way, on "position:absolute;" z-index: is infinity;


The only way a z-index is of any import is when used upon "position:relative;". -Needs repeating. Probably not affecting your content as-is, and you cite the z-index and "1", but if you try this with any numerical integer greater than that, you'll see that it is not being obeyed... :o

Edited:

Much to my surprise, today I found a how-site that uses "position:absolute;" AND "z-index:1;" as an ugly hack to make a background work on Opera browser. Site insists that "z-index:1;" has to be used, for Opera to display the background. I should test this, but that site is quite complex and I would summise that the author knows what he's claiming. I don't understand it, but thought it noteworthy in case this issue ever came up...