CSS help

Dr Nic

Hi Guys...
Im using the 3 column liquid template from dreamweaver that sets up a container with 2 sidebars of width 20% each and a content div of 60% inside it.

Now id like to setup a h1 tag that has a border the width of one of the sidebars.

It should be as simple as setting the width of <h1> as 100% i would have thought, but thats not working.
Any help please?
Thanks
John

[HTML]<div class="sidebar2">
<sbh>Backgrounds</sbh>
<p>By nature, the background color on any div will only show for the length of the content. </p>
<!-- end .sidebar2 --></div>[/HTML]


[HTML]#sbh {
/* [disabled]margin-top: 0; */ /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
/* [disabled]padding-right: 15px; */
/* [disabled]padding-left: 15px; */ /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
background-color: green;
width: 100%;
/* [disabled]margin: auto; */
/* [disabled]border: solid blue 1px; */
}[/HTML]

tricky D

What's sbh?

try

sidebar h1 {
/* [disabled]margin-top: 0; */ /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
/* [disabled]padding-right: 15px; */
/* [disabled]padding-left: 15px; */ /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
background-color: green;
width: 100%;
/* [disabled]margin: auto; */
/* [disabled]border: solid blue 1px; */
}

<div class="sidebar2">
<h1>Backgrounds</h1>
<p>By nature, the background color on any div will only show for the length of the content. </p>
<!-- end .sidebar2 --></div>

Dr Nic

Thanks, Now im getting the width but it goes outside the container...
Hmmm

<sbh> was just a tag i used instead of <h1>

Can anyone tell me what the difference is in a css file between using say

sidebar2 h1{}
vs
.sidebar2 h1{}
vs
.sidebar2 .h1{}
vs
#sidebar2 h1{}
vs
#sidebar2 #h1{}

tricky D

Opps

should have said:
.sidebar h1 {

Dr Nic wrote: »

Thanks, Now im getting the width but it goes outside the container...
Hmmm

<sbh> was just a tag i used instead of <h1>

Can anyone tell me what the difference is in a css file between using say

sidebar2 h1{}

is an error as above

Dr Nic wrote: »

.sidebar2 h1{}

h1 with parent class=sidebar2

Dr Nic wrote: »

.sidebar2 .h1{}

tag with class=h1 with parent class=sidebar2

Dr Nic wrote: »

#sidebar2 h1{}

h1 tag in parent with id=sidebar2

Dr Nic wrote: »

#sidebar2 #h1{}

id=h1 inside parent with id=sidebar2

id is unique, class can appear multiple times in a page

more:
http://www.w3.org/TR/CSS21/selector.html

louie

<h1 style='display:block; margin:0px; padding:2px 5px;font-size:14px; color:#cc0014;border-bottom:1px solid #cc0014;'>H1 tag</h1>

Try this

Liam Byrne

Louie beat me to it; the "display:block" is the key to getting the h1 to display as a....er.....block.

cormee

For proper document structure and from an SEO, semantics and accessibility point of view you shouldn't have more than 1 <h1></h1> on your page (which I'm assuming wouldn't be in your sidebar) so your original .sbh would be better than a <h1>

Dr Nic

Thanks Guys for your help.
I got sorted with my headers ok, but now my 3 columns are goosed. They wont align horizontally. Two are horizintally floated but the third is below them

css
[HTML]
#wrapper {
width: 900;
margin: auto;
border: 1px solid black;
padding: 5px;
}
#box-a {
width: 180px;
padding: 5px;
border: 1px solid gray;
float: left;
}

#box-b {
width: 500px;
padding: 5px;
border: 1px solid gray;
}

#box-c {
width: 180px;
padding: 5px;
border: 1px solid gray;
top: 0px;
right: 0px;
}
[/HTML]

[HTML]
<div id="wrapper">
<div id="box-a">
<h2>A floating box</h2>
</div>

<div id="box-b">
<h2>A static box</h2>
</div>

<div id="box-c">
<h2>Another static box</h2>
</div>
</div>
[/HTML]

louie

When you make boxes like this there are few rules to follow for getting the layout right:

1. you must make use of the FLOAT option (float:left;)
2. for precision no padding
3. these boxes are holder for other div which will have the padding and margins required
4. the width has to be precise and border should be assigned to the inside divs

#wrapper { 
 width: 900px;
 margin: auto; 
 border: 1px solid black; 
 padding: 5px; 
 } 
#box-a { 
 width: 180px; 
 padding: 0px; 
 float: left; 
 } 

#box-b { 
 width: 500px;
 padding: 0px;  
 float:left;
 } 
 
#box-c {
	width: 180px;
	padding: 0px;
	float:left;
 } 

and html

<div id="wrapper"> 
 <div id="box-a"> 
 	<div style="padding:5px;border: 1px solid gray;"><h2>A floating box</h2> </div>
 </div> 

 <div id="box-b"> 
 	<div style="padding:5px;border: 1px solid gray;"><h2>A static box</h2></div> 
 </div> 
 
 <div id="box-c"> 
 	<div style="padding:5px;border: 1px solid gray;"><h2>Another static box</h2> </div>
 </div> 
<div style="clear:both;"></div>
</div>