SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS layout

    I am redesignining my homepage and trying to work out how best to lay it out using CSS. The layout is as follows:

    http://www.mediakitchen.co.uk/layout.jpg

    The main concern is the four boxes as I am not sure how best to create the layout of each box.

    Is it possible to just have one div for each box, or is it necessary to create each box using several divs in order to create the desired layout. For example, how do I get "Game design & development" and "more info" onto the same line with the dotted line beneath them?

    I would really appreciate some feedback as how best to do this as I am very keen to use no tables.

    This is my efforts so far but I am not sure if I am going in the right direction.

    http://www.mediakitchen.co.uk/home_new.htm

    Many thanks

    Paul

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

    It doesn't look too bad at the moment

    To get the more info on one line you need to float both items left and right. Then you can put bthe border underneath with a separate div.
    Code:
      <div id=main> 
    	<div class = "homepage_item1"> 
    	  <h1>Game design & development</h1>
    	  <h2>more info </h2>
      	<div class="border"></div>
       <p>Mediakitchen design & develop custom games</p>
    	  <p><a href = "#">View examples</a></p>
     </div>
    CSS:
    Code:
    div.homepage_item1 h1  {	
      font-size: 12px;
      color: #00436E;  
      font-weight: bold;
    		float:left;
      margin-bottom:0;
    }
    .border{
     border-top: 1px #8F8F8F dotted;
     height:1px;
     overfloww:hidden;
     clear:both;
     margin-bottom:5px;
    }
    div.homepage_item1 h2  {	
      font-size: 9px;
      color: #A90000;  
      font-weight: normal;  
      float:right;
      margin-bottom:0;
    }
    If you follow that format for your other divs it should display ok.

    Try to minimise your code while writing it. You have a lot of duplicated styles. Especially for those four main divs.

    Define all the common styles with a multiple selector and then just style the difference after.

    e.g.
    Code:
    #div1,#div,2,#div3,#div4 {
    color:red:
    background:blue;
    width:100px;
    height:200px;
    position:absolute;
    left:100px;
    top:100px;
    }
    #div2 {left:200px}
    #div3{left:300px}
    #div4{left:400px}
    Thats just an example but saves almost 70% of the code.

    I also noticed you have positioned the elements using relative positioning. This is not a good idea and you should use a combination of static, floated or absolutely placed elements.

    When you use relative positioning you leave gaps all over the place that can bnever be filled without extra positioning and soon beciomes very messy.

    I would just float the elements left and right and then clear them for following content.

    Hope that helps.

    Paul

  3. #3
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Paul for your help again and the v useful advice. Can't wait for you to write a book on this stuff

    Anyway have amended the page using your suggested code and its looking good and nearly there.

    http://www.mediakitchen.co.uk/home_new.htm

    Just a few things left that I could do with some help with:

    What is best way to get "View examples" to always be in same position bottom left? Use absolute positioning?

    See http://www.mediakitchen.co.uk/layout.jpg

    And to introduce some space between the top two boxes and the bottom two boxes, should I put a spacer div in between or add bottom margins to the homepage_item divs? Again your advice would be much appreciated.

    Many thanks

    Paul

  4. #4
    SitePoint Enthusiast m0n5t3r's Avatar
    Join Date
    Jul 2003
    Location
    Romania
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is best way to get "View examples" to always be in same position bottom left? Use absolute positioning?
    yeah, that could do the trick... watch out for the description text, though, it may grow large enough to overlap with the "view examples" thing (easy to solve with some bottom padding).
    And to introduce some space between the top two boxes and the bottom two boxes, should I put a spacer div in between or add bottom margins to the homepage_item divs
    I would go for bottom margins.
    m0n5t3r's nest
    --
    earth is 98% full ... please delete anyone you can.

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

    Mon5t3r suggestions are correct.

    You will need to set a local stacking context using position relative so that you can place the view details absolutely at the bottom. Then you ca add some padding to keep it protected from any content above.



    Code:
    div.homepage_item1, div.homepage_item2, div.homepage_item3, div.homepage_item4   {
    	
     font-size: 11px;
     color: #9D9D9D;  
     width: 320px;
     height: 180px;  
     border: 1px solid #E3E3E3; 
     padding: 10px;
     margin-bottom:14px;
     position:relative;/*stacking context*/
     padding-bottom:20px;/* stop content overwriting text*/
    }
    
     
     
    div.homepage_item1 a.homeview {
     position:absolute;
     background: red;
     left:0;
     bottom:0; 
    }
    That should do the trick

    Oh and its better to use margins than waste space with empty spacer divs. Just watch out for mozillas top margin bug. Sometimes you have to put the margin on the top of the element underneath. It doesn't matter if you put them on both as margins collapse to the largest margin (except for floats of course).

    Paul

  6. #6
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul and Mon5t3r, thanks ever so much.

    Very interesting to learn about that local stacking context - cool!

    Cheers

    Paul

    http://www.mediakitchen.co.uk/home_new.htm

  7. #7
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just noticed one problem still, the title text e.g "Game design & development" should sit a couple of pixels above the dotted line with the bottom of this text at the same level as bottom of "more info>>" text. It is nearly looking like this in IE but in Firefox, Opera and Netscape both text elements are sitting too high and not lined up on a horizontal plain.

    http://www.mediakitchen.co.uk/home_new.htm

    Any ideas?

    Thanks

    Paul

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

    Set the margin of the h1 and h2 to zero.
    Code:
    div.homepage_item1 h1, div.homepage_item2 h1, div.homepage_item3 h1, div.homepage_item4 h1 {
     
    font-size: 12px;
    color: #00436E; 
    font-weight: bold;
    float:left;
    margin:0; 
    }
    div.homepage_item1 h2, div.homepage_item2 h2, div.homepage_item3 h2, div.homepage_item4 h2 {
     
    font-size: 9px;
    color: #A90000; 
    font-weight: normal; 
    float:right;
    margin:0; 
    width:100px;
    }
    You may have to add padding to the top of the container if you want it pushed down a bit.

    Paul

  9. #9
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Taunton, UK
    Posts
    787
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And once again I thank you. Your amends done the trick perfectly

    Thanks

    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
  •