CSS Layout with 4 boxes in shape of cross

9 replies [Last post]

Wed, 2010-03-10 19:18

open-source-websites

Offline

newbie

Timezone: GMT-7

Joined: 2010-03-10

Posts: 4

Points: 5

Ok, so this one is baffling me. But I am sure it will be easy for css guru's. I have a layout that calls for 4 boxes with an image background. The boxes are laid out in the shape of a cross:

2
1 3
4

I have been trying and trying to get them aligned properly and can not get it. here is the HTML code:

<!-- Boxes -->
 <div id="box_wrap">
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
<div id="box_4"></div> 
</div>

And here is the css code:

/* boxes */
#box_wrap {
	margin:0 auto;
	width:840px;
	height:538px;
}
 
#box_1{
	margin: 131px 15px 0 0;
	float:left;
	height:232px;
	width:270px;
	background:url(../images/box_1.png) no-repeat;
}
 
#box_2{
	margin: 0 0 0 285px;
	height:232px;
	width:270px;
	background:url(../images/box_2.png) no-repeat;
}
 
#box_3{
	margin: 131px 0 0 0;
	float:right;
	height:232px;
	width:270px;
	background:url(../images/box_3.png) no-repeat;
}
 
#box_4{
	margin: 0 44px 0 289px;
	height:232px;
	width:270px;
	background:url(../images/box_4.png) no-repeat;
}
<code>
 
 
Any and all help would be appreciated. Thanks everyone.

Tags:

CSS Layouts

Wed, 2010-03-10 20:40

gary.turner

Offline

Moderator

Timezone: GMT-5

Joined: 2004-06-25

Posts: 7928

Points: 1767

This is one, but not

This is one, but not necessarilly the only way to do it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 25 March 2009), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
 
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
 
  <title>... Test ...</title>
  <style type="text/css">
/*<![CDATA[*/
 
  body {}
 
  p {
    font-size: 3em;
    font-weight: bold;
    text-align: center;
    }
 
  div {
    border: 1px dotted gray;
    display: inline-block;
    height: 230px;
    text-align: left;
    width: 270px;
    word-spacing: normal;    
    }
 
  #wrapper,
  #sub-wrapper {
    border: none;
    display: block;
    height: auto;
    text-align: center;
    width: auto;
    word-spacing: -.5em;
    }
 
  #sub-wrapper {
    white-space: nowrap;
    }
 
  </style>
</head>
 
<body>
  <div id="wrapper">
    <div>
      <p>box #1</p>
    </div>
 
    <div id="sub-wrapper">
      <div>
        <p>box #2</p>
      </div>
 
      <div>
        <p>box #3</p>
      </div>
    </div><!-- end sub-wrapper -->
 
    <div>
      <p>box #4</p>
    </div>
  </div><!-- end wrapper -->
</body>
</html>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Wed, 2010-03-10 21:07

open-source-websites

Offline

newbie

Timezone: GMT-7

Joined: 2010-03-10

Posts: 4

Points: 5

Not sure if that will work for my application..

What I would like to have happen is each box has a background image and there will be margin spacing between the boxes. I have attached and image of the psd layout I create. Hope that helps.

Thanks in advance.

Wed, 2010-03-10 21:23

open-source-websites

Offline

newbie

Timezone: GMT-7

Joined: 2010-03-10

Posts: 4

Points: 5

I was able to the..

I was able to get the background images in and the margins set but realized once the margins we set that it's the wrong layout. I need the top and bottom boxes to be in the middle of the right and left boxes. Do you think there is an easy fix for that?

Thanks Gary I appreciate your help on this.

Wed, 2010-03-10 21:29

CupidsToejam

Offline

Guru

Timezone: GMT-6

Joined: 2008-08-15

Posts: 2634

Points: 1552

I might try using absolute or

I might try using absolute or relative positioning to get the where you need'em. just be sure you understand the two techniques fully before doing so.

First basic few steps in building a webpage
1. Gather and collect content.
2. Organize the content into meaningful semantic valid HTML
3. Design the prototype
4. Style using CSS

http://www.pixelbehavior.com

Wed, 2010-03-10 21:43

open-source-websites

Offline

newbie

Timezone: GMT-7

Joined: 2010-03-10

Posts: 4

Points: 5

Will do thanks

I will try that thanks

Thu, 2010-03-11 09:14

gary.turner

Offline

Moderator

Timezone: GMT-5

Joined: 2004-06-25

Posts: 7928

Points: 1767

For modern browsers, and even

For modern browsers, and even IE8, it's a trivial matter. The kicker is IEs 6&7. To follow my fix for those idiot browsers, refer to centering inline elements vertically, which I've adapted to center block level elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux/x86 (vers 25 March 2009), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
 
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
 
  <title>... Test ...</title>
  <style type="text/css">
