Liene2 MASS
Sébastien Verel
vereli3s.unie.fr
www.i3s.unie.fr/
∼
verelÉquipeSoBi-UniversitédeNieSophia-Antipolis
22 otobre 2008
Objetifs de la séane 6
1
Savoirdimensionner unontenu
2
Connaitretousles positionnementspossibles
Plan
1
Dimensionnnement
2
Positionnement
3
Bilan en vuduprohain devoir
Séparation ontenu et mise en page
Frames(que vousn'avez pas vu): mauvaisréférenement
Tableaux:struture tropomplexe,nuit àlalisibilité etàla
maintenane
useCSS!use CSS!:dimensionnement /positionnement
CSS :entralisationde lamise en page
Dimensionnement
width :long
| % |
auto|
inheritlargeur duontenu de l'élément
height:long
| % |
auto|
inheritlongueur duontenu de l'élément
Remarque :
le
%
est en fontionde lataillede l'élémentparent.auto :permetdesalulsen fontiondesautres dimensions
Problème de hauteur
body { font-family: Arial sans-serif;
font-size: 16px; }
div { width: 80% ;
height: 500px ;
bakground-olor: #DDD; }
h1 { width: 80% ;
height: 100px ;
bakground-olor: #888 ;
olor: white ; }
p { width: 70% ;
height: 150px ;
bakground-olor: #BBB ; }
f. ex06/dimension.html
Solution ave Auto
body { font-family: Arial sans-serif;
font-size: 16px; }
div { width: 80% ;
height: auto ;
bakground-olor: #DDD; }
h1 { width: 80% ;
height: 100px ;
bakground-olor: #888 ;
olor: white ; }
p { width: 70% ;
height: auto ;
bakground-olor: #BBB ; }
f. ex06/dimensionAuto.ss
Solution ave auto
mise en page peu préise
ontenu issud'unebase dedonnée potentiellement grande
(imaginer unepage web de ourriels)
Solution ave la propriété overow
overow :visible
|
hidden|
sroll|
auto|
inheritvisible :ontenu débordant est ahé
hidden :ontenu débrodant est ahé
sroll:barre de délementapparente en permanene
auto :barre de délementsi néessaire
f. ex06/dimensionOverflow.ss
Solution ave overow
div {
width: 80% ;
height: auto ;
bakground-olor: #AAD;
}
h1 {
width: 80% ;
height: 100px ;
bakground-olor: #888 ;
olor: white ;
}
p {
width: 70% ;
height: 150px ;
overflow: auto ;
bakground-olor: #BBB ;
}
Plus de souplesse
Dimensions ajustéesentre deux bornes limites:
Hauteur
min-height :longueur
| % |
inheritmax-height :longueur
| % |
none|
inheritLargeur
min-width :longueur
| % |
inheritmax-width :longueur
| % |
none|
inheritf. ex06/dimensionMinMax.ss
Plus de souplesse
div { width: 80% ;
min-height: 500px ;
max-height: 650px ;
overflow: auto ;
bakground-olor: #AAD; }
h1 { width: 80% ;
min-height: 50px ;
max-height: 100px ;
bakground-olor: #888 ;
olor: white ; }
p { width: 70% ;
min-height: 80px ;
max-height: 150px ;
overflow: auto ;
bakground-olor: #BBB ; }
Rendu des éléments
Rendu deséléments
éléments :assoiésà uneprésentationspéiquepardéfaut
display :none
|
inline|
blok|
list-item|
table|
inline-table|
...Visibilité
visibility :visible
|
hidden|
ollapse|
inheritPositionnements
positionnementen ux
positionnementottant
positionnnementabsolu
positionnementxé
Positionnement en ux normal
Lorsqu'auun positonnementn'est spéié
ordredanslequelapparaissent les élémentsdanslexhtml
disposition:
typeblo:se situeendessousdel'élément préédent
typeligne:sesitueàtéde l'élémentpréédent
marges internes(padding)et externe(margin):
permettent d'espaeret de positionnerhaqueélément
Positionnement ottant
pouréviter deszones videssur ladroite
dispositiondesautres élémentsautour de lui:omparaison
aveliquide
plaementde l'élément en haut de l'élémentparent(à droite
ou àgauhe)
Propriété oat
oat :left
|
right|
none|
inheritExemple positionnement ottant
div#abstrat {
width: 70% ;
min-height: 0px ;
max-height: 500px ;
overflow: auto ;
text-align: justify ;
bakground-olor: #BBB ;
}
img {
float: left;
margin: 10px ;
width: 100px ;
}
p.pdroite {
width: 120px ;
min-height: 0px ;
float: right ;
border: 2px solid red ;
margin: 10px ;
padding: 10px ;
SébastienVerel CSW
Empêher le ottement
dans ertainas,lever lepositionnementottant.
Propriété oat
lear:left
|
right|
both|
none|
inheritf. ex06/flottant2.ss
Positionnnement relatif
emplaement dehaque élémentomme dansle ux normal
puisdéplaement deséléments "relatif"parrapportàla
positionqu'ilsauraitentdû ouper
risquede hevauhement
ordredesélémentsimportants
Positionnnement relatif
Les propriétés
position:relative
left :déalevers ladroite sipositif,vers lagauhesinon.
right:déalevers lagauhe sipositif,vers ladroitesinon.
top :déalevers lebas si positif,vers le hautsinon.
bottom:déalevers le hautsi positif,versle bas sinon.
Les valeurs
pour left,right,top,bottom :long
| % |
auto|
inheritsi lesdeux propriétés omplémentaires"auto" :valeur0
si seulementl'une vaut "auto" :valeurà l'opposéde l'autre
si auunene vaut"auto" :lavaleur danslesens de leture
l'emporte
Positionnement absolu
élémentsorti duux normal
positionnementparrapportà l'élémentparent
oupationpossiblede la mêmezone(gestion avez-index)
ombinaison absoluetottantimpossible
Positionnnement absolu
Les propriétés
position:absolute
left,right,top,bottom:positionparrapportauxbordsparents
Les valeurs
pour left,right,top,bottom :long
| % |
auto|
inheritPositionnement xé
unpeu désué
même méthode quepourabsolusauf posionnementxe en as
de déplaement de fenêtre
Visibilité et ordre d'empilement
Lorsquesuperposition:ordrede positionnement"orthogonal"
àl'éran
le nombrele plusgrandse trouve au dessusde la"pile"
Les valeurs
z-index :nombre
|
auto|
inheritauto :le mêmequeeluidu parent,ordred'apparition dansleode
XHTML
un régal:
onlik="this.style.zIndex++"
Objetifs de la séane 1
1
Connaitreles dates importantesde laprogrammation web
2
Connaitreles prinipesde l'internet
3
Connaitreles prinipesfondamentaux dulangage XHTML
4
Savoirérire unepage xhtmlminimale
5
Connaitreles diérentstypesde doument(DOCTYPE)
6
Savoirérire unparagraphe
7
Savoirérire uneitationet uneadresse
8
Savoirérire untitre
9
Connaitreles aratères aentuéset les aratèresspéiaux
10
Savoirpasser une ligne
Objetifs de la séane 2
1
Connaitreles diérentstypesde doument(DOCTYPE)
2
Savoirassoier desmotslésàune page,et donnerd'autres
informationsde e type
3
Savoirérire lesdiérents typesde liste
4
réerdes liensexternes
5
réerdes liensversdes doumentsspéiques
6
réerdes liensinternes
7
Savoirinsérer uneimageet dumultimedia
8
réerdes lienssurdeséléments graphiquesou délenhantune
ation
Objetifs de la séane 3
1
réerdes liensinternes
2
Savoirinsérer uneimageet dumultimedia
3
réerdes lienssurdeséléments graphiquesou délenhantune
ation
4
réerdes tableauxrégulierset irréguliers
Objetifs de la séane 4
1
Savoirplae le ode ssdansunepage web
2
Connaitreles réglesgénérales d'ériture
3
Connaitreles séleteursd'élément, de lasse,d'identiant et
ontextuel.
4
savoir déniruneouleur defond
5
savoir déniret positionnerune imagede fond
6
onnaitre les propriétés de miseen formedutexte
Objetifs de la séane 5
1
Connaitreles séleteursaveattributs etde pseudo-lasse
2
onnaitre les réglesde asdade etd'héritage
3
onnaitre les propriétés de miseen formedutexte
4
Connaitrele modèlede boiteCSS
5
Savoirmodierlestyled'uneboite
Objetifs supplémentaires
1
Savoirherher de l'informationsur internet onernantle
XHTML et leCSS
2
Savoirréer unepage web utilisant tousles prinipes
préédants
