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.

Recommended Answers

All 4 Replies

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.

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.

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
<URL SNIPPED>

Thanks for your help :D

I am looking at the site now

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.