[CSS] Probleem met Font van tekst

[lvanhoe]

Gegroet,

ik ben druk aan het experimenteren met HTML/CSS om mijn site (http://www.pokerhaai.nl) zelf aan te kunnen passen en niet afhankelijk te zijn van (dure) designbureau's.

Nu zit ik met het volgende:

http://pokerhaai.nl/?page_id=30

Op deze pagina (niet klikbaar vanuit het menu) ben ik aan het experimenteren. Nu heeft het designbureau dat de basis van de site heeft gemaakt hier een aantal <div> instellingen gemaakt. Dat zijn de bovenste buttons links, de middelste tekst en het lijstje met 'voordelen' rechts.

Zij hebben dit als volgt gedaan:

code:

/*
<div style="float: right; position: absolute; left: 215px; width:340px;" id="main_review">
*/
#tekst_hoofd{
    float: right;
    position: absolute;
    left: 205px;
    width: 340px;
}

/*
<div style="float: right; position: absolute; left: 595px; width:200px;" id="voordelen">
*/
#tekst_rechts{
    float: right;
    position: absolute;
    top: 55px;
    left: 580px;
    width: 200px;
}

/*
<div style="width:250px; position:absolute;" id="buttons_review">
*/
#buttons_review{
    top: 58px;
    width: 250px;
    position: absolute;
}

Prima, so far so good. Nu zie je de tekst eronder echter, die is zwart en staat niet in de jusite stijl (niet bruin en ander lettertype). Deze <divs> heb ik zelf gemaakt, op de volgende manier:

code:

/*
<div style="width:250px; position:absolute;" id="buttons_review2">
*/
#buttons_review2{
    top: 825px;
    left: 165px;
    width: 250px;
    position: absolute;
}

/*
<div style="float: right; position: absolute; left: 595px; width:200px;" id="voordelen2">
*/
#tekst_rechts2{
    float: right;
    position: absolute;
    top: 0px;
    left: 580px;
    width: 200px;
}

/*
<div style="float: right; position: absolute; left: 215px; width:340px;" id="main_review2">
*/
#tekst_hoofd2{
    float: right;
    position: absolute;
    top: 0px;
    left: 205px;
    width: 340px;
}

Mijn vraag is nu: hoe krijg ik de tekst in deze <divs> in hetzelfde font als de bovenste tekst?

Dit is de code voor het font:

code:

#content{
    height:auto;
    font-family: Cooper Medium BT, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#5D4707;
    text-align:left;
/*  float:left; */
    position: absolute;top: 292px;left: 164px;width: 500px;line-height: 1.5;
}

Maar waarom neemt die mijn eigen gemaakte DIV's nu niet mee?

Hier is tot slot het volledige CSS-bestand:

code:

#wrapper{
    width:1024px;
    height:100%;
    margin-left:0px;
    margin-right:auto;
    border-style:solid;
    border-right: 0px; 
    border-top: 0px; 
    border-left: 0px;
    border-bottom: 0px;
    background-image: url(img/spacer_beige.jpg);
}
body{
    margin-top: 0px;
    margin-left: 0px;
    text-align:left;
    background-image: url(img/bg.jpg);
    background-color:#fffeec;
    background-repeat: repeat-x;
}
#banner{
    width:1024px;
    height:292px;
    padding:0px 0px;
    background-image: url(img/header.jpg);
    
}
#menu, #menu a:link, #menu a:visited, #menu a:hover, #menu a:active {
    width:164px;
    height:auto;
    font-family: Century Schoolbook, Verdana, Arial, Helvetica, sans-serif;
    font-style:strong;
    font-size:15px; 
    color:#DCCFC0;
    text-align:center;
}
.links{
    padding-top:3px;
    height:33px;
    background-image: url(img/menu_item1.jpg);
}
.rechts{
    padding-top:6px;
    height:38px;
    background-image: url(img/menu_item2.jpg);
}
.onder{
    height:16px;
    background-image: url(img/menu_bottom.jpg);
}
#content{
    height:auto;
    font-family: Cooper Medium BT, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#5D4707;
    text-align:left;
/*  float:left; */
    position: absolute;top: 292px;left: 164px;width: 500px;line-height: 1.5;
}

/*
Deze wordt alleen gebruikt in de homepage template home.php
*/
#content_homepage{
    height:auto;
    font-family: Cooper Medium BT, Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#5D4707;
    text-align:left;
