Mainpage
Once upon a time there was a table, looking like this:
This is my cat Nashville |
This here is the description, and the height of the whole row should be determined by the height of this cell, and the image on the left should always center middle/middle. Even when the text makes the right part higher than the left part. There is text above and below the image, too. |
How can I do that in tableless design, and still have the image centered?
What has helped was the fact that the pictures all have the same height and width.
The image is a background image of the section div
For getting the text wide enough to the right, I am using padding-left, with the value (here 150px, in red) resulting from
width-of-image plus 2x empty space around it (requested was 10px)
. 130 + 2x 10 = 150px.
The width of the two short lines has to be the same as the padding of the whole section div (in this case 150px, in red).
Since the section div would fall short if the text is not so long, I have to set a min-height, which is the height
of the image, plus enough space for the two short text lines above and below. See part in purple.
The positioning of the background-image has the horizontal position (green) set to 10px, which is the requested padding
for the image.
The overall width of the full element is here set to 70% (brown). But beware, the actual width of the element
is 70% plus the width of the padding (here 150px)!
➔ Only the colored parts of the code should be changed (adjusting to different sizes).
The empty box with the class "clickarea" is only serving as clickable area, since background images
can't be made linked. In the onclick command (colored in teal) is the URL for the destination to go.
The Styles:
The XHTML part:
