ansaurus

Question

This layout can be done with CSS?

Answer 1

+2 A:

You could try float:left all the boxes. Then give boxes 6-9 a negative top margin. And clear:left box 5.

Not entirely sure if that would work, but it's worth a try.

JimNeath 2009-07-30 08:51:05

Sounds like a sensible suggestion.

Noldorin 2009-07-30 08:52:43

I think it's an altenative way of giving position. So I don't want to use this solution.

Ender Özcan 2009-07-30 08:53:55

@Ender, then what are acceptable CSS properties to be used? If position and floating are not, then few options remain. But this will probably render the problem unsolvable.

Ionuț G. Stan 2009-07-30 09:31:20

@Ionut, floating is ok but i don't want to use positioning attribute like top, left, ..

Ender Özcan 2009-07-30 09:41:03

@Ender: He wasn't suggesting using top and left attributes. Just a clear: left

Daniel 2009-07-30 10:26:23

Answer 2

A:

All of it should be doable. As Jim Neath mentioned, you can do boxes 1-9 with float left's, clears, and negative top margins.

For Box 10, you could float it left so that it would normally appear to the right of box 9, but apply a negative left margin to push it over next to 7 (based on the width of 8 and 9).

Bob Somers 2009-07-30 08:55:25

Answer 3

A:

My solution:

<style type="text/css">

div { width:524px; height:142px; }
div div { float:left; color:white; text-align:center;}

#objX01  {  background:#ed4728; width:91px;height:90px; }
#objX02  {  background:#c9b7c3; width:145px;height:50px; }
#objX03  {  background:#d7446d; width:168px;height:37px; }
#objX04  {  background:#2cdb54; width:120px;height:29px; float: right;}
#objX09  {  background:#1e5a82; width:47px;height:90px; float: right;}
#objX08  {  background:#224456; width:128px;height:82px; float: right;}
#objX07  {  background:#3240c0; width:64px;height:105px; float: right;}
#objX06  {  background:#5ee1b1; width:118px;height:92px; float: right;}
#objX05  {  background:#e0abce; width:167px;height:52px; }
#objX10  {  background:#ec2df6; width:175px;height:23px; float: right;}
</style>

<div style="position:relative; margin:0 auto">
  <div id="objX01">01</div>
  <div id="objX02">02</div>
  <div id="objX03">03</div>
  <div id="objX04">04</div>
  <div id="objX09">09</div>
  <div id="objX08">08</div>
  <div id="objX07">07</div>
  <div id="objX06">06</div>
  <div id="objX05">05</div>
  <div id="objX10" style="position:absolute; left:349px; top:119px">10</div>
</div>

Mete Karabicak 2009-07-30 09:24:29

For #objX10, You can't use absolute position. I love your code. It's very clean.

Soul_Master 2009-07-30 10:59:28

Please change your objX10 style to "margin-top:-23px;". Everything work fine. But It still uses negative margin/padding.

Soul_Master 2009-07-30 11:07:09

Answer 4

A:

As a starting point you can use Photoshop or another software to define the regions and generate the HTML+CSS.

The code generated isn't very clean but it would be a good base to begin making changes.

HyLian 2009-07-30 09:29:03

It's impossible. Because most program that can create html use position absolute for solving this case.

Soul_Master 2009-07-30 10:02:19

Answer 5

+8 A:

Soul_Master 2009-07-30 09:47:07

T10 has wrong width in IE7 :P

Thinker 2009-07-30 10:26:16

Soul_Master 2009-07-30 10:50:18

Moreover, I can't test IE7 browser because I use Windows Server 2008 R2 64-bits. Sorry.

Soul_Master 2009-07-30 10:57:08

Surely using negative margins to position elements is no better than using absolute positioning?

DisgruntledGoat 2009-07-30 11:13:04

Answer 6

A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
     <link rel="stylesheet" type="text/css" href="css/reset.css" />
     <style type="text/css">
      div#container { width: 500px; height: 143px; }
      div#container div { float: left; text-align: center; color: #ffffff; }
      div#t01 { width: 85px;  height: 85px;  background-color: #ee4727; }
      div#t02 { width: 138px; height: 49px;  background-color: #cab6c2; }
      div#t03 { width: 160px; height: 35px;  background-color: #d7446e; }
      div#t04 { width: 113px; height: 27px;  background-color: #2cda54; }
      div#t05 { width: 159px; height: 51px;  background-color: #e1abcf; clear: left; }
      div#t06 { width: 111px; height: 87px;  background-color: #5de1b0; margin-top: -36px; }
      div#t07 { width: 62px;  height: 101px; background-color: #323fbf; margin-top: -50px; }
      div#t08 { width: 120px; height: 77px;  background-color: #234457; margin-top: -50px; }
      div#t09 { width: 44px;  height: 85px;  background-color: #1f5a82; margin-top: -58px; }
      div#t10 { width: 164px; height: 24px;  background-color: #eb2cf4; }
     </style>
     <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
    </head>
    <body>
     <div id="container">
      <div id="t01">T01</div>
      <div id="t02">T02</div>
      <div id="t03">T03</div>
      <div id="t04">T04</div>
      <div id="t05">T05</div>
      <div id="t06">T06</div>
      <div id="t07">T07</div>
      <div id="t08">T08</div>
      <div id="t09">T09</div>
      <div id="t10">T10</div>
     </div>
    </body>
</html>

Works in IE8, FF2, FF3, Chrome, Safari, Opera. Doesn't work in IE6 and IE7 for unknown reasons to me.

(widths and margins may be a little off, image was low qual and I just used magic wand tool in photoshop)

Daniel 2009-07-30 10:50:40

ansaurus

tags:

views:

answers:

This layout can be done with CSS?

related questions