demonhale — Sat, 03 Mar 2007 22:45:36 +0000

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...

Renegade — Sat, 03 Mar 2007 22:06:42 +0000

demonhale;216034 wrote: @ 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...

No where in my post did I say that the solution you gave is wrong. All I'm saying is to expand on your solution and offer a symantic solution [as well]. For the record, I'm not "ADD over this stuff".

demonhale — Sat, 03 Mar 2007 06:56:15 +0000

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/

Monkeyboy — Fri, 02 Mar 2007 09:16:55 +0000

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.

* {
margin: 0;
padding: 0;
}

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.

demonhale — Fri, 02 Mar 2007 03:22:48 +0000

@ 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:

<div class="head">
<h1>pixelxs.com</h1>
</div>

'
.
.

Proper CSS

h1 {
position:absolute; 
text-transform: lowercase;
text-align:left;
text-spacing:-2px;
font-size:11px;
line-height:inherit;
color: #fff;
font-family: verdana;
font-weight: normal;
margin:0px;
padding:0px;
bottom:0px;
}

.head {
position:relative;
width:99%;
display:block;
background-color: #454545;
background-image: url('head.jpg');
background-repeat: repeat-x;
border:1px;
border-style:solid;
border-color:#999999;
height: 18px;
}

Happy Learning!

Renegade — Fri, 02 Mar 2007 00:16:16 +0000

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.

Monkeyboy — Thu, 01 Mar 2007 13:18:59 +0000

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?

demonhale — Thu, 01 Mar 2007 12:04:10 +0000

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...

Monkeyboy — Thu, 01 Mar 2007 11:16:31 +0000

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.

.head {
position:relative;
width:99%;
display:block;
background-color: #454545;
background-image: url('head.jpg');
background-repeat: repeat-x;
border:1px;
border-style:solid;
border-color:#999999;
height: 18px;
}

.headtext {
text-transform: lowercase;
text-align:left;
color: #FFFFFF;
line-height:inherit;
text-spacing:-2px;
font-size:11px;
font-family: verdana;
font-weight: normal;
<strong>margin-top: 5px;</strong>
<strong>margin-left: 3px;</strong>
}

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)

demonhale — Thu, 01 Mar 2007 10:01:31 +0000

Monkeyboy;215999 wrote: 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

It won't really solve the problem unless you get the properties correct, that means if the original problem was semantically correct, it would still be solved by the solutions written above, adding an "h1" tag or any other header tag may not solve the problem without the property as written above...

I love to talk so excuse me if this is a stretch:

Example if pixelxs originally coded the html semantically as:

<div class="head">
<h1>
pixelxs.com
</h1>
<div>

The alignment problem will still be there unless you give the property to h1 and recode his first header css class inside h1, to fix it bottom left... Same process, different approach...

Now try and solve the original problem with the original css without my edit and add your h1 tags there and see if it gets fixed...