37 users online (1 members and 36 guests)  


  Results 1 to 2 of 2

Related

  1. Playing video on my site    Forum: HTML Forum
    Replies: 3
  2. Playing a music file    Forum: HTML Forum
    Replies: 0
  3. Number of Vertical Pixels    Forum: Graphics Forum
    Replies: 2
  4. Playing music files on web pages    Forum: HTML Forum
    Replies: 2
  1. #1
    demon_jr's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2003
    Posts
    3

    Playing with pixels in positioning

    Thanks everyone who has replied to my posts so far.

    This forum is a great place to get help with CSS!



    If improper use of CSS terms appears, please excuse me.

    Anyways the following CSS is supposed to create a box within a box.

    This is the original code. The margins on the right and bottom of the "child" (.content) box are nearly flush against the "parent" (.main)box. Please take a look at the ".content margin" property since this is where I encountered difficulties:

    .main {
    margin-top: 55px;
    margin-left: 125px;
    margin-right: 25px;
    margin-bottom: 0px;
    border-style: solid;
    border-width: 1px;
    background-color: #eeeeee;
    color: black;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;


    }

    .content {
    position: relative;
    top: 5px;
    left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-style: solid;
    border-width: 1px;
    background-color: White;
    color: black;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;

    }

    The following is the CSS I used to acheive equal margins for the "child" (.content) box. The appearance should appear as a smaller box centered within a larger box. Once again, please take a look at the ".content margin" property, since this is where I made the changes. The code is identical, except for the changes made to ".content margin".

    .main {
    margin-top: 55px;
    margin-left: 125px;
    margin-right: 25px;
    margin-bottom: 0px;
    border-style: solid;
    border-width: 1px;
    background-color: #eeeeee;
    color: black;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;


    }

    .content {
    position: relative;
    top: 5px;
    left: 5px;
    margin-right: 15px;
    margin-bottom: 10px;
    border-style: solid;
    border-width: 1px;
    background-color: White;
    color: black;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;

    }

    With the corrected CSS, the box appears properly in both IE6 and Mozilla1.3a.

    If someone can explain to me why the margins had to be "tweaked" for the above CSS, I would greatly appreciate it.

    Thanks!

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Your code is having to compensate for your use of positioning, its 'throwing it out of kilter' as it were.

    try
    Code:
    .content {
    margin-left: 5px;
    margin-top: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-style: solid;
    border-width: 1px;
    background-color: White;
    color: black;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    
    }
    no positioning, and the margins suddenly make sense.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread