Newbie :-Trouble aligning text within div tag

Deepa7476 · #1 Nov 23rd, 2007, 06:43

hi.
Following is the stylesheet part thats giving me trouble

.author
{
background-image:url(Feather2.jpg);
background-repeat: no-repeat; 
background-attachment:fixed;
background-position: right bottom;
height:100px;
width:20%;
align:right;
vertical-align: bottom;
border:1px solid black;
}

I am using this as

HTML: Select all

<div class="author">by AUTHOR NAME</div>

The image is 103X100
the idea is to have a feather pic as background... and allow the author's name appear over the picture. and I want to have the text at the bottom-right corner .

Cant figure out what am i doing wrong here
Must be really simple and stupid.. that i must be missing.. but cant spot it
Please helpme
thanks in advance
Deepa

Marc · #2 Nov 23rd, 2007, 06:52

I don't think you can use the vertical-align attribute as that is mainly for tables. Can somebody please prove me wrong?

You will need to use the padding-top attribute and work out how much space there is from the top of the div - (100-font size+5)px. I don't know but that's how i would do it

.

Deepa7476 · #3 Nov 23rd, 2007, 07:10

Thanks marc for the quick response

..the bloc is just 20% wide
and i want the author name toi be displayed in bottom right coner...
would padding-top work with names that are both long and shot ? ?
There must be someway to do this....

Lchad · #4 Nov 23rd, 2007, 12:55

The closest I think you can come is something like this:

Code: Select all

.author
{
background-image:url(Feather2.jpg);
background-repeat: no-repeat; 
height:30px;
width:20%;
border:1px solid black;
text-align: right;
padding-top:70px;
}

Deepa7476 · #5 Nov 29th, 2007, 07:48

Well, afer several trial and error.. i gaveup on css for this
I used table and gave teh feater as background for the cell ..
.. not happy.. but works

thanks guys for the response
Deepa

Monie · #6 Nov 29th, 2007, 07:57

Table huh?? If you thinks it solved your entire problem, you are wrong. By using table, you will have loading problem (slow loading) compare if you just use css.

That's how everyone learn in here! Find a problem and beat the hell of it until they solved it!
We not encourage you to take the short easy way by using table for your layout.

Hope that encourage you

Cheers..

Deepa7476 · #7 Nov 29th, 2007, 08:00

yes monie.. i know.. table is not a wise way to do
but this is a stopgap arrangement for me
.. for that matter.. i hate tables myself... i used css div at all times ...
but i am tottally exhaused.. i could not go any futher on this..

welshstew · #8 Nov 29th, 2007, 08:52

Deepa,

Never give up, take a few hours / days away from the problem then come back to it with fresh eyes. That seems to work for me.

Anyway, try the following, it seems to work for me in FF, IE7 an IE6 but you will need to test in Safari and Opera (if you are interested to see if it works across all browsers.

HTML: Select all

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#author{
background-image:url('Feather2.jpg');
background-repeat: no-repeat; 
background-position: right;
height:100px;
width:20%;
display:block;
border:1px solid black;
}
#author span {
float:right;
margin-top:80px;
}
</style>
</head>

<body>
<div id="author"><span>by AUTHOR NAME</span></div>
</body>
</html>

dab42pat · #9 Nov 29th, 2007, 08:59

Have a look here.

http://www.the-art-of-web.com/css/textoverimage/

scroll down to CSS section.

Hope it helps.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Aligning	Wesley	Web Page Design	15	Jan 20th, 2008 19:49
GD Aligning?	PicoDeath	PHP Forum	3	Aug 2nd, 2007 16:14
Vertically aligning text at the bottom	Donny Bahama	Web Page Design	6	Apr 16th, 2007 02:44
Text formatting trouble	BGarner	Web Page Design	4	Jan 8th, 2007 11:47
Formatting Text - XML newbie wants everything!	AceTutor	Other Programming Languages	0	Apr 28th, 2006 13:53

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Newbie :-Trouble aligning text within div tag