Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Oct 2011
    Posts
    10
    Member #
    29655
    Liked
    1 times
    Hi guys,

    I have a site with a menu that is #included in each page of my site. That way I have the same menu in each site. There is also a picture in the menu. However, how can I change that picture in each different page of my site?

    For example. Page 1, image1. Page 2, Image 2.

    I can't make new menu's for each page unless I want a nightmare to make small changes each time.

    Thanks for help!
    Dave

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Set a unique class in the body tag of each site, then target the element with the image in your CSS.
    So, <body class="page1"> <div class="image1">
    Then on your CSS, .page1 .class1{background: url('images/image1.png');}

    And do that for each page. You'll only have to do it once to set it up, then you make future changes in CSS.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Oct 2011
    Posts
    10
    Member #
    29655
    Liked
    1 times
    That would work, except that each page in my site includes the same menu, and on that menu there is a picture. Is there some kind of code I can write from anywhere in the HTML such as "change first image on this page to example.jpg".

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    I made a mistake before. Use the same class for the image div across the board, but a different class for each page. Then select the image's class like I showed above, by adding the body's class before the image's class.
    <body class="page1"><div class="image">

    .page1 .image{css}
    .page2 .image{different css}
    So on...
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    Oct 2011
    Posts
    10
    Member #
    29655
    Liked
    1 times
    I found out how to do it actually.

    I created a DIV with image background. Then on each page, I was able to just change the css inline, and that changed the image.

    Example:

    external css .banner has background image1.jpg

    html includes the external css.

    html uses <div id="banner"></div>

    then i can write an INLINE css that changes .banner to image2.jpg.

    So the inline overwrites the external css. It even works(for whatever reason), if i put the inline change at the end of my html, after the image.
    AlphaMare likes this.

  7. #6
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    technically speaking, the last bit of CSS to be read by a browser is what is displayed by the browser.

    I think the majority of people here don't use inline css styling becuause it's a bear to manage. It's already a supposition that inline css styling will go the way of the "flashing text" tag that no browser supports anymore. and if you define your pages with a strict doc type, inline tags are ignored.

    but hey, if it works, why not...

    glad you came back and told everyone it was working and HOW... as we get so many that ask a question, get the answer and away they go, we never know if anything we said actually helped them.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:52 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com