...

View Full Version : absolute/relative question



efhx
09-23-2006, 02:04 AM
I'm making a layout for a myspace page and I was just wondering how do u place a class in another class? you cant use the # in myspace coding so im using classes instead of divs. heres a sample of 1 of the classes i have on the page


.box4{
background-color:fff;
background-repeat:repeat-y;
position: absolute;
left: 50% ;
top: 313px;
margin-left:-390px;
width: 780px;
height: 170px;
z-index:0;
visibility:visible !important;
overflow:auto;}

if i wanted to place another class in this 1 what what do i put? cause whenever I try the whole this disappears

WiglyWorm
09-23-2006, 03:01 AM
Well... you're still using divs with myspace so far as I know.

You're simply using classes instead of IDs.

Arbitrator
09-23-2006, 03:50 AM
If you're talking about a contruct like .classA {.classB{}}, you can't do that. Just make your selectors as specific as possible. By the way, I'm still wondering what exactly this thread has to do with its title: "absolute/relative question".

efhx
09-24-2006, 06:20 AM
what i want to do is place a class in another.. like if i have 3 different classes named "box1" "box2" "box3" what code do i need for somethin like this

http://img201.imageshack.us/img201/3867/12121121221ci9.jpg?
what im tryin to do is on my myspace page the whole page is set up so i have boxes stacked above 1 another using position:absolute.. i want to put more boxes in the 1s that r on the page already so wouldnt i use relative to place classes in an absolute class? i just dont know how cause everytime that i try the whole class that is positioned with absolute disappears..hope this is clear

Robert Gottier
09-24-2006, 08:28 AM
First off, I think you are totally missing what positioning is all about in CSS. Second, the difference between ids and classes in CSS is not much, except ids are only supposed to be used once per page.

I can't imagine needing to learn CSS just for myspace, but since you are determined to do it, you ought to just play around in a text editor for a while, and see what relative vs. absolute really means.

As far as what you want, consider this:

<div style="position:absolute; left:0px; top:0px; width:700px; height:600px; border:solid black 1px;">
<div style="position:absolute; left:3px; top:2px; width:500px; height:200px; border:solid black 1px; padding-left:40px;"><h1>Box 3</h1></div>
<div style="position:absolute; left:3px; top:202px; width:500px; height:200px; border:solid black 1px; padding-left:40px;"><h1>Box 2</h1></div>
<div style="position:absolute; left:3px; top:402px; width:500px; height:200px; border:0px; padding-left:40px;"><h1>Box 1</h1></div>
</div>

The best way to learn CSS is by looking at other people's code. It took me about 3 months of CSS experience before I finally "got it". I'm old though, so I learn slow. Good luck.

efhx
09-25-2006, 12:49 AM
First off, I think you are totally missing what positioning is all about in CSS. Second, the difference between ids and classes in CSS is not much, except ids are only supposed to be used once per page.

I can't imagine needing to learn CSS just for myspace, but since you are determined to do it, you ought to just play around in a text editor for a while, and see what relative vs. absolute really means.

As far as what you want, consider this:

<div style="position:absolute; left:0px; top:0px; width:700px; height:600px; border:solid black 1px;">
<div style="position:absolute; left:3px; top:2px; width:500px; height:200px; border:solid black 1px; padding-left:40px;"><h1>Box 3</h1></div>
<div style="position:absolute; left:3px; top:202px; width:500px; height:200px; border:solid black 1px; padding-left:40px;"><h1>Box 2</h1></div>
<div style="position:absolute; left:3px; top:402px; width:500px; height:200px; border:0px; padding-left:40px;"><h1>Box 1</h1></div>
</div>

The best way to learn CSS is by looking at other people's code. It took me about 3 months of CSS experience before I finally "got it". I'm old though, so I learn slow. Good luck.

i know how to code in css but since there are alot of things you cant do with css for a myspace page i started with a template with 1 box that was positioned using absolute so i just started with that.. but thx for the help :) i dont have much time to look try it out now but thanks for ur response :D

Graft-Creative
09-25-2006, 12:54 AM
Wht you are tryng to achieve should just be possible with the normal document flow.

On the difference between absolute and relative:

Absolute is absolute: that's where it is, it aint gonna move, and nothing else on the page will affect it.

Relative is relative to where the element would be in the normal document flow.

But, 3 divs (being block level elements) will automatically stack, each on a new line, as you sketch depicts, with no extra style rules or anything.

Kind regards,

Gary

Avril
09-25-2006, 05:03 PM
Try using this (after adapting colours, margins and sizes, of course!)

Container1 is actually your box1


<html>

<head>
<title></title>
<style>
body {margin: 0px; background: #aaaaaa;}

div#container1 {position: absolute; background: #aaffaa; margin-left:20px; margin-top: 20px; width: 600px; height: 600px; border: 1px solid;}

div#box1, div#box2, div#box3 {float: left; clear: left; margin-top: 20px;margin-left: 20px; width: 120px; height: 50px; border: 1px solid;}

</style>
</head>

<body>
<div id= "container1">This would be contents of box 1

<div id= "box2">
Here contents of box 2
</div>

<div id="box3">
Here contents of box 3
</div>


</div>

</body>

</html>


Hope it helps



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum