Results 1 to 10 of 10
  1. #1
    Join Date
    Jul 2010
    Posts
    79
    Plugin Contributions
    0

    Default Three seperate images along the header.

    Trying to get three seperate images along the header.
    This is what I have so far.
    This sort of was the code I'm using for a single header image with 3 links, except I took out the background image from the imageheader and added 1 each to the rest of the code.

    They just float next to each other and not the way I want them too.
    One should be left aligned, one center, and the other right aligned.

    Code:
    #imagemapheader {
    width: 1024px;
    height:150px;
    margin-top:0px;
    display: block;   margin-left: auto;   margin-right: auto;
    }
    
    #club {
    background-image: url(../images/Headerl.jpg);
    background-repeat: no-repeat;
    float: left;
    position: absolute;
    width: 238px;
    height: 150px;
    margin-left: 0px;
    margin-top: 0px;
    }
    
    #ps {
    background-image: url(../images/Headerc.jpg);
    background-repeat: no-repeat;
    float: center;
    position: absolute;
    width: 573px;
    height: 150px;
    margin-left: 274px;
    margin-top: 0px;
    }
    
    #calander {
    background-image: url(../images/Headerr.jpg);
    background-repeat: no-repeat;
    float: right;
    position: absolute;
    width: 164px;
    height: 150px;
    margin-left: 860px;
    margin-top: 0px;
    Last edited by FragaGeddon; 28 Aug 2010 at 02:41 AM.

  2. #2
    Join Date
    Aug 2005
    Location
    Arizona
    Posts
    27,761
    Plugin Contributions
    9

    Default Re: Three seperate images along the header.

    float: center; is not valid

    use text-align: center;
    Zen-Venom Get Bitten

  3. #3
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Three seperate images along the header.

    Also,
    float: right;
    and
    position: absolute;
    do not go together; it will be either one or the other, and since the position: absolute; comes later, that is what governs. But an absolotely positioned element that you want at the right edge needs to have
    right: 0;
    to make it hug the right edge.

  4. #4
    Join Date
    Dec 2009
    Location
    Amersfoort, The Netherlands
    Posts
    2,846
    Plugin Contributions
    25

    Default Re: Three seperate images along the header.

    Silly question maybe, but why don;'t you make one big picture of the three ?

  5. #5
    Join Date
    Jul 2005
    Location
    Upstate NY
    Posts
    22,010
    Plugin Contributions
    25

    Default Re: Three seperate images along the header.

    Adapting to a fluid width layout would be a good reason to do it this way. Of course, the width here does appear to be fixed at 1024px (which, by the way, will force a horizontal scrollbar in a 1024x768 screen).

  6. #6
    Join Date
    Jul 2010
    Posts
    79
    Plugin Contributions
    0

    Default Re: Three seperate images along the header.

    Quote Originally Posted by gjh42 View Post
    Adapting to a fluid width layout would be a good reason to do it this way. Of course, the width here does appear to be fixed at 1024px (which, by the way, will force a horizontal scrollbar in a 1024x768 screen).
    Yeah that was from the code for a single image.

    Code:
    #imagemapheader {
    width: 1024px;
    height:150px;
    background-image: url(../images/Header.jpg);
    background-repeat:no-repeat;
    margin-top:0px;
    display: block;   margin-left: auto;   margin-right: auto;
    }
    
    #club {
    float:left;
    position:absolute;
    width: 238px;
    height: 150px;
    margin-left:0px;
    margin-top:0px;
    }
    
    #ps {
    float:left;
    position:absolute;
    width: 573px;
    height: 150px;
    margin-left:274px;
    margin-top:0px;
    }
    
    #calander {
    float:left;
    position:absolute;
    width: 164px;
    height: 150px;
    margin-left:860px;
    margin-top:0px;
    }
    I'll try and do what you guys said and see how it works. I'll also need all three image to have a link.

  7. #7
    Join Date
    May 2010
    Posts
    125
    Plugin Contributions
    0

    Default Re: Three seperate images along the header.

    Hi also looking to add an additional image to my header as well as additional txt and a link sounds great! wondered how far you had got with your solution - would rather take some advice than try invent this wheel!

  8. #8
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Three seperate images along the header.

    Quote Originally Posted by FragaGeddon View Post
    Trying to get three seperate images along the header.
    This is what I have so far.
    This sort of was the code I'm using for a single header image with 3 links, except I took out the background image from the imageheader and added 1 each to the rest of the code.

    They just float next to each other and not the way I want them too.
    One should be left aligned, one center, and the other right aligned.

    Code:
    #imagemapheader {
    width: 1024px;
    height:150px;
    margin-top:0px;
    display: block;   margin-left: auto;   margin-right: auto;
    }
    
    #club {
    background-image: url(../images/Headerl.jpg);
    background-repeat: no-repeat;
    float: left;
    position: absolute;
    width: 238px;
    height: 150px;
    margin-left: 0px;
    margin-top: 0px;
    }
    
    #ps {
    background-image: url(../images/Headerc.jpg);
    background-repeat: no-repeat;
    float: center;
    position: absolute;
    width: 573px;
    height: 150px;
    margin-left: 274px;
    margin-top: 0px;
    }
    
    #calander {
    background-image: url(../images/Headerr.jpg);
    background-repeat: no-repeat;
    float: right;
    position: absolute;
    width: 164px;
    height: 150px;
    margin-left: 860px;
    margin-top: 0px;
    You could also use the multiple background capabilities of CSS3

    #imagemapheader {
    width: 1024px;
    height:150px;
    margin-top:0px;
    background: url(../images/bg-2.png)top left no-repeat, url(../images/bg-3.png)top center no-repeat, url(../images/bg-1.png)top right no-repeat #E3E0D4;
    }

    This will work in FF, Opera, Safari and Chrome.

    It will be ignored in IE7/8 unless your combine the three images into one image and modify the above as follows:

    #imagemapheader {
    width: 1024px;
    height:150px;
    margin-top:0px;
    background: url(../images/bg-main) top left no-repeat #E3E0D4;
    background: url(../images/bg-1.png)top left no-repeat, url(../images/bg-2.png)top center no-repeat, url(../images/bg-3.png)top right no-repeat #E3E0D4;
    }

  9. #9
    Join Date
    Jul 2010
    Posts
    79
    Plugin Contributions
    0

    Default Re: Three seperate images along the header.

    Quote Originally Posted by clydejones View Post
    You could also use the multiple background capabilities of CSS3

    #imagemapheader {
    width: 1024px;
    height:150px;
    margin-top:0px;
    background: url(../images/bg-2.png)top left no-repeat, url(../images/bg-3.png)top center no-repeat, url(../images/bg-1.png)top right no-repeat #E3E0D4;
    }

    This will work in FF, Opera, Safari and Chrome.

    It will be ignored in IE7/8 unless your combine the three images into one image and modify the above as follows:

    #imagemapheader {
    width: 1024px;
    height:150px;
    margin-top:0px;
    background: url(../images/bg-main) top left no-repeat #E3E0D4;
    background: url(../images/bg-1.png)top left no-repeat, url(../images/bg-2.png)top center no-repeat, url(../images/bg-3.png)top right no-repeat #E3E0D4;
    }
    Thanks dude. I'll have to try that out. Is there a way to have each image linked to a url?
    Also can the outer images float? Because when using top left and top right.
    Another thing that I just noticed is that if you resize the window, the images don't move, so you could loose the right image.
    Oh well it's getting there.

  10. #10
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

    Default Re: Three seperate images along the header.

    Quote Originally Posted by FragaGeddon View Post
    Thanks dude. I'll have to try that out. Is there a way to have each image linked to a url?
    Also can the outer images float? Because when using top left and top right.
    Another thing that I just noticed is that if you resize the window, the images don't move, so you could loose the right image.
    Oh well it's getting there.
    Do a google for css3 multiple images.

    There are several tutorials and articles on implementing this ability.

 

 

Similar Threads

  1. Three Different Images For The Same Product
    By rdcast in forum Customization from the Admin
    Replies: 2
    Last Post: 3 Aug 2011, 07:36 PM
  2. Three images along the header.
    By FragaGeddon in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 25 Jul 2010, 08:55 PM
  3. Re-positioning the shop so there is space along the top?
    By tempest in a teacup in forum Templates, Stylesheets, Page Layout
    Replies: 4
    Last Post: 22 Jan 2009, 11:59 PM
  4. Three seperate mods, one common error
    By strelitzia in forum General Questions
    Replies: 1
    Last Post: 22 Nov 2007, 03:45 PM
  5. How to copying attributes images along with attribute?
    By shocker in forum Setting Up Categories, Products, Attributes
    Replies: 3
    Last Post: 14 Aug 2007, 04:52 AM

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
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR