View Full Version : Simple CSS layout needed please help

11-18-2007, 03:08 PM
Having never used CSS I am struggling to create a desired layout for a website I'm working on. I basically want to layout my page similarly to this version that I've managed to do using frames:


The website is for a friend from Namibia who is setting up this non profit organisation to help young talented people. I am therefore doing this free of charge due to it being a worthy cause. I am asking if anyone would be able to assist me by laying out the following five elements so that I can progress with the rest of the website.

Main image http://www.ntatalentworldwide.com/background%20image.html

Right image http://www.ntatalentworldwide.com/sidebar%20image.html

Footer http://www.ntatalentworldwide.com/footer%20image.html

Main text http://www.ntatalentworldwide.com/text%20block%20image.html

Slogan http://www.ntatalentworldwide.com/slogan%20image.html

Unfortunately I can not offer any money but I will be more than happy to link to a website or mention your name in return for your help.

I am sure this would be a relatively easy task for many of the members of this site who are competent with DW and CSS.

Many thanks!

d a v e
11-18-2007, 04:01 PM
surely you're not going to do it all as images? even the text?

11-18-2007, 04:09 PM
No I will be replacing the main text image with actual text. I just thought it would be easier to provide and image as an indication of the design at this stage. I will also be adding various other elements, mainly in the right column, such as navigation. I just need help creating the basic structure from which I can develop.

d a v e
11-19-2007, 06:20 AM
ah i see ;)

11-20-2007, 10:59 PM
Is there anyone who can help?

11-21-2007, 12:55 AM
I will have a loook at it later if you have some time.

11-21-2007, 06:34 AM

your a very helpful guy

an asset to the DWC

11-21-2007, 07:06 AM
Thanks edbr it is much appreciated! I've been stuck on this for ages now so in your own time. Many thanks!

11-21-2007, 08:37 AM
here is a very simple page to get you started, i have added a partly transparent background image. see how you go with it

11-21-2007, 11:25 PM
JBD, do you have access to the original images used to create that huge background with the banner and map? If so, the coding would be easier if the images were separate. A more compressed background image could also be used without hurting the quality of the map or logo.

11-23-2007, 07:09 PM
Thanks edbr! did you have any luck with laying out the page as in the example done with frames? I understand it is quite tricky to get the footer to work properly.

Yeah Cary I designed the logo/banner/map background image based on what the client already had so I have all the elements separate. What would be the best way to go about it?

11-24-2007, 03:50 AM
re the footer did you mean that it stays in the same place ? this is done with attribute fived. I kinda assunmed you wouldnt want the scrolling with the text. Do you?

11-24-2007, 06:38 PM
Sure, ideally I'd like to avoid any scrolling though with smaller screens/browser windows this will be unavoidable. I do want the footer to be visibly at the bottom of the browser window at all times as well.

11-24-2007, 11:40 PM
I tried this, but I couldn't test the scrolling with IE7, so I don't know if the footer stays at the bottom in that browser. Another issue with all the IE browsers is the scrollbar at the right when pages are longer than the screen.

The background image goes under the scrollbar and messes up the alignment of right column elements with the background coloring I added to Homepage2.jpg. I don't know how to solve this problem as long as the footer can't move.

