Bandeau (avec exemple)
Fermé
Sonson
-
27 sept. 2012 à 13:56
flav1313 Messages postés 751 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 22 octobre 2012 - 27 sept. 2012 à 16:56
flav1313 Messages postés 751 Date d'inscription mardi 24 août 2010 Statut Membre Dernière intervention 22 octobre 2012 - 27 sept. 2012 à 16:56
A voir également:
- Bandeau (avec exemple)
- Url exemple - Guide
- Tableau word exemple - Guide
- Tableau croisé dynamique excel exemple - Guide
- Sommaire word exemple - Guide
- Exemple de code ascii - Guide
2 réponses
Je perds un peu patience donc je vais etre moins exigent, je voudrais juste que la barre grise touche le dessus et les bords de l'écran.
Voici mon code pour le momment :
<html>
<head><style>
div.even {
background: #fcf;
border: 0px solid;
padding: 14px;
margin: 0px;
margin-top: 0px;
}
div.uneven {
background: #353432;
border: 0px solid;
padding: 14px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
</style>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<center><body bgcolor="#353436" center background="wood.jpg" class="front not-logged-in no-sidebars" style="background-repeat : repeat-y-x;" {width:90%;margin:auto;min-width:600px;max-width:2000px}>
<div align="center" class="uneven"> barre grise </div>
<table width="800" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="545" height="19"> </td>
<td width="255"> </td>
</tr>
<tr>
<td height="200" colspan="2" valign="top"><img src="Sans%20titre-2.jpg" width="800" height="200"></td>
</tr>
<tr>
<td height="500" valign="top"><img src="Sans%20titre-4.jpg" width="545" height="500"></td>
<td valign="top"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="226"> </td>
<td> </td>
</tr>
</table>
</body></center>
</html>
Voici mon code pour le momment :
<html>
<head><style>
div.even {
background: #fcf;
border: 0px solid;
padding: 14px;
margin: 0px;
margin-top: 0px;
}
div.uneven {
background: #353432;
border: 0px solid;
padding: 14px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
</style>
<title>Untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<center><body bgcolor="#353436" center background="wood.jpg" class="front not-logged-in no-sidebars" style="background-repeat : repeat-y-x;" {width:90%;margin:auto;min-width:600px;max-width:2000px}>
<div align="center" class="uneven"> barre grise </div>
<table width="800" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="545" height="19"> </td>
<td width="255"> </td>
</tr>
<tr>
<td height="200" colspan="2" valign="top"><img src="Sans%20titre-2.jpg" width="800" height="200"></td>
</tr>
<tr>
<td height="500" valign="top"><img src="Sans%20titre-4.jpg" width="545" height="500"></td>
<td valign="top"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="226"> </td>
<td> </td>
</tr>
</table>
</body></center>
</html>
flav1313
Messages postés
751
Date d'inscription
mardi 24 août 2010
Statut
Membre
Dernière intervention
22 octobre 2012
100
27 sept. 2012 à 16:56
27 sept. 2012 à 16:56
Bonjour,
Si j'ai une suggestion à te faire c'est de reprendre l'intégralité de ton code et tout modifier.
Je m'explique : Le langage HTML n'est pas complexe mais si on commence en faisant n'importe quoi, on arrive à rien.
Tout fichier HTML commence par un DOCTYPE : le plus simple <! DOCTYPE html>. C'est la base de tout, ici il n'est pas présent.
Pour plus d'information : https://www.alsacreations.com/article/lire/560-dtd-doctype-html-xhtml-comment-choisir.html
Pense à séparer ton code CSS de ton code HTML grâce à la balise <link />
Tu utilises l'encodage LATIN-1 : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> . Favorise l'UTF-8 qui a tendance à devenir un standard, il regroupe de très nombreux caractères.
On ne met aucune balise HTML en dehors du BODY !
De plus la balise <center></center> est déprécier, il faut favoriser "margin: auto" pour les blocs et "text-align: center" pour du texte.
Je ne dirait rien sur les tableaux, quoiqu'il ont aussi tendance à être déprécier.
Pour ton histoire de barre latérale full width, il te suffit de placer une div en haut de ta page et de lui appliquer les combinaisons css suivante :
code HTML : <div id="haut_de_page">Bonjour à tous</div>
code CSS :
#haut_de_page{
display: block;
position: static;
top: 0;
left: 0;
width: 100%;
height: 75px;
}
Je pense que tu devrais revoir l'intégralité du HTML en suivant un bon tutoriel :
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
ou
https://j-willette.developpez.com/tutoriels/html/les-bases-du-html/
Voilà, voilà.
J'espère t'avoir aider.
Flav
Si j'ai une suggestion à te faire c'est de reprendre l'intégralité de ton code et tout modifier.
Je m'explique : Le langage HTML n'est pas complexe mais si on commence en faisant n'importe quoi, on arrive à rien.
Tout fichier HTML commence par un DOCTYPE : le plus simple <! DOCTYPE html>. C'est la base de tout, ici il n'est pas présent.
Pour plus d'information : https://www.alsacreations.com/article/lire/560-dtd-doctype-html-xhtml-comment-choisir.html
Pense à séparer ton code CSS de ton code HTML grâce à la balise <link />
Tu utilises l'encodage LATIN-1 : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> . Favorise l'UTF-8 qui a tendance à devenir un standard, il regroupe de très nombreux caractères.
On ne met aucune balise HTML en dehors du BODY !
De plus la balise <center></center> est déprécier, il faut favoriser "margin: auto" pour les blocs et "text-align: center" pour du texte.
Je ne dirait rien sur les tableaux, quoiqu'il ont aussi tendance à être déprécier.
Pour ton histoire de barre latérale full width, il te suffit de placer une div en haut de ta page et de lui appliquer les combinaisons css suivante :
code HTML : <div id="haut_de_page">Bonjour à tous</div>
code CSS :
#haut_de_page{
display: block;
position: static;
top: 0;
left: 0;
width: 100%;
height: 75px;
}
Je pense que tu devrais revoir l'intégralité du HTML en suivant un bon tutoriel :
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
ou
https://j-willette.developpez.com/tutoriels/html/les-bases-du-html/
Voilà, voilà.
J'espère t'avoir aider.
Flav