HTML for page layout with images? |
HTML for page layout with images? |
Woody20 |
Mar 11 2011, 02:21 AM
Post
#1
|
Novice Group: Members Posts: 27 Joined: 11-March 11 Member No.: 14,105 |
How do I achieve a page layout like the following? All the text and images are constant and known in advance.
What I'm asking for is the HTML markup that will make the layout look as shown below. I have used a fixed-pitch font so I could draw what I want, but on the web page, the font would be variable-pitch. The extra dots are just there to make the spacing correct in the posting. Paragraph of text, above image1. Some more text, +--------+ which is not as |........| tall as this . .|........| image. This im- | image1 | age is right- . |........| justified. . . .|........| . . . . . . . . +--------+ Another line or lines of text, to appear below image1 and above image2. +-----------------------------+ Text to |.............................| the right |.............................| of image2. |...........image2............| Image2 is |.............................| is at the left |.............................| margin. +-----------------------------+ Text to appear below image2. |
pandy |
Mar 11 2011, 02:34 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
Float the images right and left respectively. If you don't want the text to wrap below the image if it gets higher than the image, give it a margin on the image side big enough to make it go free from the float. And yes, the text can get higher than you plan if the user ups the text size in his browser.
http://htmlhelp.com/reference/css/box/margin-right.html http://htmlhelp.com/reference/css/box/margin-left.html http://htmlhelp.com/reference/css/box/margin.html http://htmlhelp.com/reference/css/box/float.html |
Woody20 |
Mar 11 2011, 02:43 AM
Post
#3
|
Novice Group: Members Posts: 27 Joined: 11-March 11 Member No.: 14,105 |
Float the images right and left respectively. Is there a way to do it in HTML, without CSS? I thought it might be possible with a table. I was unable to get it to work with image alignment, because the "above" and "below" text can't be separated from the image "side" text. |
Darin McGrew |
Mar 11 2011, 03:56 AM
Post
#4
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Please see the FAQ entry How do I align an image to the right (or left)?
|
pandy |
Mar 11 2011, 12:55 PM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
Is there a way to do it in HTML, without CSS? I thought it might be possible with a table. I was unable to get it to work with image alignment, because the "above" and "below" text can't be separated from the image "side" text. Yes, you can do it with HTML, but it's clumsy and doesn't give the same control. You need to "clear the float", i.e. force the next element to go down to where it's no longer affected by the float. In HTML you use the 'clear' attribute for BR, in CSS the 'clear' property. http://htmlhelp.com/reference/html40/special/br.html http://htmlhelp.com/reference/css/box/clear.html |
newwebseo |
Mar 14 2011, 05:51 AM
Post
#6
|
Advanced Member Group: Members Posts: 125 Joined: 9-October 09 Member No.: 9,984 |
You just need to insert one more attribute in image
For aligning to left img style="float:left" For aligning to right img style="float:right" |
Woody20 |
Mar 15 2011, 02:22 AM
Post
#7
|
Novice Group: Members Posts: 27 Joined: 11-March 11 Member No.: 14,105 |
Thanks for the suggestions. I did manage to get a table to work, just the way I wanted. The table has 1 row and 2 columns, one with the image and one with the text. The sizing, positioning within the cells, and separation from other text are all taken of automatically.
|
Lo-Fi Version | Time is now: 27th April 2024 - 09:52 PM |