Bandeau (avec exemple)
Sonson
-
flav1313 Messages postés 751 Date d'inscription Statut Membre Dernière intervention -
flav1313 Messages postés 751 Date d'inscription Statut Membre Dernière intervention -
Bonjour a tous, J'aimerais réaliser quelque chose de similaire a ce ceci : https://dev.twitter.com , ou encore a la barre facebook. Pas obligatoire que ce soit un menu déroulant je voudrais surtout un bandeau qui prend toute la largeur, touche le haut de la page et ne bouge pas quand on scroll. :) merci
A voir également:
- Bandeau (avec exemple)
- Tableau word exemple - Guide
- Url exemple - Guide
- Exemple de code ascii - Guide
- Gmail exemple - Guide
- Tableau croisé dynamique excel exemple - 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>
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