If I have a paragraph of text, and put a picture on the right and wrap it, it works fine. But it always shows at the top of the paragraph. What if I want a couple of lines of text above the image stretching right the way across the page, then put the image in and have the text wrap to it.<br /><br />So if I do this:<br /><br /><p align="justify"><br /><img class="floatright" src=http://www.webdesignerforum.co.uk/lofiversion/index.php/"image.jpg"><br />Text content blah blah blah.<br /></p><br /><br />the class="floatright" part refers to the .floatright area of my stylesheet, which just floats the image to the right and puts some padding around it.<br /><br />What do I need to change to make the text go a little further down in the paragraph?<!--content-->
There's no such fine control I'm afraid. To push it down you could add padding to the top of the image, but the text would still not flow around it.<br /><br />Any particular reason you want to do this?<!--content-->
no particular reason, just thought it would look nicer on some pages rather than always having the image right at the top of the page..<br /><br />I'm guessing this is a stupid question, but how does it effect the location of the image depending on where I put the <img> tag in the paragraph?<!--content-->
perhaps you could add a margin bottom of -x and a padding-bottom of x<br /><br />for example:<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->img { float: right; display: block; margin-bottom: -100px; padding-bottom: 100px; }<!--c2--></div><!--ec2--><br /><br />that isn't tested or anything.. its just a gues..<!--content-->
hm... that'll make the image overlap the text.<br /><br /><br />the position of the image will depend where you place it in the text. So placing the image where the third line starts should put it two lines under the top of the paragraph. Though it wont be accurate and break the semantic flow of the page and also make it reliant on that single design. It'd also most likely break if the user increase the font size. Tricky and messy would summon it up I'm afraid.<!--content-->
There's no such fine control I'm afraid. To push it down you could add padding to the top of the image, but the text would still not flow around it.<br /><br />Any particular reason you want to do this?<!--content-->
no particular reason, just thought it would look nicer on some pages rather than always having the image right at the top of the page..<br /><br />I'm guessing this is a stupid question, but how does it effect the location of the image depending on where I put the <img> tag in the paragraph?<!--content-->
perhaps you could add a margin bottom of -x and a padding-bottom of x<br /><br />for example:<br /><!--c1--><div class='codetop'>CODE</div><div class='codemain'><!--ec1-->img { float: right; display: block; margin-bottom: -100px; padding-bottom: 100px; }<!--c2--></div><!--ec2--><br /><br />that isn't tested or anything.. its just a gues..<!--content-->
hm... that'll make the image overlap the text.<br /><br /><br />the position of the image will depend where you place it in the text. So placing the image where the third line starts should put it two lines under the top of the paragraph. Though it wont be accurate and break the semantic flow of the page and also make it reliant on that single design. It'd also most likely break if the user increase the font size. Tricky and messy would summon it up I'm afraid.<!--content-->