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 13 of 13
  1. #1
    New Coder
    Join Date
    Aug 2007
    Posts
    71
    Thanks
    17
    Thanked 0 Times in 0 Posts

    Help with background

    I am a novice with CSS, more experienced with HTML......

    Just created a new site here: www.fastpitchelite.com

    Added a sub-page here: www.fastpitchelite.com/coaches.htm


    I used a free template. I want my sub-page to maintain all of the characteristics of my main page, EXCEPT, I want the sub-page background to be a solid gray color, instead of the two-toned gray that is currently appearing. How can I rectify this without affecting my main page?

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    add this in the head tags to your sub page

    Code:
    <style type="text/css">
    
    body {
    	background: #eee;
    }
    </style>

    Hopefully that helps.
    Last edited by PitbullMean; 02-28-2009 at 01:50 AM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    the other way to do it is to add body style unique to each page. cause that 2 tone gray aspect is an img,

    so you could do this to ur main page

    Code:
    <style>
    body {
    background: #000000 url(images/main-bg.gif) repeat-x;
    }
    </style>
    but remove that same line in your CSS file.

    then put the previous post in ur sub page, that will make the image not to be called period unless you want it to by putting it on each individual page
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Or, instead of attached CSS, you could give each body an id. Like this:

    page1:
    Code:
    </head>
    <body id="bg_image">
    page2:
    Code:
    </head>
    <body id="gray">
    style.css:
    Code:
     body {	
            color: #eeeeee;
    	font-family: arial, arial;
    	font-size: 12px;
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    }
    body#gray {
            background: #ccc;
    }
    body#bg_image {
    	background: #000000 url(images/main-bg.gif) repeat-x;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Aug 2007
    Posts
    71
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Thanks Pitbull, i tried those suggestions, but the only change was the sidebars went from black to light gray........?

  • #6
    New Coder
    Join Date
    Aug 2007
    Posts
    71
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Trying your idea now Excavator

  • #7
    New Coder
    Join Date
    Aug 2007
    Posts
    71
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Same thing Excavator--the only change was the black sidebars became light gray--body did not change.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Haha, I think I see what's going on. Your watching the body change and wanting #left and #right to change.

    Look at this:
    Code:
    #left {
    	background: #ccc;
    	float: left;
    	padding-bottom: 20px;
    	padding-left: 20px;
    	padding-right: 20px;
    	padding-top: 80px;
    	width: 462px;
    }
    #stats {
    	background: #ccc;
    	padding: 10px;
    	width: 254px;
    }
    
    #headlines {
    	background: #666666;
    	height: 199px;
    	padding: 10px;
    	width: 254px;
    }
    Last edited by Excavator; 02-28-2009 at 03:28 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    HAHA I call that miss information LOL!!!
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #10
    New Coder
    Join Date
    Aug 2007
    Posts
    71
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Correct....so is it possble to change the left/right into a solid color AND be able to post content across the entire width instead of in 2 separate columns in sub-pages only, without affecting the main page? Thanks for the assistance guys.....

  • #11
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Of course add this to ur CSS file preferably under the #left set of attributes

    Code:
    #subpage {
    	background: #666666;
    	float: left;
    	padding-bottom: 20px;
    	padding-left: 20px;
    	padding-right: 20px;
    	padding-top: 80px;
    	width: 735px;
    }
    then find <div id="left"> and in the sub page and replace it with <div id="subpage">
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • Users who have thanked PitbullMean for this post:

    billvasko (02-28-2009)

  • #12
    New Coder
    Join Date
    Aug 2007
    Posts
    71
    Thanks
    17
    Thanked 0 Times in 0 Posts
    Awesome, thanks PitBull--it worked perfectly!!!

  • #13
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Quote Originally Posted by billvasko View Post
    Awesome, thanks PitBull--it worked perfectly!!!
    Glad to help, If you need any graphics give me a shout.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.


  •  

    Posting Permissions

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