SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    external css controlling images

    Using external style sheets. Want pictures and images controlled by external css but want to be able to change images to relate to the content of the page. Now using only 2 images but have an image file with many pictures that relate to the page content. What is the best way to do this. External CSS shown below:
    Thank You
    falcon

    * {
    margin: 0;
    padding: 0;
    }
    body {
    background-color: #FAEBD7;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color: #000000;
    padding: 10px;
    }
    a:hover {
    color: purple;
    background-color: white;
    font-weight: bold
    }
    #ads {
    min-height: 50px;
    text-align: center;
    border:1px solid darkblue;
    background-color: #FAEBD7;
    background-position: 5px center;
    }
    #banner {
    text-align: center;
    border:1px solid darkblue;
    background-image: url(Images/2R131.gif);
    background-repeat: no-repeat;
    background-position: 5px center;
    }
    #banner b {
    display: block;
    min-height: 120px;
    background-image: url(Images/3C331.gif);
    background-repeat: no-repeat;
    background-position: right center;
    margin: 0 5px;
    padding: 0 200px;
    font-weight: normal;
    }
    * html #banner b {
    height: 120px;
    }
    #banner h2 {
    color: #FF0000;
    font-size: 180%;
    margin-bottom: 10px;
    }
    #homelink {
    float: left;
    width: 64px;
    height: 17px;
    background-image: url(Images/ltblue-button.gif);
    margin-top: 7px;
    font-size: 1px;
    color: #428AFC;
    }
    #testlink {
    float: right;
    width: 64px;
    height: 17px;
    background-image: url(Images/lt_blue-button.gif);
    margin-top: 7px;
    font-size: 1px;
    color: #3C8FFC;
    }
    h3 {
    text-align: center;
    color: #FF0000;
    line-height: 30px;
    font-size: 130%;
    }

    .leftcol {
    float: left;
    width: 49.5%;
    padding: 5px 5px 5px 5px;
    }
    .rightcol {
    float: right;
    width: 49.5%;
    padding: 5px 5px 5px 5px;
    }
    .leftcol a, .rightcol a
    {
    margin-left: 5px;
    line-height: 1.5ex
    }
    .leftcol dt, .rightcol dt {
    padding-top: 5px;
    padding-left: 5px;
    }
    .leftcol dd, .rightcol dd {
    padding: 2px 5px 2px 30px;
    }
    .leftcol b, .rightcol b {
    display: block;
    padding: 2px 5px 2px 30px;
    }

    .leftcol, .rightcol {
    border:1px solid darkblue;
    margin-bottom: 5px;
    }
    .clear {
    clear: both;
    }

  2. #2
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Probably depends on how you're setting things up but one way would be to give each page a unique ID on the body element then you can specify which banner goes on which page. So for instance if you give your home page body the id #home you'd do this:

    Code:
    #home #banner {background-image: url(Images/ltblue-button.gif);}
    You could also call individual banners by using PHP if statements but if possible the first method seems easier.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  3. #3
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Tried replacing "#banner" with "#aero" (on each occurance-used both aero and banner example shown below) and changed "banner to aero on aerospace engineering webpage.
    All pages with banner worked but pages with aero did not work. I'm doing something wrong. It is not up on the web (will put it up if necessary) because it doesn't display correctly

    #banner {
    text-align: center;
    border:1px solid darkblue;
    background-image: url(Images/2R131.gif);
    background-repeat: no-repeat;
    background-position: 5px center;
    }

    #aero {
    text-align: center;
    border:1px solid darkblue;
    background-image: url(Images/2A331C.gif);
    background-repeat: no-repeat;
    background-position: 5px center;
    }

    Web page sample:
    <!--========== Banner ==========-->

    <div id="aero">
    <b><h2>Aerospace Engineering</h2>
    <p>Lists Aerospace Engineering tutorials, Aerospace Library, Aerodynamics for students, Modern Aerospace Museum, Free CAD Drawings, Flight Dynamics &amp; Control</p></b>
    </div>

    <!--========== Free Software ==========-->

    but this works

    <!--========== Banner ==========-->

    <div id="banner">
    <b><h2>FTP Client</h2>
    <p>FTP software is for transferring files between your PC and a remote computer anywhere on the internet using File Transfer Protocol &nbsp;(FTP), the standard for transferring files of any type or size, online.</p></b>
    </div>
    <!--========== FTP Software ==========-->

    Thank You
    falcon

  4. #4
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We'd need to see the rest I think.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  5. #5
    SitePoint Guru navyfalcon's Avatar
    Join Date
    Jul 2007
    Location
    So California, Los Angeles county, USA
    Posts
    719
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here it is, the site aerospace engineering is the only one I changed and below is the CSS. Slowly the site is changing from tables to CSS.
    Thank You for all your time and effort.
    falcon

    * {
    margin: 0;
    padding: 0;
    }
    body {
    background-color: #FAEBD7;
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    color: #000000;
    padding: 10px;
    }
    a:hover {
    color: purple;
    background-color: white;
    font-weight: bold
    }
    #ads {
    min-height: 50px;
    text-align: center;
    border:1px solid darkblue;
    background-color: #FAEBD7;
    background-position: 5px center;
    }
    #banner {
    text-align: center;
    border:1px solid darkblue;
    background-image: url(Images/2R131.gif);
    background-repeat: no-repeat;
    background-position: 5px center;
    }

    #aero {
    text-align: center;
    border:1px solid darkblue;
    background-image: url(Images/2A331C.gif);
    background-repeat: no-repeat;
    background-position: 5px center;
    }

    #banner b {
    display: block;
    min-height: 120px;
    background-image: url(Images/3A331A.gif);
    background-repeat: no-repeat;
    background-position: right center;
    margin: 0 5px;
    padding: 0 200px;
    font-weight: normal;
    }

    #aero b {
    display: block;
    min-height: 120px;
    background-image: url(Images/3C331.gif);
    background-repeat: no-repeat;
    background-position: right center;
    margin: 0 5px;
    padding: 0 200px;
    font-weight: normal;
    }

    * html #banner b {
    height: 120px;

    * html #aero b {
    height: 120px;

    }
    #banner h2 {
    color: #FF0000;
    font-size: 180%;
    margin-bottom: 10px;
    }

    #aero h2 {
    color: #FF0000;
    font-size: 180%;
    margin-bottom: 10px;
    }

    #homelink {
    float: left;
    width: 64px;
    height: 17px;
    background-image: url(Images/ltblue-button.gif);
    margin-top: 7px;
    font-size: 1px;
    color: #428AFC;
    }
    #testlink {
    float: right;
    width: 64px;
    height: 17px;
    background-image: url(Images/lt_blue-button.gif);
    margin-top: 7px;
    font-size: 1px;
    color: #3C8FFC;
    }
    h3 {
    text-align: center;
    color: #FF0000;
    line-height: 30px;
    font-size: 130%;
    }

    .leftcol {
    float: left;
    width: 49.5%;
    padding: 5px 5px 5px 5px;
    }
    .rightcol {
    float: right;
    width: 49.5%;
    padding: 5px 5px 5px 5px;
    }
    .leftcol a, .rightcol a
    {
    margin-left: 5px;
    line-height: 1.5ex
    }
    .leftcol dt, .rightcol dt {
    padding-top: 5px;
    padding-left: 5px;
    }
    .leftcol dd, .rightcol dd {
    padding: 2px 5px 2px 30px;
    }
    .leftcol b, .rightcol b {
    display: block;
    padding: 2px 5px 2px 30px;
    }

    .leftcol, .rightcol {
    border:1px solid darkblue;
    margin-bottom: 5px;
    }
    .clear {
    clear: both;
    }

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,269
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This is probably easier to explain with a simple example.

    You don't need to change all the styles just to change the image. The id is added to the body tag only and effects the necessary changes.

    Imagine the background colour is the image:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    #header{
        width:760px;
        height:100px;
        margin:20px auto;
        border:1px solid #000;
    }
    #home #header {background:red}
    #testpage #header {background:blue;}
    #testpage2 #header {background:green}
    </style>
    </head>
    <body id="home">
    <h1 id="header">Header</h1>
    </body>
    </html>
    On the page above the header will be red. If we just change the body id as follows the header will become blue.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    #header{
        width:760px;
        height:100px;
        margin:20px auto;
        border:1px solid #000;
    }
    #home #header {background:red}
    #testpage #header {background:blue;}
    
    </style>
    </head>
    <body id="testpage">
    <h1 id="header">Header</h1>
    </body>
    </html>
    If you wanted to change other aspects of the header you can still follow the same format.

    Code:
    #testpage2 #header {
        background:green;
        border:2px solid orange;
    }
    There is no need to change all the header styles but just make the changes needed.

    I notice you are using an ID of #banner which isn't a good idea as Norton has a habit of blocking elements called banner.


Bookmarks

Posting Permissions

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