/*  float:left; */
    position: absolute;top: 292px;left: 164px;width: 900px;line-height: 1.5;
}
a:link {
    font-family: Verdana, Arial;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    text-decoration: underline;
}
a:visited {
    font-family: Verdana, Arial;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    text-decoration: underline;
}
a:hover {
    font-family: Verdana, Arial;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    text-decoration:none;
}
a:active {
    font-family: Verdana, Arial;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    text-decoration: none;
    
}
#menu table { 
    border: 0px;
    background-image: url(img/menu_bg.jpg);
    background-repeat: repeat-y;
}
table {
    font-size: 11px;
    color:#5D4707;
}re
TD { 
    border: 0px;
    padding-left: 21px; 
    padding-top: 0px; 
    padding-bottom: 0px; 
}
h3{
    font-size: 21px;
    color:#D3AC0B;
}
h2{
    font-size: 19px;
}
/*
Alleen stuff voor de review templates
*/
/*
<div style="float: right; position: absolute; left: 215px; width:340px;" id="main_review">
*/
#tekst_hoofd{
    float: right;
    position: absolute;
    left: 205px;
    width: 340px;
}

/*
<div style="float: right; position: absolute; left: 595px; width:200px;" id="voordelen">
*/
#tekst_rechts{
    float: right;
    position: absolute;
    top: 55px;
    left: 580px;
    width: 200px;
}

/*
<div style="width:250px; position:absolute;" id="buttons_review">
*/
#buttons_review{
    top: 58px;
    width: 250px;
    position: absolute;
}

/*
<div style="width:250px; position:absolute;" id="buttons_review2">
*/
#buttons_review2{
    top: 825px;
    left: 165px;
    width: 250px;
    position: absolute;
}

/*
<div style="float: right; position: absolute; left: 595px; width:200px;" id="voordelen2">
*/
#tekst_rechts2{
    float: right;
    position: absolute;
    top: 0px;
    left: 580px;
    width: 200px;
}

/*
<div style="float: right; position: absolute; left: 215px; width:340px;" id="main_review2">
*/
#tekst_hoofd2{
    float: right;
    position: absolute;
    top: 0px;
    left: 205px;
    width: 340px;
}

/*
Dit geld alleen voor de home template pagina!
*/
#tekst_home{
    width: 450px;
    float: left;
}
#tekst_nieuws{
    position: absolute;
    top: 0px;
    left: 500px;
    width: 340px;
}

ul.haai{
margin: 20px 0 10px 10px;
padding: 0;
list-style: none;
}

li{
margin: 5px 0 0 0;
padding: 0 0 0 25px;
background: url(http://pokerhaai.nl/wp-content/themes/pokerhaai/img/haaioog.jpg) no-repeat 0 2px;
}

[ Voor 52% gewijzigd door lvanhoe op 21-06-2020 02:50 ]

[P.O. Box]

als ik ff gauw kijk, denk ik dat het iets te maken heeft met het feit dat je de <div id="content"> al gesloten hebt, voordat de nieuwe divs geopend worden... m.a.w. je nieuwe divs zijn geen kinderen van de content-div en erven daar dus ook niet van over...

[lvanhoe]

Alright, dan enig idee wat ik moet aanpassen zodat de instellingen wél voor de hele page gaan gelden?

[P.O. Box]

ik weet niet 100% of dat het probleem is hoor, heb het niet gecontroleerd, maar als je je code een beetje meer in laat springen met tabs, kun je eenvoudiger controleren of alle divs die geopend worden, ook op het juiste moment worden gesloten... vb:

HTML:

<body>
    <div id="menu">
        <ul>
            <li>bla</li>
            <li>bla</li>
            <li>bla</li>
        </ul>
    </div>
    <div id="content">
        <div id="subcontent1">
            een inhoud
        </div>
        <div id="subcontent2">
            een andere inhoud
        </div>
    </div>
</body>

Als je het zo laat inspringen zie je vanzelf of een tag te vroeg of te laat of misschien helemaal niet wordt afgesloten...

het inspringen gaat bij jou "fout" (=rommelig en onoverzichtelijke code) vanaf:

HTML:

<!--    <div class="entry"> -->

CSS is gebaseerd op overerving... als een tag (in jouw geval een div) binnen een andere tag staat, dan erft deze eerste tag de settings van zijn ouder, tenzij expliciet is aangegeven dat een bepaalde setting voor dit kind anders moet zijn...

[ Voor 20% gewijzigd door P.O. Box op 18-05-2007 16:58 ]