www.webdeveloper.com
Results 1 to 13 of 13

Thread: div tags 2 background images

  1. #1
    Join Date
    Jan 2005
    Posts
    313

    div tags 2 background images

    anyone know how I can make two background images sit side by side(50% ea) at 25px to display on one line, so the name "hello" images are together?

    <div style="background-image: url(blue_left.gif); width: 50%; height:

    25px; background-repeat: repeat; text-align: right;">
    <a>
    <img src="pages/images/chrome/small/h_clr.gif">
    <img src="pages/images/chrome/small/e_clr.gif">
    <img src="pages/images/chrome/small/l_clr.gif">
    &nbsp;&nbsp;&nbsp;
    </a></div>
    <div style="background-image: url(blue_right.gif);
    width: 50%; height:
    25px; background-repeat: repeat; text-align: left;">
    <a>
    <img src="pages/images/chrome/small/l_clr.gif">
    <img src="pages/images/chrome/small/o_clr.gif">

    </a></div>
    Last edited by ranosb; 02-02-2006 at 11:29 PM.

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Either combine the images or add a parent div that you can apply one of the background images to.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  3. #3
    Join Date
    Jan 2005
    Posts
    313
    Im new to div tags, parent div? Can you show me by example?

  4. #4
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    I simply mean that you can add another div and put the current div inside of it.

    Code:
    <div>
    <div style="background-image: url(blue_left.gif); width: 50%; height:
    
    25px; background-repeat: repeat; text-align: right;">
    <a>
    <img src="pages/images/chrome/small/h_clr.gif">
    <img src="pages/images/chrome/small/e_clr.gif">
    <img src="pages/images/chrome/small/l_clr.gif">
    &nbsp;&nbsp;&nbsp;
    </a></div>
    <div style="background-image: url(blue_right.gif);
    width: 50%; height:
    25px; background-repeat: repeat; text-align: left;">
    <a>
    <img src="pages/images/chrome/small/l_clr.gif">
    <img src="pages/images/chrome/small/o_clr.gif">
    
    </a></div>
    </div>
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  5. #5
    Join Date
    Jan 2005
    Posts
    313
    It still displays on two lines, like a <br> in between the background images...
    Will it not work?

  6. #6
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Oh, I misinterpreted your question.

    It's acting like a <br> because <div>s are block-level elements; they're supposed to do that.

    You should float the first div left and put a left margin on the second one.
    Code:
    <div style="background-image: url(blue_left.gif); float:left; width: 50%; height:
    
    25px; background-repeat: repeat; text-align: right;">
    <a>
    <img src="pages/images/chrome/small/h_clr.gif">
    <img src="pages/images/chrome/small/e_clr.gif">
    <img src="pages/images/chrome/small/l_clr.gif">
    &nbsp;&nbsp;&nbsp;
    </a></div>
    <div style="background-image: url(blue_right.gif);
    margin-left:50%; height:
    25px; background-repeat: repeat; text-align: left;">
    <a>
    <img src="pages/images/chrome/small/l_clr.gif">
    <img src="pages/images/chrome/small/o_clr.gif">
    
    </a></div>
    Here's some more information on floats:
    http://css.maxdesign.com.au/floatutorial/index.htm
    http://www.brunildo.org/test/#flo

    http://garyblue.port5.com/webdev/floatdemo.html
    http://www.csscreator.com/attributes/containedfloat.php
    http://www.positioniseverything.net/easyclearing.html
    http://www.quirksmode.org/css/clearing.html
    http://css-discuss.incutio.com/?page=ClearingSpace

    Curing Float Drops and Wraps
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  7. #7
    Join Date
    Jan 2005
    Posts
    313
    Thats almost perfect, only for some reason theres a white space in between each background image ____ ____..

    ~margin: 0; doesn't work, what is that white space from?
    ~Doesn't appear in Netscape though...

    Putting the code into a table and changing the first background image to"
    float:left; width: 100%;

    And the second image to:
    margin-left: 0%

    This closes the gap...
    Last edited by ranosb; 02-03-2006 at 04:16 AM.

  8. #8
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Don't use a table. IE6 is a bug ridden piece of junk.

    Try floating them both. You may need to clear them though.
    Code:
    <div style="background-image: url(blue_left.gif); float:left; width: 50%; height:
    
    25px; background-repeat: repeat; text-align: right;">
    <a>
    <img src="pages/images/chrome/small/h_clr.gif">
    <img src="pages/images/chrome/small/e_clr.gif">
    <img src="pages/images/chrome/small/l_clr.gif">
    &nbsp;&nbsp;&nbsp;
    </a></div>
    <div style="background-image: url(blue_right.gif);
    float:left; width: 50%; height:
    25px; background-repeat: repeat; text-align: left;">
    <a>
    <img src="pages/images/chrome/small/l_clr.gif">
    <img src="pages/images/chrome/small/o_clr.gif">
    
    </a></div>
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  9. #9
    Join Date
    Jan 2005
    Posts
    313
    Outstanding~ works like a charm.

    One last ?
    Div tags. The scripting in the tags, This is css? Doesn't css need <style> or an external css script to work properly?
    Last edited by ranosb; 02-03-2006 at 05:36 PM.

  10. #10
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    That's inline CSS. CSS is a style, or presentation, language, not a scripting language.

    Instead of selectors it's applied via the style attribute of each element.

    You could use classes or IDs so you could move the CSS to a style element or an external stylesheet.

    When should I use a class and when should I use an ID?
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  11. #11
    Join Date
    Jan 2005
    Posts
    313
    Thats what I thought, interesting...

    One last ?
    The background images are 400px wide(for 800x600), how can I make them stretch for a 1024 resolution? Im using background-repeat: repeat-y; for the vertical repeat, but horizontal repeat will not work right, I need them to stretch or fit to screen resolution.

    I would think width: 50%; would be good for all resolutions, no matter what size the image...

    Is there a "screen.width" for css like javascript?
    Last edited by ranosb; 02-03-2006 at 08:05 PM.

  12. #12
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    CSS2 does not provide a way to specify dimensions for background images. To stretch the image, you could use some of the techniques shown in this demo.

    No, there is no screen.width equivalent in CSS2.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  13. #13
    Join Date
    Jan 2005
    Posts
    313
    Great! Thanks for all your help...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles