I am trying to to create a small block of text which is surrounded by a border. I also wish to put a small title to the box. I have seen this done in some websites, and the image below shows exactly what I would like done. Could anyone please tell me the CSS that I would need to use to achieve this.
Terrible sorry, but as I am new to these forums you’ll have to follow the link below to see what I mean. I cannot post the image here.
I’m referring to the placement of “Vocabularies” in the image.
That looks like a legend in a form fieldset. To mimic such you can float a “titlebox” before the content and give it margin to place it over the border.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Untitled Page</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
#content{
border:2px solid #999;
padding:10px;
}
.titlebox{
float:left;
padding:0 5px;
margin:-20px 0 0 30px;
background:#fff;
}
</style></head><body>
<div id="content">
<div class="titlebox">Vocabularies</div>
<p>Lorem ipsum dolor sit amet consectetuer venenatis vitae Nulla fringilla consequat. Wisi magnis volutpat auctor Nulla Vivamus id In elit dictumst mollis. Curabitur auctor consectetuer dui interdum neque Curabitur vel auctor tellus netus. Sed tincidunt condimentum semper Vestibulum sed tellus ridiculus elit In dictum. Turpis lacus pellentesque In ac volutpat mi non nibh vitae laoreet. Elit.</p>
</div>
</body></html>
I discovered a problem with the above approach to creating a “Titlebox”. The approach detailed above works perfectly when I work on a page with a solid background.
I recently decided to add a background image to the webpage. Then the approach detailed above breaks down. I tried setting the background property to transparent, but that just showed the border below the text, making it look like the text was struck through.
Does anyone have any idea how I could create the same effect on a page with a background?
Yes, that background color was used to cover the border under the titlebox.
If you want a transparent titlebox, then there can’t be a top-border under it, as you said.
One solution could be to let the titlebox put the top-border on the content container, leaving the transparent part open. That takes two more elements, one for the two border parts and one to give vertical space to the title text in IE (in other browser the span is enough). The titlebox div is now used to constrain the right part of the top border:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Untitled Page</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
body{ background:#ffc}
p{ margin:10px}
#content{
position:relative;
margin:100px;
border:solid #999;
border-width:0 2px 2px;
padding-top:1px;
}
.titlebox{
position:absolute;
top:-.6em;
left:0;
padding:.6em 0 .6em;
width:100%;
height:2px;
overflow:hidden;
font-size:100%; /* any size */
line-height:1.2; /* corresponds to the padding and margins used */
}
.titlebox span{
float:left;
border:solid #999;
border-width:0 99em 0 30px;
height:2px;
}
.titlebox b{
position:relative;
display:block;
margin:-1.2em 0 -.6em;
padding:.6em 5px 0;
font-weight:400;
}
</style></head><body>
<div id="content">
<div class="titlebox"><span><b>Vocabularies</b></span></div>
<p>Lorem ipsum dolor sit amet consectetuer venenatis vitae Nulla fringilla consequat. Wisi magnis volutpat auctor Nulla Vivamus id In elit dictumst mollis. Curabitur auctor consectetuer dui interdum neque Curabitur vel auctor tellus netus. Sed tincidunt condimentum semper Vestibulum sed tellus ridiculus elit In dictum. Turpis lacus pellentesque In ac volutpat mi non nibh vitae laoreet. Elit.</p>
</div>
</body></html>
