DIV & CSS

Hey there,

Here is what I am trying to achieve:

http://img23.imageshack.us/img23/5742/582765.png

As you can see, it is made of three sections.

I think it would be created like this:

<div class="part1">
    <div class="top">
    </div>
    <div class="middle">
           <!--- Put text here ---!>
    </div>
    <div class="bottom">
    </div>
</div>

However, I can't get the CSS right.

The top is just a repeated image along the X axis.
The middle is just a shade of grey: red 70, blue 70, green 70, hue 160, sat 0, lum 66.
The bottom is just another shade of grey: red 55, blue 55, green 55, hue 160, sat 0, lum 52

there is a border around the whole thing and between the sections which is grey: red 90, blue 90, green 90, hue 160, sat 0, lum 85

I tried getting it right, but I just cannot do it.

Can someone give me a hand please.

Lib Auth

Newbie Poster

19 posts since Mar 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

0

You can achieve that by using a table with three rows. Set the top and bottom rows height to 10% and make the middle row 80%. However, this doesn't use divs and it looks like you want to. Sorry if this post is totally useless to you.

Grn Xtrm

Posting Pro in Training

495 posts since Nov 2008

Reputation Points: 100

Solved Threads: 48

3 Years Ago

0

Thank you for the reply, however, I do not wish to use tables as a way of achieving structure or design. I wish to reserve the use of tables for their purpose as a table, nothing more.

Lib Auth

Newbie Poster

19 posts since Mar 2009

Reputation Points: 10

Solved Threads: 0

3 Years Ago

0

Hi Lib Auth

There you go:

Your CSS:

<style type="text/css"> 
.container{
width:600px;
border:#cccccc 3px solid;
}
.top{
background-color:#000000;
height:40px;
width:600px;
border-bottom:#cccccc 2px solid;
}
.middle{
background-color:#353535;
height:400px;
width:600px;
}
.bottom{ 
background-color:#000000;
width:600px;
height:40px;
border-top:#cccccc 2px solid;
}
</style>

And the HTML:

<body>
<div class="container">
  <div class="top"></div>
 
    <div class="middle"></div>
  <div class="bottom"></div>
</div>
</body>

Sorry, i don't bother to set the right colors...Good Luck :)

Attilla
A few tutorial, which you might find useful

attilla

Newbie Poster

3 posts since Apr 2009

Reputation Points: 10

Solved Threads: 1

3 Years Ago

0

Thanks for your help :D

I am looking at the site now

Lib Auth

Newbie Poster

19 posts since Mar 2009

Reputation Points: 10

Solved Threads: 0

DIV & CSS

This question has already been solved