Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>It's a terrible solution, sorry :-)</p> <p>It's true that you don't need any JavaScript or nested <code>div</code> elements. The JavaScript is easily avoidable, no matter what. But is four irrelevant <code>img</code> elements better than a few nested <code>div</code> elements? The <code>img</code> element is supposed to contain image content, using it for layout purposes is basically the same as using tables for layout. Yes, it works, but it's wrong, and it ruins all semantic value.</p> <p>If I were you, I'd do it this way (excuse the silly class-names, they are just there to illustrate):</p> <h3>The markup</h3> <pre><code>&lt;div class="boxWithRoundedCorners"&gt; &lt;div class="roundedCornersTop"&gt; &lt;div class="roundedCornersTopRight"&gt;&lt;/div&gt; &lt;/div&gt; &lt;p&gt;Your content goes here, totally unaffected by the corners at all. Apply all necessary margin and other styling to make it look good.&lt;/p&gt; &lt;div class="roundedCornersBottom"&gt; &lt;div class="roundedCornersBottomRight"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <h3>The CSS</h3> <pre><code>.boxWithRoundedCorners { background: red; } .roundedCornersTop { background: url(topLeftCornerPlusTheTopOfTheBox.gif); /* Should be pretty long. Assuming your corners are 20*20px, this could for instance be 1000*20px, depending on how large the box would ever be in the real world */ height: 20px; } .roundedCornersTopRight { background: url(topRightImage.gif); width: 20px; height: 20px; float: right; } .roundedCornersBottom { background: url(topBottomCornerPlusTheBottomOfTheBox.gif); /* same "rule" as above */ height: 20px; } .roundedCornersBottomRight { background: url(bottomRightImage.gif); width: 20px; height: 20px; float: right; } </code></pre> <p>Got it? Hang on, I'll put up an example somewhere :-)</p> <p><strong>Edit:</strong> Just threw up an <a href="http://dev.systadmedia.no/demo/html_css/fluidRoundedCorners/" rel="nofollow noreferrer">an example</a>!</p> <p>Anyhow, this method will ensure a complete flexibility regarding height and width of the box, and the layout within the box always works the way it should, unaffected by the corners. Yes, it gives you some nested divs with no purpose other than the layout - but then again, that's what DIVs are used for. IMGs should always be content-related imagery.</p> <p>You could do it with all the corners being 15*15px and setting the background-color of the container. However, when stretching these images like this, you get the opportunity to add shadows, gradients or other effects. This is what I'm used to do, so I did this this way with the stretched images.</p> <p>This method is well tested out, and should as far as I know/remember work fine at least all the way back to IE 5.5.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload