css layer orders 1

[derwent]

We have a third party system that we use to display some of our webpages. We have control over the header and footer via a cms that allows us to place whatever content we want inside header and footer layers. We also have control of the css.

i.e.

<div id='header'>
we can edit here
</div>

website content

<div id='footer'>
we can edit here
</div>

Our website is centralised so I want to put a wrapper around the content, however, we can only edit between the div tags, not the div tags themselves. So I am limited to something like to center the content

<div id='header'>
we can edit here
<span id='wrapper'>
</div>

website content

<div id='footer'>
</span>
we can edit here
</div>


Will this work as the spans start and finish inside divs?

 

[dmacster]

I'm not sure I understand what you want to accomplish, but why not just change the CSS for each div that needs to change? I'm assuming it's all defined style-wise there.

 

[BillyRayPreachersSon]

derwent,

What you have posted is invalid markup. You can find this out by running your code through a validator.

Your nesting is incorrect. All inner tags should be closed first - basically LOFC - Last Open, First Closed.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Vragabond]

What you want won't work, because that is not a well-formed document. A child element needs to be closed before the parent element closes. I would advise a similar approach as dmacster -- use css to control the position of your divs.

 

[derwent]

I thought it wouldn`t work because of the it's invalid with naff nesting.

Thanks for confirming it, I wil have to try and figure another way around it (not allowed to change css for header and footer themselves only the elements within it grrrrrr)

 

[ChrisHunt]

I thought it wouldn`t work because of the it's invalid with naff nesting.

Well, actually, what I suspect most browsers will do in practice is assume the presence of opening/closing tags which you missed out, in order to render the page:

<div id='header'>
we can edit here
<span id='wrapper'>[red]</span>[/red]
</div>

website content

<div id='footer'>
[red]<span>[/red]</span>
we can edit here
</div>

The red tags aren't in your code, but most browsers will behave as if they were. Either way, it won't work as you intend - and it's dangerous to make assumptions about how browsers will deal with invalid code anyway.

So how about this (subtly different) way of doing it (CMS code in red, yours in black):

[red]<div id='header'>[/red]
we can edit here
<div id='content'>
<div class='dummy'>
[red]</div>

website content

<div id='footer'>[/red]
</div></div>
<div id='real_footer'>
we can edit here
[red]</div>[/red]

A bit of deviousness leaves the document valid and well-formed, at the cost of introducing a couple of unnecessary empty <div>s.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[derwent]

aha, I like your way of thinking Chris.

That in theory should work fine, i'll give it a go...

 

[ChrisHunt]

Oops, I missed out a </div>, after the first "We can edit here". But you get the idea.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd