Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,516 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; }

×