7 replies [Last post]
Cook66
Offline
Regular
Last seen: 6 years 48 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

Hey

I have taken on myself the task of making a layout with a banner, three collums and a footer where the total size of the layout should not exceed the total size of the browser window.

The banner should be 100% wide. Below it will be where I am placing the three collums.

The first two collums should both be 200pixels wide and 100% high (-300px for the banner and footer), this also goes for the third collum, but this one should fill out the remaining width of the window.

On the bottom I want the footer to be places 100% wide and 100px high.

I have coded most of this the way it should be, but I am having problems with making the third collum fill out the remaining window space, which is 100% of the browser window -400pixels.

I have tried a bunch of stuff, but after spending hours and hours on this I thought it would be better to ask if someone had a simple solution to this, rather to have it result in me pulling my hair out...

Here is what I have so far:

HTML:

Test

Text

(The content divs are the problem area, I don't know is I need that body div, but it's there after some testing.)

CSS:
html,body {
height:100%;
width:100%;
margin:0;
padding:0;
}

#website {
position: relative;
overflow:hidden;
}
#banner {
position:relative;
top:0px;
left:0px;
width:100%;
height:200px;
background:url('images/banner-bg.jpg') repeat-x;
}

#side-banner {
position:relative;
width:200px;
height:100%;
margin-bottom:-300px;
background:#FFFFFF;
float:left;
}

#middle-banner {
position:relative;
width:200px;
height:100%;
margin-bottom:-300px;
background:#000000;
float:left;
}

#content-body {
position:relative;
height:100%;
margin-bottom:-300px;
float:left;
background:#FFFFFF;

}

#content {
position:relative;
height:100%;
background:#FFFFFF;
}

#footer {
position:relative;
float:left;
width:100%;
height:100px;
background:#000000;
}

Any help would be greatly appriciated, I've exhausted myself with this... I really don't understand why it can't be as simple as just typing: "width: 100% -400px;" How hard could that really be to implement?

I would also love it if you guys/gals can point out any errors I might have in the CSS/HTML code as I really shine when it comes to stupid mistakes. Tongue

Live test: http://www.cook66.com/test

Edit: I noticed that adding width:100%; margin-right:-400px; to the content-body div solves this in firefox. And then I noticed that nothing seems to work as it should in IE... Sad

When I remove the overflow:hidden from the website div it comes pretty aparent that I will have major problems when putting content into this website as I have probably just traded one problem for another. It looks perfect now since I don't have any content in here, but I'm afraid that when I reach the edge of the screen things will just go on into browser oblivion... Is there a solution to this?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 27 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

Well you have to start with

Well you have to start with the basics. Your page has no doctype declaration and it's html is not valid. There are not options, if you want to succeed with CSS. You must have a proper, standards triggering doctype declaration, and your html and CSS must be valid.

We have sticky messages all over the place pointing this out, and if you haven't read them you really have no excuse after 19 postings.

That said, there is a tool on this site that will create an html/css template for you.
Just click on the "Tools" tab and pick the first tool. Fill in the boxes and it will create the template code for you, just add content.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Cook66
Offline
Regular
Last seen: 6 years 48 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

Correct you are. I am just

Correct you are. I am just messing around trying to learn things on my own pace and probably doing a lot of mistakes along the way, but at least I'm enjoying myself.

I'll make sure to read up on the different posts here before proceeding with my nagging.

I made a baisic layout with your nice tool and built on it to get something I'm quite happy with so far, of course I'm still just experimenting and have nothing set in stone yet.

I'll post my progress here so you can take a look, I know there will probably be mistakes made here as well, but I will go over everything once I know more of what I'm doing.

Here is the CSS I currently have:
/* Main Stylesheet */
html, body {
margin:0;
padding:0;
background-color:#000000;
font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
font-size: 12px;
text-align: center;
}

