vertical-align...

[maya]

hi,

how do I get text to vertical-align inside a div?

http://www.mayacove.com/misc/home.html

vertical-align should work, according to this:

http://htmlhelp.com/reference/css/text/vertical-align.html

but it isn't....


thank you very much..

[maya]

Re: vertical-align...

maya wrote:

hi,
>
how do I get text to vertical-align inside a div?
>

http://www.mayacove.com/misc/home.html

>
>
vertical-align should work, according to this:

http://htmlhelp.com/reference/css/text/vertical-align.html

>
but it isn't....
>
>
thank you very much..
>

one note: padding-top is no good, as it ADDS to height of div...

thank you...

[Jonathan N. Little]

Re: vertical-align...

maya wrote:

maya wrote:

>hi,
>>
>how do I get text to vertical-align inside a div?
>>
>http://www.mayacove.com/misc/home.html
>>
>>
>vertical-align should work, according to this:
>http://htmlhelp.com/reference/css/te...cal-align.html
>>
>but it isn't....

No it should not.

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

"Applies to: inline-level and 'table-cell' elements"

A DIV is neither an inline-level or table-cell element. You could add to
div.module-header:

display: table-cell;

But don't expect IE support.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com

[maya]

Re: vertical-align...

Jonathan N. Little wrote:

maya wrote:

>maya wrote:

>>hi,
>>>
>>how do I get text to vertical-align inside a div?
>>>
>>http://www.mayacove.com/misc/home.html
>>>
>>>
>>vertical-align should work, according to this:
>>http://htmlhelp.com/reference/css/te...cal-align.html
>>>
>>but it isn't....

>
No it should not.
>

http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

>
"Applies to: inline-level and 'table-cell' elements"
>
A DIV is neither an inline-level or table-cell element. You could add to
div.module-header:
>
display: table-cell;
>
But don't expect IE support.
>

oh my gosh.. I would LOVE to know why everybody prefers div-based
layouts.. with tables this is SO MUCH EASIER...

I will have to either do entire thing w/an image instead of text or do
w/tables...

oh brother.... ok.. thank you..

[Bergamot]

Re: vertical-align...

maya wrote:

Jonathan N. Little wrote:

>maya wrote:

>>maya wrote:
>>>>
>>>how do I get text to vertical-align inside a div?
>>>http://www.mayacove.com/misc/home.html
>>>>
>>>vertical-align should work, according to this:
>>>http://htmlhelp.com/reference/css/te...cal-align.html

>>
>No it should not.

>
I will have to either do entire thing w/an image instead of text or do
w/tables...

No, you don't, you just don't know your way around CSS well enough to
see the forest for the trees. I don't think you really want to learn
this stuff anyway. BTAIM...

From your test page it looks like you're trying to vertically align the
text in the middle of the background image. There's more than 1 way to
do this, such as:

Set the div line-height to the height of the image, vertically align the
<aelement to middle - should work OK if there is no line wrapping

-or-

Drop the fixed height and padding on the container div. Set the <a>
element to display:block, add some padding to all 4 sides, and set the
background-position: left center. This will handle line-wrapping as long
as the bg image is designed to handle it. Yours isn't now, but it can
easily be made to do so.

oh brother....

Quit whining

--
Berg
now killing all posts from google groups

[Nik Coughlin]

Re: vertical-align...

"maya" <maya778899@yah oo.comwrote in message
news:483dd74f$1 @news.x-privat.org...

>
oh my gosh.. I would LOVE to know why everybody prefers div-based
layouts.. with tables this is SO MUCH EASIER...
>
I will have to either do entire thing w/an image instead of text or do
w/tables...
>
oh brother.... ok.. thank you..

No, you just haven't learnt enough about CSS yet:

http://nrkn.com/temp/maya/

[Nik Coughlin]

Re: vertical-align...

"Bergamot" <bergamot@visi. comwrote in message
news:483dde5d$0 $90682$c5fe31e7 @reader.usenet4 all.se...

maya wrote:

>Jonathan N. Little wrote:

