Forum Moderators: not2easy
So my question is this:
Is there a good method for creating rounded corners in fluid or elastic designs? I feel like I would need to have 4 nested elements in order to properly create the 4 corners (with each of the elements having a corner image as its background). Like this:
<div class="bottomright">
<div class="bottomleft">
<div class="topright">
<div class="topleft">
Content
</div>
</div>
</div>
</div>
Is that the case, or is there an easier method?
Thanks.
couple things on this:
working on a fixed width site at the moment and am using one background image. On text re-size the width is maintained and only the height increases. I am using px width though not ems:
<style type="text/css">
h3 {
color: #fff;
width: 100px;
margin: 0;
padding: 0 0 10px 0;
text-align: center;
font-weight: normal;
font-size: 82%;
background: url(title-bg.jpg) left bottom no-repeat;
}
h3 span {
display: block;
padding: 5px 10px;
margin: 0;
background: url(title-bg.jpg) left top no-repeat;
}
</style>
</head>
<body>
<h3><span>Text here and it all fits in vertically</span></h3>
Second idea is using the four hooks, but attaching these to as many actual elements as possible, like this example below, you have 4 elements to attach the four background images to, you just need to adjust padding and margin accordingly:
<div class="box">
<dl>
<dt>content</dt>
<dd>content</dd>
</dl>
</div>
Dont know if this helps..
ZA
But thanks.
I take it you are using em for your width then..?
I found using a fixed width px on full font size does not increase the width even with lots of text.
What about the second suggestion, does this help at all? It does save putting in lots of extra divs
ZA
I take it you are using em for your width then..?
Yes, though in your example above you specified percentages (which has the same issue).
I found using a fixed width px on full font size does not increase the width even with lots of text.
Correct, but that means sacrificing accessibility. I would like for the design to be flexible enough to allow users with poor vision to increase the font size, but at the same time not breaking the layout.
What about the second suggestion, does this help at all? It does save putting in lots of extra divs
But again, it still requires 4 levels of nested elements, and that probably won't make sense for every case where I'd want rounded corners. I guess what I would like to know is what is the most efficient, accessible, stable, and reusable method for creating rounded corners. I really think the only way to do that will require 1 element per corner. :(
Thanks.
Actually FYI - I specified % on the font and applied a px fixed width to the h1 element - in my actual design the heading is sitting inside a fixed px width floated div.
On the site I am developing at the moment everything in my design scales beautifully - if only vertically as opposed to horizontally and vertically when the text size is increased
This means:
1) people with poor vision see my fonts in big size if they want to
2) the design does not break when text is enlarged
3) I have only used one background image and 2 hooks
ZA
Actually FYI - I specified % on the font and applied a px fixed width to the h1 element - in my actual design the heading is sitting inside a fixed px width floated div.
But that still doesn't fix the fact that IE will stretch the width of the box if the text within doesn't contain any breaks. As long as your h1 text doesn't have any really long words, you're probably fine. But if you add something like "comprehensibleness" (or something of that length) and increase the text to the "Largest" setting, your layout may break.
2) the design does not break when text is enlarged
Again, it depends on the length of non-breaking words.
3) I have only used one background image and 2 hooks
The one image must be really huge then. Seems like it would be more efficient to use 2 images (from a purely bandwidth perspective). But I suppose if the image is compressed well enough it wouldn't be a huge gain.
Yup, you are right absolutely... thank the good lord I am not selling any "comprehensibleness'es"
:-)
ZA
<div class="outer">
<div class="top"><img src="tl.gif" width="15" height="15"></div>
<p style="margin: 0 12px">dsfsd sdfsdfsdf
sdfsdfsdf sdfsdfsdfsdf sdfdsfsdfsd fsdfsdfsdfsdfsfsdf </p>
<div class="bot"><img src="bl.gif" width="15" height="15"></div>
</div>
How about boxy?
I'm using <td>'s. I want the td to have padding of say 3-4px on the right and left and 2px on top and bottom. I want the <td> to be no wider than that. It seems to be expanding to meet the avilable space.
I don't mind if the last <td> (which is just whitespace anyway) does that. (It's set to width="*"). But I don't want the <td>s with content in it to expand. Is there a simple way to achieve that?
