homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Title Superimposed on Top Border of Content Box
CSS page setup
lenwood

5+ Year Member



 
Msg#: 6628 posted 5:19 pm on Jun 4, 2005 (gmt 0)

Hi All.

I'm glad that I found this forum, its a huge help to peruse others' questions and have a place to post mine. I also appreciate that there aren't spam posts here.

I'm in the process of designing a new layout for my site, and I'd like to have my content boxed in, with the titles (or headers) superimposed on the top border of the box. For Windows users, you can see what I'm talking about by right click on 'My Computer', selecting properties and then the 'hardware' tab. I want something similar to the Device Manager, Drivers (etc) boxes for my page.

So in order to accomplish this would I use positioning to lay the title text on top of that top border? Or would it be better (easier) to have the border interrupted and insert the text? Does my question make sense?

Thanks in advance,
Chris Leonard

 

creativexperience

5+ Year Member



 
Msg#: 6628 posted 9:26 pm on Jun 4, 2005 (gmt 0)

Are you using tables within your layout or will it be a pure css layout?

If you want to use pure css, this may help you.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Fieldsets and Legends</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--

fieldset{
display:block;
float:left;
width:318px!important;
width:320px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:20px;
margin-left:20px;
border:1px solid #CCCCCC;
}

legend{
padding:2px 5px;
border:1px solid #CCCCCC;
}

#content{
display:block;
float:left;
padding:10px;
}

-->
</style>

</head>

<body>

<fieldset>

<legend>Text on the border</legend>

<div id="content"> Place your content here</div>

</fieldset>

</body>
</html>

lenwood

5+ Year Member



 
Msg#: 6628 posted 10:56 pm on Jun 4, 2005 (gmt 0)

Wow, that's perfect, and easy. Thanks creativexperience. I tried playing with it some, to see if I could get the time & date (or any text, really) to appear in the bottom right hand corner of the border, just as the title (or legend) appears in the top left.

Is there another CSS element that I should use for that?

Also, I plan to round the corners of this box. Do you forsee any issues with me applying the required code and images to this stylesheet?

Thanks again, I wasn't expecting this to be so easy.

Chris

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 6628 posted 1:10 am on Jun 5, 2005 (gmt 0)

Why are there two width: rules for fieldset elements? I tried eliminating the first one (assuming that the second overwrites it any way) and couldn't uncover any changes. Is this a bug-fix of some kind?

creativexperience

5+ Year Member



 
Msg#: 6628 posted 2:32 am on Jun 5, 2005 (gmt 0)

"lenwood" to be honest im not to sure if you can round the corners off, ive just tried a fiew things out with your text or time at the bottom and when the div is set to absolute-bottom it jumps to the bottom of the browser window. So if this is the case then if you try to place rounded images in each corner then i dont think it will work, but i could be wrong, nobodys perfect.

This is how i got the text in the bottom right corner:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>Fieldsets and Legends</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--

fieldset{
display:block;
float:left;
width:318px!important;
width:320px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
margin-top:20px;
margin-left:20px;
border:1px solid #CCCCCC;
}

legend{
padding:2px 5px;
border:1px solid #CCCCCC;
}

#content{
display:block;
float:left;
padding-top:10px;
padding-left:10px;
padding-right:0;
padding-bottom:0;
margin:0;
}

#content p{
padding-right:10px;
padding-bottom:10px;
margin:0;
}

.timestamp{
display:block;
float:right;
}

-->
</style>

</head>

<body>

<fieldset>

<legend>Text on the border</legend>

<div id="content">

<p>Place your content here</p>
<p>Place your content here</p>
<p>Place your content here</p>
<p>Place your content here</p>

<div class="timestamp">TEST</div>

</div>

</fieldset>

</body>
</html>

In my last post i forgot about the!important rule, i design my sides so that they render in FF & IE5+, with the doctype i use i need to use the!important rule. (I hope i get this the right way around) As the IE doesnt render how it should (W3C) i need to take the padding or border size away from my width or height, so that it looks the same in both browsers.
FF adds the padding or border to the normal width, therefor i take it away and place the!important rule in, as IE doesnt recognize the!important rule, it automatically goes to the normal width or height and all the other browsers that know the Important rule use the smaller measurements.

creativexperience

5+ Year Member



 
Msg#: 6628 posted 2:39 am on Jun 5, 2005 (gmt 0)

Lenwwod, ive just read your post again and ive noticed that i misunderstood the first time. The legend is a description block or title and so far as i know it can only be used once and is always positioned in the top.

lenwood

5+ Year Member



 
Msg#: 6628 posted 6:06 am on Jun 5, 2005 (gmt 0)

Yo Tedster, a style that is designated as "!important" will win out over contradictory styles of otherwise equal weight.

I don't see how it could make a difference with this example, but it can be useful if you want to force what a user sees on the screen. For example, if a user has their browser font size set to the maximum, or forces text colors to make pages easier to read, the browser will ignore font sizes & colors given by the css file unless the author specifies the font size with "!important". I think you can use it with any type of element in CSS.

