Hey all, ok well i been to like 50 fourms asking for help. and im getting tiered now, all i want to do is to be able to code a layout like my friends site "http://drkhaven.com/fanreview,Vampire%20Hunter%20D:%20Bloodlust,3" in CSS, i can code it in HTML/Tables, but im having trouble with CSS.

i just need someone to explain HOW TO DO IT, and not say look at this tutorial from w3school, as i been there i read all that but im just not getting it, i know to make a layout with no tables you have to use margins, and padding.

anyways if someone could pls help me id appreciate it a hell of alot.

i basically want a Header, Left nav bar, Content box, Footer, in the center of the page, im a quite good grapgic designer, so i use images for my websites. not color codes. so if someone could help please

Thanks, Anna Smith.

Anna I wrote a blog post on how to create 2 column css layout which might help. If you click on the image it will open a new window and you can view the source and use it to your heart's content. It's not excactly what you're looking for since I didn't make the left column extend all the way to the footer, but it can probably get you started and then if you have questions about extending the left side just come back and ask.

If my layout doesn't work for you then another of out members here, ADAM Web Design, has created a variety of search engine friendly layouts. There's probably one there as well to get you started.

It's hard for someone to just tell you how to code the site since there are a variety of ways and each really means we'll have to code the site which can be a bit of work. See if my or any of Adam's layouts can get you a good start and then please come back for more specific questions we can more easily help with.

FYI,

Just a little info for you... About 1 year ago, I tried to do the same thing that you are talking about. I wanted to use CSS for my whole site. I really like the flexibility of it.

However, I just want to warn you that it can be a ton of work to learn how to do a whole layout in CSS. Since, I have found it a lot easier to just do the layout with tables and then use the CSS to decorate if you will.

Not to be a bummer for you but I just want you to know that I spent literally HOURS designing and redesigning my site in CSS. Everytime I got it looking the way I wanted I would open a different type of browser and boom, it was all messed up. It is very hard to get everything working properly.

It is one thing if you are trying to do a mouseover or some type of decoration with CSS and it doesn't work. BUT, when you do your layout in CSS and it messes up, you whole site is pretty much useless then.

Now, I know that it is possible but all I am saying is... If you don't know a lot of CSS then, try designing the layout with nested tables and use CSS to manipulate the looks of the site.

I purchased a book on HTML and CSS which is really good. It is great at explaining for beginners at CSS.

If you would like me to post the name of it I would be happy to.

