CSS posicionament - Historial de revisió

Enric a 16:07, 20 juny 2011

2011-06-20T16:07:08Z

2011-03-24T21:39:30Z

2011-03-24T21:34:42Z

exercici 2

2011-03-24T20:03:20Z

2011-03-24T18:50:27Z

exercici 1

2011-03-05T19:01:08Z

2011-03-05T18:58:54Z

alineacions

2011-03-05T18:47:09Z

2011-03-05T18:39:25Z

2011-03-05T18:39:10Z

@@ Línia 103: / Línia 103: @@
 [[Imatge:css6-pos-absolut.png]]
-== Exercici 2 (resum final) ==
+== Exercici 2 ==
 Realitza una pàgina amb HTML i CSS com aquesta. Alguns detalls:
 * '''TOTES les lletres son text i NO es val utilitzar imatges'''.

@@ Línia 1: / Línia 1: @@
-En CSS podem trobar diferents tipus de posicionament:
+En CSS podem trobar diferents '''tipus de posicionament''':
-*Normal (static)
+*'''Normal''' (static): és el què hem vist fins ara ("flux normal" del text).
-*Absolut
+*'''Absolut''': permet situar els elements on volguem.
-*Flotant
+*'''Flotant''': s'assembla al ''static'' però permet que "suri" com una imatge al processador de text: el text la pot envoltar. També té la característica que pot situar vàries caixes una al costat de l'altra.
-*Fix
+*'''Fix''': es queda fix en la pantalla encara que fem ''scroll''.
 <br>
@@ Línia 112: / Línia 112: @@
 * Pel la barra de menú utilitzeu una llista (UL i LIs) i canvieu-li la propietat '''display:inline;''' perquè us surti horitzontal.
 * Els links no tenen subratllat i quan passes per sobre (hover) canvia el background a blanc.
 [[Imatge:css7-efectes-text.png]]

← Versió més antiga		Revisió del 21:34, 24 març 2011
Línia 102:		Línia 102:

	[[Imatge:css6-pos-absolut.png]]		[[Imatge:css6-pos-absolut.png]]
		+
		+
		+	== Exercici 2 (resum final) ==
		+	Realitza una pàgina amb HTML i CSS com aquesta. Alguns detalls:
		+	* '''TOTES les lletres son text i NO es val utilitzar imatges'''.
		+	* Pels colors és molt útil una eina per Linux que es diu '''KColorChooser''' (podeu instal·lar-la amb l'apt-get). Us permetrà tenir un "comptagotes" com el del Gimp o Photoshop per tot el Gnome.
		+	* Per espaiar les lletres del "CSS is something different..." cal utiltizar la propietat '''letter-spacing'''.
		+	* Per centrar la imatge del cor utilitzeu la propietat '''vertical-align'''.
		+	* Pel la barra de menú utilitzeu una llista (UL i LIs) i canvieu-li la propietat '''display:inline;''' perquè us surti horitzontal.
		+	* Els links no tenen subratllat i quan passes per sobre (hover) canvia el background a blanc.
		+
		+	[[Imatge:css7-efectes-text.png]]

@@ Línia 93: / Línia 93: @@
 Per [http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ centrar en mode fixed de manera exacta podeu llegir aquest article].
-Per '''centrar verticalment el text en una caixa''' és una cosa difícil i poc agraïda. Podeu llegir [http://phrogz.net/css/vertical-align/index.html aquest article que explica com centrar el text verticalment]. Ho necessitareu per acabar l'exercici.
+Per '''centrar verticalment el text en una caixa''' és una cosa difícil i una mica antipàtica. Podeu llegir:
 == Exercici 1 (posicionament absolut) ==

← Versió més antiga		Revisió del 18:50, 24 març 2011
Línia 92:		Línia 92:

	Per [http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ centrar en mode fixed de manera exacta podeu llegir aquest article].		Per [http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ centrar en mode fixed de manera exacta podeu llegir aquest article].
		+
		+	Per '''centrar verticalment el text en una caixa''' és una cosa difícil i poc agraïda. Podeu llegir [http://phrogz.net/css/vertical-align/index.html aquest article que explica com centrar el text verticalment]. Ho necessitareu per acabar l'exercici.
		+
		+	== Exercici 1 (posicionament absolut) ==
		+	Realitza una pàgina amb HTML i CSS com aquesta:
		+
		+	[[Imatge:css6-pos-absolut.png]]

← Versió més antiga		Revisió del 19:01, 5 març 2011
Línia 89:		Línia 89:
	\|}		\|}

−	~~<br>~~	+
		+
		+	Per [http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ centrar en mode fixed de manera exacta podeu llegir aquest article].

@@ Línia 28: / Línia 28: @@
 | ''position: static;''<br>
+|
-margin: ...;
+ margin: 10% 2em 20px 10px;
-margin-left: ...; margin-right: ...; margin-top: ...; margin-bottom: ...;<br>
+Seria equivalent a:
 |-
@@ Línia 51: / Línia 56: @@
+|
-top: 10px;
+top, bottom, left, right.
-bottom:&nbsp; 2em;
+Només s'ha d'utilitzar 2 alhora (1vert + 1horitz).
-left: 100px;
+ top: 10px;
-right: 5em;
+ bottom:&nbsp; 2em;
 |-
@@ Línia 72: / Línia 79: @@
 | Posició fixa al navegador, no es mourà inclús si fem un ''scroll''. S'utilitza típicament per fer aparèixer finestres emergents.<br>
 | ''position: fixed;''
-| <br>
 |}
 <br>

@@ Línia 70: / Línia 70: @@
 |-
 ! scope="row" | Fix<br>
-| Posició fixa al navegador, típicament per fer aparèixer finestres emergents.<br>
+| Posició fixa al navegador, no es mourà inclús si fem un ''scroll''. S'utilitza típicament per fer aparèixer finestres emergents.<br>
 | ''position: fixed;''
 | <br>

@@ Línia 74: / Línia 74: @@
 | <br>
 |}
 <br>