Stylesheets - Muliple backgrounds? (using logical layout)

Author

Muliple backgrounds? (using logical layout)

FuzzyLogik

2006-11-05, 11:33 pm

I am trying to make a logical link list,

<ul>
<li></li>
</ul>

But my sections have headers and footers. How do I do this?

Example:

_____________
|-----Header -----|
- Link
- Link
- Link
|____________|

The footer contains no content, only an image.

The middle part (with the links has a CSS border on the left and the
right.

I have no idea how to logically do this, as adding an <li> for the
footer seems silly.

Thanks,

- Jon

dorayme

2006-11-05, 11:33 pm

In article
<1161912289.238224.249920@f16g2000cwb.googlegroups.com>,
"FuzzyLogik" <tawxic@XXXXXXXXXX> wrote:

> I am trying to make a logical link list,
>
> <ul>
> <li></li>
> </ul>
>

A list is a list. A cow is a cow. What is all this about logical?

> But my sections have headers and footers. How do I do this?
>
> Example:
>
> _____________
> |-----Header -----|
> - Link
> - Link
> - Link
> |____________|
>
> The footer contains no content, only an image.
>
> The middle part (with the links has a CSS border on the left and the
> right.
>
> I have no idea how to logically do this, as adding an <li> for the
> footer seems silly.
>

If you want a header followed by a list of links followed by a
footer, why not:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<body>

<h1>Header</h1>

<ul>
<li>link</li>
<li>link</li>
<li>link</li>
</ul>

<div id="footer"><img src="img.gif" width="300px" height="35px"
alt=""></div>

</body>
</html>

That is all logical without containing any cows that are in
themselves logical.

And then there is the question of how you want it to look.
Obviously you want the header to be at top, the links in the
middle and the footer at the base. For this alone, there is no
need to style anything. But if you want fancier, eg. the footer
to be in the middle, you best put in some css style instructions.
need help on this part?

--
dorayme

FuzzyLogik

2006-11-05, 11:33 pm

It's actually sections of headers and footers :)

Let me make another diagram :)

__________________
|------Header--------------|
- Link
- Link
- Link
- Link
|_________________|

__________________
|------Header--------------|
- Link
- Link
- Link
- Link
|_________________|

__________________
|------Header--------------|
- Link
- Link
- Link
- Link
|_________________|

I don't know how to do the headers and footers in this instance.

dorayme wrote:
> In article
> <1161912289.238224.249920@f16g2000cwb.googlegroups.com>,
> "FuzzyLogik" <tawxic@XXXXXXXXXX> wrote:
>
>
> A list is a list. A cow is a cow. What is all this about logical?
>
>
>
> If you want a header followed by a list of links followed by a
> footer, why not:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
>
> <html>
>
> <head>
>
> <body>
>
> <h1>Header</h1>
>
> <ul>
> <li>link</li>
> <li>link</li>
> <li>link</li>
> </ul>
>
> <div id="footer"><img src="img.gif" width="300px" height="35px"
> alt=""></div>
>
> </body>
> </html>
>
> That is all logical without containing any cows that are in
> themselves logical.
>
> And then there is the question of how you want it to look.
> Obviously you want the header to be at top, the links in the
> middle and the footer at the base. For this alone, there is no
> need to style anything. But if you want fancier, eg. the footer
> to be in the middle, you best put in some css style instructions.
> need help on this part?
>
> --
> dorayme

FuzzyLogik

2006-11-05, 11:33 pm

dorayme

2006-11-05, 11:33 pm

In article
<1161919873.329035.121240@e3g2000cwe.googlegroups.com>,
"FuzzyLogik" <tawxic@XXXXXXXXXX> wrote:
[color=darkred]
> It's actually sections of headers and footers :)
>
> Let me make another diagram :)
>
> __________________
> |------Header--------------|
> - Link
> - Link
> - Link
> - Link
> |_________________|
>
> __________________
> |------Header--------------|
> - Link
> - Link
> - Link
> - Link
> |_________________|
>
> __________________
> |------Header--------------|
> - Link
> - Link
> - Link
> - Link
> |_________________|
>
> I don't know how to do the headers and footers in this instance.
>
>
>
> dorayme wrote:

