 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / May 2008How can I get an image to fill the rest of the row width?
Hi, I have four images lined p on a single row. The HTML code is: <div id="header"> <div class="header_image"> <img id="home_logo" src="images/home_logo.gif" alt="" /> </div> <div class="header_image"> <img id="acc_spinning_logo" src="images/acc_spinning_logo.gif" alt="" /> </div> <div class="header_image"> <img id="acc_logo_end" src="images/acc_logo_end.gif" alt="" /> </div> <div class="header_image" id="header_image_4"> <img id="title_bar_right" src="images/title_bar_right.gif" alt="" /> </div> </div> In my CSS file, I use float:left to ensure they appear on the same row. My question is, while I want the first three images to appear at the width they are, I'd like the forth to stretch the rest of the screen regardless of the screen width. Can this be done sing CSS? Thanks, Don > Hi, > [quoted text clipped - 21 lines] > the width they are, I'd like the forth to stretch the rest of the > screen regardless of the screen width. Can this be done sing CSS? Firstly your HTML is too verbose. Secondly if it really is a header it should be marked up as one (in the example below I assume it's the main page header, so h1). Thirdly you don't need float: left to make them on the same row if you don't wrap the images in an extra div because images are inline by default. Fourthly if the image of the logo contains any text, then that text should be in the alt attribute. Lastly you can get the image to fill the width by making it a background image, which will repeat automatically. Something like this should do it: <style type="text/css"> h1 { background: url( title_bar_right.gif ) repeat-x; } </style> <h1><img src="images/home_logo.gif" alt="logo" /><img src="images/acc_spinning_logo.gif" alt="spinning logo" /><img src="images/acc_logo_end.gif" alt="logo end" /></h1> Thanks but It doesn't work completely. 1) I'm getting gaps between the 3 images. 2) The background image is not displayed. Here is the HTML code: ---------------------------------- <div id="header_logo"> <img src="images/home_logo.gif" alt="logo" /> <img src="images/acc_spinning_logo.gif" alt="spinning logo" /> <img src="images/acc_logo_end.gif" alt="logo end" /> </div> Here is the CSS code ------------------------------- #header_logo { margin: 0; padding: 0; background-image: url(../images/title_bar_right.gif ) background-repeat: repeat-x; } Thanks, Don > Thanks but It doesn't work completely. > [quoted text clipped - 20 lines] > Thanks, > Don That's because the images are on new lines, so there is white space between them. What you are seeing is the white space in your markup. If you run them together like <img src="..." alt="..."><img src="..." alt="..."><img src="..." alt="..."> it goes away. Either float them left or remove the white space. Here's an example with floats: http://nrkn.com/temp/don/ > <d...@fivestarterminals.com> wrote in message > [quoted text clipped - 34 lines] > > http://nrkn.com/temp/don/ > <d...@fivestarterminals.com> wrote in message > [quoted text clipped - 34 lines] > > http://nrkn.com/temp/don/ That worked, thanks. However, I cannot get the background image to display. Are there any tools for debugging this? >> <d...@fivestarterminals.com> wrote in message >> news:f1e75d92-c021-410e-b47d-9af636c397d5@l42g2000hsc.googlegroups.com... [quoted text clipped - 18 lines] > That worked, thanks. However, I cannot get the background image to > display. Are there any tools for debugging this? Could be your path. Another thing to check is the case of the file names, but it looks like your image names are all in lower case so it's probably not that. Image paths in CSS should be relative to your image. Looks like you are doing this: <img src="images/home_logo.gif" alt="logo" /> ... background-image: url(../images/title_bar_right.gif ) So I assume from the about that your CSS is in a seperate folder off the root in which case the above is correct. Is the parent div expanding to the width of its parent element? You can test this by giving it border: 1px solid red so that you can see its boundaries. If you're floating it then it won't be expanding to width: auto, it will shrink to contain its contents. Or you could upload what you have to some temporary web space (plenty of free ones around if you don't have something), try and make it a minimal test case just showing your problem and we'll go from there. It's a "float" problem. If I comment out the "float: left;" below, the background image shows. Uncommenting it and it does not show. By the way, the border also screws up when I float the images; only the top border shows. Very strange. HTML -------- <div id="header"> <div id="header_logos"> <img id="home_logo" src="images/home_logo.gif" alt="logo" /> <img id="acc_spinning_logo" src="images/acc_spinning_logo.gif" alt="spinning logo" /> <img id="acc_logo_end" src="images/acc_logo_end.gif" alt="logo end" /> </div> <div id="header_clear"></div> </div> CSS ------- #header_logos { border: 1px solid red; margin: 0; padding: 0; background-image: url(../images/title_bar_right.gif); background-position: top right; background-repeat: no-repeat; } #header_logos img { float: left; } #header_clear { clear: left; } I changed the HTML to this (following your example page in your previous post) and it works now <div id="header"> <div id="header_logos"> <img id="home_logo" src="images/home_logo.gif" alt="logo" /> <img id="acc_spinning_logo" src="images/acc_spinning_logo.gif" alt="spinning logo" /> <img id="acc_logo_end" src="images/acc_logo_end.gif" alt="logo end" /> <div id="header_clear"></div> </div> </div> Thanks, Don In article <2e878038-ad54-49ae-afe9-dbbbf0251bd0@m45g2000hsb.googlegroups.com>, > Hi, > > I have four images lined p on a single row. The HTML code is: > > <div id="header"> > <div class="header_image"> ... > In my CSS file, I use float:left to ensure they appear on the same > row. My question is, while I want the first three images to appear at > the width they are, I'd like the forth to stretch the rest of the > screen regardless of the screen width. Can this be done sing CSS? <http://dorayme.890m.com/alt/three_and_stretch.html>  Signaturedorayme > In article ><2e878038-ad54-49ae-afe9-dbbbf0251bd0@m45g2000hsb.googlegroups.com>, [quoted text clipped - 13 lines] > ><http://dorayme.890m.com/alt/three_and_stretch.html> Why not just http://www.tidraso.co.uk/misc/three_and_stretchB.html In other words: float the images or the div they're in and set a left margin on the fourth one. Using position: relative with top: -45px assumes that font descent is 4px (the images are 41px high), but one doesn't know the font size. If you bump up the font in your example, the right hand div moves down relative to the imgs. > > In article > ><2e878038-ad54-49ae-afe9-dbbbf0251bd0@m45g2000hsb.googlegroups.com>, [quoted text clipped - 25 lines] > you bump up the font in your example, the right hand div moves down > relative to the imgs. I was just playing about and I have been meaning to take it down! How can one take words and things back from history? It is not like a tape. You are right. Much better. And the images can be spaced too with yours. (one of the things I did not know was if the OP wanted gaps between his images and I did not want to have the bg all the way underneath in case. But my "solution" was no good really, for the reason you mention - different browsers and font settings bring this out). I just had a Salieri moment and was thinking how good old JK's sub/sup idea was yesterday and relative positioning was in my mind, throwing me off balance. I like simple but good ideas. He comes up with these things for one reason and one reason only, to keep me unbalanced... I was very badly shaken by it. God is against me. <g> Signaturedorayme |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.