Test page (http://www.solsector.com/cary/NTA/)

11-25-2007, 10:24 PM
Another issue with all the IE browsers is the scrollbar at the right when pages are longer than the screen...

I tried something else here which may have fixed the problem, at least for IE7. TotalValidator.com is still showing a problem with IE 6 at 1280x1024, but I can't verify on my computer.

In answer to your earlier question, JBD, splitting up the elements used to make the top banner would allow you to use image replacement such as I used in the test page. It would allow the background to remain fixed while the page scrolls so the background won't vanish for pages longer than the background. It also allows using compression on the background which would be okay for the photo, but would ruin the logo and such.

The map image can also remain centered in the banner regardless of window size. It looks pretty ugly in my test page, but a transparent map image would work well.

Also, I had to modify the Homepage2.jpg image so it would provide the background for the sidebar for short pages.

11-27-2007, 09:33 PM
Hey Cary that's looking really good so far. I see what you have done by breaking up the images and so I'll try this with the originals and then use your template and try and recreate it. What is the best way to compress the background image?

Also as you have made the map centralize (which I like) I'm thinking the main body of text looks wrong and should perhaps be aligned with the map and slogan - is this possible?

I'm going to take a closer look at everything you've done asap but I must say it's looking very promising so far.

Thanks a lot for your help - it's very much appreciated!

11-28-2007, 01:07 AM
What is the best way to compress the background image?

Just use regular jpg compression. You should be able to get down to 200k or less without noticeable degradation.

Also as you have made the map centralize (which I like) I'm thinking the main body of text looks wrong and should perhaps be aligned with the map and slogan - is this possible?

I'm going to have to think about this... It would be easy to do if the min-width was 940px, but as it is, the min-width of the page is 770px, which works well for an 800px wide browser window. So I'll get back to you on this.

By the way, IE6 doesn't understand min-width, max-width, min-height or max-height, so I used this expression code (http://www.sitepoint.com/forums/showpost.php?p=2041241&postcount=25) in the conditional in the html.

Thanks a lot for your help - it's very much appreciated!

You're welcome.:)

11-30-2007, 04:51 AM
Also as you have made the map centralize (which I like) I'm thinking the main body of text looks wrong and should perhaps be aligned with the map and slogan - is this possible?

I played around with this, but I'm afraid I couldn't figure out a way to do it.

12-01-2007, 05:14 PM
Well I think I've managed to reproduce what you've done.


By using a transparent image the green stripe now shows behind the map - but this isn't a problem. I also aligned it to the main body of text though I couldn't do the same for the bottom slogan - but again I think it still looks ok.

Tried adding a navigation bar which seems to work (the links will come later).

So basically I think it all works really well!

Thanks a lot for your help - if you'd like me to add a link on the site when it's finished just let me know.


12-01-2007, 10:22 PM
Looks pretty good. Now that you've got your menu in there I would suggest changing this conditional styling in the the html to a smaller value, like 4px.

#side-bar {
right: 4px;

Also, with the now transparent map image I was able to try to see how to fix it so it works with IE6 which doesn't support transparent pngs.

What I came up with requires a few changes. None of the fixes I came across were working with background pngs with any position other than 0 0, so the map image needs to be either placed into an img tag, or applied as the background of an absolutely positioned div. The following changes use an img tag.

The modified #header div:
<div id="header">
<img id="worldmap" src="Images/map.png" width="575" height="268" alt=""><!-- placed first so it's behind the headings, though fiddling with z-indexes may work if you want it to come after the headings -->
<h1><span></span>NTA Talent Worldwide</h1>
<h2><span></span>Nghidulwalunghi Talent Academy</h2>
</div><!-- end #header -->

The modified CSS:
#header {
height: 275px;
#worldmap {
position: absolute;
height: 268px;
width: 575px;
top: 5px;
left: 50%; /* aligns left edge of image with middle of page */
margin-left: -287px; /* offset half the image width to center image at 50% */

Finally, grab the pngfix.js file and conditional code from this page (http://homepage.ntlworld.com/bobosola/pnghowto.htm).

12-03-2007, 09:52 PM
Thanks again for your continued help. I hope I've managed to do what you've suggested correctly?

I also decided to make the top left logo a transparent png so that on smaller browser windows the map will be partially visible behind it. Do I need to adjust the code for this new png?

Also how do I change the colour of the main body of text as I cannot seem to find where this is stated in either the html or css?


12-03-2007, 11:04 PM
"#main p" is correct for the main text, but you used "colour" instead of "color".

You still need to remove the background styling from #header because the original map image is still visible in IE6.

You don't need to delete the text content from h1. You can just use a text-indent of -9999px which will remove it safely from view of anyone except people with styling turned off or those using text browsers or screen readers and such.

#header h1 {
height: 123px;
width: 220px;
position: relative;
margin: 16px 0 0 20px;
padding: 0;
float: left;
overflow: hidden;
text-indent: -9999px;

The new logo image isn't transparent in IE6, but you can fix that by adding this selector and styling after your "#header h1 span" selector. The "* html" means only IE6 or less will see it.

* html #header h1 span {
background: none;/*Remove background*/
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='Images/logo.png');

12-03-2007, 11:22 PM
A couple other things, make sure you replace that homepage2 image before you go live. It does need the colored stripe down the right side, but you may not have noticed the mess I made of the sky when I was removing the head images from it.

Also, I couldn't get a clean slice for the banner.gif image which is why it looks like there's a scratch running its length.