grafiek rechts uitlijnen

[pascallino]

Ik heb met css een grafiek gemaakt.
Alleen die staat aan de linker kan.
Kan ik hem ook rechts uitlijnen.
Mijn grafiek:

<ul class='verticalbarGraph'>  <li class='p1' style='height: 40px; left: 0px; '>27-12-2010<br> 4</li>  <li class='p1' style='height: 320px; left: 100px; '>28-12-2010<br> 32</li>  <li class='p1' style='height: 280px; left: 200px;'>29-12-2010 <br> 28</li>  <li class='p1' style='height: 80px; left: 300px;'>30-12-2010 <br> 8</li></ul>

De css:

.verticalBarGraph {
	height: 500px;
	margin: 0;
	padding: 0;
	position: relative;
	}
	
.verticalBarGraph li {
	border: 1px solid #555;
	border-bottom: none;
	bottom: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 90px;;
	background-color: grey;
	color: white;	
	}

Weet iemand het??
Mvg. Pascallino

 

[csshunter]

Hoi Pascallino,
Gewoon in de <li>'s de {left: 0px;} t/m {left: 300px;} omzetten in {right: 300px;} t/m {right: 0px;}?

• Testpagina: www.developerscorner.nl/csshunter/tests/grafiek-rechts-uitlijnen.htm

Met vriendelijke wensen,
CSShunter

 

[pascallino]

oke bedankt het werkt.
Kan ik ook de grafiek in een zwart vierkant zetten met een witte rand??
dat probeer ik nu maar dan staat de grafiek niet in het vierkant.
Dit is de css:

.verticalBarGraph {
	height: 500px;
	margin: 0;
	padding: 0;
	position: top right;
	border: 5px solid #FFFFFF;
	
	}
	
.verticalBarGraph li {
	border: 1px solid #000000;
	border-bottom: none;
	bottom: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 90px;;
	background-color: grey;
	color: white;	
	}

Mvg. Pascallino

 

[csshunter]

Hoi Pascallino,
De <ul> een breedte geven en rechts laten floaten werkt hier.
Verder blijkt IE7 niet te reageren op de kleur "grey" (FF, Chrome, Opera en Safari wel). Maar dat kan kloppen, want de officiële benaming voor grijs (#808080) is op z'n Amerikaans: "gray". Zie de css-specificatie.

• Nieuwe testpagina: www.developerscorner.nl/csshunter/tests/grafiek-rechts-uitlijnen-2.htm

Een goed 2011!
CSShunter

 

[5blabla5]

Vraagje tussendoor van mij: Moeten alle kleuren op zen amerikaans worden gespelt in css? Misschien wel even handig om te weten, ook al gebruik ik altijd hex kleurcodes

 

[csshunter]

Hoi 5blabla5,
Behalve voor zwart en wit (die kan ik nog in het EN onthouden) gebruik ik ook alleen de hex notatie. Maar eens even voor gaan zitten, en gesnord hoe het nu precies zit met die namen.

Eerste opmerkelijkheid
w3c en w3schools hebben andere kleuren als "de 17 standaardkleuren" van html!

w3c zegt in de css2.1 specificatie ([URL="http://www.w3.org/TR/CSS2/syndata.html#value-def-color"][U]alhier[/U][/URL]):
aqua, black, blue, fuchsia, gray,       green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

Maar w3schools zegt ([URL="http://www.w3schools.com/html/html_colornames.asp"][U]alhier[/U][/URL]):
aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive,         purple, red, silver, teal, white, and yellow.

Oftewel: w3schools heeft de orange er uit gehaald, en er zowel gray als grey in zitten (met dezelfde kleurwaarde #808080).

Tweede opmerkelijkheid
Volgens de css2.1 specificatie van w3c (via deze naar alhier) zijn het alléén deze 17 kleuren (incl. zwart en wit) die bij naam opgeroepen mogen worden:

4.3.6 Colors
A <color> is either a keyword or a numerical RGB specification.
The list of color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. These 17 colors have the following values:

Derde opmerkelijkheid
De html4.01 specificatie van w3c geeft óók de (basis-) kleurnamen op (alhier), maar dat zijn er maar 16 (!): orange ontbreekt (en grey trouwens ook):

6.5 Colors
The attribute value type "color" ( %Color; ) refers to color definitions as specified in [SRGB]. A color value may either be a hexadecimal number (prefixed by a hash mark) or one of the following sixteen color names. The color names are case-insensitive.

Vierde opmerkelijkheid
Op internet zwerven her en der lijsten met "de 140 kleur-namen" of "de 147 kleur-namen", bv.:

• www.html-color-names.com/color-chart.php
• www.angelfire.com/wa/rogerswhome/colorchart.html
• www.learningwebdesign.com/colornames.html
• http://answers.oreilly.com/topic/453-color-names-and-rgb-values-with-wide-browser-support/
• http://webdesign.about.com/od/colorcharts/l/bl_namedcolors.htm

... waaronder dan de voor mij exotische kleurnamen zitten als "navajowhite", "papayawhip", "thistle", "peachpuff" en "lightgoldenrodyellow". Niet te verwarren met "ghostwhite", "hotpink", "dimgray", "dodgerblue" of "floralwhite", om er maar eens een paar op te noemen.

• Terzijde: doet me denken aan de Speciale Postzegelcatalogus, waar ze ook een heel eigen jargon hebben voor het beschrijven van de kleurnuances in postzegels.

... maar de uitgebreide kleurnamenlijst kan ik nergens in de css2.1 of html4.01 specificaties terugvinden.

Vijfde opmerkelijkheid
Ook bij css3 zijn er "Basic color keywords" (zie alhier):

"The list of basic color keywords is: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow."

Het bekende rijtje met de 16 namen (weer geen orange).

Zesde opmerkelijkheid
Ook pas in css3 is er sprake van "Extended color keywords" (alhier):

4.3. Extended color keywords
The table below provides a list of the X11 colors [X11COLORS] supported by popular browsers with the addition of gray/grey variants from SVG 1.0.

En daar komen ze: van aliceblue en antiquewhite tot en met whitesmoke, yellow en yellowgreen! ​

En daar zitten dus zowel gray als grey in, zodat ook IE daar rekening mee zal moeten houden (en misschien al doet in IE8 en/of IE9beta, want die heb ik hier niet).

Maar ik heks voorlopig nog maar wat door, wel zo makkelijk!

Met vriendelijke groet,
CSShunter
_______________
PS:
O, ik zie nog dat in css3 de "systeemkleuren" er uit gehaald zijn (deprecated; zie alhier); d.w.z. de speciale "kleurnamen" om de systeemkleuren van het Operating System van een computer weer te geven, zoals: "ActiveBorder (Active window border)", "ButtonText (Text on push buttons)", "GrayText (Grayed [disabled] text)", enz.