>>maya wrote:
>>>maya wrote:
>>>>>
>>>>how do I get text to vertical-align inside a div?
>>>>http://www.mayacove.com/misc/home.html
>>>>>
>>>>vertical-align should work, according to this:
>>>>http://htmlhelp.com/reference/css/te...cal-align.html
>>>
>>No it should not.

>>
>I will have to either do entire thing w/an image instead of text or do
>w/tables...

>
No, you don't, you just don't know your way around CSS well enough to
see the forest for the trees. I don't think you really want to learn
this stuff anyway. BTAIM...
>
From your test page it looks like you're trying to vertically align the
text in the middle of the background image. There's more than 1 way to
do this, such as:
>
Set the div line-height to the height of the image, vertically align the
<aelement to middle - should work OK if there is no line wrapping
>
-or-
>
Drop the fixed height and padding on the container div. Set the <a>
element to display:block, add some padding to all 4 sides, and set the
background-position: left center. This will handle line-wrapping as long
as the bg image is designed to handle it. Yours isn't now, but it can
easily be made to do so.

Or a third way, using my solution (posted elsewhere in this thread), set
everything to em sizes (which match the pixel sizes at font-size 100%) and
use line-height to vertically center the text. Allow the size of the text
to control the size of the containing a and div elements. Allows for
text-resizing, unlike the OP's demo page.

[Bergamot]

Re: vertical-align...

Nik Coughlin wrote:

"Bergamot" <bergamot@visi. comwrote in message
news:483dde5d$0 $90682$c5fe31e7 @reader.usenet4 all.se...

>>
>There's more than 1 way to
>do this, such as:

>
Or a third way, using my solution

Note that I didn't imply those 2 solutions I posted were the only
possible alternatives. Nor is your solution so different from what I
described.

--
Berg
now killing all posts from google groups

[Nik Coughlin]

Re: vertical-align...

"Bergamot" <bergamot@visi. comwrote in message
news:483dfcfc$0 $90684$c5fe31e7 @reader.usenet4 all.se...

Nik Coughlin wrote:

>"Bergamot" <bergamot@visi. comwrote in message
>news:483dde5d$ 0$90682$c5fe31e 7@reader.usenet 4all.se...

>>>
>>There's more than 1 way to
>>do this, such as:

>>
>Or a third way, using my solution

>
Note that I didn't imply those 2 solutions I posted were the only
possible alternatives. Nor is your solution so different from what I
described.

Yes, don't worry, I wasn't trying to say that :) There are doubtless half a
dozen other variants too. Mine is an amalgam of your two methods with some
additional differences.

[dorayme]

Re: vertical-align...

In article <483dcd66$1@new s.x-privat.org>, maya <maya778899@yah oo.com>
wrote:

hi,
>
how do I get text to vertical-align inside a div?
>

http://www.mayacove.com/misc/home.html

>
>
vertical-align should work, according to this:

http://htmlhelp.com/reference/css/text/vertical-align.html

>
but it isn't....
>
>
thank you very much..

Perhaps you would be happy with text-align: center for your purposes.

Vertical-align is an inline affair and it is not inherited. Perhaps this
will help to see the situation a little.

<http://netweaver.com.a u/alt/verticalAlign.h tml>

--
dorayme

[maya]

Re: vertical-align...

Bergamot wrote:

maya wrote:

>Jonathan N. Little wrote:

>>maya wrote:
>>>maya wrote:
>>>>how do I get text to vertical-align inside a div?
>>>>http://www.mayacove.com/misc/home.html
>>>>>
>>>>vertical-align should work, according to this:
>>>>http://htmlhelp.com/reference/css/te...cal-align.html
>>No it should not.

>I will have to either do entire thing w/an image instead of text or do
>w/tables...

>
No, you don't, you just don't know your way around CSS well enough to
see the forest for the trees. I don't think you really want to learn
this stuff anyway. BTAIM...

I was responding to previous post in which (s)he offered a solution but
said "don't expect IE support...".. thank you...

[Jonathan N. Little]

Re: vertical-align...

maya wrote:

