PDA

View Full Version : A box to group heading with text?



eikai
Mar 29th, 2010, 07:53 AM
I'm making a news system and would like headers to appear as if they're grouped.

Not sure how to explain it so here's a picture x]
http://img220.imageshack.us/img220/7686/mmd.png

So.. H3 would sit in H2 and H2 would sit in H1 :D
(So each heading will have a coloured box with it which surrounds the headings within it)

How would I go about doing this? >-<
It'd be a little like how these code boxes are grouped: (But without the 'code:')

News (H1)

Title1 (H2)

Subject (H3)
Text here

Title2 (H2)

Subject (H3)
Text here


(Ugh.. poor example lol x] )

met
Mar 29th, 2010, 08:50 AM
something like ~



<div class="header-one">
<h1>Header One</h1>
<div class="header-two">
<h2>Header Two</h2>
<div class="header-three">
<h3>Header Three</h3>
<p>content..</p>
</div>
</div>




.header-one {
border:1px solid red;
}
.header-two {
border:1px solid blue;
margin-left:15px;

}
.header-three {
border:1px solid green;
margin-left:30px;
}


would be ok

Excavator
Mar 29th, 2010, 08:56 AM
Hello eikai,
Yes, like met shows, you can't nest heading tags so you need to nest divs to hold the heading tags.
Another possible example -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
background: #FC6;
}
* {
margin: 0;
padding: 0;
}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
#firstBox {
width: 200px;
margin: 20px 0 200px 20px;
background: #6f3;
border: 2px solid #000;
}
#secondBox {
width: 175px;
margin: 0 auto;
background: #ccc;
}
h1, h2, h3 {
width: 150px;
margin: 0 auto;
border: 2px solid #000;
}
h3 {background: #fc6;}
</style>
</head>
<body>
<div id="container">
<div id="firstBox">
<h1>h1 text</h1>
<div id="secondBox">
<h2>h2 text</h2>
<h3>h3 text</h3>
<h2>h2 text</h2>
<h3>h3 text</h3>
<!--end secondBox--></div>
<!--end firstBox--></div>
<!--end container--></div>
</body>
</html>

eikai
Mar 29th, 2010, 11:46 PM
Ohh, didn't know you couldn't nest headings.
Thanks very much for the help :]