codevomit
asked on
Css floating content box question
Hello All,
I've been tasked with turning the art of a designer into a site. I don't normally work with CSS as my main roll is software development. I'm having some problems with creating a content box, I've attached an image of what I'm trying to achieve. The content box itself is easy enough:-
<code>
#content-top {
height: 21px;
background: url(../images/content-top- 01.jpg) bottom no-repeat;
}
#content-mid {
background: url(../images/content-mid- 01.jpg) center repeat-y;
padding: 0 16px 0 10px;
}
#content-btm {
height: 21px;
background: url(../images/content-bott om-01.jpg) top no-repeat;
}
</code>
Then assemble the box with three div tags. The problem is getting the graphics that sit in the corners to sit behind the content box.
Thank you in advance.
css.gif
I've been tasked with turning the art of a designer into a site. I don't normally work with CSS as my main roll is software development. I'm having some problems with creating a content box, I've attached an image of what I'm trying to achieve. The content box itself is easy enough:-
<code>
#content-top {
height: 21px;
background: url(../images/content-top-
}
#content-mid {
background: url(../images/content-mid-
padding: 0 16px 0 10px;
}
#content-btm {
height: 21px;
background: url(../images/content-bott
}
</code>
Then assemble the box with three div tags. The problem is getting the graphics that sit in the corners to sit behind the content box.
Thank you in advance.
css.gif
Check out http://www.html.net/tutorials/CSS/lesson15.asp
The problem is getting the graphics that sit in the corners to sit behind the content box. --- If that is the problem then using an z-index is the solution
Try like this
<code>
#content-top {
height: 21px;
background: url(../images/content-top- 01.jpg) bottom no-repeat;
z-index:99;
}
#content-mid {
background: url(../images/content-mid- 01.jpg) center repeat-y;
padding: 0 16px 0 10px;
z-index:100;
}
#content-btm {
height: 21px;
background: url(../images/content-bott om-01.jpg) top no-repeat;
z-index:99;
}
</code>
Try like this
<code>
#content-top {
height: 21px;
background: url(../images/content-top-
z-index:99;
}
#content-mid {
background: url(../images/content-mid-
padding: 0 16px 0 10px;
z-index:100;
}
#content-btm {
height: 21px;
background: url(../images/content-bott
z-index:99;
}
</code>
ASKER
Thanks for your reply masterpass. content-top, content-mid, content-btm all refrence the 3 parts made to construct the content box, there other 2 graphics that sit behind the content box and fixed to at the corners are what I'm having difficulty with, getting the content box to float above the graphics has caused some problems such as unnecessary large spaces to appear.
So give z-index as 100 for all content-top, content-mid, content-btm
and z-index less than 100 for the other divs which should be behind!!!
and z-index less than 100 for the other divs which should be behind!!!
ASKER
How should I arrange the divs, maybe like this? :-
<div id="top-corner-graphic"></ div>
<div id="content-top"></div>
<div id="content-mid">Hello World</div>
<div id="content-bt"></div>
<div id="bottom-corner-graphic" ></div>
<div id="top-corner-graphic"></
<div id="content-top"></div>
<div id="content-mid">Hello World</div>
<div id="content-bt"></div>
<div id="bottom-corner-graphic"
Yeah ... I think that is fine provided you have a proper css associated with it !!
ASKER
This is what I have so far:-
#content-area {
width: 100%;
}
#member-stats {
width: 100%;
}
#content-top{
height: 21px;
width: 905px;
background: url(../images/content-top-01.jpg) bottom right no-repeat;
z-index: 100
}
#content-topbrush{
position: relative;
left: -23px;
width: 218px;
height: 217px;
background: url(../images/top_content_brush.gif) no-repeat;
z-index: 1;
}
#content-bottombrush {
position: relative;
left: 23px;
width: 218px;
height: 217px;
background: url(../images/bottom_content_brush.gif) no-repeat;
z-index: 1;
}
#content-mid {
float: left;
position: relative;
background: url(../images/content-mid-01.jpg) right repeat-y;
padding: 0 20px 0 20px;
z-index: 100;
}
#content-btm {
width: 905px;
z-index: 100
height: 21px;
background: url(../images/content-bottom-01.jpg) top right no-repeat;
}
html:-
<div id="content-topbrush"></div>
<div id="content-area">
<div id="content-top"></div>
<div id="content-mid">
<jdoc:include type="component" />
</div>
<div id="content-btm"></div>
</div>
<div id="content-bottombrush"></div>
ASKER
The content panel doesn't float above the corners :(
ASKER
Is it posible to make the content panel float by editing content-area, seeing as the panel div tags are nested in it?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for that masterpass, almost there. This is what I have now, but the bottom conrner graphic is appearing directly underneith the top corner graphic instead of appearing after the content-area, it'll only appear after wards when float:right is set in content-bottombrush, but then there is unnessasary space appearing afterwards:-
<div id="content-topbrush"></div>
<div id="content-area">
<div id="content-top"></div>
<div id="content-mid">
<jdoc:include type="component" />
</div>
<div id="content-btm"></div>
</div>
<div id="content-bottombrush"></div>
#content-area {
float:left;
top:-195px;
position: relative;
left:0px;
width: 100%;
z-index:100;
}
#member-stats {
width: 100%;
}
#content-topbrush{
position: relative;
top: 0px;
left: -23px;
width: 218px;
height: 217px;
background: url(../images/top_content_brush.gif) no-repeat;
z-index: 1;
}
#content-top{
top: 0px;
left: 0px;
height: 21px;
width: 905px;
background: url(../images/content-top-01.jpg) bottom right no-repeat;
z-index: 100
}
#content-bottombrush {
top: 0px;
position: relative;
left: 23px;
width: 218px;
height: 217px;
background: url(../images/bottom_content_brush.gif) no-repeat;
z-index: 1;
}
#content-mid {
top: 0px;
left: 0px;
background: url(../images/content-mid-01.jpg) right repeat-y;
padding: 0 20px 0 20px;
z-index: 100;
}
#content-btm {
top: 0px;
left: 0px;
height: 21px;
width: 905px;
background: url(../images/content-bottom-01.jpg) top right no-repeat;
z-index: 100
}
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
That's basically what already have but it shifted along the x-axis 230, what I ment by being directly undernieth the top brush is the y axis so that it is fully obscurred by the content box.
css.gif
css.gif
ASKER
Nailed it, made the bottom brush div tag the child of the bottom of the content box, set the appropriate left, and set the x-index to -1; Thanks for your help masterpass.
Good to know that and Glad that I could be of help !!!