Help with CSS layout

[chuckylefrek]

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

[Paul O'B]

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.

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

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.

#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

[chuckylefrek]

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

[m0n5t3r]

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.

[Paul O'B]

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.

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

[chuckylefrek]

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

[chuckylefrek]

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

[Paul O'B]

Hi,

Set the margin of the h1 and h2 to zero.

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

[chuckylefrek]

And once again I thank you. Your amends done the trick perfectly

Thanks

Paul