can i do this with css.....?

[dumdumsareyum]

I'm not really sure how to describe what I want to do, so i'll give it a shot.

I've seen a lot of web pages that have a section of content contained in a rectangle (usually with rounded corners, usually with gradients at the edge of the rectangle).

Viewing the page source for these pages, they set them up with a table, put a background image on the main content section that's one pixel wide of the gradient that they can tile over the image, and then use a table data cell to put the rounded edge at the end of whatever size rectangle they have. (hope that made sense) 

here's an example of a webpage that does this: http://www.coolhomepages.com/

Is there a better way to do that using CSS or is a table the best option for this?

[TheFilmGod]

It's actually easier to do this with css. Tables are only good to use for "TABULAR DATA" no exceptions. It's a bit absurd to use a table to only create a visual appeal. Remember content always outweighs presentation. 

 

I need you to specify what type of "rounded" rectangle you want. A fluid one? A static size one? One that can extend as far as content goes? Explain...explain!

[dumdumsareyum]

I'm mostly interested in expandable size ones....probably a fixed width and then it expands to fit the size of the content vertically, but i'm sure i would like to know how to do a horizontal one too      Would you still do it in pieces but float the pieces to either side of a div(for the horizontal one)? haven't done much w/ css (i was happy when i actually got my three column layout-w/footer to show up right  ) so i'm just looking for some ideas of different approaches.

[dbrimlow]

The techniques for tiling small graphics to emulate borders is by making them background images for combined (nested) elements.

 

The best technique for getting horizontal rounded corners starts with the "sliding-doors" technique.

 

Once you get your head around the concept, it works for everything. 100% liquid/elastic and fluid.

 

http://www.alistapart.com/articles/slidingdoors/

 

When used in combination with a small gif for vertical tiling (repeat-y), it can appear like one fluid box - resizable both ways and elastic as well (when text is browser resized).

[dumdumsareyum]

Thanks!  This looks like a great article! Exactly what I was hoping to find.....now to understand it all!  Awesome!

[dumdumsareyum]

hey thanks I did the sliding doors example and now i'm trying do a vertical box with rounded edges that hold my navigation buttons. I kind've have what i'm looking for in firefox, but ie is all screwed up   

here's the html i'm using:

<div class="nav-top" id="navigation">
     <ul class="nav-middle">
        <li>
          <a  href="index.php" title="Home">Home</a></li>
     <li>
      <a  href="search.php" title="Search">Search<br />Plans</a></li>
   	 <li>
   	  <a href="questions.php" title="Frequently Asked Questions">FAQ</a></li>
   	 <li>
   	  <a  href="about.php" title="About Us">About Us</a></li>
   	 <li>
   	  <a href="contact.php" title="Contact Information">Contact<br /> Us</a></li>
   	 <li>
   	  <a  href="myAccount.php" title="Login">My<br />Account</a></li>
         <li>
   	  <a href="ViewCart.php" title="View Cart">View<br />Cart</a></li>
  </ul>
   </div> 

 

and the css:

#navigation {
   float:       left;
   margin: 	0px;
   width:       161px;
   padding-left: 0px;
   padding-right: 0px;
   padding-top:12px;
}

.nav-top
{
width: 100%;
background: url("images/nav-top.png") no-repeat top;
}
.nav-middle
{
padding-top: 5px;
width: 100%;
background: url("images/nav-middle.png") repeat-y;
}


#navigation a {
display: block;
padding-top: 10px;
font-weight:	bold;
text-decoration: none;
background-image:  url(images/button.png);
height:     35px;
width:      90px;
line-height: .98em;
background-repeat: no-repeat;
background-position: center;
}

#navigation ul {
list-style: none;
list-style-position: inside;
}

#navigation li {
text-align: center;
}

 

firefox displays it correctly with my fixed width top image sitting on aligned exactly on top of the list(whose background image is the same width), however, if i add padding to either side of the #navigation, it gets shifted from the background of the list. In ie6  the list background sits in front of the image that's used for the top image in the #navigation area and is shifted from it no matter what i do. (Hope that made some kind of sense). Also, the transparent corners of my pngs are transparent in firefox but not IE. What gives? 

[Wuhtzu]

If you are looking for boxes with rounded corners look at this article:

 

http://kalsey.com/2003/07/rounded_corners_in_css/

 

I've used the quite a few times my self and I think they are great

[dbrimlow]

First, IE6 does not support transparent pngs ... only gifs.

 

Second, your navigation stability depends upon a lot of other factors (not only for IE):

 

1. what is your default font-size (fixed or scalable),

2. what are the default margins/paddings for your lists (ul, ol, dl and li), if you don't designate the margins/paddings for any list you are leaving it up to the browser to do it automatically. That means it will most likely look different from browser to browser.

 

To see why you are having trouble, remove the background images and designate a background color (like light background-color:#FFFFCC) for #navigation.

 

Now look at it in FF and IE.

 

Ie6 is using its auto-margin/padding for the ul.

 

Also, when using "scalable" font sizing it is advisable to use scalable margins/paddings for your containers as well.

 

And did you clear your float?