1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Horizontal alignment

Discussion in 'CSS' started by Thibaut, Oct 26, 2009.

0
  1. #1
    Hello,

    I really suck in CSS :mad:
    I am trying to align horizontally 3 tables using rounded corners; here is the CSS I am using:

    
.raised2 {background: transparent;  width:70%; margin:0 auto;}
.raised2 h1, .raised2 p {margin:0 10px;}
.raised2 h1 {font-size:1em; color:red; letter-spacing:1px;}
.raised2 p {padding-bottom:0.5em;}

.raised2 .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised2 .b1, .raised2 .b2, .raised2 .b3, .raised2 .b4, .raised2 .b1b, .raised2 .b2b, .raised2 .b3b, .raised2 .b4b {display:block; overflow:hidden;}
.raised2 .b1, .raised2 .b2, .raised2 .b3, .raised2 .b1b, .raised2 .b2b, .raised2 .b3b {height:1px;}
.raised2 .b2 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised2 .b3 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised2 .b4 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised2 .b4b {background:#E2E4E4; border-left:1px solid #eee; border-right:1px solid #999;}
.raised2 .b3b {background:#E2E4E4; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised2 .b2b {background:#E2E4E4; border-left:1px solid #aaa; border-right:1px solid #999;}


.raised2 .b1 {margin:0 5px; background:#fff;}
.raised2 .b2, .raised2 .b2b {margin:0 3px; border-width:0 2px;}
.raised2 .b3, .raised2 .b3b {margin:0 2px;}
.raised2 .b4, .raised2 .b4b {height:2px; margin:0 1px;}
.raised2 .b1b {margin:0 5px; background:#999;}
.raised2 .boxcontent {display:block;  background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #999;}
    Code (markup):
    And this is the HTML code:

    
<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 1</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>

<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 2</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>

<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 3</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b></b>
</div>
    Code (markup):
    How can I align horizontally those 3 tables ?
    Any clue ?

    Regards
    Thibaut
     
    Thibaut, Oct 26, 2009 IP
  2. Om ji Kesharwani

    Om ji Kesharwani Peon

    Messages:
    211
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Copy code as it is and see the change.

    <html>
<head>
<style type="text/css">
.raised2 {background: transparent;  width:30%; margin:0; float:left}
.raised2 h1, .raised2 p {margin:0 10px;}
.raised2 h1 {font-size:1em; color:red; letter-spacing:1px;}
.raised2 p {padding-bottom:0.5em;}

.raised2 .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised2 .b1, .raised2 .b2, .raised2 .b3, .raised2 .b4, .raised2 .b1b, .raised2 .b2b, 

.raised2 .b3b, .raised2 .b4b {display:block; overflow:hidden;}
.raised2 .b1, .raised2 .b2, .raised2 .b3, .raised2 .b1b, .raised2 .b2b, .raised2 .b3b 

{height:1px;}
.raised2 .b2 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised2 .b3 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised2 .b4 {background:#E2E4E4; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised2 .b4b {background:#E2E4E4; border-left:1px solid #eee; border-right:1px solid #999;}
.raised2 .b3b {background:#E2E4E4; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised2 .b2b {background:#E2E4E4; border-left:1px solid #aaa; border-right:1px solid #999;}


.raised2 .b1 {margin:0 5px; background:#fff;}
.raised2 .b2, .raised2 .b2b {margin:0 3px; border-width:0 2px;}
.raised2 .b3, .raised2 .b3b {margin:0 2px;}
.raised2 .b4, .raised2 .b4b {height:2px; margin:0 1px;}
.raised2 .b1b {margin:0 5px; background:#999;}
.raised2 .boxcontent {display:block;  background:#E2E4E4; border-left:1px solid #fff; 

border-right:1px solid #999;}

</style>
</head>
<body>
<div>
<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b 

class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 1</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b 

class="b1b"></b></b>
</div>

<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b 

class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 2</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b 

class="b1b"></b></b>
</div>

<div class="raised2">
  <b class="top"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b 

class="b4"></b></b>
  <div class="boxcontent">
    <h1 align="left">Table 3</h1>
    <br />
    <p> 
      blablablabla<br />
      blablablabla<br />
      blablablabla<br />
    </p>
    <br />
  </div>
  <b class="bottom"><b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b 

class="b1b"></b></b>
</div>
</div>

</body>
</html>
    HTML:
     
    Om ji Kesharwani, Oct 26, 2009 IP
    Thibaut likes this.
  3. Om ji Kesharwani

    Om ji Kesharwani Peon

    Messages:
    211
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Look at this Line..

    .raised2 {background: transparent; width:30%; margin:0; float:left}
     
    Om ji Kesharwani, Oct 26, 2009 IP
  4. Thibaut

    Thibaut Well-Known Member

    Messages:
    886
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    140
    #4
    Thanks, this is working fine
     
    Thibaut, Oct 27, 2009 IP