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
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:

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>
0
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
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
0