Header Problem

Only way to do this is using two divs...

Add to your head like so:

'
.
and add a second div class like headtext like this:

'
.
on your html then should be:

'

Thats It...

You could do that, semantically it would be correct, I just pointed out the way he used the class already as a div... See his original CSS, he didn't actually use a header tag for that area, so by my example maybe it's pretty much clearer, since I didn't want to explain why he should use a header tag... Just solve the problem...

And read this line first why I didn't change the whole thing:

Quote:
for my site i've been using to display headings.
i've styled it with css, but the text always appears at the top left.

On the html it still could work in this:

'

But he would move the Properties of the head class to the h1 tag class to follow the original format of the fonts...
And reversing the wrap position would not reformat the fonts but wouldn't be semantically correct either...

Point in case:
Just solve the problem and explain about Semantics if asked for it...

demonhale;215987 wrote: Just solve the problem and explain about Semantics if asked for it...

Ahhhh but using header tags would solve the problem still.

I've always used header tags so your two div suggestion made me a little concerned about the way I do things (I'm still learning html), hence the question not a statement. It's all good, as long as I wasn't wrong it's encouraging

Oh yeah totally, I'm not saying just add in header tags, what I was inquiring was really that it was possible to use header tags instead of a div which is what I would have done myself. There would obviously need to be some formatting applied to said header tags as you've noted.

Guess I was really just asking another question rather than offering a solution which probably isn't that constructive but wanted to make sure the way I would have done it was correct as well.

On that note, could you position the text with margins? i.e.

'

'

In other words keep the background formatting in the add the text formatting to the , then use margins to position the text within the div. Or would it not work that way?

(I've only estimated those margins)

You could do that, but it lengthens the code and is not cross-browser friendly... See adding specified margins to a container area inside another container complicates alignment, rather than actually aligning it bottom, which is your main course of action anyway. Thus complicating things when adding more elements...

Try your code on FF and compare it with IE...

Ah ok, I don't have time at the mo to try that as I'm at work but I think I know what you mean. This is something to do with the whole padding/margin issue between browsers. Like Explorer gives a default 8px margin, whilst opera uses an 8px padding right?

That's useful to know though. I've always used that method and yeah, have had to fudge it about a bit until things work on all browsers (I always test with IE, FF and Opera). I've never used the 'position' attribute although I've read a bit about how the whole absolute/relative thing works.

At the risk of digressing too much from the topic of this thread, is 'position: absolute' relative to the parent div or the page as a whole?

Why would you want to make it a two step problem? Why not explain the semantics of his issue then attempt to solve it (semantically) rather than just a quick fix?

See, if you just offer a person asking for help a "quick fix" then they go away thinking and doing what they have always done. Try expanding on what the person asking for help is doing and possibly help him/her in the "right direction" instead?

Sure, both solutions are correct however, explaining a little more won't hurt either. Don't just help someone, have them understand.

@ Renegade: Well thats why where having this discussion right? so that we can see the issues solved by semantic markup... But don't say however that although it's a quick fix it's totally wrong, he may not have the use for a header call, if he only needs to use the same solution to an area that doesn't have to be semantically right.

What's wrong however is the theory of assuming that getting the semantic right as a solution is a far longer thing to expound on, none of us really is ADD over this stuff... I do think however that Monkeyboy gives this thread a much deserving continuance to further the knowledge of those reading the posts. However side comments doesn't...

Let me get on to Monkeyboy and My little chat.

@Monkeyboy
1st question, yes its the whole box issue, definitely hit the nail on the head there, that's why when defining margins and paddings on element we should be careful...

2nd absolute is relative to the parent div, that's why the solution worked... Improperly nested elements however sometimes cause the absolute positions to go haywire, that's why most markup employ the use of a container div to control this property.

To those Learning, Here is the semantic solution, the markup must be semantic first (although it isn't the problem) and then you apply css styling like so:
Proper Markup:

html:

'
.
.

Proper CSS

'

Happy Learning!

That's some good info demonhale, thanks for clearing that up.

I've always used the following css to reset default margins and padding to '0' (this helps uniform how explorer and opera treat elements) and then relied totally upon margins/padding to position elements and divs.

'

Now this works (like I said earlier it requires a bit of fudging with a mix of paddings and margins) but for me anyway, produces an unstable layout. It'll look fine on all browsers but then later on I might say, decide to shift a list over a little and next thing I know, my divs are re-aligning - cue more fudging.

I've got a new website I've just started on so this will be a good chance to try out the position attribute before rushing in and destroying my existing ones lol.

Yes I agree, using reset margins and paddings make it less difficult to positioning other elements in the long run... If you need more information on CSS you can check out ALA, http://alistapart.com/

Well, I'm glad we're on the same page here, I was planning to explain it further anyway, just haven't got the time to look into it, so the fastest way I know I put in first... so on and so forth.... I know your not ADD, it's an expression! We also have ADHD but what I have now is RSI...