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=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/h_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/e_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
</a></div>
<div style="background-image: url(blue_right.gif);
width: 50%; height:
25px; background-repeat: repeat; text-align: left;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/o_clr.gif">
</a></div>Either combine the images or add a parent div that you can apply one of the background images to.Im new to div tags, parent div? Can you show me by example?I simply mean that you can add another div and put the current div inside of it.
<div>
<div style="background-image: url(blue_left.gif); width: 50%; height:
25px; background-repeat: repeat; text-align: right;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/h_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/e_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
</a></div>
<div style="background-image: url(blue_right.gif);
width: 50%; height:
25px; background-repeat: repeat; text-align: left;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/o_clr.gif">
</a></div>
</div>It still displays on two lines, like a <br> in between the background images...
Will it not work?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.
<div style="background-image: url(blue_left.gif); float:left; width: 50%; height:
25px; background-repeat: repeat; text-align: right;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/h_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/e_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
</a></div>
<div style="background-image: url(blue_right.gif);
margin-left:50%; height:
25px; background-repeat: repeat; text-align: left;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/o_clr.gif">
</a></div>
Here's some more information on floats:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/index.htm">http://css.maxdesign.com.au/floatutorial/index.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.brunildo.org/test/#flo">http://www.brunildo.org/test/#flo</a><!-- m -->
<!-- m --><a class="postlink" href="http://garyblue.port5.com/webdev/floatdemo.html">http://garyblue.port5.com/webdev/floatdemo.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csscreator.com/attributes/containedfloat.php">http://www.csscreator.com/attributes/containedfloat.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/clearing.html">http://www.quirksmode.org/css/clearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClearingSpace">http://css-discuss.incutio.com/?page=ClearingSpace</a><!-- m -->
Curing Float Drops and Wraps (<!-- m --><a class="postlink" href="http://nemesis1.f2o.org/aarchive?id=11">http://nemesis1.f2o.org/aarchive?id=11</a><!-- m -->)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...Don't use a table. IE6 is a bug ridden piece of junk.
Try floating them both. You may need to clear them though.
<div style="background-image: url(blue_left.gif); float:left; width: 50%; height:
25px; background-repeat: repeat; text-align: right;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/h_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/e_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
</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=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/o_clr.gif">
</a></div>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?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? (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClassesVsIds">http://css-discuss.incutio.com/?page=ClassesVsIds</a><!-- m -->)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?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. (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/stretched_fixed_position_background_image/">http://www.dynamicsitesolutions.com/css ... und_image/</a><!-- m -->)
No, there is no screen.width equivalent in CSS2.Great! Thanks for all your help...
<div style="background-image: url(blue_left.gif); width: 50%; height:
25px; background-repeat: repeat; text-align: right;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/h_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/e_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
</a></div>
<div style="background-image: url(blue_right.gif);
width: 50%; height:
25px; background-repeat: repeat; text-align: left;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/o_clr.gif">
</a></div>Either combine the images or add a parent div that you can apply one of the background images to.Im new to div tags, parent div? Can you show me by example?I simply mean that you can add another div and put the current div inside of it.
<div>
<div style="background-image: url(blue_left.gif); width: 50%; height:
25px; background-repeat: repeat; text-align: right;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/h_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/e_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
</a></div>
<div style="background-image: url(blue_right.gif);
width: 50%; height:
25px; background-repeat: repeat; text-align: left;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/o_clr.gif">
</a></div>
</div>It still displays on two lines, like a <br> in between the background images...
Will it not work?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.
<div style="background-image: url(blue_left.gif); float:left; width: 50%; height:
25px; background-repeat: repeat; text-align: right;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/h_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/e_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
</a></div>
<div style="background-image: url(blue_right.gif);
margin-left:50%; height:
25px; background-repeat: repeat; text-align: left;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/o_clr.gif">
</a></div>
Here's some more information on floats:
<!-- m --><a class="postlink" href="http://css.maxdesign.com.au/floatutorial/index.htm">http://css.maxdesign.com.au/floatutorial/index.htm</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.brunildo.org/test/#flo">http://www.brunildo.org/test/#flo</a><!-- m -->
<!-- m --><a class="postlink" href="http://garyblue.port5.com/webdev/floatdemo.html">http://garyblue.port5.com/webdev/floatdemo.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.csscreator.com/attributes/containedfloat.php">http://www.csscreator.com/attributes/containedfloat.php</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/easyclearing.html">http://www.positioniseverything.net/easyclearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://www.quirksmode.org/css/clearing.html">http://www.quirksmode.org/css/clearing.html</a><!-- m -->
<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClearingSpace">http://css-discuss.incutio.com/?page=ClearingSpace</a><!-- m -->
Curing Float Drops and Wraps (<!-- m --><a class="postlink" href="http://nemesis1.f2o.org/aarchive?id=11">http://nemesis1.f2o.org/aarchive?id=11</a><!-- m -->)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...Don't use a table. IE6 is a bug ridden piece of junk.
Try floating them both. You may need to clear them though.
<div style="background-image: url(blue_left.gif); float:left; width: 50%; height:
25px; background-repeat: repeat; text-align: right;">
<a>
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/h_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/e_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
</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=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/l_clr.gif">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"pages/images/chrome/small/o_clr.gif">
</a></div>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?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? (<!-- m --><a class="postlink" href="http://css-discuss.incutio.com/?page=ClassesVsIds">http://css-discuss.incutio.com/?page=ClassesVsIds</a><!-- m -->)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?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. (<!-- m --><a class="postlink" href="http://www.dynamicsitesolutions.com/css/stretched_fixed_position_background_image/">http://www.dynamicsitesolutions.com/css ... und_image/</a><!-- m -->)
No, there is no screen.width equivalent in CSS2.Great! Thanks for all your help...