Sent by Adam Kuehn on 29 September 2004 18:06
Mike wrote:
>===================
>Greetings,
>
>I am trying to duplicate a simple table using CSS
>
>"ch3.htm" is what I am trying to duplicate
>
>"borders.html" Is what I have so far and cannot seem to get any further.
>Files are located: http://mbreiding.us/border/
>
>Any suggestions?
>=========================
>
>>Well, you're almost there, aren't you?
>>
>>Don't use <p class="title"> but rather stick to h1 and style this tag.
>>Something like
>>
>>h1 { padding: 0; margin: 0; border-bottom: put your border here;
>>add-colors; } and so on.
>>
>>HTH.
>
>
>This above did not make any difference.
>I still have the top gap and I cannot get the additional borders
>under the title.
>I would really like to get his figured out.
>Thanks,
>-Mike
Try this:
Markup:
<div class="borderouter" id="title">
<div class="borderinner">
<h1>An Outline of American History</h1>
</div>
</div>
<div class="borderouter">
<div class="borderinner">
<p class="content">stuff</p>
/*etc.*/
</div>
</div>
CSS:
..borderouter { border: 4px solid #eccdae; }
..borderinner { border: 1px solid #666; background-color #cce4b6; }
#title.borderouter, #title.borderinner { border-bottom: none; }
h1 { font-family: Times, serif; /*added generic font fallback*/
font-size: 1.5em; /*changed to screen-appropriate unit*/
text-align: center;
font-weight: bold;
padding: 10px 0px 10px 0px;
background-color: #80a2b3;
margin: 0 auto; /*note auto margin for standards-compliant centering*/
/*border: 1px solid #666;*/ /*redundant and removed*/ }
This worked for me quite well. Note that IE may not be able to
handle selectors of the form #id.class, in which case you'd just
class the first two divs separately and chain the selectors like so:
..borderouter, .borderoutertitle { border: 4px solid #eccdaee : }
..borderinner, .borderinnertitle { border: 1px solid #666; /*etc.*/ }
HTH,
--
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
