[thelist] CSS: Help with Layout - Less Info ;)

Mattias Thorslund mattias at thorslund.us
Thu May 11 13:12:49 CDT 2006


Someone did, actually. Christy Collins.

I looked at the example in your previous post, but since I didn't spot
an obvious  "quick fix-it" solution, I did not post. I'm no CSS guru,
either, so my suggestions below are "pointers" at best.

I think one potential issue is that you're putting the logo in a
background image inside an empty div. As I recall (dimly), even though
you size it with width and height, that div still needs some
non-whitespace content, for instance a " ".

So, maybe something like this:

Let the div's "toplinks_right", "toplinks_left" and "logo" have a
"float:left" and they should probably line up next to each other better.
To make them still center, wrap them in (yet) another div, and work on
centering that, say with "margin:0 auto".

<div id="topmenu">
    <div id="toplink_wrapper">
        <div class="toplinks_right">archives | about | links | contact</div>
        <div class="logo">&nbsp;</div>

        <div class="toplinks_left">purchase | random | favs</div>
    </div>
</div>



I'm sure there's plenty of stuff for real CSS people to correct me on in
the above here - go ahead :-)

Mattias



Gina Anderson wrote:
> Hi all,
>
> Okay, since no one has chimed in yet on my first post, I'm going to
> simplify. I think I included too much info. :)
>
> So, here's a screen shot:
> http://www.lensatlarge.com/help/screen2.html
>
> How would you guys accomplish this layout using CSS?
>
> I have the gray box as a background image for a div. Where I am having a
> hard time is keeping the logo centered while aligning the sets of links to
> each side of the logo.
>
> I'm banging my head on my desk. Would love input.
>
> Thanks,
> Gina
>
>   




More information about the thelist mailing list