Sent by MATTHEW BERNHARDT on 8 January 2007 05:05
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="item1"><img 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: #CCCCCC;
}
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-REMOVED]]
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/
