CSS main content area with all for corners curved

farkewie · February 21, 2009

Hi,

Im really new to CSS, though i have been woking with php for a while.

Basicly what i want is a main content area with all for corners curved and a border. I have created a rectangle image with the corers curved. I then split it to 3 the top, the middle which will repeat and the bottom

I have tried getting it to work but the bottom just wont "stick to the bottom of the middle

here are my divs


<div id="mb">
<div id="mytop"></div>
<div id="middle">
All my content goes here and it expands down as needed. back ground image will repeat as it expands down
</div>
<div id="bottom1"></div>
</div>

and my attempt at the css.

#mb {
top:150;
left:400;
width:700;
}
#mb #mytop{
background-image:url(images/New%20Folder/BodyTop.png);
background-repeat:no-repeat;
top:120px;
left: 400px;
position: absolute;
width: 700px;
height: 50px;

}
#mb #middle {
background-image: url(images/New%20Folder/BodyMiddle.png);
background-repeat:repeat-y;
top:170px;
left: 400px;
position: absolute;
width: 700px;
height: 500px;
z-index: 3;
}
#mb #bottom1 {
background-image: url(images/New%20Folder/BodyBottom.png);
background-repeat:no-repeat;
background-position:bottom;
position: absolute;
width: 700px;
z-index: 3;
}

is it also possible to specify a minimum size for the middle? so if there is only a little content it doesn't look weird

Thanks guys

Goafer · February 21, 2009

min-height: ...px;

shadiadiph · February 22, 2009

try using height: auto;

instead of

top:170px;
left: 400px;
position: absolute;

heave you tried float: left;

then set your margin on your #mb div margin: 0px 0px 0px 400px;

You can probably keep it as absolute but you haven't set a top: 0px on your bottom div

SuperBlue · February 24, 2009

Have a look at Creating a Fluid Box with Rounded Corners

Example included below, just get the CSS Sprites from the example above.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>Creating a Fluid Box with Rounded Corners Example</title>
    <style type="text/css">
* {
  margin: 0;
  padding: 0;
}
body {
  background: #72c1ca;
}
#Basement {
  width: 95%;
  min-width: 728px;
  max-width: 1600px; /* Optional */
  margin: 90px auto;
}

.S1 {
  position: absolute;
}
.BoxTop {
  top: -24px;
  left: 0;
  width: 100%;
  height: 24px;
  background-image: url("BG_SpiritsRTB2.png");
}
.BoxBottom {
  bottom: -48px;
  width: 100%;
  height: 48px;
  background: url("BG_SpiritsRTB2.png") 0px 48px;
}
.BoxLeftCB {
  bottom: -48px;
  left: -11px;
  width: 27px;
  height: 48px;
  background: #72c1ca url("BG_Spirits2.png") 0px -24px;
  z-index: 2;
}
.BoxRightCB {
  right: -18px;
  bottom: -48px;
  width: 35px;
  height: 48px;
  background: #72c1ca url("BG_Spirits2.png") -27px -24px;
  z-index: 2;
}
.BoxLeft {
  top: 0;
  left: -11px;
  width: 11px;
  height: 100%;
  background: url("BG_Spirits2.png") -116px -72px;
}
.BoxRight {
  top: 0;
  right: -18px;
  width: 18px;
  height: 100%;
  background: url("BG_Spirits2.png") -127px -72px;
}
.BoxLeftCT {
top: -24px;
left: -11px;
width: 27px;
height: 24px;
background: url("BG_Spirits2.png") -62px -24px;
}
.BoxRightCT {
right: -18px;
top: -24px;
width: 27px;
height: 24px;
background: url("BG_Spirits2.png") -89px -24px;
}
.DecorationLeftT_01 {
top: 0px;
left: -11px;
width: 11px;
height: 50px;
background: url("BG_Spirits2.png") -145px 0px;
}
.DecorationLeftB_01 {
bottom: 0px;
left: -11px;
width: 11px;
height: 50px;
background: url("BG_Spirits2.png") -156px 50px;
}
.DecorationRightT_01 {
top: 0px;
right: -11px;
width: 11px;
height: 50px;
background: url("BG_Spirits2.png") -145px 0px;
}
.DecorationRightB_01 {
bottom: 0px;
right: -11px;
width: 11px;
height: 50px;
background: url("BG_Spirits2.png") -156px 50px;
}
.ContentBox {
  position: relative;
  width: 100%;
  background: #E6F4F4;
  margin-bottom: 90px;
}

h1 {
  padding: 0 0.2em 1em 0.2em;
}
p {
  padding: 0 0.5em 1em 0.5em;
}
    </style>
  </head>

  <body>
    <div id="Basement">
     <div class="ContentBox">
  <h1>Createing a Fluid Box with Rounded Corners</h1>
  <p>Createing a Fluid Box with Rounded Corners</p>

  <div class="BoxTop S1"></div><div class="BoxLeftCT S1"></div><div class="BoxRightCT S1"></div><div class="BoxRight S1"></div><div class="BoxLeft S1"></div><div class="BoxLeftCB S1"></div><div class="BoxRightCB S1"></div><div class="BoxBottom S1"></div><div class="DecorationLeftT_01 S1"></div><div class="DecorationRightT_01 S1"></div><div class="DecorationLeftB_01 S1"></div><div class="DecorationRightB_01 S1"></div>
 </div>
    </div>
  </body>

</html>

Edit: Also avoid splitting the image, as it increases the http requests, and potientially the filsize of the images combined.

Sign In

CSS main content area with all for corners curved

Recommended Posts

farkewie

Link to comment

Share on other sites

Goafer

Link to comment

Share on other sites

shadiadiph

Link to comment

Share on other sites

SuperBlue

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information