Click to See Complete Forum and Search --> : Align text to a defined base-line (never been done?)
canha
02-14-2007, 02:08 PM
*edited*
Answer can be found at slaughters post below.
Hi all,
I´m designing a website for this company but I ran into some trouble:
I have been trying to align a text to the base-line of a image (as if the text besides the image would end toghether with the image).
Here is a little example of what I mean:
http://www.digitalpaperweb.com.br/pt/images/jesusfchrist.jpg
The blue border is the image-border.
The red line is the imaginary line that shows the bottom border of the image.
Text is supposed to be above this line and not any further.
I've tried with all CSS vertical-alignment possible, image alignment, tried creating a php script that would write the CSS file after identifying the size of the image so that the text would be in a div, and so on...
"Why can't I make a fixed DIV beside the image with the top spacing defined?" Because the images will change, and some have different heights than others and all images are vertically centered.
I've been searching for the past 2 weeks and haven't found anything alike on the internet. Maybe I'm not searching properly and the answer is right in my face, but then again, I've posted in so many forums in my country and haven't gotten ANY ANSWER at all...
Is this all even possible?
Can anyone shine a light on me, please?
I'll thank you all in advance.
Peace.
*edited*
So, I found out that it can be done with a table where:
<td valign="bottom">
But I have this thing against tables (feels so amateur). Is there anyway it can be done with CSS only?
:eek: is a table a possibility?
KDLA
canha
02-14-2007, 02:34 PM
:eek: is a table a possibility?
KDLA
It is a possibility, but not a preference.
I'm looking for an alternative for table, as it always seems to mess up with my layout no matter where I use it :confused:
polorboy
02-14-2007, 02:35 PM
The answer seems pretty simple to me, but I might now be totaly understanding what you want to do. What I would do is make two divs, with a set width and height, float them and put the image in one and the text in the other.
Here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div style="width:221px; height:198px; float:left;"><img src="image.jpg" /></div>
<div style="width:221px; height:20px; text-align:left; vertical-align:text-bottom; float:left; position:relative; padding:180px 0 0 0;">Put your text here.</div>
</body>
</html>
Now, you will need to adjust the padding with the more text you add, but you can play with it and see what happens. As far as aligning to a "baseline", there is nothing that will do that in CSS. There is a setting that is called vertical-align:baseline, but that didn't seem to do it. And you probably don't even need all the css code I put in there. I put that together really quick and that is just what I could think of. Anyway, hope that helps.
polorboy
02-14-2007, 02:40 PM
Don't use tables for layouts, that is the worst thing you could do. That was all I used to use and I could never ever get things to look right in all browsers, that and using tables adds a ton of code that just isn't needed. I have been able to make sites with half the code using div's and css than when I was using tables. With tables you need to use other table cells to position elements, but with css you just use a div tag to hold the element and use css to define the div tag (or any other tag for that matter).
Don't use tables for layouts, that is the worst thing you could do. That was all I used to use and I could never ever get things to look right in all browsers, that and using tables adds a ton of code that just isn't needed. I have been able to make sites with half the code using div's and css than when I was using tables. With tables you need to use other table cells to position elements, but with css you just use a div tag to hold the element and use css to define the div tag (or any other tag for that matter).
(Yes, I'm aware of that. :rolleyes: :p I meant a small fluid height table to contain only the image and text.)
Those fixed heights won't be able to accommodate text and/or images that vary from those dimensions. Also, vertical align for text only applies to table cells (http://www.ibloomstudios.com/article6/). You'd have to create a parent block-level div, nesting those elements within it -- thing is, you don't know the height of your contents to call the height of the parent div.
Have you tried some scripting based on arrays -- creating the div based on information you've already provided about the image in either the image tag or in the scripting itself?
polorboy
02-14-2007, 03:45 PM
No, I haven't even thought of that. I didn't even know you could do that.
polorboy
02-14-2007, 04:07 PM
I have used vertical-align:text-top to get some images to line up their top and bottom edges. I have used that for large images that I have cut up and had to put back together again and the only way I could get rid of a gap between the top of one and the bottom of the other was to have them set to vertical-align:text-top and that fixed it.
WebJoel
02-14-2007, 04:21 PM
I don't suppose that you could just add align="absmiddle" to the image? This will 'horizontally-center' the image with the text that comes after. Controlling the width of text (virtual line-breaks) should still work (if I understand the problem). If the image will be larger than the text ("<p>text text, etc</p>"), add align="absmiddle" to the <p> instead to center the "<p>" to the image.
canha
02-16-2007, 12:39 PM
@polorboy:
Thanks for the code, but as I mentioned the images change and each one is a diferent height. And as there are many images (about 200), it's not worth making a separate page for each of them.
As you noticed, it's the "padding-top" part that is giving me the headache.
@KDLA:
A script, you mean like leaving the "padding-top" open and have the script calculate the height of the image and then print it as the padding-top variable? But then I can't use a stylesheet for that specific div, right? Or am I missunderstanding?
@WebJoel:
Unfortunatelly that didn't work either as the first line of the text is aligned center to the image, but when the line breaks the rest of the phrase get's thrown underneath the image.
Thank you all for you effort. I'm REALLY appreciating all the help.
(And sorry if my english isn't very accurate: it's not my main language). :D
I meant javascript. There are techniques to dynamically determine the height of a div: http://www.devarticles.com/c/a/Web-Design-Standards/Matching-div-heights-with-CSS-and-JavaScript/3/
You could implement something like this for your text and/or image divs, always making sure that they are equal. In the CSS, you could specify that the text within one of the divs is always aligned to the bottom of it by having a parent div container and using vertical align, as my first recommended article referenced.
KDLA
polorboy
02-16-2007, 03:10 PM
Oh ok, I thought you wanted to do it for just one image. I guess i read what you wrote wrong. KDLA's advice seems like it would be your best bet. Some kind of javascript (ajax?) that could dynamicaly adjust the css so that the text and image so they line up correctly.
slaughters
02-16-2007, 04:19 PM
No need for JavaScript. This seems to work in IE 6, IE 7, and FireFox
Link: http://www.stansight.com/tmp2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#container {
position: absolute;
}
#textwords {
width:150px;
position:absolute;
left:100%;
bottom:0px;
}
</style>
</head>
<body>
<div id="container">
<img align="left" src="images/coffe.jpg" width="266" height="200">
<div id="textwords">Mmmm.... Coffee ! Tastes good like a good coffee should.</div>
</div>
</body>
</html>
canha
02-22-2007, 12:11 PM
As I said, the answer was right in my face.
Or in this case, slaughters face.
Thanks a lot. I owe you one.