Hi everybody.
Css is complicated, when you go advanced it ain't easy anymore.
Here's what I want to do:
<body>
<div><p><span>text</span></p>
<span id="brCorner"> </span>
</div>
</body>
I would like to insert 4 background-images for each corner of the "outer" box.
Since the text can be resized I figured it's a bad idea to use just one background-image for the div, that fills the entire box, since it has to be aligned with a background pattern of the body and a text resize could throw the alignement off.
That's why I figured it's better put one background-image in each of the <div> <p> <span>s. But the p and the spans are smaller than the div which means their corners will land in different places. Sorry to make this long, but do you know of a good way to use several background-images but make it look as if they formed just one image in just one element, and that is also robust?
Thank you, hope you can help.There are heaps of articles on the net about rounded corners.
A List Aparts article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/customcorners/">http://www.alistapart.com/articles/customcorners/</a><!-- m -->)
Google Search (<!-- m --><a class="postlink" href="http://www.google.com.au/search?q=rounded+corners+css&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US
fficial">http://www.google.com.au/search?q=round ... Sfficial</a><!-- m -->)Still sort of complicated.
Why can't you just give the containing div position: relative, and then simply place 4 <span>s in each of its corners by positioning them absolutely and then assign the corner images to the <span>s?
Why mess with headers and <p>s if you think you don't need them, or why use more <divs> than needed? Divs look confusing, better use spans, one for each corner and place them by position: absolute within a relatively positioned div. (Haven't tried yet
, but their method looks too verbose with ps, and divs, and hs, and ps, and divs, are they just trying to be fancy? 
)Spans are inline elements and divs are block elements, so use divs, you can do something like this
<html>
<head>
<style type="text/css">
.corners {
margin: 0;
padding: 0;
}
#tl { background: #000 url('images/tl.gif') no-repeat top left; }
#tr { background: transparent url('images/tr.gif') no-repeat top right; }
#bl { background: transparent url('images/bl.gif') no-repeat bottom left; }
#br { background: transparent url('images/br.gif') no-repeat bottom right; }
</style>
</head>
<body>
<div id="tl" class="corners"><div id="tr" class="corners"><div id="bl class="corners"><div id="br class="corners">
<p>lt is lop left, tr is top right, bl is bottom left and br is bottom right</p>
</div></div></div></div>
</body>
</html>CSS code that I really like cos it works so well in most browsers and is really flexible is this one:
<!-- m --><a class="postlink" href="http://www.456bereastreet.com/lab/teaser/flexible/">http://www.456bereastreet.com/lab/teaser/flexible/</a><!-- m -->
Why mess with headers and <p>s if you think you don't need them, or why use more <divs> than needed? Divs look confusing, better use spans, one for each corner and place them by position: absolute within a relatively positioned div.
I don't like using too much code to create boxes and the like either... to me it removes the purpose of separating the visual from the content a little, but I think that it makes it easier to deal with later.I'm checking it out. That latter one seems to be a good more simple solution than the ALA version, but again the ALA version used 5 images.
Thanks.
Css is complicated, when you go advanced it ain't easy anymore.
Here's what I want to do:
<body>
<div><p><span>text</span></p>
<span id="brCorner"> </span>
</div>
</body>
I would like to insert 4 background-images for each corner of the "outer" box.
Since the text can be resized I figured it's a bad idea to use just one background-image for the div, that fills the entire box, since it has to be aligned with a background pattern of the body and a text resize could throw the alignement off.
That's why I figured it's better put one background-image in each of the <div> <p> <span>s. But the p and the spans are smaller than the div which means their corners will land in different places. Sorry to make this long, but do you know of a good way to use several background-images but make it look as if they formed just one image in just one element, and that is also robust?
Thank you, hope you can help.There are heaps of articles on the net about rounded corners.
A List Aparts article (<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/customcorners/">http://www.alistapart.com/articles/customcorners/</a><!-- m -->)
Google Search (<!-- m --><a class="postlink" href="http://www.google.com.au/search?q=rounded+corners+css&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox-a&rls=org.mozilla:en-US
fficial">http://www.google.com.au/search?q=round ... Sfficial</a><!-- m -->)Still sort of complicated.Why can't you just give the containing div position: relative, and then simply place 4 <span>s in each of its corners by positioning them absolutely and then assign the corner images to the <span>s?
Why mess with headers and <p>s if you think you don't need them, or why use more <divs> than needed? Divs look confusing, better use spans, one for each corner and place them by position: absolute within a relatively positioned div. (Haven't tried yet
, but their method looks too verbose with ps, and divs, and hs, and ps, and divs, are they just trying to be fancy? )Spans are inline elements and divs are block elements, so use divs, you can do something like this<html>
<head>
<style type="text/css">
.corners {
margin: 0;
padding: 0;
}
#tl { background: #000 url('images/tl.gif') no-repeat top left; }
#tr { background: transparent url('images/tr.gif') no-repeat top right; }
#bl { background: transparent url('images/bl.gif') no-repeat bottom left; }
#br { background: transparent url('images/br.gif') no-repeat bottom right; }
</style>
</head>
<body>
<div id="tl" class="corners"><div id="tr" class="corners"><div id="bl class="corners"><div id="br class="corners">
<p>lt is lop left, tr is top right, bl is bottom left and br is bottom right</p>
</div></div></div></div>
</body>
</html>CSS code that I really like cos it works so well in most browsers and is really flexible is this one:
<!-- m --><a class="postlink" href="http://www.456bereastreet.com/lab/teaser/flexible/">http://www.456bereastreet.com/lab/teaser/flexible/</a><!-- m -->
Why mess with headers and <p>s if you think you don't need them, or why use more <divs> than needed? Divs look confusing, better use spans, one for each corner and place them by position: absolute within a relatively positioned div.
I don't like using too much code to create boxes and the like either... to me it removes the purpose of separating the visual from the content a little, but I think that it makes it easier to deal with later.I'm checking it out. That latter one seems to be a good more simple solution than the ALA version, but again the ALA version used 5 images.
Thanks.