I disagree with the above post...
As long as you properly understand how positioning works with CSS, it's very easy and logical to design a site using it - I'd say far easier than tables.
Get the Developer toolbar for IE (http://www.microsoft.com/downloads/d...displaylang=en) and have a look at how other sites use CSS Positioning.

i been looking at some sites, and i was able to make a layout, so i started to add images, but now the content goes out of the area its suppose to stay in, think you could help? http://www.lhost.info/hh121/

hellhound the reason you're seeing the content overflow the content are is because you've set a height of 300px on it. if you take out the height on the content div the footer will move back into place.

You will notice if you do that though that the blue background on the left side won't fill the space all the way to the footer. This one isn't going to be fixed with just a height change unless you want to set it on every page. There's an easy fix. Place the background image you're using on the navleft div and also aff it to the container div. technically ths will fill up everything with the blue, but since you have a white background set on the container div that's what will show through and cover up the blue behind it so it will look the way you want.

You could actually set both of the background colors without an image at all. You can set the colors directly.

By the way did that come from my layout? Looks similar. Just trying to find out if people find them useful since I've been thinking of coding a variety of basic layouts to help people get started.

Let me know if the above changes I mentioned worked or if you need the actualy code.

I also agree completely with Minaki. CSS isn't all that hard to work with. Positioning and floats can take a little bit of time to wrap your head around, but it's mostly just a different (and better) way of doing things. Many of the problems I see people have with it is from trying to structure the html of their css layout the same way they would structure it with a table layout.

As far as the cross browser issues there pretty minor for the most part. IE is much more compliant than people seem to think. Sure there are a few things it gets wrong and there are a few ways in which the browsers differ, but it's not hard at all to get a page looking just about the same in most browsers. It can be frustrating the first time the issue arises, but at this point I think I maybe have to add about 5 extra lines of code at most to get IE working like I want and looking the same as other browsers. It just takes a little practice and experience.

well basically i want to make websites like i use to in CSS, i use to use tables and absolute positioning, anyways could you give me the code to fix this please, im new in CSS. so this will help.

and the tutorial that got me to where i am now is http://css.maxdesign.com.au/floatuto...torial0801.htm The detail and how he has explained everything is so easy to understand no techo babal crap that newbies dont understand. its so simple. this is a 100% reccomended tutorial.

if you explained your tuts like this then id read them all the time , no offence to you ofc. just i 100% understand what you have to do by reading that tut, the way its set up, showing examples of it working etc, its great .

Ok the first thing you want to do is remove the height from the container div in the css. You currently have this:

#content
{
margin-left: 188px;
border-left: 0px solid black;
background-image:url('conbg.gif');
background-repeat: repeat-y;
padding: 5px;
height:300px;
max-width: 36em;
}

and instead want

#content
{
margin-left: 188px;
border-left: 0px solid black;
background-image:url('conbg.gif');
background-repeat: repeat-y;
padding: 5px;
max-width: 36em;
}

The next and last thing to do is add the same background image you have on the navleft div to the container div so it looks like

#container
{
width: 750px;
margin: auto;
margin-top: -8px;
background-color:#FFFFFF;
color:#000066;
border: 0px solid #8da6ac;
line-height: 130%;
background-image:url(navbg.gif);
}

That should be enough to get the page looking like you want. Just a matter of removing the height:300px from #content and adding background-image:url(navbg.gif); to #container.

Don't worry no offense taken about the tutorial. I'm actually glad to have feedback so I can understand better what people would like to see and what helps them learn. The site you got the tutorial from is a pretty good one too. I've come across it often and have learned a lot from it.

let me know if the code above helps and if you have more questions. I'm happy to help more if I can.

If you want to use a color instead of the image for the backgrounds in left side navigation in both the navleft div and now after the changes above in the container div you want to replace the line:

background-image:url(navbg.gif);

with

background-color:#8daaae;

in both divs. I think that's the right color. It should be close at the least.

By the way have you seen the tutorials at W3Schools. They're really good for beginners and I think easy to understand. They're pretty quick to get through and you get to test out what they're teaching right in the tutorial.

-Edit- okay, another problem now. when the nav bar is longer than the content, it shows the nav bg under the content. i uploaded it for a example. http://www.lhost.info/hh121/

yeah i have seen the w3school tutorials, they tell you the code, but not how to put it all togeather. its a ok site, but with most sites they tell you basic stuff. and dont tel you stuff your looking for, like how to make a liquid CSS website with images. etc. anyways im gonna try this code, and give you some feedback on it ty.

Yep I see. The way the page is structured now it will only work when the content side needs more height than the navigation side. I would think one side will generally always have the greater height.

If your navigation will be the one that always extends longer down the page you could set the background-image of the container div to be the one for the content area instead of the navleft area so instead of

#container {background-image:url(navbg.gif);}

you would use

#container {background-image:url(conbg.gif);}

You'll basically want to use the background image for the side that's shorter on the page. If one side isn't always longest then you could set the the background-image on the specific pages instead of or in addition to it being in the external stylesheet.

The hard part about telling you exactly what you need is that it depends on the design. There's isn't going to be a one layout fits all kind of thing. It really just comes with practice. With each site you do you'll have some problems, but in working out how to fix that problem you add a little more to your experience and hopefully the next site becomes a little easier to get like you want without the headaches.

It takes a little time, but the more you stick with it and the more sites you do the easier it becomes.

I'm sure if you do a search for 'liquid css layouts' or something similar you'll find some starting code.

why dont you write some would be nice, seen as you know what your doing.

I'm actually planning on writing a bunch of different layouts people could use and add them to my site so everyone could just grab the code. I just need to find the time to get to them. Thanks for the compliment.