Hi Chris,
At 11:50 AM 7/18/2005, you wrote:
I forgot to mention, that the <ul> / <li> structur is generated by a cms
system (mambo CMS). So I can't apply different ids or classes to different
<li>s unless I make some changes of some sourcecode (which i can't).
all I have is a simple list... So I guess there's no way to do this?
Never say "no way"! Actually, often when I say "no way" it turns out to be
just what my brain needed to come up with a solution where none seemed
possible. Just because you can't modify the UL list doesn't mean you're
doomed, it just means you have to be sneaky.
The only aspect of your problem that I don't see an immediate solution to
is how to indent each row of menu items a bit less each time. Hmm... If
you can control the HTML outside of the UL, one way might be to float the
menu beside a series of boxes of decreasing width:
____ ________ ________ ________
| | | || || |
| | | item 1 || item 2 || item 3 |
|____| |________||________||________|
__ ________ ________ ________
| | | || || |
| | | item 4 || item 5 || item 6 |
|__| |________||________||________|
_ ________ ________ ________
| | | || || |
| | | item 7 || item 8 || item 9 |
|_| |________||________||________|
This might be possible if the LI elements are declared as inline, not
floating blocks. I've seen this technique used to shape text blocks. I
think it might be contrary to the W3C spec to nest a block inside an inline
element, but not you could style
li { display: inline; }
li a {display: block; }
and get the dimensions you're looking for.
the graphical aspect isn't really a problem, cause I don't need to make it
resizable. A simple parallelogram as background image will do.
If you've really decided to have a non-resizable menu (too bad for people
with limited vision!) you could even have the entire menu -- the 3x3 matrix
of parallelograms -- be one large image with the UL LI items positioned
beneath or on top. You would still have the problem of indenting each row
of items...
P.S. Should I post a reply like this also within the mailing list? As I
told: I'm new to this...
Yes, I would post replies to the list, as long as you're still discussing
aspects of the same problem. There are undoubtedly people following the
conversation who will want to know as much as possible about the shape of
the problem so they can apply any possible solutions to their own work.
Regards,
Paul
Am Mon, 18 Jul 2005 17:38:21 +0200 hat Paul Novitski
<[EMAIL PROTECTED]> geschrieben:
At 02:42 AM 7/18/2005, web.de wrote:
how it should look like in the end:
http://www.machers.at/clubtest/menue.jpg
Look here with different browsers: http://www.machers.at/clubtest/ and
tell me, what I do wrong, or if there is an other possibility to achieve
this.
Chris,
Here's how I would approach this problem:
- Give the first <li> of each row (items 1, 4, & 6) a class or id.
- Clear the float for items 4 & 6.
- Give item 1 a left-margin of, say, 2em, and item 4 a left-margin of 1
em. This will stagger the cells of your matrix.
- Give the anchor tags in your list a background image that is your
parallelogram:
.... __________________________________
. / /.
. / / .
. / / .
./ / .
/_________________________________/.....
<snip>
--
Using M2: http://www.opera.com/m2/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
