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
    Jul 2008
    Location
    St. Mary Church, German Village
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can't Figure Out Style Sheet!

    i'm new to the whole html/css thing, and i used a pre-made template and re-did it, but now i can't get it to my server (freewebs)

    here's my code:

    Code:
    <style>/* CSS Basic Document */
    body
    {
    margin:0px auto;
    padding:0px;
    background-color:#93BF25;
    }
    td.off {
    background:(menu_bg.gif) 0px 0px repeat-x;
    height:25px;
    }
    td.on{
    background-color:#89B02B;
    height:25px;
    color:#FFFFFF;
    }
    td.mainoff {
    background:(main_menu_bg.gif) -130px 0px no-repeat;
    height:33px;
    }
    td.mainon{
    background:(main_menu_bg.gif) 0px 0px no-repeat;
    height:33px;
    }
    .logo
    {
    margin-left:19px;
    margin-top:16px;
    }
    .header_image_box
    {
    padding:0px 5px 4px;
    background-color:#FFFFFF;
    color: #5B5A5A;
    }
    .body_text_box
    {
    padding:35px 30px 15px 30px;
    background-color:#FFFFFF;
    color: #5B5A5A;
    }
    .body_left_bg
    {
    background:(body_left_bg.jpg) left top repeat-y;
    width:8px;
    }
    .body_right_bg
    {
    background:(body_right_bg.jpg) left top repeat-y;
    width:8px;
    }
    .footer_left_bg
    {
    background:(footer_left_bg.gif) left top no-repeat;
    height:33px;
    }
    .box_top_line
    {
    background:(top_line.gif) left top repeat-x;
    height:9px;
    }
    .box_left_line
    {
    background:(left_line.gif) left top repeat-y;
    width:9px;
    }
    .box_right_line
    {
    background:(right_line.gif) left top repeat-y;
    width:9px;
    }
    .box_bottom_line
    {
    background:(bottom_line.gif) left top repeat-x;
    height:9px;
    }
    .input_box
    {
    border:1px solid #72550F;
    width:108px;
    height:18px;
    background-color:#EDE9D7;
    font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-style: normal;
    line-height: 14px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #72550F;
    text-decoration: none;
    padding-left:3px;
    }
    .highlight
    {
    color:#72550F;
    background-color:inherit;
    font-size:14px;
    text-decoration:none;
    }
    
    
    
    
    /* CSS Background image Document */
    .menu_bg
    {
    background:(menu_bg.jpg) left top repeat-x;
    height:27px;
    }
    .body_left_bg
    {
    background:(body_left_bg.jpg) left top repeat-y;
    width:6px;
    }
    .body_right_bg
    {
    background:(body_right_bg.jpg) left top repeat-y;
    width:6px;
    }
    .header_top_image
    {
    background:(header_top_image.jpg) left top no-repeat;
    height:130px;
    }
    .header_bottom_image
    {
    background:(header_bottom_image.jpg) left top no-repeat;
    height:127px;
    }
    
    
    
    /* CSS Text Document */
    body {
    	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-style: normal;
    	line-height: 13px;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	color: #5B5A5A;
    	text-decoration: none;
    }
    .menu_link {
    	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-style: normal;
    	line-height: 25px;
    	font-weight: bold;
    	font-variant: normal;
    	text-transform: none;
    	color: #FFFFFF;
    	background-color:inherit;
    	text-decoration: none;
    }
    .menu_link:hover
    {
    text-decoration:underline;
    color:#FFFFFF;
    background-color:inherit;
    }
    .left_menu_link {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-style: normal;
    	line-height: 33px;
    	font-weight: normal;
    	font-variant: normal;
    	text-transform: none;
    	color: #72550F;
    	background-color:inherit;
    	text-decoration: none;
    }
    .left_menu_link:hover
    {
    text-decoration:underline;
    color:#4B3500;
    background-color:inherit;
    }
    .footer_link {
    	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	font-style: normal;
    	line-height: 23px;
    	font-weight: bold;
    	font-variant: normal;
    	text-transform: none;
    	color: #7AA01E;
    	background-color:inherit;
    	text-decoration: none;
    }
    .footer_link:hover
    {
    text-decoration:underline;
    color:#456200;
    background-color:inherit;
    }
    
    </style>
    the images are uploaded on my account, so they're on there. i'm so confused! help, please!

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    im guessing this is what you want.

    if you have an image, and lets say that it is in a folder called "gfx"

    and you have an html page, that is in the "root" folder

    then a code like this
    Code:
    td.off {
    background:(menu_bg.gif) 0px 0px repeat-x;
    height:25px;
    }
    should read

    Code:
    td.off {
    background:(gfx/menu_bg.gif) 0px 0px repeat-x;
    height:25px;
    }
    Hope that helps

  • #3
    New to the CF scene
    Join Date
    Jul 2008
    Location
    St. Mary Church, German Village
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i'm still just getting a solid green background... i moved everything to a folder named "abc" and when i put
    Code:
    background:(abc/menu_bg.gif) 0px 0px repeat-x;
    it still just has the green background...

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    have you set a width and height?

  • #5
    New to the CF scene
    Join Date
    Jul 2008
    Location
    St. Mary Church, German Village
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yeah...

    Code:
    background:(abc/menu_bg.gif) 0px 0px repeat-x;
    height:25px;

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Quote Originally Posted by stmaryyouthgrou View Post
    yeah...

    Code:
    background:(abc/menu_bg.gif) 0px 0px repeat-x;
    height:25px;
    I don't see a width set anywhere in your css.

    Your first line is also wrong.

    Code:
    <style>/* CSS Basic Document */
    It should be -

    <style type="text/css">

    W3 Validator also finds errors in the code,

    You can check here.

    (I may be wrong on this, but I think that the underscore character "_" should not be used in Div names. I could not find a source to check this out.)



    Frank
    Last edited by effpeetee; 07-10-2008 at 08:23 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

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