nootkan
10-21-2009, 05:26 AM
Forgive my ignorance, but I am new to css and have been looking through posts in this forum for information on how to create a simple bordered box with bordered header within it. I figure I must create a div and format it with a border but how to do it? Any tutorials on how to do this?
Here is an image of what I want to do:
http://www.vanislebc.com/images/smbox.gif
Here's what I've tried but I get a double border between divs.
#boxheader { width: 155px;
background-color:#00a8e1;
border: solid;
color:#000000;
}
#box { width: 155px;
border:solid;
color:#000000;
}
<div id="boxheader"><h1>Content for class "boxheader" Goes Here</h1></div>
<div id="box">Content for class "box" Goes Here</div>
</div>
Got it to work with this:
#boxheader {
width: 155px;
background-color:#00a8e1;
color:#000000;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}
Here is an image of what I want to do:
http://www.vanislebc.com/images/smbox.gif
Here's what I've tried but I get a double border between divs.
#boxheader { width: 155px;
background-color:#00a8e1;
border: solid;
color:#000000;
}
#box { width: 155px;
border:solid;
color:#000000;
}
<div id="boxheader"><h1>Content for class "boxheader" Goes Here</h1></div>
<div id="box">Content for class "box" Goes Here</div>
</div>
Got it to work with this:
#boxheader {
width: 155px;
background-color:#00a8e1;
color:#000000;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
}