I have got to implement the design (from psd/jpg to html/css) for a website of mine, which is kind of a new experience to me.
The first challenges were about implementing boxes with rounded corners and floating elements.
Rounded corners:
There are plenty of way to do rounded corners; but I wanted one without js and without image.
So I used the tips described in here:
http://www.html.it/articoli/nifty/index.html
The html looks like:
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<div class="content">
My content here
</div>
<b class="rbottom">
<b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b>
</b>
And the css:
/* 1 */
.rtop, .rbottom{
display:block
}
/* 2 */
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background: #08572a none repeat scroll 0 0
}
/* 3 */
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
/* 4 */
.content{
background-color: #08572a;
padding: 1em;
}
The first chunk of the css ensure the content of the rtop and rbottom <b> are displayed as block (not inline) in the doc.
The second chunk do the same for the inner <b>, force the height, and set the background color.The overflow does not seems to be of used, at least in Firefox. Probably is in IE.
The third chunk set decreasing margin to each inner <b>, to actually create lines increasing (top section) decreasing (bottom section) in size.
The fourth chunk is just about setting the same background color for the content than for the borders.
Floating elements
I also have a list of elements in a left panel (floating), each elements having inner floating elements as well. My problem was that the inners element were half getting out of there container.
Normally a <div style=”clear:both” /> below the last element does the trick, but as the container panel is floating itself, the content normally in the right of the left panel get displayed below (that is: the whole page get cleared, not only the elements in the left panel).
A simple fix to that is to specify “overflow:auto” for the containing element (the left panel in my case) – which does not make much sense, as the expected behaviour for this property is defined as follow (http://www.w3schools.com/css/pr_pos_overflow.asp):
“If the content is clipped, the browser should display a scroll-bar to see the rest of the content”
