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

[Gina Anderson]

Mattias and Hershel, thanks for your response :)

>>M: Someone did, actually. Christy Collins.

Yes, Christy  responded offlist. What I could've said was "nobody has chimed
in yet, except one person offlist", however I felt that statement minimized
that one person's response as not good enough (when actually I was thrilled
she replied), and I would have had to explain that (by no fault of
Christy's), the problem wasn't solved because, again,I felt I included too
much info and those reading had a difficult time understanding exactly what
I needed help with. But that's wordy, and it got me nowhere the first time,
lol. BTW, Christy, if you are reading this, you're a doll and love you for
your help offlist so far.

M: >>so my suggestions below are "pointers" at best

Pointers are good. I'm looking for ANYTHING to help me do this. But here's
the kicker to your suggested fixes:

M:>>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".
H:>><div>
  <ul>
   <li>purchase</li>
   <li>random</li>
   <li>favs</li>
   <li><img /></li>
   <li>archives</li>
   <li>about</li>
   <li>links</li>
   <li>contact</li>
  </ul>
</div>

The float left did help them line up better, but...

Therein likes my issue. If I treat the logo as part of a list or wrap all
three elements in a div and center them, then the logo goes off center due
to the links on either side not being equal character length. Basically, I
can't just center the whole shabang. I have to center the logo and make the
links line up acorrding to the logo.

For example, if I have:

link  link  link  --LOGO--  link link link

Then everything would be fine and dandy, but because I have

link link link link  --LOGO--  link link link

...you see what happens, the LOGO shifts over. It's like I have to give LOGO
alignment center priority and align the other divs according to it. Not
center the whole thing. But maybe I'm still thinking in Tables.

Are we on the same page, or am I not getting what you are saying?
Or...maybe, I need to give the link divs -widths- instead of allowing the
browser to figure it out....hmmmmm.

Thanks
Gina









-----Original Message-----
From: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org]On Behalf Of Mattias Thorslund
Sent: Thursday, May 11, 2006 2:13 PM
To: thelist at lists.evolt.org
Subject: Re: [thelist] CSS: Help with Layout - Less Info ;)


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 "&nbsp;".

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

--

* * Please support the community that supports you.  * *
http://evolt.org/help_support_evolt/

For unsubscribe and other options, including the Tip Harvester
and archives of thelist go to: http://lists.evolt.org
Workers of the Web, evolt !