/*<![CDATA[*/ 
 
  body {}
 
  p {
    font-size: 1em;
    }
 
  div { }
 
  #wrapper {
    display: table;
    margin: 1.5em auto 0;
    width: 810px;
    }
 
  .sub-wrapper {
    display: table-cell;
    vertical-align: middle;
    width: 270px;
    }
 
  .item {
    border: 1px dotted gray;
    margin: 1.25em;
    padding: .5em;
    }
 
  </style><!--[if lte ie 7]>
<style type="text/css">
 
.sub-wrapper {
  float: left;
  height: 50em;  /* must be set for IE6,7 */
  }
 
.item {
  display: inline-block;
  vertical-align: middle;
  }
 
* html .item {
  display: inline;
  }
 
b {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  }
 
</style>
<![endif]-->
</head>
 
<body>
  <div id="wrapper">
    <div class="sub-wrapper">
      <div class="item">
        <h2>Item one</h2>
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Morbi euismod fermentum accumsan. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. In ante ipsum, aliquet
        tristique volutpat eget, consectetur eget erat! Integer
        vestibulum diam sodales nunc pellentesque nec tempus tellus
        suscipit. Nulla convallis quam vel ligula convallis
        ultrices. Morbi non justo.</p>
      </div><!--[if lte ie 7]><b></b><![endif]-->
    </div>
 
    <div class="sub-wrapper">
      <div>
        <div class="item">
          <h2>Item two</h2>
 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing
          elit. Morbi euismod fermentum accumsan. Lorem ipsum dolor
          sit amet, consectetur adipiscing elit. In ante ipsum,
          aliquet tristique volutpat eget, consectetur eget erat!
          Integer vestibulum diam sodales nunc pellentesque nec
          tempus tellus suscipit. Nulla convallis quam vel ligula
          convallis ultrices. Morbi non justo.</p>
        </div>
      </div>
 
      <div>
        <div class="item">
          <h2>Item three</h2>
 
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing
          elit. Morbi euismod fermentum accumsan. Lorem ipsum dolor
          sit amet, consectetur adipiscing elit. In ante ipsum,
          aliquet tristique volutpat eget, consectetur eget erat!
          Integer vestibulum diam sodales nunc pellentesque nec
          tempus tellus suscipit. Nulla convallis quam vel ligula
          convallis ultrices. Morbi non justo.</p>
        </div>
      </div>
    </div><!-- end sub-wrapper -->
 
    <div class="sub-wrapper">
      <div class="item">
        <h2>Item four</h2>
 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Morbi euismod fermentum accumsan. Lorem ipsum dolor sit
        amet, consectetur adipiscing elit. In ante ipsum, aliquet
        tristique volutpat eget, consectetur eget erat! Integer
        vestibulum diam sodales nunc pellentesque nec tempus tellus
        suscipit. Nulla convallis quam vel ligula convallis
        ultrices. Morbi non justo.</p>
      </div><!--[if lte ie 7]><b></b><![endif]-->
    </div>
  </div><!-- end wrapper -->
 
</body>
</html>

cheers,

gary

Unplanned code results in a tangled wad of brain-cramping confusion.

There are enough html & css demos and tutorials to be interesting. Please visit.

Sat, 2010-03-13 18:34

comous

Offline

newbie

Timezone: GMT+1

Joined: 2010-03-13

Posts: 2

Points: 2

Fieldset problème

Hello eveyone,
i'm a new comer, student in sustainable energy.
with some friend we created an association and the web site www.solaria.pro
one of my friend was the web master and he died climbing montaines in corsica.
and i have to manage the web site and a week ago i didn't no any thing about this world,
but there is good tutorials to help out, so i have learnt a lot but i think but i still find problemes,
the first one, is that i have created a Form and it is compose of to fieldset, i have put a class to one of them to be able in CSS to give them diferent colors for exemple.
i would like that the two of them to be next to itch other and not on top of itch other
could you give my a hand please,
because se commande position does not work, and background-position as well does not work.
>Thanks for the help
Comous

Sat, 2010-03-13 18:49

Deuce

Offline

Guru

Timezone: GMT-5

Joined: 2005-11-20

Posts: 4421

Points: 1840

If this isn't spam, maybe you

If this isn't spam, maybe you should start your own thread instead of hijacking this one?

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Sat, 2010-03-13 19:50

comous

Offline

newbie

Timezone: GMT+1

Joined: 2010-03-13

Posts: 2

Points: 2

it isn't a spam, i'm hear

Hello, i dont understand what do you mean for start your owun thread, it is my one form that i want to creat.
can you tel my why i can't put the two fieldset next to itch other???
thanks. comous

CSS Layout with 4 boxes in shape of cross

This is one, but not

Not sure if that will work for my application..

I was able to the..

I might try using absolute or

Will do thanks

For modern browsers, and even

Fieldset problème

If this isn't spam, maybe you

it isn't a spam, i'm hear

New forum topics

User login

Navigation