28220 sujets

CSS et mise en forme, CSS3

salut à tous !

Ma question est la suivante :
Est ce que mon menu, à gauche, est bon ? est ce que le code est correct ?

Voir la page web :
http://www.lecourtier.net/test/index.htm

Voir l'image correcte de ce menu, si y a un truc qui cloche :
http://www.lecourtier.net/test/test.jpg


LE CODE HTML :

 <html>
<head>
<title>Welcome to The Official Spinashland Website</title>
<link href="style.css" rel="stylesheet" type="text/css"> 
</head>

<body>

<div id="page">

<div id="haut">

<div id="textemenuhaut"><h1>News  ::  Gallery   ::  Show Dates    ::    History  ::   Biography    ::  Forum   ::  Video   ::  MP3   ::  Albums</h1>
</div>

<div id="cadrebasgauche"><h2>:: Official Homepage</h2>
</div>

<div id="cadrebasdroit"><h2>:: Spinash’Shop</h2>
</div>
</div>

<div id="menu1gauche">

<ul class="puce1"> 
<li>Mainpage</li></ul>

<ul class="puce2"> 
<li>Most Used</li></ul>

<ul class="deuxpoints"> 
<li>::::::::::::::::::::::::::::::::::::::::::::::::::::::::::</li></ul>

<ul>
<li><a href="#">NEWS</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">HISTORY</a></li>
<li><a href="#">BIOGRAPHY</a></li>
<li><a href="#">DISCOGRAPHY</a></li>
<li><a href="#">SHOW DATES</a></li>
<li><a href="#">LYRICS</a></li>
</ul> 
</div>
</div>


</body>

</html> 



LE CODE CSS :

 body 
{
text-align: center; 

/* Couleur de l'arriere plan */
background-color:#31343B; 



/* La scrollbar */
scrollbar-3dlight-color: #70757C;
scrollbar-arrow-color: #F3F3F3;
scrollbar-base-color: #70757C;
scrollbar-face-color: #31353C;
scrollbar-highlight-color: #70757C;
scrollbar-shadow-color: #000000;
}

a:link {color: #B4B9C2; text-decoration:none;}
a:visited {color: #B4B9C2; text-decoration:none;}
a:hover {color:#FFFFFF; text-decoration:none;}

/* les differentes parties du tableau */


/* Le bandeau du haut */

#page { 
  margin-left: auto; 
        margin-right: auto; 
        text-align: left;

	background-color: #454B55;
        width: 780px;
        height: 800px;
	}

#haut {
  background-image: url(head.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  width: 780px;
  height: 313px;
}


#textemenuhaut  {
width: auto;
height: auto;
margin: 201px 0px 0px 165px

}
#cadrebasgauche  {

overflow: hidden;
width: 143px;
height: 20px;
background-color: #2B2E35;
border-width: 1px;
border-style: solid;
border-color: #7E838D;
margin: 30px 0px 0px 5px;
padding: 3px 0px 0px 0px;


}

#menu1gauche  {

overflow: hidden;
width: 143px;
height: 150px;
background-color: #3F434E;
border-width: 1px;
border-style: solid;
border-color: #7F838E;
margin: -43px 0px 0px 5px;
padding: 0px 0px 0px 0px;
}

#cadrebasdroit  {

overflow: hidden;
width: 195px;
height: 20px;
background-color: #17181D;
border-width: 1px;
border-style: solid;
border-color: #7E828D;
margin: 4px 0px 0px 580px;
padding: 3px 0px 0px 0px;


}

/* Les icones */


ul
{
list-style-type: none;
color: #B4B9C2;
font-weight: normal; 
font-size: 9px;
font-family: verdana;
text-align: left;
margin: 8px 0px 0px 7px;
line-height: 12px;
}

ul.puce1 {  
list-style-image: url(puce1.jpg);
margin: 8px 0px 0px 23px;
line-height: 10px;
color: #FFFFFF; 
font-weight: bold;
font-size: 10px;
font-family: verdana;
}

ul.puce2 {  
list-style-image: url(puce2.jpg);
margin: 0px 0px 0px 23px;
line-height: 18px;
color: #D3D7DC; 
font-weight: bold;
font-size: 9px;
font-family: verdana;
}

ul.deuxpoints {  
list-style-image: none;
margin: 0px 0px 0px 7px;
line-height: 7px;
color: #FFFFFF; 
font-weight: bold;
font-size: 6px;
font-family: verdana;
}

/* Les polices */

/* La police de menu du bandeau du haut */

h1 {
color: #FFFFFF; 
font-size: 11px;
font-family: Arial;
word-spacing: 3px;
}

h2 {
color: #FFFFFF; 
font-style: normal;
font-weight: normal;
font-size: 9px;
font-family: Arial;
text-align: left; 
text-indent: 7px;
line-height: normal;
}

} 


Voila. Y a des truc je suis pas bien sur !
Par exemple, pour definir la police et tout ca, j'ai mis dans ul.puce { , ou par exemple, j'ai prevu un ul.quelquechose different pour chaque ligne.... ( a cause des puces differentes devant ... )

Bref. J'attends vos conseils ! Smiley lol
Modifié par lecourtier (17 Jul 2005 - 12:44)
Administrateur
Bonjour,

du peu que j'ai regardé, 3 commentaires:

- il n'y a pas de DOCTYPE en début de document,
- il y a un espace énorme sous Firefox, "au-dessus" de ta page,
- sûrement un peu trop de div d'utilisés (le bon docteur Raphael appelle cela de la divite dans un billet de blog vraisemblablement effacé pour être mis dans son livre Smiley idee2 ):
<div id="cadrebasdroit"><h2>:: Spinash’Shop</h2>
</div>

peut devenir:
<h2 id="cadrebasdroit">:: Spinash’Shop</h2>

sans que ça change grand chose (une modif dans le CSS et un div de supprimé)
ou encore
<ul class="puce1"> 
<li>Mainpage</li></ul>

<ul class="puce2"> 
<li>Most Used</li></ul>

-->
<ul> 
<li class="puce1">Mainpage</li>
<li class="puce2">Most Used</li></ul>
Allez, zut, je vais encore vous casser les pieds :

<div id="cadrebasdroit"><h2>:: Spinash&#8217;Shop</h2>
</div>


... est-ce grave, docteur ?

Non.

C'est, certes, pas bô, pas élégant, dispendieux de quelques octets de code, etc... Mais cela:
- n'a aucun effet sur l'utilisateur, le robot, le mec ou la chose au bout du fil
- peut même aider le développeur (en herbe ou non) à mieux s'y retrouver, ou à faire évoluer par la suite sa présentation, ou à proposer des présentations alternatives, ou à mieux adapter son bidule aux contraintes de rendu d'un mobile, d'un navigateur vocal, etc.

Bref, on se trompe totalement de cible, là.

ce qui est :
- dommageable pour le visiteur qui n'a pas la CSS
- dommageable pour le robot indexeur
- affreux s'il faut traiter cette page avec un script
- bref, qui mérite la damnation éternelle, avec un sac de cendres sur la tête et tout...

C'est :

<div id="titre">Spinash&#8217;Shop</div>


Parce que là, on n'a plus de titre. On n'a plus rien. Juste un bête texte noyé dans la masse du contenu de Spinash Shop. Et ça, c'est de la "divite", si vous voulez appeler ça comme ça Smiley cligne

Donc, en résumé :
- mettre des div en plus, on s'en fiche
- mettre une div ou un span à la place d'un élément spécifique, on s'en fiche pas

<edit>lecourtier échappe donc au sac de cendre et à la damnation éternelle Smiley cligne </>
Modifié par Laurent Denis (13 Jul 2005 - 15:55)
Bonjour
Je te met ici 4 captures d'écran sur Mac (347 ko) sous différents navigateurs. Mis à part IE-Mac, nulle part ne ressemble à ton image de référence.
Le coup des 200px de vide en haut de page n'est pas que sous firefox mais presque partout ailleurs.
Les menus ne sont pas élastiques en hauteur, avec mes grandes polices je ne vois que la partie supérieure de leur contenu.
merci pour toutes vos reponses queje vais eplucher au fur et a messure !! Smiley lol

Tout d'abord - et pour commencer - j'ai une question :

Qu'est ce que le DOCTYPE ?
A quoi sert-il ?
Comment le créé t-on ?
Est ce la toute premiere ligne ? (avant < html> )


si je met "
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> " 
, est ce que ca va ?
Administrateur
lecourtier a écrit :
Tout d'abord - et pour commencer - j'ai une question :

Qu'est ce que le DOCTYPE ?
A quoi sert-il ?
Comment le créé t-on ?
Est ce la toute premiere ligne ? (avant < html> )


si je met "
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> " 
, est ce que ca va ?

Voilà un lien qui va répondre à toutes les questions à la fois :
http://pompage.net/pompe/doctype/ Smiley cligne

PS : au fait, n'hésite pas à parcourir notre Salon de Ressources où tu trouveras tous les liens utiles pour ton apprentissage.
re-salut a tous ! Smiley lol

Apres avoir mis le doctype, j'ai essayé de reglé le probleme suivant :
http://www.lecourtier.net/test/bug.jpg
c'est a dire, un gros decalage vers le bas sous Firefox.

Apres quelques test, j'ai constaté que cela venait du text du haut :

css :


 #textemenuhaut  {
        width: auto;
        height: auto;
        margin: 201px 0px 0px 165px 


html :

 <div id="textemenuhaut"><h1><a href="#"class="menuhaut">News  :</a><a href="#"class="menuhaut">:  Gallery   :</a><a href="#"class="menuhaut">:  Show Dates    :</a><a href="#"class="menuhaut">:    History  :</a><a href="#"class="menuhaut">:   Biography    :</a><a href="#"class="menuhaut">:  Forum   :</a><a href="#"class="menuhaut">:  Video   :</a><a href="#"class="menuhaut">:  MP3   :</a><a href="#"class="menuhaut">:  Albums</a></h1>
</div> 


Bon attention hein ! Ce code est le meme que celui de tout en haut.
Mais quand j'enleve cette " div ", bien le decalage s'enleve sous firefox .... pk ?? Smiley eek

pour tester, j'ai enlever la div, j'ai laissé la police, et dans <h1> sous css, j'ai rajouté les width: auto;
height: auto;
margin: 201px 0px 0px 165px

mais ca fait pareil ....

plizzzz.... help me !!! Smiley confus
en fait, j'ai peut etre trouvé une solution ( n'hésitez pas a laisser vos commentaires ) :

jusqu'a present, le texte ( div texte ) etant dans le bandeau du haut ( div bandeau )....

ba j'ai retirer la div texte de la div bandeau pour la placer dans la page.... seulement, pour la situer au centre de la div bandeau, je suis obligé de faire du :
margin : -160px ....

je sais pas si c'est tres cool comme code !

dites moi ce que vous en pensez, si c'est bien ou pas, si j'ai rien compris, si je suis un imbecile qui parle tout seul ! Smiley biggol
Bonjour,

Ce décalage est tout à fait normal : ta CSS demande explicitement au navigateur de placer cette div à 201 pixels du bord supérieur de la fenêtre d'affichage :

#textemenuhaut  {
(...)
margin: [b]201px[/b] 0px 0px 165px

}


(Rappel: margin se lit: top droite bas gauche. Truc mnémotechnique : le sens des aiguilles d'une montre en partant de midi)

En écrivant margin: [b]0 0px 0px 165px [/i], tu supprimera cette marge, et ta page se placera correctement dans FireFox (il reste la parge supérieure par défaut de l'élément body, que tu peux supprimer également).

Reste à voir ce qu'en fait Internet Explorer, qui ne me semble pas très catholique sur cette mise en page...
Modifié par Laurent Denis (17 Jul 2005 - 12:19)
[#] Compris a 50 % Laurent Denis

j'ai enlevé les 201px :

Effectivement, il n'y a plus cette grosse marge sous firefox....
Mais du coup, le texte se trouve tout en haut de la bande.... et non plus comme je voudrais le placer !! Smiley decu

Ai je bien compris ?
A ton une solution ? Smiley confused

en attendant, je vais explorer la solution que j'ai trouvé precedemmment : placer le texte dans la page et non pas dans la div bandeau du haut .... quitte a mettre des margin [#] - 160px
ILLUMINATION DIVINE, alors que je prends ma douche :

pas la peine que je fasse 201px de marge vers le haut du texte ! ( puisque ca decale la page. )

il suffit que je fasse un padding de 201px vers le bas du bandeau du haut.

Ainsi, le texte est là ou je veux ( 201px vers le bas ) et ma page n'est pas décalé ! Smiley lol

probleme reglé. Smiley lol
lol

bravo Smiley cligne

Mais alors, peut-être pourrais-tu régler un autre petit problème, sans rapport avec CSS : ta page indique un encodage windows-1552 qui risque fort de ne pas être bien interprété sur certaines plates-formes (ce qui déclenche l'apparition de petits carrés blancs et de points d'interrogation à la place de certains caractères) Smiley ohwell

Il serait préférable de passer en iso-8859-1, si ton éditeur HTML peut enregistrer tes pages avec ce jeu de caractères.
oki ! Smiley cligne

Par contre, pour reglé les soucis entre IE et firefox ( pb de décalage ), je vais utilisé 2 feuilles de styles differentes ....
( laissez moi n p'tit commentaire si cette methode n'est pas bonne )

 <style type="text/css"> 
@import url("style_ff.css"); 
</style> 
<!--[if IE]> 
<style type="text/css"> 
@import url("style.css"); 
</style> 
<![endif]--> 
</head>