Corner Image

GeneticOpera

GeneticOpera

New Member
I was looking at a few CSS webpages at the CSS Zen Garden and noticed a few of them have an image that contains the header and also drops into the left-hand nav bar. I know how to do this using tables, but looked at the code to some of these sites and they don't have tables.

I'm trying to make a website for a charity called Beanies4Babies- the current website was done by someone who put a lot of effort in and tried her best, but it really needs some modernization and better colors and graphics. (www.beanies4babies.org)

I have a photoshop picture of what I'm trying to do, and know how to do everything for it except the corner image. Please help. I can post the current CSS if that'll help.

Sorry, I'm new.

Edit: More info
Here is a picture of what I'm going for- I know the site's not the best but I know how to do all but the cornet image (still working on the circular text box as well, but I've found a few tutorials).
http://img204.imageshack.us/img204/2355/beabies4babieswebsitede.png
 
Last edited:
leroy30

leroy30

New Member
Hey there,

Tables are an old standard which has been replaced by DIV's.
Divs are dynamic layers that make arranging layouts really easy!

edit: well I mean they have been replaced as a layout tool. Tables used to be used for layout but now divs are used for layout and tables are pretty much only used as data tables.

Structure your webpage tidily with divs like this...

<body>

<!-- Header Starts here -->
<div class="header">
</div>

<!-- Content Starts here -->
<div class="content">
</div>

<!-- Footer Starts here -->
<div class="footer">
</div>

</body>

Then say you had an image that you wanted as part of the header but it is a corner piece that goes past the header and overlaps the content then you'd set the "header" class to have position:relative which sets the zero-points for child objects to this container and then set the style of the image to "position:absolute;bottom:-100px;left:0px;" which will basically say place this image at the absolute coordinates within this header at left = 0 pixels and 100px past the bottom of the div, wherever that ends.

Dunno if that made heaps of sense or not. If your image gets obscurred by the content then place it just before the closing content div and following the instructions above - change bottom to top:-100px or similar.

Divs are the way to go.

Good luck!
 
Last edited:
GeneticOpera

GeneticOpera

New Member
I tried out your suggestion, Leroy30, and this is my new CSS code for the top and corner of the webpages:

#corner { position: absolute;
top: 6px;
left: 10.2%;
}
#header { background-color: #A898D0;
margin: 0 0 0 0;
height: 175px;
width: 100%
}
#headerimg { position: absolute;
top:10px;
left:31%;
}
img { border:0;
}
It works perfectly! THANK YOU!
 
Last edited:
You must log in or register to reply here.
Top