Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > vertical-align

Reply
Thread Tools

vertical-align

 
 
windandwaves
Guest
Posts: n/a
 
      10-28-2006
Hi Folk

Can you do vertical-align bottom in a div or only really in a table? I
prefer to use divs of course, but in tables, the vertical align seems
to be working better. Is this correct?

TIA

Nicolaas

 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      10-29-2006
On 2006-10-28, windandwaves <(E-Mail Removed)> wrote:
> Hi Folk
>
> Can you do vertical-align bottom in a div or only really in a table?


You can set it on inline level elements to move them relative to the
line they're on. But if you want the effect of a box with a set height
that contains another box at the bottom of it, use positioning. Set the
outer box to position: relative (or position: absolute), and the inner
box to position: absolute with bottom: 0px.

You set position on the outer box just to make it the containing block
for the inner box (i.e. the block the inner box is 0px from the bottom
of).

Using relative rather than absolute on the outer box keeps it "in the
normal flow".
 
Reply With Quote
 
 
 
 
windandwaves
Guest
Posts: n/a
 
      10-29-2006

Ben C wrote:
> On 2006-10-28, windandwaves <(E-Mail Removed)> wrote:
> > Hi Folk
> >
> > Can you do vertical-align bottom in a div or only really in a table?

>
> You can set it on inline level elements to move them relative to the
> line they're on. But if you want the effect of a box with a set height
> that contains another box at the bottom of it, use positioning. Set the
> outer box to position: relative (or position: absolute), and the inner
> box to position: absolute with bottom: 0px.
>
> You set position on the outer box just to make it the containing block
> for the inner box (i.e. the block the inner box is 0px from the bottom
> of).
>
> Using relative rather than absolute on the outer box keeps it "in the
> normal flow".


Hi, I tested it and it works a treat. THANK YOU

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<div id="outer" style="position: relative; height: 300px;
background-color: #ccc; width: 200px;">
<div id="inner" style="position: absolute; bottom: 0px;
background-color: #777; ">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Pellentesque leo. Duis
arcu erat, posuere non, fringilla vel, ultricies ut, purus. Nunc
turpis. Nullam
hendrerit, elit nec molestie pellentesque, ligula ante tempor dui, eu
molestie
nibh erat sed sem. Maecenas orci. Donec aliquam imperdiet sapien.
</div>
</div>
</body>
</html>

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-29-2006
windandwaves wrote:

> Hi, I tested it and it works a treat. THANK YOU
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


Now just update your doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
windandwaves
Guest
Posts: n/a
 
      10-30-2006

Jonathan N. Little wrote:
> windandwaves wrote:
>
> > Hi, I tested it and it works a treat. THANK YOU
> >
> > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

>
> Now just update your doctype:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">



I go for xhtml strict, but visual studio from Windoz does not....
Sorry. Thanks again for your help.

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      10-30-2006
windandwaves wrote:
> Jonathan N. Little wrote:
>> windandwaves wrote:
>>
>>> Hi, I tested it and it works a treat. THANK YOU
>>>
>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

>> Now just update your doctype:
>>
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">

>
>
> I go for xhtml strict, but visual studio from Windoz does not....
> Sorry. Thanks again for your help.
>

What! MS won't let you change your doctype! Or is just a default, and
most don't know how to change it. Don't know Visual Studio, most folks
who use Perl with CGI.pm only use the default "XHTML 1.0 Transitional"
but you *can* change it....


use CGI qw(-no_xhtml);
$CGI:EFAULT_DTD = ['-//W3C//DTD HTML 4.01//EN',
'http://www.w3.org/TR/html4/strict.dtd'];

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
password
Guest
Posts: n/a
 
      10-31-2006

"windandwaves" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) oups.com...
>
> Ben C wrote:
> > On 2006-10-28, windandwaves <(E-Mail Removed)> wrote:
> > > Hi Folk
> > >
> > > Can you do vertical-align bottom in a div or only really in a table?

> >
> > You can set it on inline level elements to move them relative to the
> > line they're on. But if you want the effect of a box with a set height
> > that contains another box at the bottom of it, use positioning. Set the
> > outer box to position: relative (or position: absolute), and the inner
> > box to position: absolute with bottom: 0px.
> >
> > You set position on the outer box just to make it the containing block
> > for the inner box (i.e. the block the inner box is 0px from the bottom
> > of).
> >
> > Using relative rather than absolute on the outer box keeps it "in the
> > normal flow".

>

