Successfully reported this slideshow.
FLOATS            CONTENIDOR AMB TEXT I UNA IMATGE A LA DRETAEl codi HTML sería aproximadament així:           <div>      ...
MENÚ DE NAVEGACIÓ HORITZONTALEl codi HTML seria:             <div>               <ul>                            <li><a>A<...
LLISTA AMB UNA IMATGE I UNA BREU DEFINICIÓEl codi HTML seria així:      <div class=”quadre”>       <ulclass=”llista”>     ...
Flotar les imatges a l’esquerra:            .llista img {            Float: left;            width: 50px; /*amplada imatge...
Donar marges i padding al text i a la icona.També als enllaços:             .text a {             Text-decoration: none;  ...
Necessitarem que la columna de continguts tingui una amplada fluida. Per aconseguir això donarem una amplada màxima i míni...
Per a col·locar la columna de menús i la barra lateral utilitzarem els marges negatius iel posicionament relatiu.      #ba...
Upcoming SlideShare
Loading in …5
×

Com utilitzar els "floats" - Resum - Multimedia (UOC) - Paquita Ribas

1,378 views

Published on

Com utilitzar els floats. Assignatura Llenguatges i Estàndards Web, del Grau Multimèdia de la UOC.

Published in: Education
  • Be the first to comment

Com utilitzar els "floats" - Resum - Multimedia (UOC) - Paquita Ribas

  1. 1. FLOATS CONTENIDOR AMB TEXT I UNA IMATGE A LA DRETAEl codi HTML sería aproximadament així: <div> <h2>Títol de la secció</h2> <imgsrc=”ruta i nom de la imatge” alt=”definició de la imatge”> <p>Bloc de text</p> </div>Amb el CSS flotar left amb la mida total del contenidor. És a dir, tot el <div>.Sempre que es flota s’ha de posar la mida en width.Flotar right la imatge <img> especificant l’amplada i donar-li un marge a la dretaamb margin-left.
  2. 2. MENÚ DE NAVEGACIÓ HORITZONTALEl codi HTML seria: <div> <ul> <li><a>A</a></li> <li><a>B</a></li> <li><a>C</a></li> <li><a>D</a></li> </ul> </div>Donar una id a <div> i una class a <ul> i a <il>Flotar el <div>a la dreta o a l’esquerra, segons on es vulgui col·locar el menú denavegació.Posar la llista en línia: ul { Margin: 0; Padding: 0; } li { Display: inline; }Flotar els botons en <a> (flotar la classe li de a). S’ha de donar la mida al botó, elpadding i el margin.
  3. 3. LLISTA AMB UNA IMATGE I UNA BREU DEFINICIÓEl codi HTML seria així: <div class=”quadre”> <ulclass=”llista”> <li><imgsrc=”imatge1.jpg” alt=”definició de la imatge”></li> <li><imgsrc=”imatge2.jpg” alt=”definició de la imatge”></li> <li><imgsrc=”imatge3.jpg” alt=”definició de la imatge”></li> <li><imgsrc=”imatge4.jpg” alt=”definició de la imatge”></li> <li><imgsrc=”imatge5.jpg” alt=”definició de la imatge”></li> </ul> </div>En el CSS donar-li al <div> el color de fons i el margin exterior: .quadre { background: #FEFBC2; padding: 10px 20px; margin: 15px 0 10px 0; }Donar al <ul> el padding .llista { padding: 20px 0 20px 10px; }
  4. 4. Flotar les imatges a l’esquerra: .llista img { Float: left; width: 50px; /*amplada imatge*/ margin: 0 10px 7px 0; /*marges de foto*/ }Flotar el text a la dreta: .llista li { Float: right; } BOTÓ AMB ICONA I BLANC AL VOLTANTEl codi HTML seria: <div id=”fondo_boto”> <imgsrc=”imatge.png” alt=”definició de la imatge” class=”icona”> <p class=”text”><a href=”url.html”>Text del botó</a></p> </div>Donar-li color al <div> per a donar-li color al botó. També amplada i alçada, marges,alineació de text, etc. #boto_fondo { background: #7DB4C9; width: 240px; height: 50px; margin: 5px 24px; text-align: center; color: white; }Flotar la icona: .icona { Float: left; }
  5. 5. Donar marges i padding al text i a la icona.També als enllaços: .text a { Text-decoration: none; }Els estats del botó s’han de posar al <div>: #fondo_bot: hover { Background: black; } MAQUETAR UNA PÀGINA DE TRES COLUMNESVolem fer una estructura així: CAPÇALERA NAVEGACIÓ CONTINGUTS BARRA LATERAL PEUCodi HTML: <body> <div id=”header”>Capçalera</div> <div id=”central”> <div id=”nav”>Navegació</div> <div id=”content”>Continguts</div> <div id=”barra”>Barra lateral</div> </div> <div id=”peu”>Peu</div> </body>
  6. 6. Necessitarem que la columna de continguts tingui una amplada fluida. Per aconseguir això donarem una amplada màxima i mínima a body i amplades fitxes a les columnes de navegació i la barra lateral. El codi bàsic, sense posar ni colors ni paddings és: body { margin: 0 auto; min-width: 40em; max-width: 56em; } #barra { width: 13em; } #nav { width: 11em; }Flotarem les columnes centrals Alliberarem el peu #nav, #content, #barra { #peu { float: left; clear: left; } } Donarem al div central uns marges esquerre i dret que corresponguin a les amplades de les columnes laterals #central { margin: 0 14em 0 12em; padding: 0 1em; } La columna del contingut ha d’ocupar tota l’amplada #content { float: left; width: 100%; }
  7. 7. Per a col·locar la columna de menús i la barra lateral utilitzarem els marges negatius iel posicionament relatiu. #barra { margin-left: -14em; position: relative; left: 15em; } #nav { margin-left: -100% position: relative; right: 13em; }

×