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:
.... __________________________________
. / /.
. / / .
. / / .
./ / .
/_________________________________/.....
Important question: do the parallelograms overlap? Does the top righthand
corner of item 1 extend farther to the right than the bottom lefthand
corner of item 2?
_________________ ________________
/. /
/ ./
/ .
/ /.
____________/ /_.__________________
Or does each parallelogram remain within its own rectangle?
_________________ ________________
/. /
/ . /
/ . /
/ . /
____________/ ./____________________
If each parallelogram remains within its own right-angle rectangle, then
the graphic problem is much simpler: Each <a> tag gets a background image
(red parallelogram on white background) and you're done.
If they overlap, then I can see two options:
One, you have to split the images into slices like so:
____________ ______ _ _______________
/ /
/ /
/ /
/ /
____________ _/ /_____ _______________
Perhaps you could give the <a> tags a solid red background color and the
<li> tags a right-aligned background image that is the right-hand side of
its box plus the left-hand side of the next box (except for the first &
last items in each row). But that would make it hard to change the color
of a parallelogram on hover.
Alternatively, you could make the parallelogram images GIFs with
transparent backgrounds, and overlap the LIs with relative positioning.
A completely different approach to the problem might be to lay out the menu
with a completely solid red background, then lay out the white divider
lines on top as a separate layer.
One of the challenges of your design is how to make it resizable!
Regards,
Paul
______________________________________________________________________
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/