Please try to bottom post... so we can maintain a thread in good
order here.

What is the difficulty you are facing, what is it about my
suggested markup that you cannot adapt?

It should seem - as a mere technical leap - easy? I do not say it
is good practice. Namely just repeat everything in the
<body></body> three times!

(btw I forgot to close the <head> in example, I cheated and added
it above.)

But, this is not likely a very good idea from the start. Without
knowing what you are doing, I have no idea of your content and
cannot know the relationships between the three sections. It all
sounds very odd. For a start there cannot be more than one real
footer.

You need to start describing things more, not just the formal
stuff, the actual real stuff. Anyway, all this is a bit OT, maybe
you better go to alt.html They get a bit shitty here if we go on.
I am already viewed with great suspicion.

--
dorayme

dorayme

2006-11-05, 11:33 pm

In article
<doraymeRidThis-8EDC14.14375527102006@news-vip.optusnet.com.au>,
dorayme <doraymeRidThis@optusnet.com.au> wrote:

> You need to start describing things more, not just the formal
> stuff, the actual real stuff. Anyway, all this is a bit OT, maybe
> you better go to alt.html They get a bit shitty here if we go on.

Oops.. sorry about that FuzzyLogik... I thought I was on a
different ng, nothing to do with website making this is pretty
well on topic here...

About your stuff, you need to decide what if there is a main
heading or just 3 equal headings? And to say what you are doing,
is there not some main subject to the page?

--
dorayme

Andy Dingley

2006-11-05, 11:33 pm

FuzzyLogik wrote:

> It's actually sections of headers and footers :)

It looks like a combination of nested lists and headers. Just which is
"better" to use really depends on the context you're using them in
(which we don't know). You could validly use either.

Try this, then apply CSS to taste.

<ul class="foo" >

<li>
<h2>Header A</h2>
<ul>
<li>Link A1</li>
<li>Link A2</li>
<li>Link A3</li>
</ul>
</li>

<li>
<h2>Header B</h2>
<ul>
<li>Link B1</li>
<li>Link B2</li>
<li>Link B3</li>
</ul>
</li>

<li>
<h2>Header C</h2>
<ul>
<li>Link C1</li>
<li>Link C2</li>
<li>Link C3</li>
</ul>
</li>

</ul>

FuzzyLogik

2006-11-05, 11:33 pm

On Oct 27, 2:07 am, "Andy Dingley" <ding...@codesmiths.com> wrote:
> FuzzyLogik wrote:
> "better" to use really depends on the context you're using them in
> (which we don't know). You could validly use either.
>
> Try this, then apply CSS to taste.
>
> <ul class="foo" >
>
> <li>
> <h2>Header A</h2>
> <ul>
> <li>Link A1</li>
> <li>Link A2</li>
> <li>Link A3</li>
> </ul>
> </li>
>
> <li>
> <h2>Header B</h2>
> <ul>
> <li>Link B1</li>
> <li>Link B2</li>
> <li>Link B3</li>
> </ul>
> </li>
>
> <li>
> <h2>Header C</h2>
> <ul>
> <li>Link C1</li>
> <li>Link C2</li>
> <li>Link C3</li>
> </ul>
> </li>
>
> </ul>

Alright, I made a beautiful example in photoshop,

http://www.goonsquad.org/sample.gif

That's what I want to do, using an unordered list.

Andy Dingley

2006-11-05, 11:33 pm

FuzzyLogik wrote:
> That's what I want to do, using an unordered list.

In that case, the HTML could be just as I posted. If you do the
rounded-box effect with CSS (search for examples) then you might need
some extra <div> elements, just as holders for the eye candy images.