Verticaal weergeven tekst

Door Bob Duisters op 11-05-2011 15:06 gewijzigd op 11-05-2011 15:06

2.200 views

Hallo,

Ik ben bezig met een tabel op het scherm weer te geven, deze moet er als volgt uit komen te zien.

Nu wil ik dit plaatje omzetten naar code en als ik de bovenste rij na maak in html met een tabel krijg ik de tekst wel verticaal gedraaid maar dan word de breedte van veld net zo breed als de hoogte van het veld. Ik gebruik hiervoor de volgende code:


.vert 
{
	WRITING-MODE: tb-rl; FILTER:fliph flipv;
	-webkit-transform: rotate(-90deg);
  	-moz-transform: rotate(-90deg);
  	margin: 0;
  	padding: 0;	
 }

Hoe kan ik deze breedte aanpassen?

Met vriendelijke groet,

Bob Duisters

Bart Roelofs

14-05-2011 22:54

Ik heb geen flauw idee, maar wel een vermoeden:

werkt het als je dit in cs erbij zet?

{line-height:200%}

ik weet niet of het dan mee rotated is, maar moet je maar eens proberen.

groeten Bart Roelofs

Wouter J

14-05-2011 23:28

Wat een lelijke CSS code:
- Je sprint niet gelijk matig in
- Naast de prefix (-moz- en -webkit-) moet je ook altijd de standaard propertie gebruiken, dus zonder -webkit- (transform: ...)
- CSS code is altijd in kleine letter, dus niet FILTER of WRITING-MODE
- Door het gebruik van filter: flipH en V wordt de tekst echt verpest. Tegenwoordig met IE9 wordt de transform optie gewoon ondersteund met de prefix -ms- (MicroSoft) ervoor.

En als je de breedte wilt aanpassen. Moet je even logisch nadenken:

Wat zul je dus moeten aanpassen?

Bob Duisters

16-05-2011 09:36

@Wouter J
Ik zal de code wat netter maken ziet er idd niet uit!
Verder zal ik transform ook eens toepasssen zonder -webkit-
Het aanpassen werkt helaas niet zoals jij beschrijft dat de breedte gewoon de hoogte word, dit heb ik al geprobeerd! Ik zal de code even aanpassen en een edit doen.

[size=xsmall]Toevoeging op 16/05/2011 09:46:35:[/size]

De nieuwe css:


.vert 
{
  writting-mode: tb-rl; 
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  height: 10;
  width: 100;	
 }

Reageren

Inloggen om te reageren