td {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

th {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

form {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

input {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

textarea {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

select {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

ul {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-type: disc;
list-style-position: outside;
}

li {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

ol {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
list-style-type: upper-roman;
list-style-position: outside;
}

.small {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
}

.big {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 18px;
}

.bodystyle {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}

.box1 {
padding: 3px;
border-width: thin;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
}

.box2 {
border-width: 3px;
border-style: solid;
padding: 5px;
}

a:link {
color: #000000;
text-decoration:underline;
}

a:visited {
color: #5D5D5D;
}

a:hover {
text-decoration: none;
}

a:active {
color: #5D5D5D;
}

a.hidden {
color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
padding:0;
margin:0;
}

.img {
padding:0;
margin:3px;
border:1px solid #000000;}

/* Main Layout */
#header {
background:url('images/banner-bg.jpg') repeat-x;
position:relative;
height:200px;
background-color:#000000;
width:100%;
}

#leftcol {
height:auto;
width:10%;
float:left;
position:relative;
overflow:auto;
}

#twocols {
height:auto;
width:90%;
float:right;
position:relative;
}

#rightcol {
height:100%;
width:80%;
float:right;
position:relative;
overflow:hidden;
}

#maincol {
position:relative;
width:20%;
height:100%;
float:left;
background-color: #000000;
text-align:center;
margin: 0 auto;
z-index:1;
}

#footer {
width:100%;
height:50px;
padding-top:50px;
background-color:#000000;
clear:both;
font-size:10px;
color:#c1c1c1;
}

/* *Main Layout ENDS* */

/* Layout Details */

#banner {
margin-left:15px;
position:relative;
width:80%;
height:inherit;
float:left;
background:url('images/banner.jpg') no-repeat;
overflow:visible;
z-index:2;
}

.shadow-t {
position:relative;
width:100%;
height:22px;
float:left;
background:#FFFFFF url('images/shadow-t.jpg') repeat-x;
}

.shadow-b {
position:relative;
width:100%;
height:22px;
float:left;
background:#FFFFFF url('images/shadow-b.jpg') repeat-x;
background-position:bottom;
}

#corner-t-r {
height:22px;
width:22px;
float:right;
background:#FFFFFF url('images/corner-t-r.jpg') no-repeat;
}

#corner-b-r {
position:relative;
height:22px;
width:22px;
float:right;
background:#FFFFFF url('images/corner-b-r.jpg') no-repeat;
}

#corner-t-l {
position:relative;
height:22px;
width:22px;
float:left;
background:#FFFFFF url('images/corner-t-l.jpg') no-repeat;
}
#corner-b-l {
position:relative;
height:22px;
width:22px;
float:left;
background:#FFFFFF url('images/corner-b-l.jpg') no-repeat;
}

#con-left {
position:relative;
width:94%;
float:left;
padding-left:2%;
padding-right:4%;
background:#FFFFFF url('images/shadow-r.jpg') repeat-y;
background-position:right;
}

#con-mid {
position:relative;
width:90%;
float:left;
padding-left:5%;
padding-right:5%;
background:#000000;
}

#con-right {
position:relative;
width:96%;
float:left;
padding-left:2%;
padding-right:3%;
background:#FFFFFF url('images/shadow-l.jpg') repeat-y;
background-position:left;

}

#con-main {
position:relative;
width:78%;
float:left;
padding-left:1%;
padding-right:1%;

}

#con-iframe {
position:relative;
width:18%;
height:inherit;
float:left;
padding-left:1%;
padding-right:1%;
border-left: 1px #c1c1c1;
background:#FFFFFF;

}

/* *Content Details ENDS* */

/* Iframe Styles */

#iframe-wrapper {
position:relative;
width:100%;
height:100%;
float:left;
background:#FFFFFF;
}

/* *iframe Styles ENDS* */

/* IE Stuff */
#iewarning {
width:100%;
background:#FFFFE1;
padding-bottom:2px;

}

/* *** Float containers fix *** */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/*printer styles*/
@media print{
/*hide the left column when printing*/
#leftcol {display:none;}

/*hide the middle column when printing*/
#maincol {display:none;}
#twocols, #rightcol {width:100%; float:none;}
}

And the html

Cook66.com - Home



Warning: It appears you are using Internet Explorer.
Please upgrade to Firefox. For further information please
read this.














Test Image
Headline 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cook66.com



Nothing here yet... iframe sizing sucks by the way.













