PDA

View Full Version : Columns


blimp
02-17-2010, 08:33 PM
I'm trying to create a column layout within a DIV CONTAINER.

Example:
http://img684.imageshack.us/img684/4451/26181644.jpg

with each column having a set width and height.

Would do it by setting a container size of eg: w:800 x h:600, then set the position of the columns using margins?

Or can it be done by clear/floats?

domedia
02-17-2010, 10:24 PM
Float each column to the left and set width ( and height if you need to) and you're good :)

Designing in CSS is a breeze! :)

blimp
02-17-2010, 10:28 PM
Thannk's DOMEDIA....

That Worked a treat :-)

blimp
02-17-2010, 10:47 PM
domedia,

Not sure what I'm doing wrong here.

I've placed all my css coding in a file call style.css and linked it to the page I'm working on:

<link rel="stylesheet" type="text/css" href="style.css"/>

In the css I added a body color:

body {background-color:#000
}

But when I do a live preview, the body is still white.

What am I doing wrong?

edbr
02-17-2010, 11:04 PM
refresh your browser maybe

blimp
02-17-2010, 11:09 PM
nope that didn't work edbr.

here is the whole code:

html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PORTFOLIO</title>

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>
<body>
<div id="wrapper">
<div id="photodomain_header"></div>
<div id="home_button"></div>
<div id="photodomain_fill5"></div>
<div id="weddings_button"></div>
<div id="photodomain_splitter_01"></div>
<div id="urban_landscape_button"></div>
<div id="photodomain_splitter_02"></div>
<div id="music_button"></div>
<div id="photodomain_splitter_03"></div>
<div id="shape_form_button"></div>
<div id="photodomain_splitter_04"></div>
<div id="illumination_button"></div>
<div id="photodomain_splitter_05"></div>
<div id="people_events_button"></div>
<div id="photodomain_fill_01"></div>
<div id="photodomain_fill_02"></div>
<div id="slideshow_box"></div>
<div id="photodomain_fill_03"></div>
<div id="photodomain_fill_04"></div>
</div>
</body>
</html>


and the css for it
<style type="text/css">
body {background-color:#000
}
#wrapper {
height: 768px;
width: 1024px;
background-color: #000;
margin-right: auto;
margin-left: auto;
}
#photodomain_header {
height: 86px;
width: 946px;
background-image: url(images/photodomain_header.jpg);
float: left;
}
#home_button {
height: 86px;
width: 78px;
background-image: url(images/home_button.jpg);
float: left;
}
#photodomain_fill5 {
height: 66px;
width: 1024px;
background-image: url(images/photodomain_fill5.jpg);
position: relative;
clear: both;
}
#weddings_button {
height: 24px;
width: 166px;
float: left;
background-image: url(images/weddings_button.jpg);
}
#photodomain_splitter_01 {
height: 24px;
width: 2px;
background-image: url(images/photodomain_splitter01.jpg);
float: left;
}
#urban_landscape_button {
height: 24px;
width: 208px;
background-image: url(images/urban_landscape_button.jpg);
float: left;
}
#photodomain_splitter_02 {
height: 24px;
width: 2px;
background-image: url(images/photodomain_splitter01.jpg);
float: left;
}
#music_button {
height: 24px;
width: 87px;
background-image: url(images/music_button.jpg);
float: left;
}
#photodomain_splitter_03 {
height: 24px;
width: 2px;
background-image: url(images/photodomain_splitter01.jpg);
float: left;
}
#shape_form_button {
height: 24px;
width: 156px;
background-image: url(images/shape_form_button.jpg);
float: left;
}
#photodomain_splitter_04 {
height: 24px;
width: 2px;
background-image: url(images/photodomain_splitter01.jpg);
float: left;
}
#illumination_button {
height: 24px;
width: 150px;
background-image: url(images/illumination_button.jpg);
float: left;
}
#photodomain_splitter_05 {
height: 24px;
width: 2px;
background-image: url(images/photodomain_splitter01.jpg);
float: left;
}
#people_events_button {
height: 24px;
width: 247px;
background-image: url(images/people_events_button.jpg);
float: left;
}
#photodomain_fill_01 {
height: 32px;
width: 1024px;
background-image: url(images/photodomain_fill1.jpg);
float: left;
}
#photodomain_fill_02 {
height: 533px;
width: 112px;
background-image: url(images/photodomain_fill2.jpg);
float: left;
}
#slideshow_box {
height: 533px;
width: 800px;
float: left;
}
#photodomain_fill_03 {
height: 533px;
width: 112px;
background-image: url(images/photodomain_fill3.jpg);
float: left;
}
#photodomain_fill_04 {
height: 27px;
width: 1024px;
background-image: url(images/photodomain_fill4.jpg);
float: left;
}
</style>

edbr
02-17-2010, 11:19 PM
you did upload the css sheet? just checking

blimp
02-17-2010, 11:22 PM
I haven't uploaded it to a live server yet, i'm working offline.

If I add the same body code in the html document, it works just fine, but not in the style.css file.

I'll delete the style.css and create a new one to see what happens.

gentleone
02-18-2010, 09:08 AM
at the top of your stylesheet you have a copy/paste error: <style type="text/css"> and at the bottom </styles>

Those shouldn't be in an external stylesheet... remove both, because that's causing the problem!

tux
02-18-2010, 10:51 AM
Also, there is a semi-colon missing from the body tag style.

You have...

body {background-color:#000
}

should be....

body {background-color:#000;
}

gentleone
02-18-2010, 11:45 AM
Also, there is a semi-colon missing from the body tag style.

You have...

body {background-color:#000
}

should be....

body {background-color:#000;
}

The semi-colon is in this case not necessary Tux, because its the only property on this rule. Would it have been followed by another property, then you should use the semi-colon to separate them.

tux
02-18-2010, 06:20 PM
Point taken. I tested it before I posted but did have padding and margins in the style too.