PDA

View Full Version : Boxes

Magial
03-19-2004, 03:22 PM
Im trying to make different types of boxes for my links, instead of it all being in one column. But the boxes go side by side of each other, instead of on top of each other.
Heres my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
This is header, this is header, this is header, this is header, this is header!!
</div>

<div id="boxleft">
<h2>Navigation</h2>
<ul>
<td>Link One</td><br>
<td>Link Two</td><br>
<td>Link Three</td>
</ul>
</div>
<div id="boxleft">
<h2>Other links</h2>
<ul>
<td>Link One</td><br>
<td>Link Two</td><br>
<td>Link Three</td>
</ul>
</div>


<div id="boxright">&nbsp;</div>

<div id="content">&nbsp;</div>

<div id="footer">
This is footer, this is footer, this is footer, this is footer, this is footer!
</div>
</div>
</body>
</html>

And the stylesheet:

#container {
width: 760px;
\width: 780px;
w\idth: 760px;
border: 1px solid gray;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
#header {
padding: 5px;
margin-bottom: 5px;
background-color: rgb(213, 219, 225);
}
#content {
padding: 5px;
margin-left: 215px;
margin-right: 215px;
background-color: gray;
}
#boxleft {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}
#boxright {
float: right;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-left: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
}
#footer {
clear: both;
padding: 5px;
margin-top: 5px;
background-color: rgb(213, 219, 225);
}
missing-score
03-19-2004, 03:31 PM
<ul>
<td>Link One</td><br>
<td>Link Two</td><br>
<td>Link Three</td>
</ul>

should be:

<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
Magial
03-19-2004, 03:36 PM
Oops, simple mistake. But that still doesnt explain why my boxes are next to each other, instead of on top of each other.
Roy Sinclair
03-19-2004, 04:09 PM
How about TWO div tags with the same ID?

If you want both lists to be stacked one over the other on the left hand side why not place both lists into a SINGLE div?
Magial
03-19-2004, 04:14 PM
Well that was how I was gonna do it initially. But what I want is for each link area, IE: Navigation; Other etc etc, to have their own box.

But with only one div tag, they are all in the one area and not boxes like I want.

I want there to be a little space in-between the top and bottom boxes. To show what Im trying to 'replicate' check out this site, will probably explain things better.

http://www.phantasyrpg.com/index.php

If you look at the site, you will see how the navigation links and all that are set up in boxes, which is what im trying to replicate in a way.

Also with some additional testing, I found that if I replicate the code for the right side, that i get the same effect as if it was only the one <div> tag. But the left side still goes sideways...
missing-score
03-19-2004, 04:14 PM
Becuase they are both float:left, they will get added on in the order you put them in.

Why not do something like this:


<div id="left">
<div id="boxleft">
...
</div>
<div id="boxleft">
...
</div>
</div>
<div id="center">
<div id="content">
...
</div>
</div>
<div id="right">
<div id="boxright">
...
</div>
</div>


Of course you would need to set ids for each div (left, center and right), but thats how you could work it out.

now, a shameless plug... Why not take a look at <http://www.freeipb.net/ibe>, which is a site i made for a small project.. Have a look at the CSS <http://www.freeipb.net/ibe/emotion.css> and see how it fits together.
Magial
03-19-2004, 04:54 PM
missing-score: I did what you suggested. That worked.

But even still, my initial goal isnt finished. The content is all in one column instead of the boxes as Ive stated before.

How do I seperate the content into boxes instead of it all being in the one colum.

|---------------| |----------------------------| |---------------|
| Nav | | Content | | Nav |
| Links | |----------------------------| | Links |
| Links | | Links |
| Links | | Links |
|---------------| |---------------|
I want these spaces here too
|---------------| |---------------|
| Other | | Other |
| Links | | Links |
| Links | | Links |
| Links | | Links |
|---------------| |---------------|


Like that :D:P

Forgive me for actually drawing this. I am a little tired, and bored :D
Garadon
03-19-2004, 05:14 PM
I am from the time of table layouts, so this migth not be the most brilliant way of achieving your goal



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style>
Body{margin-left:0px}
.Col{float:left;margin-left:10px}
.boxLeft{margin-bottom:10px;width:100px;height:100px}
.boxRight{margin-bottom:10px;width:100px;height:100px}
.boxContent{margin-bottom:10px;width:200px;height:210px}
</style>
</head>

<body>
<div class="Col">
<div class="boxRight" style="background-color:blue">1</div>
<div class="boxRight" style="background-color:green">2</div>
</div>
<div class="Col">
<div class="boxContent" style="background-color:red">3</div>
</div>

<div class="Col">
<div class="boxLeft" style="background-color:gray">4</div>
<div class="boxLeft" style="background-color:purple">5</div>
</div>
</body>
</html>
missing-score
03-19-2004, 05:18 PM
For spaces I would simply add:

#boxleft {
float: left;
width: 200px;
width: 210px;
width: 200px;
margin: 0;
margin-right: 5px;
margin-bottom: 30px;
padding: 5px;
background-color: rgb(235, 235, 235);
}

#boxright {
float: right;
width: 200px;
width: 210px;
width: 200px;
margin: 0;
margin-left: 5px;
margin-bottom: 30px;
padding: 5px;
background-color: rgb(235, 235, 235);
}

And set the gap that way.
Magial
03-19-2004, 05:21 PM
Thank you missing-score. Thats exactly what I was looking for!

Thanks everyone else for your help as well... extremely appreciated!!