Creativexperience, thanks for being willing to spend time playing with code. After I posted my last note I spent some time playing with it and had the same results. The text does appear in the bottom right corner, but it doesn't superimpose the bottom border, as the legend text does at the top. I may play with it some more tomorrow to see if I can force it to overwrite the border, as you might if you wanted text to appear on top of an image. My brain isn't deft enough to put all of the pieces together tonight though. If I get it to work, I'll post my code.

createErrorMsg

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 6628 posted 4:15 pm on Jun 5, 2005 (gmt 0)

lenwood, what you want is totally doable, but understand that it is also fairly complex, as doing it right and in a way that displays reliably cross-browser requires some html acrobatics and what seems at first to be non-intuitive background image placement.

Before I go on, let's see if understand the details of what you want:
1) You want a box with rounded corners around variable height content.
2) You want to draw a horizontal line that sections off the top portion of the box for a header. You then want to place header text within that bax.
3) You also want to section off the bottom portion of your box for a footer. You want to place text in this footer, as well.

Does that about sum it up?

Let's start with this....

fieldset

Technically speaking, fieldset [w3.org] is a a form element meant to group associated inputs together and increase the accessibility of web forms. Using it in a non-form context is a semantic faux pas and could be an accessibility hazard (it's likely to confuse users accessing your site through screen readers and the like, as they will presume the content is a form of some kind, which it isn't).

I would avoid using fieldset/legend for this application, despite the fact that it seems somewhat more convenient.

The key to creating a box like the one you want with pure CSS lies in setting the sliced up peices of the box as the background for various elements. Which elements get which backgrounds is the tricky part, as the container and the positioning of the background within it are critical peices.

Let's assume for now that you know what the width of the box will be, but that the height will be variable depending on the content. (Let's assume this because boxing in a variable width box is about three-times more complicated. ;))

Step 1: Images
You'll need three images to do this...
1) The top border of the box. it will have the rounded corners are the background color for the "header" section of the box. Ideally, make it the height that you want the header section to be.
2) A small, 1px high image that is the width of the box and has the left and right borders of the box at it's edges. If you've ever sliced up an image in Photoshop or Fireworks, you knwo what I mean.
3) The bottom border image should have the rounded corners and background for the bottom of the box.

Step 2: Mark-up
Now, you'll need the markup. Since there are three images, we need at least three elements to attach them to.


<div id="box_outer">
<div id="box_inner">
<h2>Header or Title</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p class="foot_text">Lorem ipsum.</p>
</div>
</div>

This gives us an outer box with an inner box nested inside of it. Being block level divs, the inner box fills the outer box from top to bottom. At the top of the inner box, we have a header element, followed by paragraphs. The last one has been given a class of "footer_text," which will serve as a hook to get the text in the lower right corner as you wanted.

Step 3: CSS
Now let's attach the images to the markup with the CSS.

We'll set the middle image, the one with the left and right borders in it, as a background on the box_outer div. As the top level parent, this will allow the other two images to overlap it and cover up the side borders at the top and bottom, rather than the other way around.

We'll then set the bottom image as the background for box_inner. Since it fills box_outer, we can position the background image at the bottom of that div and it will sit at the bottom, overlapping the side borders and creating our bottom edge.

Next, we'll set the top image as background for the <h2> tag. Being the first nested child of box_inner, it will sit at the ver top (provided we remove its margins) and provide the top edge. And since <h2> is itself a text holding tag, the header text inside it will automatically sit inside of the border.

Last, we'll tweak margins and padding and text-alignment to get the text sitting where we want it. The exact settings will vary depending on the images you use. I'll comment the CSS to make it obvious what the settings should be based on.

Here's the test page. Simply plug in your image paths and alter where necessary to fit their dimensions. Although this should be relatively easy to do yourself, send me a sticky if you're having any trouble creating the images. I can point you toward some that you can use as a model for making your own.

cEM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rounded Box Borders With Semantic CSS</title>
<style type='text/css'>
body{
font:70%/1.7 Verdana, Tahoma, sans-serif;
}
*{
margin:0; /*these two styles remove the margins and padding from everything on the page. Since we want to maintain tight control over these, we get rid of them all and then add back in only the one's we want*/
padding:0;
}
#box_outer{
width:300px; /*set equal to box/image width*/
background:url(middle.gif) repeat-y; /*repeating image for left and right borders*/
}
#box_inner{
background:url(bottom.gif) bottom no-repeat; /*non-repeating image for bottom border*/
}
#box_inner h2{
padding:0 10px; /*to move header text in from the edge. We use padding, rather than margins, because backgrounds display in padding space*/
line-height:45px; /*set equal to top "border" height*/
background:url(top.gif) top no-repeat; /*non-repeating image for top border*/
}
#box_inner p{
margin: 10px 10px; /*margins are okay to use on the paragraphs because the images don't depend on what the paragraphs do*/
}
#box_inner p.foot_text{
text-align:right; /*moves the date to the right*/
margin-bottom:0; /*ensures that the date text stays down "inside" the bottom border, although actually it is only sitting on top of it*/
}</style>
</head>
<body>
<div id="box_outer">
<div id="box_inner">
<h2>Header or Title</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
<p class="foot_text">06/05/05</p>
</div>
</div>
</body>
</html>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved