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

FLOATS
CONTENIDOR AMB TEXT I UNA IMATGE A LA DRETA

El 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 dreta
amb margin-left.

MENÚ DE NAVEGACIÓ HORITZONTAL

El 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ú de
navegació.

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ó, el
padding i el margin.

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>
</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;
}

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 VOLTANT

El 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;
}

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 COLUMNES
Volem fer una estructura així:

CAPÇALERA

NAVEGACIÓ CONTINGUTS BARRA
LATERAL

PEU

Codi 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>

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%;
}

Per a col·locar la columna de menús i la barra lateral utilitzarem els marges negatius i
el posicionament relatiu.

#barra {
margin-left: -14em;
position: relative;
left: 15em;
}

#nav {
margin-left: -100%
position: relative;
right: 13em;

}

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

Recommandé

Recommandé

Contenu connexe

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

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

Plus de Paquita Ribas

Plus de Paquita Ribas (20)

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