I was responding to previous post in which (s)he offered a solution but
said "don't expect IE support...".. thank you...
>

I, (Jonathan, a male name BTW), did not say it was the *only* solution.
Your approach could be different to give you similar results that
would not alienate the uncooperative IE browser.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO

http://www.LittleWorksStudio.com

[maya]

Re: vertical-align...

Bergamot wrote:

maya wrote:

>Jonathan N. Little wrote:

>>maya wrote:
>>>maya wrote:
>>>>how do I get text to vertical-align inside a div?
>>>>http://www.mayacove.com/misc/home.html
>>>>>
>>>>vertical-align should work, according to this:
>>>>http://htmlhelp.com/reference/css/te...cal-align.html
>>No it should not.

>I will have to either do entire thing w/an image instead of text or do
>w/tables...

>
No, you don't, you just don't know your way around CSS well enough to
see the forest for the trees. I don't think you really want to learn
this stuff anyway. BTAIM...
>
From your test page it looks like you're trying to vertically align the
text in the middle of the background image. There's more than 1 way to
do this, such as:

Set the div line-height to the height of the image, vertically align the
<aelement to middle - should work OK if there is no line wrapping
>

this solution finally worked, learned something new, thank you very
much...:)

[maya]

Re: vertical-align...

maya wrote:

Bergamot wrote:

>maya wrote:

>>Jonathan N. Little wrote:
>>>maya wrote:
>>>>maya wrote:
>>>>>how do I get text to vertical-align inside a div?
>>>>>http://www.mayacove.com/misc/home.html
>>>>>>
>>>>>vertical-align should work, according to this:
>>>>>http://htmlhelp.com/reference/css/te...cal-align.html
>>>No it should not.
>>I will have to either do entire thing w/an image instead of text or
>>do w/tables...

>>
>No, you don't, you just don't know your way around CSS well enough to
>see the forest for the trees. I don't think you really want to learn
>this stuff anyway. BTAIM...
>>
>From your test page it looks like you're trying to vertically align the
>text in the middle of the background image. There's more than 1 way to
>do this, such as:

>
>
>

>Set the div line-height to the height of the image, vertically align the
><aelement to middle - should work OK if there is no line wrapping
>>

>
this solution finally worked, learned something new, thank you very
much...:)

actually I spoke too soon... vertical-align:middle is working, but
vertical-align:bottom is being ignored (which is weird b/c default for
this property is baseline...)

code:


..test1 { background-color:#ff9933; width:300px; height:40px;
line-height:40px; }
a.testLink {vertical-align:bottom; /* ignored */ }
test2 {vertical-align:bottom; /* ignored */ }

<div class="test1">
<a class="testLink ">photo</a>
</div>

also need it to work w/div inside div instead of <a href>, thus:

<div class="test1">
<div class="test2">p hoto</div>
</div>


I need to recreate this:

http://www.mayacove.com/misc/ss_tabs.jpg

yikes... ;)

would appreciate suggestions.. thank you very much...

[Ben C]

Re: vertical-align...

On 2008-06-10, maya <maya778899@yah oo.comwrote:
[...]

actually I spoke too soon... vertical-align:middle is working, but
vertical-align:bottom is being ignored (which is weird b/c default for
this property is baseline...)
>
code:
>
>
.test1 { background-color:#ff9933; width:300px; height:40px;
line-height:40px; }
a.testLink {vertical-align:bottom; /* ignored */ }
test2 {vertical-align:bottom; /* ignored */ }
>
><div class="test1">
<a class="testLink ">photo</a>
></div>
>
also need it to work w/div inside div instead of <a href>, thus:
>
><div class="test1">
<div class="test2">p hoto</div>
></div>
>
>
I need to recreate this:
>

http://www.mayacove.com/misc/ss_tabs.jpg

>
yikes... ;)
>
would appreciate suggestions.. thank you very much...

Don't forget that line-height is inherited. Try adding:

a.testLink { line-height: normal }

If the A has a line-height of 40px it doesn't get to move much when you
align it to the bottom of a 40px high line box.