A voir également:
- Aide pour création de page
- Supprimer une page word - Guide
- Creation compte gmail - Guide
- Page d'accueil iphone - Guide
- Creation page facebook - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
5 réponses
aaronnapster
Messages postés
441
Date d'inscription
samedi 17 mai 2008
Statut
Membre
Dernière intervention
30 avril 2019
40
29 sept. 2011 à 18:10
29 sept. 2011 à 18:10
bonsoir poste ton code et ton css
Bonjour,
javascript ne sert pas à la mise en page.
Actuellement le CSS est utilisé en complément des baises html qui vont servir de container tandis que des "règles" ou "styles" CSS que vous allez définir vont permettre plus de possibilités(sur l'aspect et le positionnement).
Sans utiliser de CSS connaissez vous les tableaux (table) et le retour à la ligne(br). Cela donnerait le HTML suivant.
<html>
<!--// CE CODE HTML EST DESUET CAR NE COMPORTES PAS DE CSS ET QUE LES NORMES DEPUIS LE HTML1.0 ONT CHANGES IL Y A DES ANNEES //-->
<head>
</head>
<body>
<center><!--// LA BALISE CENTER EST A EVITER, voir son équivalent en css //-->
<div width="100%"><!--// L'ATTRIBUT WIDTH NE DOIT PLUS ETRE UTILISE, voir son équivalent en css //-->
<img src="bandeau.jpg" />
</div>
<br/><!--// le saut à la ligne est pas indispensable puisque le div fait 100% de la largeur //-->
<table width="100%"><!-- début de la table, cette balise dot être réservée aux données tabulaires et non pour le positionnement comme avant le CSS, même remarque qu'auparavant sur l'attribut width //-->
<tr><!-- début de la 1ere ligne -->
<td <idth="40%"><!-- début de la 1ere colonne, même remarque qu'auparavant sur l'attribut width-->
<p>
ICI LA GAUCHE DE LA PAGE(occupe 40% de la page)
</p>
</td><!-- fin de la première colonne de la ligne 1 -->
<td><!-- début 2ème colonne 1ère ligne -->
<h1>
ICI LA DROITE(que vous nommez partie centrale, il faudrait une 3 ème colonne pour que ce soit central) DE LA PAGE SOIT 100%-40%=60% de l'espace total.
</h2>
</td>
</tr><!--// fin première ligne //-->
<tr><!-- pour le fun j'insères une 2ème ligne //-->
<td>
Chaque case d'un tableau se nomme:
</td>
<td>
une cellule
</td>
</tr>
</table><!-- balise fermante du tableau évidemment -->
<p style="font-style:italic;font-size:1.5em;letter-spacing:0.33em;">
Un peu de style CSS pour la forme(remarquez l'attribut style dans la balise p):
<br/>
Le tableau (balise table) peut aussi avoir un titre(balise caption et ligne horizontale plutôt que des cellules(th), mais bon c'est plus compliqué qu'un bon positionnement en css et pas respectueux des normes sur lesquelles les navigateurs actuels se conforment au maximum.
</p>
</center>
</body>
</html>
javascript ne sert pas à la mise en page.
Actuellement le CSS est utilisé en complément des baises html qui vont servir de container tandis que des "règles" ou "styles" CSS que vous allez définir vont permettre plus de possibilités(sur l'aspect et le positionnement).
Sans utiliser de CSS connaissez vous les tableaux (table) et le retour à la ligne(br). Cela donnerait le HTML suivant.
<html>
<!--// CE CODE HTML EST DESUET CAR NE COMPORTES PAS DE CSS ET QUE LES NORMES DEPUIS LE HTML1.0 ONT CHANGES IL Y A DES ANNEES //-->
<head>
</head>
<body>
<center><!--// LA BALISE CENTER EST A EVITER, voir son équivalent en css //-->
<div width="100%"><!--// L'ATTRIBUT WIDTH NE DOIT PLUS ETRE UTILISE, voir son équivalent en css //-->
<img src="bandeau.jpg" />
</div>
<br/><!--// le saut à la ligne est pas indispensable puisque le div fait 100% de la largeur //-->
<table width="100%"><!-- début de la table, cette balise dot être réservée aux données tabulaires et non pour le positionnement comme avant le CSS, même remarque qu'auparavant sur l'attribut width //-->
<tr><!-- début de la 1ere ligne -->
<td <idth="40%"><!-- début de la 1ere colonne, même remarque qu'auparavant sur l'attribut width-->
<p>
ICI LA GAUCHE DE LA PAGE(occupe 40% de la page)
</p>
</td><!-- fin de la première colonne de la ligne 1 -->
<td><!-- début 2ème colonne 1ère ligne -->
<h1>
ICI LA DROITE(que vous nommez partie centrale, il faudrait une 3 ème colonne pour que ce soit central) DE LA PAGE SOIT 100%-40%=60% de l'espace total.
</h2>
</td>
</tr><!--// fin première ligne //-->
<tr><!-- pour le fun j'insères une 2ème ligne //-->
<td>
Chaque case d'un tableau se nomme:
</td>
<td>
une cellule
</td>
</tr>
</table><!-- balise fermante du tableau évidemment -->
<p style="font-style:italic;font-size:1.5em;letter-spacing:0.33em;">
Un peu de style CSS pour la forme(remarquez l'attribut style dans la balise p):
<br/>
Le tableau (balise table) peut aussi avoir un titre(balise caption et ligne horizontale plutôt que des cellules(th), mais bon c'est plus compliqué qu'un bon positionnement en css et pas respectueux des normes sur lesquelles les navigateurs actuels se conforment au maximum.
</p>
</center>
</body>
</html>
Merci, mais cela changerait quoi avec le CSS ?
dream666
Messages postés
735
Date d'inscription
mardi 8 juillet 2008
Statut
Membre
Dernière intervention
24 février 2014
104
1 oct. 2011 à 14:48
1 oct. 2011 à 14:48
le fichier css fait gagner du temps : le html est plus simple a comprendre car moin de balise et de plus un style peux s'appliquer a plusieurs pages ou plusieurs élément du site.
le css a des propriétés que le html 4 n'as pas.
le css a des propriétés que le html 4 n'as pas.
ideal23
Messages postés
456
Date d'inscription
mercredi 30 avril 2008
Statut
Membre
Dernière intervention
16 mai 2014
28
1 oct. 2011 à 16:36
1 oct. 2011 à 16:36
code html
code css
<div id="bandeau">Ceci est le bandeau</div> <div id="menu"> <div id="menu_haut">Menu haut</div> <div id="menu_bas">Menu bas</div> </div> <div id="contenu">Ceci est le contenu</div> <div id="pied_page">Ceci est le pied de page</div>
code css
div {
text-align:center;
}
div#bandeau {
width:600px;
height:50px;
background-color:#00CCFF;
}
div#menu {
float:left;
width:100px;
height:400px;
background-color:#FF6699;
}
div#menu_haut {
width:100px;
height:200px;
background-color:#66CC33;
}
div#menu_bas {
width:100px;
height:200px;
background-color:#CC99CC;
}
div#contenu {
float:left;
width:500px;
height:400px;
background-color:#FFCC00;
}
div#pied_page {
clear:both;
width:600px;
height:50px;
background-color:#33FF99;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
