SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast storkfmny's Avatar
    Join Date
    Mar 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Two different pictures in the same div.

    How do I place two different pictures in the header, one in the center (I got that one), and one in the left side. The picture in the center is my page title and works fine but when I try to locate a second (and different) picture in the left corner, the first pic disappears and the second one takes it's place in the center.
    I'm using a separate external css page for layout.

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Can you provide the code for us? It's not a lot of help when we don't even know what you're doing.

    Right now, I'd say use floats to align them.

    It'd go something like this:

    HTML:
    Code:
    <div id="Header">
    <img src="house.jpg" class="image left"alt="A picture of a house!" />
    <imb src="boat.jpg" class="image right" alt="A picture of a boat!"
    </div>
    CSS:
    Code:
    #Header
    {
     overflow:hidden;
     clear:both;
    }
    
    .image
    {
     float:left;
    }
    
    .right
    {
     margin-left:3em;
    }
    Y'know?
    ~TehYoyo

  3. #3
    SitePoint Enthusiast storkfmny's Avatar
    Join Date
    Mar 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I'm doing and would kind of like everything to stay in my stylesheet if that's possible. When I add another picture it messes up the first one.
    Code:
    #header {
     text-size: 4;
     font-family:,Arial,Helvetica,sans-serif;
     color: silver; 
     padding: 0px;
     height: 150px;
     width: 100% 
     background: black;
     background-image:url('psii.jpg');  background-repeat:no-repeat;
     background-position: center;
     
    }

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You'll need to provide more code that that: the full header CSS and the HTML that goes with it. Preferably, post a live link.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast storkfmny's Avatar
    Join Date
    Mar 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I showed above is the full CSS for the header and the HTML is just a blank div.
    Code:
    <div id="container">
    
    <div id="header">
    
    
    
    </div>
    The only thing in the header is the image from the CSS.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    You talked about "adding another picture", though. What do you mean by that? You can only have one background image on an element. If you want to do this all with bg images, why not just place both images into the one background image? That's the easiest option.

    It's best to use background images only if the images are for decoration only. If they contain important content (like a site title) they should be in the HTML, with appropriate alt text for those who can't see the image.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    You could use multiple CSS backgrounds like so:

    Code CSS:
    #header {
      background: url(bg1.jpg) left center no-repeat, url(bg2.jpg) right center no-repeat;
    }

    See W3C's information on backgrounds here to better understand how it all works.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by kohoutek View Post
    You could use multiple CSS backgrounds like so
    Indeed; thanks for pointing that out, Maleika. I decided not to mention it, because of the inevitable disappointment when the OP finds that it doesn't work in all browsers, as it's very new. Of course, if older browsers are not a concern, then this is another viable option.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Enthusiast storkfmny's Avatar
    Join Date
    Mar 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kohoutek View Post
    You could use multiple CSS backgrounds like so:

    Code CSS:
    #header {
      background: url(bg1.jpg) left center no-repeat, url(bg2.jpg) right center no-repeat;
    }

    See W3C's information on backgrounds here to better understand how it all works.
    AH HA!! Brilliant, just what I was looking for. Both of these images are for decorative purposes anyway but they make the site look nice. I made the site title image in Gimp and it came out nice, didn't really want to code it in...wouldn't be as spiffy looking.

    Thanks to both of you for you input and time.

  10. #10
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by storkfmny View Post
    AH HA!! Brilliant, just what I was looking for. Both of these images are for decorative purposes anyway but they make the site look nice. I made the site title image in Gimp and it came out nice, didn't really want to code it in...wouldn't be as spiffy looking.

    Thanks to both of you for you input and time.
    Although keep in mind that multiple backgrounds aren't supported in a lot of users/browsers (mainly, IE8 and below, which holds a lot of market share).

    ~TehYoyo

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by storkfmny View Post
    AH HA!! Brilliant, just what I was looking for. Both of these images are for decorative purposes anyway but they make the site look nice. I made the site title image in Gimp and it came out nice, didn't really want to code it in...wouldn't be as spiffy looking.

    Thanks to both of you for you input and time.
    Quote Originally Posted by TehYoyo View Post
    Although keep in mind that multiple backgrounds aren't supported in a lot of users/browsers (mainly, IE8 and below, which holds a lot of market share).

    ~TehYoyo
    In order to replicate your effects for IE8 and below, you'll need to add wrapper elements to hold the background image. Bit of a pain but that's what you're left with .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  12. #12
    SitePoint Enthusiast storkfmny's Avatar
    Join Date
    Mar 2012
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate the tips for sure...this is my first attempt at a website and can be a little confusing and a lot frustrating but it's coming along at a rather snails pace. I wouldn't be near as far as I am without the help I've been getting.
    It will be at least a few months before a launch (if I'm lucky) and if I can produce a few bucks, I'll surely remember who helped me and donate to the cause to ensure help is there for those in my own shoes.
    I had limited experience in programming basic on my first computer (trs80 model III) but that was thirty years ago and is totally different from this type of coding. But somehow I feel that it helps me to understand some of this stuff.
    My first codes came from HTML AND CSS book authored by Ian Lloyd and was directed to this site by that book.
    Thanks again!!!

  13. #13
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    What you may be working with here is "graceful degradation." In other words, the modern browser users get the spiffy double-pic display, while folks stuck with old crusty IE iterations get one and only one. But if it looks okay (i.e. the code "degrades" to give them the one-off pic display), then they're none the wiser and they go right on perusing your site without problems. Unless these kind of display effects are necessary, I usually don't bother with doing backflips for older browsers. That's doubly true for the "enhancement" effects like text-shadow, rounded corners, etc. That kind of thing is basically eye candy -- nice but not necessary.

    Ian's book is excellent. You might also be interested in another SP book, the CSS Anthology. The Head First into HTML and Head First into Web Design are also good starter books, as is SP alum Alex Dawson's Getting StartED Building Websites.

  14. #14
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    I think it's important to establish the importance of the elements you want to use these backgrounds for. Like Ryan and TehYoyo have pointed out; Using multiple backgrounds via CSS will only work in modern browsers, meaning it'll not work in legacy versions of IE (IE8 and under) and old versions of Firefox, Opera, and Safari.

    So, if you're using these backgrounds for mere decoration, as you noted, then it shouldn't matter much.

    You should definitely use a background color to go with your background images, should text be involved. The best way to find out whether your site is usable with the absence of these backgrounds, is to turn off images. If your site is as usable as it was with these backgrounds, then you should be safe.
    Maleika E. A. | Rockatee | Twitter | Dribbble




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
  •