[CSS] Font problem?

[lvanhoe]

Hi there,

A designcompany recently build my site, and now i'm working on getting to know my way around CMS and CSS myself to be able to change stuff on my site myself.

Here, I am playing with different css-stuff:

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

There are some <div> tags there, that the designcompany made. Here's the code for the top <div> tags:

/*
<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;
}

So far so good. In the text below, you see that the text suddenly turned black and it's also in a different style. I tried to made that new <div> codes myself:

/*
<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;
}

Question now is: how do i get this (and following) tekst in the same font as the upper text?

Here's the complete CSS-file:


#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;
}

I hope someone can help me along the way of learning CSS myself!

Regards,

Ivo Swart

[koyama]

Question now is: how do i get this (and following) tekst in the same font as the upper text?
Remember that the font-family is inherited.

If you need the same font-family on all parts of your page you might as well set the font-family property for the root element:

html {
font-family: 'Century Schoolbook', Verdana, Arial, Helvetica, sans-serif;
}

[lvanhoe]

And where exactely do i insert this code? In the normal style.css where all the code is located?

[koyama]

And where exactely do i insert this code? In the normal style.css where all the code is located?
Yes, exactly.

[lvanhoe]

Thanks, it worked! I had to add a few things like standard color, linespacing and all, so the code looked finally like this :


html {
font-family: 'Century Schoolbook', Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#5D4707;
float:left; */
position: absolute;top: 292px;left: 164px;width: 500px;line-height: 1.5;
}


So many thanks for your fast and accurate answer - I hope my adding helps people in the future.

Regards,

Ivo Swart

[_Aerospace_Eng_]

Ugh you aren't really supposed to style the html element that way. The better thing to do would be to change this
html {
font-family: 'Century Schoolbook', Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#5D4707;
float:left; */
position: absolute;top: 292px;left: 164px;width: 500px;line-height: 1.5;
}
to this
html,body {
font-family: 'Century Schoolbook', Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#5D4707;
line-height: 1.5;
}