XHTML / CSS / PHP / Javascript
Positionnement et CSS
Positionnement dans le flux
Le positionnement normal : dans le flux.
Les éléments les uns en dessous des autres, puis par rapport :
aux marges internes du containeur.
aux marges externes des éléments.
Avec ceci, on peut « déplacer » un élément dans son containeur, et le contenu d’un élément au sein de cet élément.
Mais on ne peut pas placer deux blocs l’un à coté de l’autre !
Positionnement
fichier html :
<!DOCTYPE html PUBLIC « //W3C//DTD XHTML 1.0 Strict//EN » « http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd »> <html>
<head>
<meta httpequiv= »contenttype » content= »text/html;charset=iso88591″ /> <title> des tests </title>
<link rel= »stylesheet » href= »flux.css » type= »text/css » />
</head>
<body>
<div id= »entete »> entete </div>
<div id= »navigation »> barre de navigation </div>
<div id= »milieu »> Ici le milieu
<div id= »menu »> le menu </div>
<div id= »corps »> le corps du texte</div>
</div>
<div id= »footer »> un pied de page </div>
</body>
</html>
Et une css quasi vide : Pour ce résultat :
body{
color: #000;
backgroundcolor: #800;
}
#entete{ backgroundcolor : #080; }
#navigation{ backgroundcolor : #008;}
#milieu{ backgroundcolor : #444;}
#menu{ backgroundcolor : #880;}
#corps{ backgroundcolor : #808;}
#footer{ backgroundcolor : #088;}
Positionnement : marges et centrage
on rajoute les lignes suivantes Pour ce résultat :
#entete{ width : 100px;
margin : auto;
}
#menu{ width : 200px;}
#corps{ marginleft:200px;}
Positionnement flottant
Déplacer un élément a gauche ou a droite dans son parent.
Le reste du contenu du parent se positionne autour de l’élément déplacé.
Attention : Comme le float sort du flux courant, il n’est pas compté dans le calcul de la hauteur du conteneur, si celleci n’est pas spécifiée. Il peut donc « dépasser » en hauteur.
Récapitulatif :
* L’élément est d’abord placé normalement dans le flux. Donc si un autre élément bloc est placé avant lui, l’élément flottant se positionnera en dessous; et si un élément bloc le suit, ce dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
* Ensuite l’élément qui a reçu la propriété float est « poussé » à gauche ou à droite de son conteneur. * Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.
Positionnement float
on rajoute les lignes suivantes Pour ce résultat :
#menu{ float:left;}
Mais …. si on allonge le menu, on a ceci :
La taille de la div de menu n’est pas prise en compte pour le calcul de la taille de la div du milieu…
Notez que le pied de page n’appartient pas a la div milieu….
Le clear : oblige la boite a avoir un coté libre. La boite se place alors sous les autres boites flottantes floats du coté spécifié.
on rajoute les lignes suivantes
#footer{ clear:left;}
Notez le vide rouge entre le corps de texte et le footer :
la div milieu ne s’étend pas jusqu’au pied de page !
On peut avoir clear:right ou clear:both
Positionnement absolu
Positionner un élément « en dur ».
Pour spécifier la position d’un élément, on donne la position de son coin supérieur gauche. On peut aussi donner l’indiquer comme suit :
haut et droite (+ largeur)
L’élément est retiré du flux. Son positionnement est donc le même quel que soit sa position dans le fichier html…
Ici on repositionne quelques élements en absolu.
on rajoute les lignes suivantes
#milieu{
position:absolute;
top:5em;
left:5%;
right:5%;
}
#footer{
position:absolute;
top:20em;
left:1%;
right:1%;
}
Notez la taille de la div milieu.
Attention aux chevauchements…
Positionnement fixe
Les éléments fixes ne bougent pas quelque soit la position du défilement dans la fenêtre du navigateur…
Ici, la barre et l’entête sont fixes.
#entet#entete{
position:fixed;
top:0;
left:1em;
right:1em;
zindex:2;
margin : auto;
backgroundcolor : #080;
}
#navigation{
position:fixed;
top:1em;
left:1em;
right:1em;
zindex:2;
backgroundcolor : #008;
}
Positionnement Relatif
Non abordé ici !
Quelques remarques
Une balise bloc peut être traitée comme une balise inline et inversement avec la propriété display (:inline ou :bloc)
Attention à la fusion de marges.
Certains navigateurs sont récalcitrants :
évaluation des tailles, comportement fixed, floats, ils n’interprètent pas les choses de la même façon…
Trouvez un gabarit éprouvé (alsacreation)
Testez vos sites avec plusieurs navigateurs, plusieurs versions des navigateurs…..
Pratiquez !
PHP (Hypertext Pre-Processor)
Qu’est ce que PHP ?
Un langage de scripts généraliste (perl ?)
Pour nous : un langage interprété par Apache pour générer une page HTML standard qui est transmise au client.
Il s’agit alors de script exécuté « coté serveur ».
Pour nous : php4
Similaire : ASP (Active Server Pages), de chez Microsoft.
Syntaxe proche language C.
Qu’est ce que PHP ?
Un langage de scripts généraliste (perl ?)
Pour nous : un langage interprété par Apache pour générer une page HTML standard qui est transmise au client.
Il s’agit alors de script exécuté « coté serveur ».
Pour nous : php4
Similaire : ASP (Active Server Pages), de chez Microsoft.
Syntaxe proche language C.
● Différence avec des scripts « cgi » :
● Script cgi : exécutable lancé par apache pour générer du HTML.
● Php : code html dans lequel on insère des directives php. (gain de temps…)
● Coté client : réception du résultat, sans connaissance du code (sécurité)
● Pour tout : 6h TD / xxh TP
● Html
➢ xhtml
➢ Css (feuilles de style)
● PHP MySQL
➢ Php de base.
➢ Interaction avec des SGBDD
➢ Création d’images à la volée / creation de pdf
Télécharger le cours complet
