SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: layout troubles

  1. #1
    SitePoint Member
    Join Date
    Jun 2004
    Location
    denver,colo
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    layout troubles

    what i want to do shouldent be to difficult.

    here is an out line of what i want to do i have most of the header built but i'm wondering how to place the photo div. should i float it?
    http://tripwire66.com/v2/i/layout.gif

    here is the code
    http://tripwire66.com/v2/index.php

    i'm pretty sure i have to right amount of div to provide the control i want and for later use maybe . any adive would be helpfull

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If the photo is to go alongside the menu bar and nav and is never going to be any higher than the left side then you can just absolutely place it to the right and forget about it.

    If however the photo is higher then the left side then it needs to be in the flow so you will have to float it so that it goes alongside and then clear it for following content. Remember that floats must come first in the html before the content they wrap around.

    I notice you have made an error in your calculations and your menu should be 150px high and not 100px. Mozilla will crop the size to 100px whereas ie will let it expand.


    Code:
    #menu  { 
    		position:relative;
      width:120px;
      height:150px;
      background:red
      }
    Hope that helps. I'm assuming you didn't want code but just advice

    Paul

  3. #3
    SitePoint Member
    Join Date
    Jun 2004
    Location
    denver,colo
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,

    If the photo is to go alongside the menu bar and nav and is never going to be any higher than the left side then you can just absolutely place it to the right and forget about it.

    If however the photo is higher then the left side then it needs to be in the flow so you will have to float it so that it goes alongside and then clear it for following content. Remember that floats must come first in the html before the content they wrap around.

    I notice you have made an error in your calculations and your menu should be 150px high and not 100px. Mozilla will crop the size to 100px whereas ie will let it expand.


    Code:
    #menu  { 
    		position:relative;
      width:120px;
      height:150px;
      background:red
      }
    Hope that helps. I'm assuming you didn't want code but just advice

    Paul

    well that would explain why i couldent get the float right. I think this will work .
    thank you so much agian!!!

  4. #4
    SitePoint Member
    Join Date
    Jun 2004
    Location
    denver,colo
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok i thought i had it right. It works fine in firefox but falls to crap in IE what did i do wrong?

    http://tripwire66.com/v2/

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There are two things you need to consider.

    The first is the border that you have given to each div which means the elements width will be increased by 2 pixels.

    This means that in ie your nav gets pushed wider because its inner is 120px + 2px for the borders while its outer is also specifed at 120px. Moz on the other hand won't expand an element which is why the layout doesn' break in moz.

    The second ie problem is that ie adds 3 pixels of space to content alongside a float and where space is tight there is nowhere to go so an element must drop.

    The only solution is to cut off 3 pixels from the float using a negative margin which won't affect the size because ie adds it back on again to make the correct size.

    heres the css
    Code:
    div { border:1px solid black;
    	}
    
    #all {
     width:600px;
     margin:0px auto;
     text-align:left;
     padding:15px;
     border:1px dashed #333;
     background-color:#eee;
     }
    #header {
    		 width:590px;
       height:400px;
       background-color:#FFF;
       }
    #menu  { 
    		position:relative;
      width:120px;
      height:234px;
      background: url(http://tripwire66.com/v2/i/menu_BG.gif) repeat-y;
      
      }
      
    #nav   { 
    		position:relative;
      width:118px;
      height:50px;
      margin:50px 0;
      }
      
    #photo  {
    		 float:right;
       width:465px;
       height:367px;
       background: url(http://tripwire66.com/v2/i/photo.jpg) no-repeat;
       }
    * html #photo {margin-left:-3px} /* for ie only */  
    
    That should sort it out

    Paul

  6. #6
    SitePoint Member
    Join Date
    Jun 2004
    Location
    denver,colo
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well that makes perfect sense and it works great. thank you allot.
    Does the book you guys have on tableless layouts get into semi-complex fluid layouts ? and some of these little fix's ?
    agian you are the master.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    For most of the fixes your probably best just to browse this forum as every question that can come up probably has

    Books are good for understanding how things should work but its usually practice that tells you how they really work in the different browsers.

    Paul


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
  •