Hello all,
I've been trying to apply the various techniques listed on the Wiki for
rounded corners, especially the one listed on Albin.net[1] - and I've got a few
questions for the collective wisdom.
What I'm aiming for is to have rounded corners on all 4 corners of each of
the items in a menu. This leads me to several apparent constraints:
1 - Because all 4 corners will need to be rounded, the sliding
doors[2]technique doesn't seem like it will work as that technique only
provides for 2 sides, not 4 corners.
2 - As a menu, the markup I'm working with should ideally be a list. This
complicates many of the techniques I've seen (including Albin.net) which rely
on nested div's because li's (inline) can't contain div's (block). I've
tried to convert this technique to using span's, but have been running into
problems with IE adding space to the menu items.
3 - Another aspect of menus is that the typically don't have a lot of text to
use for hooks for CSS. A lot of very clean techniques [3] rely on many elements
in the rounded element to achieve their effects - something I don't have
available. I'm currently trying to use span's.
4 - This one has me pulling out what little hair remains - I'm up against a
self-imposed limit for the number of images on these pages, so I'm trying to
combine rounded corner images into 1 and then use clipping to select only the
corner I'm interested in. This (IIRC) introduces the necessity for absolute
positioning.
Am I correct in these constraints, or have I missed something along the way?
Assuming that the above constraints are valid, here is a page which
demonstrates the code I've been working on:
http://morphosis7.byethost12.com/sandbox/clip5.php
CSS and HTML are visible in the source, but the gist of the HTML is (for one
menu option) :
li class=item1img class=testul alt= src=clipround.gif width=6
height=6 /img class=testur alt= src=clipround.gif width=6
height=6 /img class=testll alt= src=clipround.gif width=6
height=6 /img class=testlr alt= src=clipround.gif width=6
height=6 /Knowlton School/li
And, the CSS:
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #CC;
}
li {
position: relative;
margin: .5em;
padding: 0 4px;
color: black;
font-weight: bold;
}
li img {
position: absolute;
overflow: hidden;
height: 6px;
width: 6px;
}
.item1 {
background-color: #ff0099;
}
.testul {
left: 0px;
top: 0px;
clip: rect(0px 3px 3px 0px);
}
.testur {
right: 0px;
top: 0px;
clip: rect(0px 6px 3px 3px);
}
.testll {
left: 0px;
bottom: 0px;
clip: rect(3px 3px 6px 0px);
}
.testlr {
right: 0px;
bottom: 0px;
clip: rect(3px 6px 6px 3px);
}
My questions right now are first - am I needlessly limiting myself in the 4
constraints above, and second - is there a technique out there already that
satisfies them - particularly the ability to use span's instead of div's,
and also take advantage of the clip property? Or should I continue to try and
develop down the road I've started (which at this point means getting IE 6 and
earlier to function - IE 7, Firefox, Opera and Safari all seem to display
what's there now correctly)
Thanks for any feedback,
Matt
[1]http://www.albin.net/CSS/roundedCorners/
[2]http://www.alistapart.com/articles/slidingdoors/
[3]http://tutorials.alsacreations.com/cadre/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
