Member Avatar for Lib Auth

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.

  • 3 Contributors
  • 4 Replies
  • 72 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Lib Auth
Member Avatar for Grn Xtrm

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.

Member Avatar for Lib Auth

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.

Member Avatar for attilla

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>

Member Avatar for Lib Auth

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.