Simple css question - rounded corners

How do I change from 3 column layout to a 2 column layout when I click a link on my menu?

EG - homepage (index.html) is a 3 col layout
link1.html I want to be a 2 col layout

Is the only way something like:

index.html
#left
{width: 25%;}
#content
{width: 50%;}
#right
{width: 25%;}

link1.html
#left1
{width: 75%;}
#right1
{width: 25%}

???????????

Also if I have 4 rounded corners (gif's made) how to position them into the corners of a div?

Thanks,
Leo

 

The only ways to do rounded corners are 1) tables and 2) javascript library

I opted for #1, instead of a 40k js library. Click the link in my sig for an example.

 

There are lots of javascripts available on net..
Also you can find good tutorials on borders.

 

I did and all I got was Cannabis seeds!

There is a way of doing cornered div WITHOUT tables, its about positioning the gifs but I'm not sure how

 

Hey le007, I saw your question here and at CSS Creator.

My CSS way for doing rounded corners is via background images. I've attached the two images that I use, for reference. Start with a div that's got box_bottom.png as the background image. Inside that div, put your content, with an H1 at the top. Put goomba_box.png as the bg image on that H1. Specify widths on the out elements, and padding on the inner elements. The nice thing about the outrageously tall box_bottom image is that it expands as more content is put in the div.

You'll need to add a couple more elements (probably divs) if you want to use 4 images instead of 2. Each element can only have one background image.

 

You can and should do rounded corners with 100% css. Basically emulate how you could do it with a table and convert it to divs.

<div class = "header"></div>
<div class = "body">content</div>
<div class = "footer"></div>

In css set the height, width and background for the header and footer and you are all set. You will probably have to adjust your gifs a bit but regardless this'll work with minimal effort.

 

Hey Katie how are you?
Thanks for that - I'll give it a go!

 

Yeah that works for fixed width layouts at least. But will it work for fluid width ones?

 

Has anyone any actual code example pls?

 

Le007,

I didn't want to shill too much, but you can see the box I made with those images on my blog at http://www.peh2.com/code.php#equal_columns.

Here's the CSS that gets the job done:

.box2
  { font-size: 100%;
    font-family: Verdana;
    color: #000000;
    background: url(images/code_imgs/box_bottom.png) transparent no-repeat bottom left;
    margin: 0;
	width: 206px;
	float: left;
    padding-bottom: 8px;
	min-height: 12em;
    }
.box2 h1.goomba, .box2 h1.starman
  { background: url(images/code_imgs/goomba_box.png) #693D4C no-repeat top left;
    height: 62px;
    margin: 0;
    padding: 0;
    color: #000000;
    border: none;
    }
.box2 h1.starman 
  {	background-image: url(images/code_imgs/starman_box.png);
	}
.box2 p
  { padding: 0 15px;
    margin: 0 0 10px 0;
    background-color: transparent;
    }

Code (markup):

 

Hey Katie, thanks for that!!! I'll give it a go!!! )

 

Use the css for rounded borders or js

 

You can get a fluid box with rounded corners using css only. All you need to do is relative position the div and absolute position elements inside it (here 3 spans).

The 2 left corners (top left - tl - ; and bottom left - bl - are small square images of 17px side ; top right is a 400 wide by 17px high img) the last corner (bottom right - br) is a big image of 400px side.

Here's the code:

css:

#box{ position:relative; padding:17px; width:90%; margin:1em auto; background-position:100% 100%; background-repeat:no-repeat; }

/* ROUNDED CORNERS */
#box span{ position:absolute; background-repeat:no-repeat; }
.tl{ top:0; left:0; width:17px; height:17px; background-position:0 0; z-index:3; }
.tr{ top:0; right:0; width:100%; height:17px; background-position:100% 0; z-index:2; }
.bl{ bottom:0; left:0; width:17px; height:100%; background-position:0 100%; z-index:1; }

/* green corner images */
.gtl{background-image:url("img/gtl.jpg") }
.gtr{background-image:url("img/gtr.jpg") }
.gbl{background-image:url("img/gbl.jpg") }
#box{ background-image:url("img/gbr.jpg"); background-color:#9dcc55; }


html:

<div id="box">
<span class="gtl tl"></span><span class="gtr tr"></span>
<h2>Services</h2>
<ul>
<li><a href="">#</a></li>
<li><a href="">#</a></li>
</ul>
<span class="gbl bl"></span>
</div>

live example: http://www.webdesign-fr.com/box.php

 

BTW it's been tested and worked in ie7, 6, 5.5 (box less wide), ffox2, opera 9 and netscape 8.3 - if anyone care to try another browser

 

You can do it with some extra containers via CSS, you can do it without extra containers via javascript, or you can be a retard and use a table. Mind you, I am NOT saying don't use tables - just don't use tables for stupid ****

It can even be done without images
http://battletech.hopto.org/html_tutorials/rounded_css_borders/

Some examples of other ways of doing it - the directories these are in are unlocked so you can easily look at the bits and pieces.

multiple corners using only two images:
http://battletech.hopto.org/html_tutorials/fourcorners/template.html

borders AND shadows added via javascript using only one image. (well, there are two images for the whole page, the bottom example uses a different image than the first three)
http://battletech.hopto.org/html_tutorials/borderimages_javascripted/template.html

Also, one interested in corners should check out Spanky Corners over on SitePoint - I don't use it myself because it requires four handshakes for the images instead of the one or two my approach uses, but it should work well enough for most people interested in simple corners applied via CSS.

http://tools.sitepoint.com/spanky/index.php

 

That's an excellent resource!

 

Now thats what I was looking for!!! Thanks everyone! le_gber for code and deathshadow for links!