 |
 | 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 / July 2008Trying to persuade CSS images to line up horizontally
I'm a CSS novice trying unsuccessfully to make three thumbnail images display horizontally instead of vertically. I suspect I'm missing something really stupid but I'll take the flak if someone could kindly point me in the right direction (using words that the vicar's wife would understand). The vertical thumbnails can be seen at the bottom of this page: http://www.zen86793.zen.co.uk/gmga2008/index.html ... the first image is in the right position and I want to move the other two to the right of it. Thank you for any help. Stan > I'm a CSS novice trying unsuccessfully to make three thumbnail images > display horizontally instead of vertically. I suspect I'm missing [quoted text clipped - 4 lines] > first image is in the right position and I want to move the other two > to the right of it. First - always - the HTML, see <http://tinyurl.com/4papws>  Signaturedorayme > The vertical thumbnails can be seen at the bottom of this > page: http://www.zen86793.zen.co.uk/gmga2008/index.html ... the first > image is in the right position and I want to move the other two to the > right of it. Yes, do validate as dorayme suggested. After you've done that, the immediate answer to your question involves the width you've set for #pic. You do not need HTML comment delimiters <-- --> for your CSS. Why not use display:none to hide your large pop-up images rather than height:1px; width:1px? Please, please don't use the clagnut method of screwing up Web sites. Replace 62.5% in your body ruleset with 100%, and delete the 1.3em et.al. you've added to compensate for it. I.e., in #container, replace: font-size: 1.3em; line-height: 1.3em; with: line-height: 1.2; or just delete the line-height altogether. You can probably downgrade or revise or delete the font sizing you've added to the h1 - h3 rules, too. HTH SignatureJohn Wondering how slow-witted the vicar's wife is, since I haven't met her. Pondering the value of the UIP: http://improve-usenet.org/ >> The vertical thumbnails can be seen at the bottom of this page: >> http://www.zen86793.zen.co.uk/gmga2008/index.html ... the first image [quoted text clipped - 25 lines] > or revise or delete the font sizing you've added to the h1 - h3 rules, > too. It does help: thank you very much. I will look at those basic errors. Will also try display:none (the code for the pop-ups was borrowed as it is much too technical for me; I used it because it was the only hover popup I could find which is entirely CSS rather than JS). The #pic width is the native width of each thumbnail, ie 110px and I did try it with only two images in case width was the problem but even then they both displayed vertically. All three thumbnails display nicely in a horizontal line if I use a table row to position them instead of the CSS... so I even tried using the CSS inside the table cells but that caused mayhem, unsurprisingly. My next step was going to be to try using different #img relative positions for each image, or maybe absolute positions instead... It's all trial and error for me. Stan > John Hosking said: >>> I'm a CSS novice trying unsuccessfully ... >> >> Please, please don't use the clagnut method of screwing up Web sites. > > It does help: thank you very much. I will look at those basic errors. Stan, you didn't specifically mention anything about John's comment on the seriously-wrong "clagnut" method of font-sizing. Using a base body font of anything less than 100% causes problems. Using Opera, I have to zoom your page to about 120% in order to read the text at my preferred size. I see where you got your template. http://templates.arcsin.se/ Why, oh why, is this practice proliferating so widely? http://tekrider.net/html/fontsize.php Signature-bts -Friends don't let friends drive Windows >> John Hosking said: >>>> I'm a CSS novice trying unsuccessfully ... [quoted text clipped - 15 lines] > > http://tekrider.net/html/fontsize.php Thanks for the link. I was of course grouping font size with the other 'basic errors' which I said I would look into. I will report back when I have done some fixing later today. Still struggling to my thumbnails into a horizontal line though... Stan >> Why, oh why, is this [clagnut] practice proliferating so widely? >> [quoted text clipped - 4 lines] > have done some fixing later today. Still struggling to my thumbnails > into a horizontal line though... Well, from your earlier post, you must be done struggling now, right? After you've changed your 110px in #pic to, say, 336px, your aunt's spouse must be named Robert, and the thumbnails arrayed horizontally. Yes? SignatureJohn >>> Why, oh why, is this [clagnut] practice proliferating so widely? >>> [quoted text clipped - 9 lines] > spouse must be named Robert, and the thumbnails arrayed horizontally. > Yes? I have fixed some (hopefully most) of the basic errors and reuploaded to http://www.gardenmediaguild.co.uk/awards/index.html Still can't get those thumbnails to line up horizontally though. Changing #pic to 336px only gave me the same vertical lineup of images with a new white block to the right, to the full height of the images. All possible combinations of #pic dimensions have been tried and the fix must lie elsewhere. I also tried creating three different #pic classes, giving each one a relative left position 114px greater than the previous one -- but this only moved the second and third images to the right without lifting them up to line up with the first image. This also messed up with my hover enlargements which displayed on load instead of on hover. (Haven't tried the display:none thing yet.) I have also tried various float options and putting the div inside a table row at various sizes, percentages and auto, but nothing works. Unless you have another brainwave, I may be reduced to combining the three thumbnails into a single image and figuring out if I can use image maps to reproduce the hover enlargement... Thanks again for your help. Stan > I have fixed some (hopefully most) of the basic errors and reuploaded > to http://www.gardenmediaguild.co.uk/awards/index.html > > Still can't get those thumbnails to line up horizontally though. Why don't you set a class on those images and make them float: left; Signature-bts -Friends don't let friends drive Windows > I have fixed some (hopefully most) of the basic errors and reuploaded to > http://www.gardenmediaguild.co.uk/awards/index.html get rid of: <link href="css/agl-styles.css" rel="stylesheet" type="text/css" media="all"/> which contains markup and no rules. > Still can't get those thumbnails to line up horizontally though. > Changing #pic to 336px only gave me the same vertical lineup of images > with a new white block to the right, to the full height of the images. > All possible combinations of #pic dimensions have been tried and the fix > must lie elsewhere. Two things to take care of your images: #pic {width: 110px;} is the container for the images, which is too small to take care of [3x110px + 3x1px + borders + offsets]. Change it to: #pic {width: 344px;} /* 344px is the minimum here */ display:block will create a new line - stack images on top - remove it: #pic a.p1, #pic a.p1:visited {/*display: block;*/} In fact, you also use it in two other rules which are absolutely positioned. They won't do anything there. This has nothing to do with your problem in question. SignatureGus > I have fixed some (hopefully most) of the basic errors and reuploaded to > http://www.gardenmediaguild.co.uk/awards/index.html > > Still can't get those thumbnails to line up horizontally though. > Changing #pic to 336px only gave me the same vertical lineup of images > with a new white block to the right, to the full height of the images. The whiteness comes from #pic { background-color: #ffffff; }. The width is because the 336 is larger than 110 (but smaller than the 344 it needs to be, as Gus has pointed out). The persistence of the vertical lineup even in a wider #pic is from the #pic a.p1, #pic a.p1:visited { display:block; }. Ditch the display:block, give #pic a larger width, and drop the white background for #pic and #pic a.p1, #pic a.p1:visited (You might not need the border on those links, either), and see how it looks. Be sure to test it with images disabled or missing. Do continue to work on validation the code, especially where you have extraneous tags. Gus alluded to a problematic style sheet, which appears to be referenced but missing. > I also tried creating three different #pic classes, giving each one a > relative left position 114px greater than the previous one -- but this > only moved the second and third images to the right without lifting them > up to line up with the first image. This also messed up with my hover > enlargements which displayed on load instead of on hover. (Haven't tried > the display:none thing yet.) Try to avoid actually positioning anything, esp. absolutely. It's hard to do right (and even harder to do right in all cases), for one thing, but it's rarely necessary, IME. > I have also tried various float options and putting the div inside a > table row at various sizes, percentages and auto, but nothing works. > > Unless you have another brainwave, I may be reduced to combining the > three thumbnails into a single image and figuring out if I can use image > maps to reproduce the hover enlargement... No, no, don't do that. That's too much like work. :-) > Thanks again for your help. YVW SignatureJohn Pondering the value of the UIP: http://improve-usenet.org/ >> I have fixed some (hopefully most) of the basic errors and reuploaded >> to http://www.gardenmediaguild.co.uk/awards/index.html [quoted text clipped - 15 lines] > need the border on those links, either), and see how it looks. Be sure > to test it with images disabled or missing. Eureka! Can't thank you enough for picking this out for me. I have reuploaded to http://www.zen86793.zen.co.uk/gmga2008/index.html and the images are now arrayed horizontally at last... even though the fix seems to have exposed an extraneous white-filled border below and behind each image. I can make the fill colour disappear but can't see where the stroke lines are coming from. I also seem to have managed to make the fonts in this section display too small but I think I should be able to find out why. One thing slowing me down is that my GoLive preview window is a long way from wysiwyg (all text displays massively oversized thus pushing the right hand column down to the bottom of the page, so I have to preview every change in my browser/s window/s. > Do continue to work on validation the code, especially where you have > extraneous tags. Gus alluded to a problematic style sheet, which > appears to be referenced but missing. Yes, that style sheet came with the template and I think I can dispense with it. Once I'm sure, I will clean up all references to it. And I will put it through the validator once I get the page more or less looking like I want it to. >> I also tried creating three different #pic classes, giving each one a >> relative left position 114px greater than the previous one -- but this [quoted text clipped - 6 lines] > to do right (and even harder to do right in all cases), for one thing, > but it's rarely necessary, IME. Thanks, I've abandoned that idea. >> I have also tried various float options and putting the div inside a >> table row at various sizes, percentages and auto, but nothing works. [quoted text clipped - 4 lines] > > No, no, don't do that. That's too much like work. :-) Also abandoned! Stan > Eureka! Can't thank you enough for picking this out for me. I have > reuploaded to [quoted text clipped - 3 lines] > behind each image. I can make the fill colour disappear but can't see > where the stroke lines are coming from. Further testing suggests that the extraneous border is browser-specific. I can see it on MacOs Safari but not on WinXP IE. Stan > > Eureka! Can't thank you enough for picking this out for me. I have > > reuploaded to [quoted text clipped - 8 lines] > > Stan This layout is a hire wire act. Like some cars I have had held together. You could #pic a img { border: 0; padding: 0; margin-bottom: -4px; } to get over this "font-size related" particular problem. but there is other trouble. Signaturedorayme >>> Eureka! Can't thank you enough for picking this out for me. I have >>> reuploaded to [quoted text clipped - 19 lines] > > to get over this "font-size related" particular problem. Thanks for the hint. In Safari/Mac, margin-bottom: -4px didn't seem to do anything; but by also giving padding-bottom -4px, the white bar at the bottom of each image has gone... albeit still leaving behind a black stroke from somewhere, but I'll find it. As you have alluded to, I'm finding this template very difficult to work with, not least because I don't know what some of the CSS code does (and there are also plenty of classes in there which aren't used anywhere) -- plus no doubt I have added my own problems to it. Methinks I will probably start again from scratch, maybe using just one stylesheet, but much wiser thanks to the much-appreciated help I've had here. Stan > As you have alluded to, I'm finding this template very difficult to > work with, not least because I don't know what some of the CSS code [quoted text clipped - 3 lines] > stylesheet, but much wiser thanks to the much-appreciated help I've had > here. I agree it would be simpler in your case to have just one. Any template this complicated and hard to troubleshoot and which uses pixel dimensioned fonts and so on is not a good foundation for your website page. You can make this basic look you like (and it is fine by me too!) with much simpler HTML/CSS. Signaturedorayme >> As you have alluded to, I'm finding this template very difficult to >> work with, not least because I don't know what some of the CSS code [quoted text clipped - 12 lines] > You can make this basic look you like (and it is fine by me too!) with > much simpler HTML/CSS. Yes, I do like minimalist pages and no, the code is not in the least minimalist... Could you enlighten me as to why anyone would need more than one stylesheet unless targeting different media? Stan > >> As you have alluded to, I'm finding this template very difficult to > >> work with, not least because I don't know what some of the CSS code [quoted text clipped - 16 lines] > minimalist... Could you enlighten me as to why anyone would need more > than one stylesheet unless targeting different media? Oh, there are no absolute principles on this matter. If you want my practice, I try to keep to one sheet. I succeed often with small sites. But now and then it can become so long that I get tired of scrolling and hive off a major bit of it, for example the css for navigation. Sometimes on a complicated site, this can involve considerable length. Other times I have used more than one stylesheet have been for sites with big sections that need significant separate looks. Here I find a main sheet that holds all the common things to the site as whole and then I have separate additional sheets for each big section. These additional sheets sometimes duplicate each other in a big way. But such redundancy pays for itself handsomely in my not having to actually find out what quite is common and what is not among the additional, section specific sheets. Yes, of course, in theory you would have all that is common in one sheet. But theory and practice are different in that theory is never under time pressure. Theory has a very easy time of it. It sits in a very comfortable armchair indeed and acts as if there is no end to tomorrows. <g> In other words, do what you personally find very convenient. It will be unlikely, if you do this conscientiously and not in panic or thoughtlessness, to be something that others will find perfectly understandable. Signaturedorayme > by also giving padding-bottom -4px FYI, negative padding is invalid. A conforming browser must ignore it. http://www.w3.org/TR/CSS21/box.html#padding-properties At any rate, you can't depend on consistent rendering of invalid code. SignatureBerg <g4aegj$n6t$1@registered.motzarella.org> [snip] > Using Opera, I have to zoom your page to about 120% in order to read > the text at my preferred size. [snip] I can only hope that you have chosen not to set your minimum font size. SignatureBootNic Mon Jun 30, 2008 10:56 pm The more you find out about the world, the more opportunities there are to laugh at it. *Bill Nye* >> Using Opera, I have to zoom your page to about 120% in order to read >> the text at my preferred [comfortable] size. > > I can only hope that you have chosen not to set your minimum font > size. That would be the case. Else how would I know when an author uses microfonts? <g> Signature-bts -Friends don't let friends drive Windows |
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
|
©2008 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.