View Full Version : I hope this is a css question


jaimie_ann
02-28-2004, 06:55 AM
I am working on a site, created div layers and now, the ones that I want to be one underneath another on the left side are stacked up in the corner of the main div content box that I made.

Can anyone help me, or at least direct me? I am at a loss and it's the first time I have done a layout this way.

Here is the URL: http://butterflied.us/hometest.php

Thank you in advance for any direction. I am at wit's end.

Rosey
02-28-2004, 07:10 AM
you have all those divs with the class navbox, so they will all have the properties that navbox has which is absolute positioning. You are basically telling the html to stack them since you are all giving them the same absolute positioning.

I hope that made sense

jaimie_ann
02-28-2004, 04:37 PM
OK, I did understand that, and changed it, so now they are all separated.

Now, what I don't understand is how to make that content box move up, and the boxes that are now on top go to the left and be smaller. I have set up those navboxes to have a right margin of 150 px, and the mainbox have a left margin of 200px...so I don't get why those navboxes stretch all the way across.

MaGiCSuN
02-28-2004, 04:53 PM
You still have the same class for each box. Each box should have a seperate class. so navtitle1 navtitle2 etc, and navcontent1 navcontent2 etc

But there's an easier way. You want them all to be below each other i understand? then do this:

<div class="navbox">
<div class="navtitle">
title here
</div><br>
<div class="navcontent">
content here
</div><p>
<div class="navtitle">
title here
</div><br>
<div class="navcontent">
content here
</div><p>
<div class="navtitle">
title here
</div><br>
<div class="navcontent">
content here
</div>
</div>

then you put this in your css:

#navbox{
position: absolute;
top: 40px;
left: 5px;
margin-right: 150px;
}

#navtitle{
padding-bottom: 5px;
border: 3px #564F5B solid;
background-color: #EACCCO;
font-size: 12pt;
font-weight: bold;
text-align: center;
}

#navcontent{
background-color: #EACCC0;
font-size: 12pt;
}

the navbox only positioned the whole thing, the navcontent and navtitle just change the look. Now all you need to do is seperate them with <br> and <p> tags and that should do it :)

but i don't really understand why you are choosing for the hard way. If you just make two boxes, one for the navigation, one for the content, and position them that's way easier :)

Love,
Mirna

jaimie_ann
02-28-2004, 05:01 PM
I'm confused, because I did rename them, to navbox1, navbox2, etc...

They are positioned correctly, persay, spaced the way I want them. My problem is that I want the main content to the right of all of the navigation boxes. So that all of those long boxes on top are not a wide, and the content is right next to them, the top of it lining up with the top of my top navbox. Right now, it is at the very bottom.

It is supposed to look very much like this:
http://www.eclectic-blue.com/images/dolls/updates.php

Hope that helps clear it up.:)

MaGiCSuN
02-28-2004, 05:06 PM
You just have to play a bit with the absolute positioning numbers. You had absolute positioning in your css but you didn't had left and top, wich i changed. It might not look perfect now, but you gotta play a bit with it yourself. I can't read your mind for whatyou want ;)

And don't copy someone elses coding ;) ask for it for their permission first..

jaimie_ann
02-28-2004, 05:08 PM
You just have to play a bit with the absolute positioning numbers. You had absolute positioning in your css but you didn't had left and top, wich i changed. It might not look perfect now, but you gotta play a bit with it yourself. I can't read your mind for whatyou want ;)

And don't copy someone elses coding ;) ask for it for their permission first..

I am not copying anyone's coding, and she has actually been helping me, and has seen my coding.

This is my own layout. And if I was copying her coding, I wouldn't be having these problems. Thanks, but that was not the kind of guidance I needed. I will figure it out on my own. :)