Page 1 of 1

Rounded corners - minimize markup

Posted: Thu Aug 17, 2006 2:09 pm
by Benjamin
I made this box variable height & width so that the text size can be made very large and because it's 30% width of the web page so it can get very small as well. Problem is that it took 4 div's and 1 h1 to make it. Is there a way to make something like this with less markup?

Image

Code: Select all

div.box_top_center {
  background: url('../images/box_top_center.gif') repeat-x top;
  border-width: 0px 0px 1px 0px;
  border-style: solid;
  border-color: #052b4c;
  margin: 0px;
  background-color: #127508;
}

div.box_top_left {
  background: url('../images/box_top_left.gif') no-repeat top left;
}

div.box_top_right {
  background: url('../images/box_top_right.gif') no-repeat top right;
}

div.box_content {
  background-color: #e1ede1;
  border-width: 0px 1px 1px 1px;
  border-style: solid;
  border-color: #052b4c;
  padding: 10px;
  margin: 0px 0px 20px 0px;
}

Code: Select all

    <div class="box_top_center">
      <div class="box_top_left">
        <div class="box_top_right">
          <h1 class="bar_title">Sidebar</h1>
        </div>
      </div>
    </div>
    <div class="box_content">
      hello this is just a bunch of text blah balh blah hello this is just a bunch of text blah balh blah hello this is just a bunch of text blah balh blah hello this is just a bunch of text blah balh blah hello this is just a bunch of text blah balh blah
    </div>

Posted: Thu Aug 17, 2006 3:30 pm
by matthijs

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
div.box {
  background-color: #e1ede1;
  border: solid #052b4c;
  border-width: 0 0 1px;
}
div.box h1 {
  background: #127508 url(images/box_topright.gif) no-repeat top right;
  padding:0;margin:0;
  border-bottom:1px solid #052b4c;
}
div.box h1 span {
 background: transparent url(images/box_topleft.gif) no-repeat top left;
 padding:10px 10px 5px;
}
div.box p {
  padding:10px;
  margin: 0;
  border: solid #052b4c;
  border-width: 0 1px;
}
-->
</style>
</head>
<body>
<div class="box">
<h1><span>Sidebar</span></h1>
<p>hello this is just a bunch of text blah balh blah hello this is just a bunch of text blah balh blah hello this is just a bunch of text blah balh blah hello this is just a bunch of text blah balh blah hello this is just a bunch of text blah balh blah
</p> 
</div>
    
</body>
</html>
This is just a quick example, but should make the concept clear. Can be improved. You even have one div free now (box), for another background image if you would like. There are many ways to do this, but the basics is always the same. See what elements you already have. And check if some images can be combined in one, like one side of the box + one corner.

In this example you would use a very wide image for the h1, and only a small corner image for the span.

Depending on the specific set of borders and corners you want, you could also throw away the span and use the div.box for one of the corners instead.

Posted: Thu Aug 17, 2006 3:37 pm
by Benjamin
Cool, I think that will work. Thank you.