SitePoint Sponsor

User Tag List

Results 1 to 11 of 11

Hybrid View

  1. #1
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 page layout - positioning question.

    hey all

    i'm trying to follow this format http://www.projectseven.com/whims/cs...oxnoscript.htm

    when they say
    "This div is positioned left:24px and has a width of 160px."

    i have this for my css

    Code:
    #left {
      position: absolute;
      margin: 24px;
      width: 125px;
      }
    did i interpret correctly?
    or is my code wrong?

    thanks.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Seattle
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think, if you were using absolute positioning, it would be:

    Code:
    #left {
    position: absolute;
    left: 24px;
    width: 160px: /*Don't forget the box model hack*/
    }

  3. #3
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    neat works better!
    what is the /*Don't forget the box model hack*/ ? sorry if this is astupid question... i seem to be full of them lately

  4. #4
    SitePoint Evangelist Fleeters's Avatar
    Join Date
    Jul 2003
    Location
    Dumpsville
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The box model hack is for IE 5.x. it displays the boxes incorrectly. I am not at home right now to give any links or the actual hack. if no one has posted it by tonight i will post it for you.
    Aaron Smith
    smithaaronlee.net

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    Seattle
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  6. #6
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey all, and thanks again..
    i've managed to throw together something here...
    http://nicotine.golden.net/~nina/CO2/layout.html

    my css is there as well.. now if i was to apply the box-model-hack - i undestand why i need to do this... but odn't understnad how to approach it..

    i have a list here... which one do you recommend?

    the box-in-a-box?
    tantek hack?
    Simpliefied Box model hack?
    or one of the other ones?

    the problems iwth my current layout

    1. EI - the blue box on the right - doesn't wrap - i think this is because my margin-left:160px - is this a model hack problem?

    2. In opera - the margin between the main content area and the blue ads area is too big - i thihk again this is because of my margin-left:160px

    other than that - it doesn't seem too too bad, would someone please send me in the right direction

    thanks again
    ~nina

  7. #7
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh yeah, and my footer doesn't work

    but if for now someone could just suggest a hack to use - for the problem that i am having... that would be great!

  8. #8
    SitePoint Evangelist Fleeters's Avatar
    Join Date
    Jul 2003
    Location
    Dumpsville
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this is the box model hack....

    #box{
    position:relative;
    padding:0 2px 0 2px;
    margin:0;
    width:204px; /*what IE 5.x sees
    voice-family:inherit;
    voice-family: "\"}\"";
    width:200px; /* what others see.
    }
    Aaron Smith
    smithaaronlee.net

  9. #9
    SitePoint Evangelist Fleeters's Avatar
    Join Date
    Jul 2003
    Location
    Dumpsville
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    im not sure exactly what your problem is but i hope this helps
    Aaron Smith
    smithaaronlee.net

  10. #10
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks fleeters... i don't think that is my problem though i don't even use padding - this is where i wonder if i need a hack.

    my css looks like this

    Code:
    /* CSS Document */
    #top {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      }
    #left {
      position: absolute;
      left: 0px;
      margin-top: 125px;
      width: 160px;
      }
    #center {
      position: absolute;
      left: 0px;
      margin-left: 175px;
      margin-top: 140px;
      width: 65%;
      }
    #right {
      position: absolute;
      left: 67%;
      margin-left: 160px;
      margin-top: 125px;
      }
    #footer {
      clear: both;
      visibility: hidden;  
      margin: 0px;
      }

  11. #11
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for now what i have to do is put tables inside the top left and right sections... just for nn4's sake. but simple ones... i just can't have nested css inside the main content which is why i'm doing it like this... BUT i am wondering why it is that i am getting the no wrap around my right hand column in EI and why the margin is larger in opera 7 -

    is there a way of creating a separate sheet for opera? because i think it doesn't like this part

    Code:
    #right 
      { position: absolute; 
      left: 67%; 
      margin-left: 160px; 
      margin-top: 125px; }


Bookmarks

Posting Permissions

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