Rounded corners - minimize markup

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Rounded corners - minimize markup

Post 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>
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Cool, I think that will work. Thank you.
Post Reply