ive just done this for a div containing a form (drop down list thing) and it
works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at the
bottom - anyway around this?
i am currently testing my page in all other (browser/op) combinations with
http://browsershots.org/ so may have to return again for more help ho hum.


 
Reply With Quote
 
Ben C
Guest
Posts: n/a
 
      10-31-2006
On 2006-10-31, password <(E-Mail Removed)> wrote:
>
> "windandwaves" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed) oups.com...
>>
>> Ben C wrote:
>> > On 2006-10-28, windandwaves <(E-Mail Removed)> wrote:
>> > > Hi Folk
>> > >
>> > > Can you do vertical-align bottom in a div or only really in a table?
>> >
>> > You can set it on inline level elements to move them relative to the
>> > line they're on. But if you want the effect of a box with a set height
>> > that contains another box at the bottom of it, use positioning. Set the
>> > outer box to position: relative (or position: absolute), and the inner
>> > box to position: absolute with bottom: 0px.
>> >
>> > You set position on the outer box just to make it the containing block
>> > for the inner box (i.e. the block the inner box is 0px from the bottom
>> > of).
>> >
>> > Using relative rather than absolute on the outer box keeps it "in the
>> > normal flow".

>>

> ive just done this for a div containing a form (drop down list thing) and it
> works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at the
> bottom - anyway around this?


It's probably just a margin-- try adding margin-bottom: 0 to the form.
 
Reply With Quote
 
password
Guest
Posts: n/a
 
      10-31-2006

"Ben C" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> On 2006-10-31, password <(E-Mail Removed)> wrote:
> >
> > "windandwaves" <(E-Mail Removed)> wrote in message
> > news:(E-Mail Removed) oups.com...
> >>
> >> Ben C wrote:
> >> > On 2006-10-28, windandwaves <(E-Mail Removed)> wrote:
> >> > > Hi Folk
> >> > >
> >> > > Can you do vertical-align bottom in a div or only really in a

table?
> >> >
> >> > You can set it on inline level elements to move them relative to the
> >> > line they're on. But if you want the effect of a box with a set

height
> >> > that contains another box at the bottom of it, use positioning. Set

the
> >> > outer box to position: relative (or position: absolute), and the

inner
> >> > box to position: absolute with bottom: 0px.
> >> >
> >> > You set position on the outer box just to make it the containing

block
> >> > for the inner box (i.e. the block the inner box is 0px from the

bottom
> >> > of).
> >> >
> >> > Using relative rather than absolute on the outer box keeps it "in the
> >> > normal flow".
> >>

> > ive just done this for a div containing a form (drop down list thing)

and it
> > works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at

the
> > bottom - anyway around this?

>
> It's probably just a margin-- try adding margin-bottom: 0 to the form.


ah i shall try that.. in my ignorance i thought bottom:0px was refering to
the margin.


 
Reply With Quote
 
password
Guest
Posts: n/a
 
      10-31-2006

"password" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
>
> "Ben C" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > On 2006-10-31, password <(E-Mail Removed)> wrote:
> > >
> > > "windandwaves" <(E-Mail Removed)> wrote in message
> > > news:(E-Mail Removed) oups.com...
> > >>
> > >> Ben C wrote:
> > >> > On 2006-10-28, windandwaves <(E-Mail Removed)> wrote:
> > >> > > Hi Folk
> > >> > >
> > >> > > Can you do vertical-align bottom in a div or only really in a

> table?
> > >> >
> > >> > You can set it on inline level elements to move them relative to

the
> > >> > line they're on. But if you want the effect of a box with a set

> height
> > >> > that contains another box at the bottom of it, use positioning. Set

> the
> > >> > outer box to position: relative (or position: absolute), and the

> inner
> > >> > box to position: absolute with bottom: 0px.
> > >> >
> > >> > You set position on the outer box just to make it the containing

> block
> > >> > for the inner box (i.e. the block the inner box is 0px from the

> bottom
> > >> > of).
> > >> >
> > >> > Using relative rather than absolute on the outer box keeps it "in

the
> > >> > normal flow".
> > >>
> > > ive just done this for a div containing a form (drop down list thing)

> and it
> > > works fine in ie6 and firefox2 but opera9 leaves a 10 (approx) gap at

> the
> > > bottom - anyway around this?

> >
> > It's probably just a margin-- try adding margin-bottom: 0 to the form.

>
> ah i shall try that.. in my ignorance i thought bottom:0px was refering to
> the margin.
>

sir, you are a star, thankyou. it works perfectly.


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off




Advertisments