PDA

View Full Version : Cant get boxes to align!



Cliffo
Mar 30th, 2010, 07:28 PM
[EDIT] Never mind i got it, thanks for showing me css, i can tell this is going to be a breeze once i get it down!


Okay i am having a similar problem with css lol, here is my css;


/*Layout*/

body {
margin: 0px 0 0px 0;
padding: 0;
font: 10px Verdana, Arial, Tahoma, Helvetica, sans-serif;
color: #000000;
}
div#container {
width: 960px;
margin: 0 auto;
padding: 0;
text-align: left;
}
div#head {
width: 960px;
height: 208px;
}
div#head .h1 {
width: 35px;
height:inherit;
background:url(images/header_01.gif);
float:left;
}
div#head .h2 {
margin-left: 35px;
width: 220px;
height:inherit;
background-image:url(images/header_02.gif);
}
div#head .h3 {
margin-left: 255px;
width: 705px;
height:inherit;
background-image:url(images/header_03.gif);

and my html;


<body>
<div id="container">

<div id="head">
<div class="h1"></div>
<div class="h2"></div>
<div class="h3"></div>
</div>

</div>
</body>

that is as far as i got. I can not get all three images to line up next to each other, they want to go below the previous image. I can get the first two inline by adding float:left; but nothing seems to get the third image inline. What is the trick here i missed in the guides?

Since we are here, is doing 3+ columns tricky in css, and if so should i be trying to cut my templates to only have two images side by side and just use some uber padding to space content?

Is this guide the best way to get three columns? Is any more than three columns possible?
http://nopeople.com/CSS/simple3column/index.html#html

I am lost....

effpeetee
Mar 30th, 2010, 07:50 PM
Tables should not be used to position images. CSS is the way to go.

see here. (http://www.hotdesign.com/seybold/)

and here. (http://www.mardiros.net/liquid-css-layouts.html)

Frank

Excavator
Mar 30th, 2010, 07:56 PM
Hello Cliffo,
effpeetee is exactly right. Tables are for tabular data, not layout. Since you are just starting out you really should learn more modern web design practices, tabled layouts are 1980ish.

Have a look at the link about tables in my signature line.

To get you started with another layout, maybe you can find something that will suit you on one of these sites-

one (http://www.cssplay.co.uk/layouts/index.html)
two (http://bonrouge.com/br.php?page=home)
three (http://nopeople.com/design/CSS%20tips/index.html)

Cliffo
Mar 30th, 2010, 07:59 PM
Okay, i had a feeling this is what was going to happen, i will just have to learn css now rather than later. I am going to start reading that guide you linked, but for future reference, what was i doing wrong?

[EDIT] I read a bit of that guide and i don't care for the "liquid" sites, i guess what i am going for would be referred to as a "jelly" site. I will just start reading http://www.w3schools.com/css/css_intro.asp before I code this theme.

Chicago Web Dev
Mar 30th, 2010, 09:48 PM
I highly recommend you learn CSS; its fairly simple and his VERY valuable in creating some nice looking web pages. Another good tutorial is at
http://www.csstutorial.net/

-Alex
Chicago Web Developer (http://www.edigitalstudios.com)

Cliffo
Mar 30th, 2010, 10:02 PM
Thanks for that link, i might use that one since it is a css specific site, but i must ask again, what was i doing wrong with my tables before?

Excavator
Mar 30th, 2010, 10:10 PM
Thanks for that link, i might use that one since it is a css specific site, but i must ask again, what was i doing wrong with my tables before?

I'm not much help... I have never built a tabled layout. Before my time.
There are plenty of people here that do know them though, I'm sure somebody will be able to explain.

Cliffo
Mar 31st, 2010, 06:02 AM
Okay i am having a similar problem with css lol, here is my css;


/*Layout*/

body {
margin: 0px 0 0px 0;
padding: 0;
font: 10px Verdana, Arial, Tahoma, Helvetica, sans-serif;
color: #000000;
}
div#container {
width: 960px;
margin: 0 auto;
padding: 0;
text-align: left;
}
div#head {
width: 960px;
height: 208px;
}
div#head .h1 {
width: 35px;
height:inherit;
background:url(images/header_01.gif);
float:left;
}
div#head .h2 {
margin-left: 35px;
width: 220px;
height:inherit;
background-image:url(images/header_02.gif);
}
div#head .h3 {
margin-left: 255px;
width: 705px;
height:inherit;
background-image:url(images/header_03.gif);

and my html;


<body>
<div id="container">

<div id="head">
<div class="h1"></div>
<div class="h2"></div>
<div class="h3"></div>
</div>

</div>
</body>

that is as far as i got. I can not get all three images to line up next to each other, they want to go below the previous image. I can get the first two inline by adding float:left; but nothing seems to get the third image inline. What is the trick here i missed in the guides?

Since we are here, is doing 3+ columns tricky in css, and if so should i be trying to cut my templates to only have two images side by side and just use some uber padding to space content?

Is this guide the best way to get three columns? Is any more than three columns possible?
http://nopeople.com/CSS/simple3column/index.html#html

I am lost....

Never mind i got it, thanks for showing me css, i can tell this is going to be a breeze once i get it down!

Cliffo
Mar 31st, 2010, 08:57 AM
Set to resolved, and thanks again!