Thought I had it all figured out. So much for that. My test page lives at http://www.sticksite.com/test-css.htm and I wonder if anyone would mind answering my (stupid?) questions again. Many thanks.
Cool pictures. Typically most web editors have vertical and horizontal alignment settings for pictures, especially wysiwyg editors. Once you add the picture, you typically right-click on it and there should be something in the photo properties to set this.
1st image. Remove padding around image and add a right margin to push the text over (ie. .imgborder {padding:0; margin-right:15 px;} I am not sure what the best method for vertically aligning the text beside each photo, but I would like to know as well.
thanks, folks. Anduril66, I did (I think!) what you said, but that did not work; the borders are gone and the pictures are stuck together. Did I mis-read your reply? Please take a look at my styles as well as the html for the image. Thanks.
You removed the "border: 5px solid #808080;" from your .imgborder class. Also you have a typo within your stylesheet: <style> .imgborder {padding:0; margin-right:15 px;} } </style> You can place all the styles in one <style></style> to increase legibility. I forgot that you aren't supposed to put spaces in between values and units: should be margin-right: 15px; instead of margin-right: 15 px; Also you can add vertical margins to the paragraphs to space the photos vertically.
Right, there was one too many "}" in that one style. I've put all the styles for the images into one "style." Now; two things still bothering me with this: 1. the styles seem to work so far but look messy; are they OK, or is there some duplication re the border? 2. trying to get the text spaced at the middle of the pic instead of the top. Hey, we're close......... And, if you like the pics; you might enjoy the REAL page that I'm trying to make. Right now, the old version is at http://www.sticksite.com/fish1.htm
To optimize the css, you can change <style type="text/css"> img {float:left } img.imgborder {padding:0; margin-right:15px; margin-bottom: 15px; } img {border: 5px solid #808080; } </style> <style> p.clear { clear: left; } </style> Code (markup): to <style type="text/css"> img {float:left;} img.imgborder {border: 5px solid #808080; padding:0; margin: 0 15px 15px 0;} p.clear {clear: left;} </style> Code (markup):
Absolutely correct, Anduril66; you know your CSS very well; I'm obviously just getting started, re-doing all my pages using more CSS and less HTML and very few tables. IF I can find out how to center the text vertically beside each image I'll post what I find. Got one more fishing trip page to do as well. Are you *really* making an easy $300. per day??
<html> <head> <style type="text/css"> img {float:left } img.imgborder {border: 5px solid #808080; padding:0; margin-right:15px; margin-bottom: 15px; } #wrap {float: left; height: auto; width: 80%; clear: both; border: 1px solid #0000FF;} #wrap p {margin-top: 80px;} </style> </head> <body> <p> only ONE remaining problem related to floating an image and text related to the image. </p> <br> <div id="wrap"> <img src="fish1.jpg" class="imgborder" width="350" height="263" /> <p> The text to go with each image should be vertically aligned with the CENTER of the relevant image. </p> </div> <div id="wrap"> <img src="fish2.jpg" class="imgborder" width="350" height="263" /><p> How can I make the text for each image centered vertically beside the relevant picture? Somewhere, should I be using the "line height" coding? If so, where/how please?</p> <p>Does it need the space and / after the height?</p> </div> <div id="wrap"> <img src="fish3.jpg" class="imgborder" width="350" height="263" /> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div> <div id="wrap"> <img src="fish4.jpg" class="imgborder" width="350" height="263" /> <p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div> <div id="wrap"> <img src="fish5.jpg" class="imgborder" width="350" height="263" /><p> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. </p> </div> </body> </html> Try this (he said with confidence ) I've added the bits in bold and removed the p clear from the style and the text. All I have really done is add a wrapper for each image and text section. To get the text to line up with the center of the image the best I could come up with for now was #wrap p {margin-top: 80px;} this starts the text 80 pixels from the top of the image. Play around with the number to get it to suit your purpose. I hope this works
Good idea on the wrapping divs. Just a small change - the "wrap" classification should be classes not ids because there is more than one "wrap" on the page. I am not making $300 dollar a day but the user I rented my "recent blog" field is.
AHhhh, this is getting beyond the scope of this beginner in CSS. Maybe I'll just wait for the next version of CSS to include vertical alignment. THANKS to the patient folks, (YOU know who you are) for the help. On to the next question.... ;-(
ok i finally had a chance to look through your problem... personally i couldnt really get your desired result either so i had a look around the net and did find an answer - i dont know how good of a code it is (as in whether its been done well or not) but it does work and do want you want... the page is http://www.badboy.ro/assets/articles/vertical_align/03.html and then i just customised it a little to suit you...This is what i did to your styles and ive given you the first image and text as an example...just follow the same principle down the page for the remaining images and it will work it fine (i tested it myself) <style type="text/css"> #wrap {clear:both; height: 264px; position:relative;} img {float:left; width:350px; height:263px; display:block;} #wrap>#clear {display:table; position:static;} img.imgborder {border: 5px solid #808080; padding:0; margin-right:15px; margin-bottom: 15px;} #clear {height:100%; position:relative;} #clear>div {display:table-cell; vertical-align:middle; position:static;} #clear div div {position:relative; top:-50%;} </style></head><body> <p>only ONE remaining problem related to floating an image and text related to the image.</p> <div id="wrap"><img src="TEST-CSS_files/fish1.jpg" class="imgborder" height="263" width="350"> <div id="clear"><div><div> The text to go with each image should be vertically aligned with the CENTER of the relevant image. </div></div></div></div>
Oh, hey, I never got the email telling me there was another reply. THANK you, United. I did find a solution that works 100% and used it on my latest site revision: http://www.sticksite.com/grizzly/