Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts

    absolute/relative question

    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

    Code:
    .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

  • #2
    New Coder
    Join Date
    Sep 2006
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well... you're still using divs with myspace so far as I know.

    You're simply using classes instead of IDs.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    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".
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    ?
    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

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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.

  • #6
    New Coder
    Join Date
    Apr 2006
    Posts
    66
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Robert Gottier View Post
    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:
    Code:
    <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

  • #7
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #8
    Regular Coder
    Join Date
    Nov 2005
    Posts
    329
    Thanks
    3
    Thanked 19 Times in 19 Posts
    Try using this (after adapting colours, margins and sizes, of course!)

    Container1 is actually your box1
    Code:
    <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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •