Tekst verticaal uitlijnen

[dieuwke1995]

Ik heb een div met height 100%, waar ik de tekst altijd onderin wil hebben, ongeacht de lengte van de pagina. Hoe moet dit?

Dit is de html code (vd div):

<div class="info">
<p> Straat + huisnr <br>
Postcode + woonplaats </p>

<p> tel: X</p>
<p> fax: X</p>
<p> mobiel: X<p>
<p> @: X</p>
</div>

en dit de css (vd div):

.info {
font-family: Arial;
font-size: 10px;

float: right;
width: 150px;
height: 100%;

background-color: #fcfdbd;

padding: 10px;

margin: 0px;

line-height: 100%;
}

Zoals je ziet heb ik het al geprobeerd met line-height, maar dat werkt volgens mij alleen als je een height van een bepaald aantal px opgeeft en niet met procenten...


Ik heb de gegevens die in de div staan even weggehaald, maar het aantal regels tekst enz. klopt nog wel.

 

[Frats]

Je kunt gebruik maken van vertical-align

http://www.w3schools.com/Css/pr_pos_vertical-align.asp

 

[dieuwke1995]

Je kunt gebruik maken van vertical-align

http://www.w3schools.com/Css/pr_pos_vertical-align.asp

Welke van die Property Values moet ik dan gebruiken? text-bottom? dat werkt namelijk niet als ik dat in de css code voor de div zet...

 

[dieuwke1995]

Je kunt gebruik maken van vertical-align

http://www.w3schools.com/Css/pr_pos_vertical-align.asp

Ik heb het geprobeert met text-bottom, maar dat werkt niet gewoon bottom werkt ook niet...

 

[csshunter]

Hoi dieuwke1995,
Helaas! De vertical-align werkt niet, en mag volgens de standaard ook niet werken:

• www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align:
  

  'vertical-align' (...) Applies to: inline-level and 'table-cell' elements

In het voorbeeld van w3schools gaat het om een image, waar de vertical-align op wordt toegepast: dat is inderdaad een inline-element binnen het block-element <p>.

Maar hier gaat het om een <div> die uit verschillende block-elementen <p> is opgebouwd, en dan gaat de vlieger dus niet op.

Hoe dan wel? Bv. met een absolute positie, en dan met {bottom: 0;} aan de onderkant vastplakken. Bij een html van 100% hoog en een {position:fixed;} blijft het blokje onderaan gefixeerd: ook bij scrollen altijd op dezelfde plaats.

• Voorbeeld: www.developerscorner.nl/csshunter/tests/verticaal-uitgelijnde-tekst.htm

Is zoiets de bedoeling?

Met vriendelijke groet,
CSShunter

 

[dieuwke1995]

Hoi dieuwke1995,
Helaas! De vertical-align werkt niet, en mag volgens de standaard ook niet werken:

• www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align:
  

In het voorbeeld van w3schools gaat het om een image, waar de vertical-align op wordt toegepast: dat is inderdaad een inline-element binnen het block-element <p>.

Maar hier gaat het om een <div> die uit verschillende block-elementen <p> is opgebouwd, en dan gaat de vlieger dus niet op.

Hoe dan wel? Bv. met een absolute positie, en dan met {bottom: 0;} aan de onderkant vastplakken. Bij een html van 100% hoog en een {position:fixed;} blijft het blokje onderaan gefixeerd: ook bij scrollen altijd op dezelfde plaats.

• Voorbeeld: www.developerscorner.nl/csshunter/tests/verticaal-uitgelijnde-tekst.htm

Is zoiets de bedoeling?

Met vriendelijke groet,
CSShunter

Jaa ! dat is de bedoeling, ik ga het gelijk proberen!!

 

[dieuwke1995]

Hoi dieuwke1995,
Helaas! De vertical-align werkt niet, en mag volgens de standaard ook niet werken:

• www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align:
  

In het voorbeeld van w3schools gaat het om een image, waar de vertical-align op wordt toegepast: dat is inderdaad een inline-element binnen het block-element <p>.

Maar hier gaat het om een <div> die uit verschillende block-elementen <p> is opgebouwd, en dan gaat de vlieger dus niet op.

Hoe dan wel? Bv. met een absolute positie, en dan met {bottom: 0;} aan de onderkant vastplakken. Bij een html van 100% hoog en een {position:fixed;} blijft het blokje onderaan gefixeerd: ook bij scrollen altijd op dezelfde plaats.

• Voorbeeld: www.developerscorner.nl/csshunter/tests/verticaal-uitgelijnde-tekst.htm

Is zoiets de bedoeling?

Met vriendelijke groet,
CSShunter

Hmm... toch niet helemaal. Eerst had ik de div een height van 100% gegeven en dat wil ik graag zo houden. Maar als ik hierbij een height van 100% doe, werkt het niet meer, dan komt een deel van de tekst zelfs buiten het scherm te staan...

Iemand nog ideeën??

 

[csshunter]

Hoi dieuwke,

Eerst had ik de div een height van 100% gegeven en dat wil ik graag zo houden.

Bedoel je dat je de achtergrondkleur van die div over de hele kolom van boven naar beneden wilt laten lopen, of iets anders?

 

[dieuwke1995]

Hoi dieuwke,

Bedoel je dat je de achtergrondkleur van die div over de hele kolom van boven naar beneden wilt laten lopen, of iets anders?

ja dat bedoel ik

 

[csshunter]

Alweer helderziende, geloof ik.
Je zou aan de rechterkant een los extra div'je kunnen maken van 100% hoog waar alleen de gewenste achtergrondkleur in zit.

• Test: www.developerscorner.nl/csshunter/tests/verticaal-uitgelijnde-tekst2.htm

Waar er "piep" staat, zou je eventueel ook nog wat tekst *) of een afbeelding kunnen zetten.

Met vriendelijke groet,
CSShunter
________________
*) Niet te veel, zodat bij weinig schermhoogte (bv. bij een resolutie van 800x600px) de boventekst niet overlappend achter de beneden-tekst komt te staan.
Anders moet er even een binnen-div'je in: met een vastgeprikte hoogte en een {overflow:auto;}, zodat er een zo nodig een scrollbalkje bij komt.

• Test: www.developerscorner.nl/csshunter/tests/verticaal-uitgelijnde-tekst3.htm

 

[dieuwke1995]

Alweer helderziende, geloof ik.
Je zou aan de rechterkant een los extra div'je kunnen maken van 100% hoog waar alleen de gewenste achtergrondkleur in zit.

• Test: www.developerscorner.nl/csshunter/tests/verticaal-uitgelijnde-tekst2.htm

Waar er "piep" staat, zou je eventueel ook nog wat tekst *) of een afbeelding kunnen zetten.

Met vriendelijke groet,
CSShunter
________________
*) Niet te veel, zodat bij weinig schermhoogte (bv. bij een resolutie van 800x600px) de boventekst niet overlappend achter de beneden-tekst komt te staan.
Anders moet er even een binnen-div'je in: met een vastgeprikte hoogte en een {overflow:auto;}, zodat er een zo nodig een scrollbalkje bij komt.

• Test: www.developerscorner.nl/csshunter/tests/verticaal-uitgelijnde-tekst3.htm

ja dat is 'm