Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [CSS] Font problem?

    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:

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

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

    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;
    }
    I hope someone can help me along the way of learning CSS myself!

    Regards,

    Ivo Swart

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by lvanhoe View Post
    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:
    Code:
    html {
      font-family: 'Century Schoolbook', Verdana, Arial, Helvetica, sans-serif;
    }

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And where exactely do i insert this code? In the normal style.css where all the code is located?

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by lvanhoe View Post
    And where exactely do i insert this code? In the normal style.css where all the code is located?
    Yes, exactly.

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, it worked! I had to add a few things like standard color, linespacing and all, so the code looked finally like this :

    Code:
    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

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Ugh you aren't really supposed to style the html element that way. The better thing to do would be to change this
    Code:
    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
    Code:
    html,body {
      	font-family: 'Century Schoolbook', Verdana, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	color:#5D4707;
            line-height: 1.5;	
    }
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •