Salut à tous
me revoilà pour un autre problème lol
en fait j'ai testé mes deux pauvres pages internet sur un MAC, (sous windows c nickel) et là j'ai compris que j'avais pas encore tout compris aux div...
En gros mon bandeau de gauche se décale tout à droite avec le texte body bien évidemment, je pense qu'il doit y avoir un beau cafouillage dans ma feuille css : n'est-ce pas ?
body{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
}
/* On définit les marges haute et basse à 10px et les marges droite et gauche à 0 */
/* On met le padding à 0 pour le navigateur Opera qui définit des padding par défaut pour le body */
/* On utilise text-align: center ; pour Internet Explorer, c'est la seule façon de centrer les éléments de type block avec ce navigateur */
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
}
/* On définit la largeur de la division qui contient l'ensemble de la page à 770 pixels */
/* margin: 0 auto ; est la méthode correcte pour centrer les éléments de type block (comme les divisions), nous centrons donc cette division */
/* Il faut rétablir l'alignement à gauche que nous avons changé plus haut */
h1#header
{
height: 150px ;
margin: 0;
}
/* On définit la hauteur de la partie header, contenant le titre du site */
pre
{
overflow: auto ;
}
/* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu dans cette balise est trop grand */
* html pre
{
width: 636px ;
}
/* On dois donner une largeur au pre à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant un "hack", la combinaison " * html " permet de n'appliquer ce qui suis qu'à Internet Explorer */
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #000;
}
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #F2B439 ;
background: #fff ;
}
h1#header
{
height: 220px;
background: url(bando.jpg) no-repeat left top;
}
/* Une image de fond correspondant aux 258 pixels de tout à l'heure, attention à bien compresser vos images */
ul#menu
{
margin: 0 ;
padding: 10px 0 ;
list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}
ul#menu li
{
float: left;
text align: center;
margin: 0 0 15px 0 ;
padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}
ul#menu li a
{
display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
width: 126px ;
line-height: 30px ;
color: #fff ;
text-indent: 40px ; /* On décale le texte de 40px du bord gauche */
text-decoration: none ;font-weight:bold;
background: url(titre.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
border: 1px solid #F2B439 ;
}
ul#menu li a:hover
{
background: url(titre.jpg) no-repeat 0 -35px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
border: 1px solid #F2B439 ;
}
div#contenu
{
padding: 0 30px 0 150px ;
background : url(bandogauche.jpg) ;
background-repeat: no-repeat ;
}
/* On ajoute un petit élément décoratif sur le cÎté de la page et on crée un espace à gauche et à droite du contenu */
div#contenu ul
{
padding : 0 0 0 150px;
}
div#contenu h2
{
padding : 0 300px 0 300px;
padding-left: 300px ;
line-height: 0px ;
font-size: 1.4em ;
left:0px;
top:10px;
border-bottom: 0px solid ;
}
/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse */
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-top: 1px solid #F6BC41;
border-right:3px solid #F6BC41;
border-bottom: 3px solid #F6BC41 ;
border-left: 1px solid #F6BC41 ;
color: #F6BC41 ;
text-align: center;
}
/* De même que pour le titre h2, à ceci prÚs qu'on ne donne pas d'image décorative cette fois ci */
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
top:0px;
color: #000000;
}
div#contenu blockquote
{text-align: justify ;
font-style: italic ;
line-height: 1.7em ;
color: #F6BC41 ;
}
/* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
/* On met en forme les liens contenu dans la page */
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 3px ;
text-align: right ;
font-size: 0.8em ;
text-align: center ;
color: #fff ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */
pre
{
overflow: auto ;
border: 2px solid #F6BC41 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
color: fff;
}
/*une couleur de fond, une bordure, la taille de police et un léger espace entre le texte et les bords du pre */
* html pre
{
width: 636px ;
}
pre span
{
color: fff ;
}
/* Couleur de texte des éléments compris dans des span eux mêmes compris dans un pre */
pre span.comment
{
color: #101F8A ;
}
/* Couleur différente pour les span.comment, les span utilisés pour les commentaires */
</style>
siouplé soyez indulgents... avec une pauvre petite débutante lol
merci d'avance...
LN
lol svp ?
