diff options
Diffstat (limited to 'files/ca/learn/css/css_layout/practical_positioning_examples/index.html')
| -rw-r--r-- | files/ca/learn/css/css_layout/practical_positioning_examples/index.html | 404 |
1 files changed, 404 insertions, 0 deletions
diff --git a/files/ca/learn/css/css_layout/practical_positioning_examples/index.html b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html new file mode 100644 index 0000000000..dfaac7f63c --- /dev/null +++ b/files/ca/learn/css/css_layout/practical_positioning_examples/index.html @@ -0,0 +1,404 @@ +--- +title: Exemples pràctics de posicionament +slug: Learn/CSS/Disseny_CSS/Exemples_pràctics_posicionament +tags: + - Article + - Beginner + - CSS + - CodingScripting + - Guide + - Layout + - Learn + - absolute + - fixed + - relative +translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">Amb els fonaments del posicionament coberts en l'últim article, ara veurem com crear alguns exemples del món real, per il·lustrar quin tipus de coses podeu fer amb el posicionament.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td><span id="result_box" lang="ca"><span>Conceptes bàsics d'HTML</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a>), <span id="result_box" lang="ca"><span>i una idea de com funciona CSS</span></span> (estudi <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Tenir una idea dels aspectes pràctics del posicionament</td> + </tr> + </tbody> +</table> + +<h2 id="Una_caixa_d'informació_amb_pestanyes"><span id="result_box" lang="ca"><span>Una caixa d'informació amb pestanyes</span></span></h2> + +<p>El primer exemple que veurem és una caixa d'informació amb pestanyes clàssica - una característica molt freqüent que es fa servir quan voleu empaquetar molta informació en una petita àrea. Això inclou aplicacions de gran abast d'informació, com ara jocs d'estratègia/guerra, versions mòbils de llocs web on la pantalla és estreta i l'espai és limitat, i caixes d'informació compactes on és possible que vulgueu tenir molta informació disponible sense haver d'omplir tota la IU. El nostre senzill exemple es veurà així una vegada que hàgim acabat:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Podeu veure l'exemple acabat executant-ho en directa a <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">codi font</a>). Consulteu-ho per tenir una idea del que estareu construint en aquesta secció de l'article.</p> +</div> + +<p>Podeu estar pensant "per què no crear les pestanyes separades com a pàgines web independents, i només les pestanyes, fent clic a través de les pàgines independents per crear l'efecte?" Aquest codi seria més senzill, sí, però cada visualització de "pàgina" per separat seria en realitat una pàgina web recentment carregada, la qual cosa faria més difícil guardar la informació entre les vistes i integrar aquesta característica en un disseny de d'interfície d'usuari més gran. A més, les anomenades "aplicacions de pàgina única" s'estan tornant molt populars - especialment per a les d'interfície d'usuari web mòbils - ja que tenir tot el que serveix com un únic arxiu redueix el nombre de sol·licituds HTTP necessàries per visualitzar tot el contingut, millorant així el rendiment.</p> + +<div class="note"> +<p><strong>Nota</strong>: Alguns desenvolupadors web porten les coses encara més lluny, només tenen una pàgina d'informació carregada alhora i canvien dinàmicament la informació que es mostra utilitzant, una funció de JavaScript com <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. En aquest punt de l'aprenentatge, però, volem que les coses siguin tan simples com sigui possible. Hi ha una mica de JavaScript més endavant, però només una mica.</p> +</div> + +<p>Per començar, ens agradaria que féssiu una còpia del fitxer HTML d'inici - <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Deseu-lo en algun lloc sensible a l'ordinador i obrir-ho en el vostre editor de text. Vegem l'HTML contingut en el cos:</p> + +<pre class="brush: html"><section class="info-box"> + <ul> + <li><a href="#" class="active">Tab 1</a></li> + <li><a href="#">Tab 2</a></li> + <li><a href="#">Tab 3</a></li> + </ul> + <div class="panels"> + <article class="active-panel"> + <h2>The first tab</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> + </article> + <article> + <h2>The second tab</h2> + + <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p> + </article> + <article> + <h2>The third tab</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p> + + <ol> + <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> + <li>Aliquam ut porttitor urna.</li> + <li>Nulla facilisi</li> + </ol> + </article> + </div> +</section></pre> + +<p>Així que aquí tenim un element {{htmlelement("section")}} amb una <code>class</code> <code>info-box</code>, que conté un {{htmlelement("ul")}} i un {{htmlelement("div")}}. La llista desordenada conté tres elements de llista amb enllaços a l'interior, que es convertiran en les pestanyes reals per fer clic, per visualitzar els nostres panells de contingut. El div conté tres elements {{htmlelement("article")}}, que formaran els panells de contingut que corresponen a cada pestanya. Cada panell conté alguns continguts d'exemple.</p> + +<p>La idea, aquí, és fer que l'estil de pestanyes pogui semblar-se a un menú estàndard de navegació horitzontal i donant-li estil els panells per a que s'asseguin un damunt de l'altre mitjançant el posicionament absolut. També us donarem una mica de JavaScript per incloure a la vostra pàgina, per mostrar el panell corresponent quan es pressiona una pestanya i l'estil de la pestanya en si. No necessitareu entendre el JavaScript en aquesta etapa, però haureu de pensar en aprendre una mica de <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> bàsic, el més aviat possible - com més complexes siguin les característiques de la vostra interfície d'usuari, més probable és que necessiteu implementar JavaScript a la vostra funcionalitat desitjada.</p> + +<h3 id="Configuració_general">Configuració general</h3> + +<p>Per començar, afegiu el següent entre l'obertura i tancament de les etiquetes {{HTMLElement("style")}}:</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +}</pre> + +<p>Aquesta és només una configuració general per establir una font sans-serif a la nostra pàgina, utilitzar el model <code>border-box</code> de {{cssxref("box-sizing")}} i desfer-se del marge predeterminat de {{htmlelement("body")}}.</p> + +<p>A continuació, afegiu el següent just a sota del vostre CSS anterior:</p> + +<pre class="brush: css">.info-box { + width: 450px; + height: 400px; + margin: 0 auto; +}</pre> + +<p>Això estableix un ample i alçada específic sobre el contingut i el centra a la pantalla mitjançant el antic truc <code>margin: 0 auto;</code>. Anteriorment en el curs, vam aconsellar no establir una alçada fixa en contenidors de contingut, si fos possible; Està bé en aquesta circumstància, perquè tenim contingut fix en les nostres pestanyes. També sembla una mica discordant tenir diferents pestanyes a diferents alçades.</p> + +<h3 id="Estilitzar_les_nostres_pestanyes">Estilitzar les nostres pestanyes</h3> + +<p>Ara volem que les pestanyes d'estil semblin com a pestanyes - bàsicament, aquest és un menú de navegació horitzontal, però en comptes de carregar diferents pàgines web quan es fa clic, com hem vist prèviament al curs, fa que es mostrin panells diferents en la mateixa pàgina. Primer, afegiu la següent regla a la part inferior del vostre CSS per eliminar el valor predeterminat {{cssxref("padding-left")}} i {{cssxref("margin-top")}} de la llista no ordenada:</p> + +<pre class="brush: css">.info-box ul { + padding-left: 0; + margin-top: 0; +}</pre> + +<div class="note"> +<p><strong>Nota</strong>: Estem utilitzant selectors descendents amb <code>.info-box</code> al principi de la cadena a través d'aquest exemple - això és per poguer inserir aquesta funció en una pàgina amb un altre contingut ja en ella, sense por a interferir amb els estils aplicats a altres parts de la pàgina.</p> +</div> + +<p>A continuació, dissenyarem les pestanyes horitzontals - els elements de la llista es flotant tots cap a l'esquerra per fer que s'asseguin en una sola línia, el seu {{cssxref("list-style-type")}} s'estableix a <code>none</code> per desfer-se de les vinyetes i el seu {{cssxref("width")}} s'estableix a <code>150px</code> perquè s'ajusti còmodament a través de la caixa d'informació (info-box). Els elements {{htmlelement("a")}} estan configurats en {{cssxref("display")}} inline-block, perquè s'asseguin en una línia però que encara siguin estilitzables, i estiguin dissenyats adequadament per als botons de pestanya, usant una varietat d'altres propietats.</p> + +<p>Afegiu el següent CSS:</p> + +<pre class="brush: css">.info-box li { + float: left; + list-style-type: none; + width: 150px; +} + +.info-box li a { + display: inline-block; + text-decoration: none; + width: 100%; + line-height: 3; + background-color: red; + color: black; + text-align: center; +}</pre> + +<p>Finalment, per a aquesta secció, establirem alguns estils als estats de l'enllaç. En primer lloc, configurarem els estats <code>:focus</code> i <code>:hover</code> de les pestanyes, perquè es vegin diferents quan estan enfocats/planejats, oferint als usuaris alguna infomació visual. En segon lloc, establirem una regla que posi el mateix estil en una de les pestanyes quan hi hagi una <code>class</code> <code>active</code> present en ella. Definirem això mitjançant JavaScript quan es faci clic a una pestanya. Col·loqueu els següents CSS per sota dels altres estils:</p> + +<pre class="brush: css">.info-box li a:focus, .info-box li a:hover { + background-color: #a60000; + color: white; +} + +.info-box li a.active { + background-color: #a60000; + color: white; +}</pre> + +<h3 id="Estilitzar_els_panells">Estilitzar els panells</h3> + +<p>El següent treball és dissenyar els nostres panells. Anem a engegar-ho!</p> + +<p>Primer de tot, afegiu la següent regla per dissenyar el contenidor <code>.panels</code> {{htmlelement("div")}}. Aquí, simplement, hem establert un {{cssxref("height")}} fix per assegurar-nos que els panells s'ajustin bé a l'interior de la caixa d'informació, {{cssxref("position")}} <code>relative</code> pel que fa a {{htmlelement("div" )}} com a context de posicionament, de manera que podeu col·locar elements fills posicionats relatius a ell i no a l'element {{htmlelement("html")}} i finalment el flotador {{cssxref("clear")}} establert en el CSS anterior perquè no interfereixi amb la resta del disseny.</p> + +<pre class="brush: css">.info-box .panels { + height: 352px; + position: relative; + clear: both; +}</pre> + +<p>Finalment, per a aquesta secció, dissenyarem els elements individuals {{htmlelement("article")}} que componen els nostres panells. La primera regla que afegirem serà {{cssxref("position")}} <code>absolute</code> dels panells, i farà que tots quedin asseguts, alineats a {{cssxref("top")}} i {{cssxref("left")}} del seu contenidor {{htmlelement ("div")}} - aquesta part és absolutament clau per a tota aquesta característica de disseny, ja que fa que els panells s'asseguin uns sobre els altres. La regla també proporciona als panells la mateixa alçada de conjunt que el contenidor, i dóna al contingut un farciment, un text {{cssxref("color")}} i un {{cssxref("background-color")}}.</p> + +<p>La segona regla que afegirem aquí fa que un panell amb una <code>class</code> <code>active-panel</code>, establert en ell, tindrà un {{cssxref("z-index")}} d'1, que se li aplicarà, la qual cosa farà que s'asseguin per sobre dels altres panells (els elements posicionats tenen un <code>z-index</code> de 0 per defecte, la qual cosa els posaria a continuació). Una vegada més, afegirem aquesta classe utilitzant JavaScript en el moment adequat.</p> + +<pre class="brush: css">.info-box article { + position: absolute; + top: 0; + left: 0; + height: 352px; + padding: 10px; + color: white; + background-color: #a60000; +} + +.info-box .active-panel { + z-index: 1; +}</pre> + +<h3 id="Afegir_el_nostre_JavaScript">Afegir el nostre JavaScript</h3> + +<p>L'últim pas per fer funcionar aquesta característica és afegir JavaScript. Col·loqueu el següent bloc de codi, exactament com s'escriu, entre les etiquetes d'obertura i tancament {{htmlelement("script")}} (trobareu aquestes a sota del contingut HTML):</p> + +<pre>var tabs = document.querySelectorAll('.info-box li a'); +var panels = document.querySelectorAll('.info-box article'); + +for(i = 0; i < tabs.length; i++) { + var tab = tabs[i]; + setTabHandler(tab, i); +} + +function setTabHandler(tab, tabPos) { + tab.onclick = function() { + for(i = 0; i < tabs.length; i++) { + tabs[i].className = ''; + } + + tab.className = 'active'; + + for(i = 0; i < panels.length; i++) { + panels[i].className = ''; + } + + panels[tabPos].className = 'active-panel'; + } +}</pre> + +<p><span class="short_text" id="result_box" lang="ca"><span>Aquest codi fa el següent:</span></span></p> + +<ul> + <li>Primer guardem una referència a totes les pestanyes i panells en dues variables anomenades <code>tabs</code> i <code>panels</code>, així, fàcilment, podem fer coses amb elles més endavant.</li> + <li>A continuació, utilitzem un bucle <code>for</code> per recórrer totes les pestanyes i executar una funció anomenada <code>setTabHandler()</code> en cadascuna, en el qual s'estableix la funcionalitat que ha de produir-se quan es fa clic en cadascuna d'elles. Quan s'executa, es passa a la funció una referència a la pestanya, en particular, per a la qual s'executa, <code>i</code> un nombre d'índex i que identifica la posició de la pestanya en la matriu <code>tabs</code>.</li> + <li>A la funció <code>setTabHandler()</code>, la pestanya té un controlador d'esdeveniments onclick establert en ell, de manera que quan es fa clic a la pestanya, es produeix el següent: + <ul> + <li>Un bucle <code>for</code> s'utilitza per recórrer totes les pestanyes i eliminar les classes que hi són presents.</li> + <li>Una <code>class</code> <code>active</code> s'estableix a la pestanya en la qual s'ha fet clic - recordeu que, anteriorment, aquesta classe té una regla associada al CSS que estableix el mateix estil {{cssxref("color")}} i {{cssxref("background-color")}} a la pestanya com els panells.</li> + <li>Un bucle <code>for</code> s'utilitza per recórrer tots els panells i eliminar les classes que hi són presents.</li> + <li>Una classe <code>active-panel</code> s'estableix al panell que correspon a la pestanya que es va fer clic - recordeu que anteriorment, aquesta classe té una regla associada al CSS que estableix el seu {{cssxref("z-index")}} a 1, fent que aparegui a la part superior dels altres panells.</li> + </ul> + </li> +</ul> + +<p>Això és tot pel primer exemple. Manteniu obert el vostre codi, ja que l'afegirem a la segona.</p> + +<h2 id="Una_caixa_d'informació_amb_pestanyes_de_posició_fixa">Una caixa d'informació amb pestanyes de posició fixa</h2> + +<p>En el nostre segon exemple, farem el nostre primer exemple - la nostra caixa d'informació - i l'afegirem al context d'una pàgina web completa. Però no només això - li donarem una posició fixa perquè es mantingui en la mateixa posició en la finestra del navegador. Quan el contingut principal es desplaci, la caixa d'informació romandrà en la mateixa posició en la pantalla. El nostre exemple acabat tindrà aquest aspecte:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Podeu veure l'exemple acabat, executant-ho en directe a <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">codi font</a>). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.</p> +</div> + +<p>Com a punt de partida, podeu fer servir l'exemple complet de la primera secció de l'article o fer una còpia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> des del nostre repositori de Github.</p> + +<h3 id="Addicions_HTML">Addicions HTML</h3> + +<p>En primer lloc, necessitem un codi HTML addicional per representar el contingut principal del lloc web. Afegiu el següent {{htmlelement("section")}} just a sota de l'etiqueta d'apertura {{htmlelement("body")}}, just abans de la secció existent:</p> + +<pre class="brush: html"><section class="fake-content"> + <h1>Fake content</h1> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> + <p>This is fake content. Your main web page contents would probably go here.</p> +</section></pre> + +<div class="note"> +<p><strong>Nota</strong>: Us podeu sentir lliures de canviar el contingut fals per a algun contingut real si ho desitjeu.</p> +</div> + +<h3 id="Canvis_al_CSS_existent">Canvis al CSS existent</h3> + +<p>A continuació, hem de fer petits canvis al CSS existent, per tenir la caixa d'informació col·locada i posicionada Canvieu la regla <code>.info-box</code> per desfer-vos del <code>margin: 0 auto;</code> (Ja no volem que la caixa d'informació estigui centrada), afegiu {{cssxref("position")}}: <code>fixed;</code>, i enganxeu-ho en el {{cssxref("top")}} de la finestra de visualització del navegador.</p> + +<p>Ara ha de ser així:</p> + +<pre class="brush: css">.info-box { + width: 450px; + height: 400px; + position: fixed; + top: 0; +}</pre> + +<h3 id="Estilitzar_el_contingut_principal">Estilitzar el contingut principal</h3> + +<p>L'únic que queda per a aquest exemple és proporcionar al contingut principal amb un estil. Afegiu la següent regla sota la resta del vostre CSS:</p> + +<pre class="brush: css">.fake-content { + background-color: #a60000; + color: white; + padding: 10px; + height: 2000px; + margin-left: 470px; +}</pre> + +<p>Per començar, donem al contingut el mateix {{cssxref("background-color")}}, {{cssxref("color")}}, i {{cssxref("padding")}} com els panells de caixa d'informació. A continuació, li donem un gran {{cssxref("margin-left")}} per moure-ho cap a la dreta, fent espai perquè la caixa d'informació s'assegui, de manera que no se superposi amb qualsevol altre cosa.</p> + +<p>Això marca el final del segon exemple; esperem que trobeu el tercer tan interessant.</p> + +<h2 id="Un_panell_amagat_lliscant"><span id="result_box" lang="ca"><span>Un panell amagat lliscant</span></span></h2> + +<p>L'exemple final que presentarem aquí és un panell que es llisca des de dins i fora de la pantalla en prémer una icona - com s'ha esmentat anteriorment, això és popular per a situacions com ara dissenys de mòbils, on els espais de pantalla disponibles són petits, per la qual cosa no es desitja usar la major part d'ella, mostrant un menú o panell d'informació en lloc de contingut útil.</p> + +<p>El nostre exemple acabat tindrà aquest aspecte:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Podeu veure l'exemple acabat, executant-ho en directe a <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">codi font</a>). Comproveu-ho per tenir una idea del que serà la construcció d'aquesta secció de l'article.</p> +</div> + +<p>Com a punt de partida, feu una còpia local de <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> des del nostre repositori de Github. Això no segueix l'exemple anterior, de manera que cal un nou fitxer d'inici. Fem un cop d'ull al codi HTML del fitxer:</p> + +<pre class="brush: css"><label for="toggle">❔</label> +<input type="checkbox" id="toggle"> +<aside> + + ... + +</aside></pre> + +<p>Per començar, tenim un element {{htmlelement("label")}} i un element {{htmlelement("input")}} - els elements <code><label></code> normalment s'utilitzen per associar una etiqueta de text amb un element de formulari amb finalitats d'accessibilitat (permetent que un usuari de pantalla vegi quina descripció fa amb quin element del formulari). Aquí s'associa amb la casella de verificació <code><input></code> amb els atributs <code>for</code> i <code>id</code>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Hem posat un gran signe d'interrogació en el nostre HTML perquè actuï com la nostra icona d'informació - aquest representa el botó que es premut per mostrar/amagar el panell.</p> +</div> + +<p>Aquí utilitzarem aquests elements per un propòsit lleugerament diferent - un altre efecte secundari útil dels elements <code><label></code> és que podeu fer clic a l'etiqueta de la casella de verificació per a marcar la casella de verificació, així com només la casella de verificació. Això ha portat a la coneguda <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, que proporciona una forma lliure de JavaScript per controlar un element mitjançant la commutació d'un botó. L'element que anem a controlar és l'element {{htmlelement("aside")}} que segueix els altres dos (hem deixat el seu contingut fora del llistat del codi anterior per brevetat).</p> + +<p>A les seccions següents explicarem com funciona tot això.</p> + +<h3 id="Estilitzar_els_elements_de_formulari">Estilitzar els elements de formulari</h3> + +<p>Primer tractarem els elements de formulari - afegiu el següent CSS entre les etiquetes {{htmlelement("style")}}:</p> + +<pre class="brush: css">label[for="toggle"] { + font-size: 3rem; + position: absolute; + top: 4px; + right: 5px; + z-index: 1; + cursor: pointer; +} + +input[type="checkbox"] { + position: absolute; + top: -100px; +}</pre> + +<p>La primera regla donar estil el <code><label></code>; aquí tenim:</p> + +<ul> + <li>Establiu una gran {{cssxref("font-size")}} per fer que la icona sigui agradable i gran.</li> + <li>Establiu {{cssxref("position")}} <code>absolute</code>, i utilitzeu {{cssxref("top")}} i {{cssxref("right")}} per col·locar-ho bé a la cantonada superior dreta.</li> + <li>Establiu un {{cssxref("z-index")}} d'1 - això és perquè quan el panell d'informació estigui dissenyat i es mostri, no cobreixi la icona; En lloc d'això, la icona s'asseura sobre d'ell, de manera que es pogui tornar a prémer per ocultar el panell d'informació.</li> + <li>S'ha utilitzat la propietat {{cssxref("cursor")}} per canviar el cursor del ratolí quan es mou sobre la icona, amb un punter de mà (com el que es veu quan es planeja sobre els enllaços), com una pista visual addicional per als usuaris com que la icona fa alguna cosa interessant.</li> +</ul> + +<p>La segona regla estableix {{cssxref("position")}} <code>absolute</code> en l'element <code><input></code> de casella de verificació real i l'oculta a la part superior de la pantalla. De fet, no volem veure això a la nostra interfície d'usuari.</p> + +<h3 id="Estilitzar_el_panell">Estilitzar el panell</h3> + +<p>Ara és hora de donar-li estil el propi panell lliscant. Afegiu la següent regla al final del vostre CSS:</p> + +<pre class="brush: css">aside { + background-color: #a60000; + color: white; + + width: 340px; + height: 98%; + padding: 10px 1%; + + position: fixed; + top: 0; + right: -370px; + + transition: 0.6s all; +}</pre> + +<p>Hi ha molt a fer aquí, analitzem-ho a poc a poc:</p> + +<ul> + <li>En primer lloc, establim {{cssxref("background-color")}} i {{cssxref("color")}} en la caixa d'informació.</li> + <li>A continuació, establim un {{cssxref("width")}} fix al panell i feu que {{cssxref("height")}} sigui tota l'alçada de la finestra de visualització del navegador.</li> + <li>També inclourem un {{cssxref("padding")}} per compensar l'amplada/alçada al valor total que volem (això és necessari ja que no hem establert <code>box-sizing: border-box;</code> en aquest exemple).</li> + <li>A continuació, establim una {{cssxref("position")}}: <code>fixed;</code> en el panell perquè sempre aparegui al mateix lloc, fins i tot si la pàgina té contingut per desplaçar-se. Ho peguem a la {{cssxref("top")}} de la finestra de visualització, i ho configurem perquè de manera predeterminada estigui fora de pantalla a la {{cssxref("right")}}.</li> + <li>Finalment, establim una {{cssxref("transition")}} a l'element. Les transicions són una característica interessant que permet fer canvis entre estats que succeeixen suaument, en lloc de simplement fer "on", "off" abruptament. En aquest cas, intentem que el panell llisqui suaument a la pantalla quan es marca la casella de verificació. (O dit d'una altra manera, quan es fa clic a la icona del signe d'interrogació - recordeu, fent clic en el <label>, marcarà la casella de verificació associada! Us explicàvem que era un hack). Aprendreu molt més sobre...</li> +</ul> + +<h3 id="Seleccionar_el_estat_marcat">Seleccionar el estat marcat</h3> + +<p>Hi ha una mica de CSS per afegir - poseu el següent al final del vostre CSS:</p> + +<pre class="brush: css">input[type=checkbox]:checked + aside { + right: 0px; +}</pre> + +<p>El selector és bastant complex aquí - estem seleccionant l'element <code><aside></code> adjacent a l'element <code><input></code>, però només quan està marcat (tingueu en compte l'ús de la pseudo-classe {{cssxref (": checked")}} per aconseguir això). Quan aquest és el cas, estem establint la propietat {{cssxref("right")}} de <code><aside></code> a 0px, el que fa que el panell aparegui novament en la pantalla (suaument a causa de la transició). En fer clic en l'etiqueta, torna a desmarcar la casella de verificació, que torna a ocultar el panell.</p> + +<p>Així que aquí ho teniu - una manera bastant intel·ligent, lliure de Javascript, per crear un efecte de botó alternatiu. Això funcionarà en IE9 i superiors (la transició suau funcionarà en IE10 i superiors). Aquest efecte té algunes preocupacions - això és abusar una mica d'elements de forma (no estan destinats per a aquest propòsit), i l'efecte no és el millor en termes d'accessibilitat - l'etiqueta no es pot enfocar de manera predeterminada, i l'ús no semàntic dels elements de formulari pot causar problemes amb els lectors de pantalla. JavaScript i un enllaç o un botó poden ser més apropiat, però encara és divertit experimentar.</p> + +<h2 id="Resum">Resum</h2> + +<p>Així que arrodonim el nostre cop d'ull en el posicionament - ara com ara, heu de tenir una idea de com funciona la mecànica bàsica, així com la comprensió de com començar a aplicar-los en la construcció d'algunes característiques interessants de la interfície d'usuari. No us preocupeu sinó vau rebre tot això immediatament - el posicionament és un tema bastant avançat, i sempre podeu treballar a través dels articles de nou, per ajudar-vos en la vostra comprensió. El següent tema al que ens referirem és a Flexbox.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> |