CSS3-optie voor "schuine" tekst
Ik ben bezig met een statistisch overzicht waarbij boven de kolommen de header komt te staan. Nu wil ik deze header ondcer een hoek van 45graden op mijn scherm krijgen omdat dat minder ruimte in neemt dan een horizontale tekst.
Nu ben ik dus op zoek naar de daarvoor bestemde code in CSS3.
Kan iemand mij hieraan helpen?
George
http://www.w3schools.com/css3/css3_2dtransforms.asp
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
Als ik het goed lees wil je een header van de table schuin zetten? is dit alleen de tekst of ook de evetuele achtergrond van deze header?
Ik denk dat dit met css3 moeillijk of niet haalbaar is, zoiezo een table header (<th>) schuin zetten gaat niet.
Makkelijkste en slimste maniet lijkt me om in photoshop (of andere) een afbeelding te maken waar het schuin staat en deze dan als achtergrond van de header in te stellen.
Als het overal dezelde header tekst is kun je in CSS gewoon bijv
.th { background-image: url (../images/bg.png) }
doen. en dan vervoglens in je table header <th class="th"></th> en dan zou het goed moeten komen. Geef de th uiteraard wel de juiste dimensies mee.
Mocht je verschillende headers hebben dan kun je dit als volgt doen.
<th style="background-image: url(../images/th1.png)"></th>. Inline style(css) is bij voorkeur af te raden maar ik denk dat je anders geen optie hebt.
Toevoeging op 03/05/2012 10:28:45:
Yanick - op 03/05/2012 10:26:59:
Snel gevonden:
http://www.w3schools.com/css3/css3_2dtransforms.asp
http://www.w3schools.com/css3/css3_2dtransforms.asp
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
Let wel dat jij hier een div rotate en niet een header <th>.
Als het een div betreft mooi, maar volgens mij gebruikt hij een tabel
Gewijzigd op 03/05/2012 10:29:29 door Chris PHP
Quote:
Let wel dat jij hier een div rotate en niet een header <th>.
Geen tabellen gebruiken!!! En als je toch tabellen wilt gebruiken gebruik het dan goed en gebruik <thead> als header en een <th> als header kopje.
En verder een iets betere code van hierboven, dit werkt ook in IE5.5 en hoger:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
#header
{
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6IE9 */
M11=0.8660254037844387, M12=-0.49999999999999994, M21=0.49999999999999994, M22=0.8660254037844387, sizingMethod='auto expand');
zoom: 1;
}
{
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6IE9 */
M11=0.8660254037844387, M12=-0.49999999999999994, M21=0.49999999999999994, M22=0.8660254037844387, sizingMethod='auto expand');
zoom: 1;
}
En een iets betere link (ipv die w3fools link): https://developer.mozilla.org/en/CSS/transform
Gewijzigd op 03/05/2012 10:53:24 door Wouter J
Voor de liefhebbers de code:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.schuineheader {
transform:rotate(300deg);
-ms-transform:rotate(300deg); /* IE 9 */
-moz-transform:rotate(300deg); /* Firefox */
-webkit-transform:rotate(300deg); /* Safari and Chrome */
-o-transform:rotate(300deg); /* Opera */
font-family: Arial;
color: white;
text-align: left;
}
transform:rotate(300deg);
-ms-transform:rotate(300deg); /* IE 9 */
-moz-transform:rotate(300deg); /* Firefox */
-webkit-transform:rotate(300deg); /* Safari and Chrome */
-o-transform:rotate(300deg); /* Opera */
font-family: Arial;
color: white;
text-align: left;
}
En als je even op http://css3please.com/ kijkt even scrolld naar .box-rotate daar even -60deg invult en dan op enter klikt kun je ook nog die mooie IE filter gebruiken, dan werkt het ook nog in IE!
Je hebt gelijk v.w.b. de wiskundige benadering. Het is een gewenning hoe je e.e.a. notert. In mijn css schrijf ik oveel mogelijk als in positieve notatie.
De huyidige code is door mij getest met IE9 en dat gaat goed. Ook de test met Safari verliep goed.
George
Wouter J op 03/05/2012 10:51:03:
Geen tabellen gebruiken!!!
Wat? Sorry maar als ik data uit een db wil hebben, doe ik dat in tabellen.
Hoe wil je dat fatsoenlijk met divjes gaan doen?
Tabellen zijn taboe als het komt om je website vorm te geven, echter voor informatie is er niets mis mee om tabellen te gebruiken!
Quote:
Tabellen zijn taboe als het komt om je website vorm te geven, echter voor informatie is er niets mis mee om tabellen te gebruiken!
Dat weet ik ook... Alleen dit is een vraag over een HEADER dan gaat het dus over een lay-out en dus moet je hier geen tabellen gebruiken.
Ik heb je filter geplaatst. Kan alleen niet zien of het werkt. Heb zelf IE9
George
George van Baasbank op 03/05/2012 11:27:24:
Wouter,
Ik heb je filter geplaatst. Kan alleen niet zien of het werkt. Heb zelf IE9
George
Ik heb je filter geplaatst. Kan alleen niet zien of het werkt. Heb zelf IE9
George
Als je in IE9 op F12 drukt krijg je het ontwikkelings scherm.
Daar kun je terug gaan naar IE8 en IE7 :D werkt super 3 browsers in 1!
Ik heb met jouw aanwijzing de optie IE7 en IE8 getest. Het werkt perfect. Maar ik kom wel andere fouten/zaken tegen. Zo kennen IE7 en IE8 dus de tag <header> niet en gaat het volledig mis. Als ik deze tag wijzig in een <div> gaat het wel goed. Het gaat hier om het centreren van de headerafbeelding.
Hoe kan ik dit soort "problemen" in mijn HTML5-code opvangen? Wie weet dit?
George
Dan kun je ze toch gewoon 'uitlijnen' met margin?
Dat lagere IE versies niet goed omgaan met nieuwe HTML5 tags komt doordat ze ze niet herkennen. Ze krijgen dan niet de standaard display: block; stijl mee, waardoor ze verkeerd gaan. Je zou dit mee kunnen geven via de CSS:
Code (php)
1
2
3
4
5
2
3
4
5
article, aside, details, figcaption,
figure, footer, header, hgroup, nav, section
{
display: block;
}
figure, footer, header, hgroup, nav, section
{
display: block;
}
Maar er gebeurd meer, deze tags worden ook niet goed opgenomen in de DOM (dat moet wel gebeuren). Beter is het om html5shiv in te laden zoals getoond word top die link. De stijl hierboven heb je dan niet nodig en alles werkt dan perfect.