Hey

 

I am total newbie in web design.

I am starting to make my first website.

 

I have made one div tag and centered it in the middle of the page.

Now I would like to add a thicker edges so that the website looks more dimensional.

 

Something like in this one:

http://shortener3.info/example.png

 

How should I create these edges?

Edited January 23, 201115 yr by raimis101

Any div can have a border of any thickness.

 

If you have a div for all your page content called wrap, code some borders:-

 

CSS in stylesheet or head section style tags

#wrap { border: 15px solid #bbb; } 

or if you want different sides with different borders:-

#wrap { border-top: 15px solid #bbb; 
border-right: 55px solid #bbb;
border-bottom: 25px solid #bbb;
border-left: 15px solid #bbb;
}

 

HTML

<div id="wrap">
All page code here
</div>

Edited January 23, 201115 yr by Wickham

Hey Wickham

 

I did what you said.

Made the boarders 2px big.

 

It worked, but now I would like the colors blend in with the other colors around.

 

When I look at the border under the zoom I can see that colors are blending in for the first border.

http://shortener3.info/boarders.png

 

I would like the colors to blend in for my borders too.

 

How is it possible?

Edited January 23, 201115 yr by raimis101

You could be talking about shadow images instead of borders. This can be difficult for beginners. You have to make your gradient or shadow images like the ones in the link and repeat them around every side of a div for divs with flexible size, or create one very big image with fixed width and height that has the shadow all the way round the outside and white in the middle.

 

Some examples are here:-

http://www.wickham43.net/specialeffects.php#shadows

items 12 and 13 show the general principle.

 

Item 13c box-shadow is the new CSS3 easy way to do it but many browsers (like IE6, 7 and 8 ) can't process this new code yet.

Edited January 23, 201115 yr by Wickham

Hey

 

Your examples were very useful. After a lot of work I finally managed to put everything together.

Thanks