Lorem ipsum dolor sit amet, consectetuer adipiscing elit.







What I would like comments on though is how you guys like the design. I've updated the http://www.cook66.com/test page with the current stuff.

I moved away from the pixel width as I managed to get about the same effect I wanted with a specific pixel width with percentage.

I'm having some problems with IE though. If I reduce the browser size it will eventually push the left collum down below the two others and my banner picture doesnt work either. (probably because of the amature way I put it in.)

edit: fixed errors.

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 33 weeks 9 hours ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

^Hi, the layout looks good

^Hi, the layout looks good so far but I'd suggest you widen those two small columns (and make the main column just a bit narrower). Or at least keep the middle column as it is but widen the left-most column as it looks very cramped. When you remove the Lorem Ipsum from that column and put in actual information, that may be very hard to read. Besides, at 800x600, I get a horizontal scrollbar for it while at 1600x1200, it looks really weird.

But yeah, I like the overall look. Cheers and good luck! Smile

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

Cook66
Offline
Regular
Last seen: 6 years 48 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

Thanks for the input. I am

Thanks for the input.

I am still experimenting with the differen't sizes and will of course do more testing before I settle on anything. I'll also make sure there wont be any horizontal scrolling, that would look bad.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 27 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

Cook66 wrote:What I would

Cook66 wrote:
What I would like comments on though is how you guys like the design. I've updated the http://www.cook66.com/test page with the current stuff.

My reaction to the basic design is that there is far too much decoration and not enough actual content. People come to web sites for content, not for pretty looks. Ideally of course, we can have both, but in your case you've gone way too far, IMO. Most of your screen should be actual content not decoration, and I include menus when I say "decoration".

Quote:

I'm having some problems with IE though.

Forget about IE until you have the site basically done and working fine in compliant browsers. Design for compliant browsers and fix things up for IE when done. It isn't hard.

I think your markup is way too complicated with far too many DIVs and nested elements. I suggest you get some actual content, mark that content up semantically, with only a very few DIVs and SPANS where you cannot avoid them. Only when you have done that should you worry about styling.

People go to a website for content, not because is may look cool. Your styling should make the content as available as possible or people will not come back. Remember that another web site than yours is available to all your visitors with a simple mouse click.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 27 weeks 2 days ago
Victoria British Columbia
Timezone: GMT-7
Joined: 2005-12-14
Posts: 3570
Points: 675

And if you don't mind I'll

And if you don't mind I'll just add that your design makes two other major mistakes. You are setting the font size in pixels and setting it way too small for older eyes. And you are using Verdana.

Don't use Verdana because it is unusually large for it's specified size. Consequently on systems without it (and there are lots of them out there) the text will appear a whole lot smaller and harder to read.

12px is too small for many older folks to read. I don't know if your site will be commercial but, if so, why would you drive old people away? Old people tend to have quite a lot of money!

Read the "Webmatters" page on font sizing for a fuller argument than I have time to post here.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Cook66
Offline
Regular
Last seen: 6 years 48 weeks ago
Joined: 2007-06-10
Posts: 22
Points: 0

Thanks for the input there.

Thanks for the input there. I'll check out that article about the text size and font.

And yes, I know that good looks wont do me any favors in the visitor department without any actual content, but I'm not in a rush and I do have a few things backed up that I will add once everything is ready, I wont be putting anything into live use before I have something worth reading about, but I first and foremost want to get a working website before I start expanding on content without any place to put it to use.

When I have a working template the way I want it I will shift my focus to IE compatability and then start adding what I've allready got to the site as well as create more content.

As for my design, I realise that it hasn't been done the best way. I will try to find a way to make it depend more on CSS and less on div's and images, but for now it works well enough for me to focus on getting the basics down.

When everything is done I want there to be as little html as possible, with div's only where it's necessary, but my current priority is to get everything to look the way I want it and then focus on making it more efficient.

My goal with this project isn't to make money or fans, but to learn CSS, html and general webdesign. And when I have all this down I can shift my focus to actual content creation and then eventually publish the website.

Thanks again for the help I've received so far, I'll update you on my progress is I go along.