28220 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai crée un div#page qui centre l'ensemble sur un navigateur, cela fonctionne bien.

J'ai ensuite un menu qui se positionne bien en haut.

Mon problème est maintenant de positionner mon logo en dessous du menu, en essayant de le positionner à qq pixels à gauche et qq pixels en dessous du menu.

J'ai de grosses différences entre ie et firefox comme l'atteste la page:
http://princessedunjour.com/nouveau2.htm

sur ff, mon bloc "Page" n'est plus en blanc... c'est très bizarre.


<body>
<div id="page">
<div id="nav">
<ul id="menu_haut">
<li><a id="menu1" title="Colliers mariage" href="accessoires-colliers-mariage.htm">ACCUEIL</a></li>
<li><a id="menu2" title="Bracelets mariage" href="accessoires-mariage-bracelets.htm">COLLECTIONS</a></li>
<li><a id="menu4" title="Boucles d'oreilles mariage" href="accessoires-boucles-doreilles.htm">DESIGN</a></li>
<li><a id="menu3" title="Pics à cheveux mariage" href="accessoires-mariage-pics-a-cheveux">POINTS DE VENTE</a></li>
<li><a id="menu5" title="Tiares mariage" href="accessoires-mariage-tiares.htm">A PROPOS</a></li>
<li><a id="menu3" title="Pics à cheveux mariage" href="accessoires-mariage-pics-a-cheveux">CONTACT</a></li>
<li><a id="menu6" title="Princesse d'un Jour" href="index_eng.htm">ESPACE PRO</a></li>
</ul>
</div>
<div id="logo">
<a href="http://www.princessedunjour.com">
<img id="logo" src="logo2.gif" alt="Princesse d'un Jour" /></a>
</div>
</div>
</body>
</html>



body {
margin: 0;
text-align: left; /* pour corriger le bug de centrage IE */
background-color: #EBEBEB;
}
img {
border-width: 0;
border-style: none;
}
#page {
position: relative; /* on positionne le conteneur */
margin-left: auto;
margin-right: auto;
width: 920px;
text-align: left;
background-color: #FFFFFF;
}
div#nav {
float: left;
height: 25px;
top: 90px;
right: 100px;
width: 100%;
border-style: solid;
border-width: 0;
border-color: #CCCCCC;
}
ul#menu_haut {
margin-top: 8px;
margin-bottom:8px;
padding: 0;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 10px;
margin: 15px 10px;
text-align: center;
}
#menu_haut li {
display: inline;
margin: 0 15px;
}
#menu_haut a {
color: #999999;
text-decoration: none;
text-align: left;
}
#menu_haut a:hover {
color: #000000;
}
div#logo {
float:left;
height: 66px;
top: 50px;
right: 100px;
border-style: solid;
border-width: 0;
border-color: #CCCCCC;
} 

Modifié par pp51 (27 Nov 2005 - 13:13)
Bonsoir,

Beaucoup de choses inutiles dans ce code. Supprimer tous les :
- position: relative
- float: ...
- top: ...
- right: ...

qui sont inutiles pour obtenir le résultat attendu. Laisser faire simplement le flux Smiley cligne

Sinon, un détail : c'est un text-align: center sur l'élément body qui corrigera le bug de centrage d'IE 5.x, pas un text-align: left.
Modifié par Laurent Denis (26 Nov 2005 - 19:33)
bonsoir et merci pour ta réponse,

si je supprime les éléments dont tu parles, comment vais-je réussir à positionner le logo par ex ?

Merci.
Il se placera de lui-même selon le flux sous le menu, à gauche. Pour modifier sa place par défaut et le décaler par exemple un peu vers la droite ou le bas, il suffit d'agir sur ses marges.

La plus partie d'un positionnement CSS se fait en fait sans intervention particulière à l'aide des propriétés de positionnement telles que float et position. Celles-ci ne servent que quand on a besoin de modifier le positionnement naturel (le flux).
Modifié par Laurent Denis (26 Nov 2005 - 19:43)
Merci Laurent,

J'ai suivi tes conseils, voici mon CSS actualisé:

body {
margin: 0;
text-align: center;
background-color: #EBEBEB;
}
img {
border-width: 0;
border-style: none;
}
#page {
margin-left: auto;
margin-right: auto;
width: 920px;
text-align: left;
background-color: #FFFFFF;
}
div#nav {
	height: 25px;
	width: 100%;
	border-style: solid;
	border-width: 0;
	border-color: #CCCCCC;
}
ul#menu_haut {
margin-top: 8px;
margin-bottom:8px;
padding: 0;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 10px;
margin: 15px 10px;
text-align: center;
}
#menu_haut li {
display: inline;
margin: 0 15px;
}
#menu_haut a {
color: #999999;
text-decoration: none;
text-align: left;
}
#menu_haut a:hover {
color: #000000;
}
div#logo {
height: 66px;
border-style: solid;
border-width: 0;
border-color: #CCCCCC;
margin: 0 0 0 10px;
}


Avec un résultat satisfaisant Smiley biggrin

Existe t'il un moyen pour que l'affichage sous ff soit équivalent à ie c'est à dire sans la barre grise qui apparait en haut ?

Donc je ne vais pas utiliser du tout les positions relative, absolute et float dans mon cas ? Sauf eventuellement pour mon futur div content qui sera centré sur la page ?

Merci !
Modifié par pp51 (26 Nov 2005 - 19:52)
pp51 a écrit :


Existe t'il un moyen pour que l'affichage sous ff soit équivalent à ie c'est à dire sans la barre grise qui apparait en haut ?


Supprimer la marge supérieur de l'élément ul du menu :

ul#menu_haut {
padding: 0;
letter-spacing: 0.2em;
list-style-type: none;
font-family: Arial, Times, serif;
font-size: 10px;
[b]margin: 0 10px 15px 10px;[/b]
text-align: center;
}


pp51 a écrit :

Donc je ne vais pas utiliser du tout les positions relative, absolute et float dans mon cas ? Sauf eventuellement pour mon futur div content qui sera centré sur la page ?


Pour l'instant, tu ne sembles pas en avoir besoin, puisque tu sembles rester dans une mise en page à une seule colonne : ton div content peut être centré dans #page (ou dans body) comme #page est centré dans body, c'est à dire à l'aide de ses marges auto et de sa largeur (plus le correctif pour IE).

Si en revanche tu sortais de cette mise en page à une seule colonne, tu aurais alors besoin de blocs flottants (pour gérer un menu latéral par exemple).

Sinon, un conseil : si tu débutes dans CSS, attention à ne pas se fier au résultat dans IE Windows qui ne respecte pas CSS sur de très nombreux points et qui te donnera des habitudes erronées et gênantes pour développer. Procéder à l'inverse en fixant d'abord le résultat dans un navigateur plus moderne (Firefox, Opera, Safari, Konqueror). Une fois la page "callée" dans celui-ci, il sera temps de découvrir les joies multiples du contournement des bugs CSS d'Internet Explorer Smiley cligne
Modifié par Laurent Denis (26 Nov 2005 - 20:16)
génial, merci bcp !

Une petite dernière:
- sur ie, le menu "s'étale bien" en longueur
- sur ff, le menu se "ratatine" un peu, il parait plus petit et les mots du menu se sont plus assez espacés à mon goût.

Quelle peut en être l'origine ? Encore un code à changer ?

Merci et excellente soirée
En effet, IE et Firefox n'appliquent pas de la même manière la valeur de letter-spacing sur la police du menu dont la taille est fixée en pixels. Amusant, ça : un nouveau bug CSS Smiley ravi

Une solution: fixer la taille de caractères du menu en % (de l'ordre de 75%) plutôt qu'en pixels. IE et FF ont alors le même comportement.

D'une manière général, il est d'ailleurs préférable d'éviter les tailles de polices de caractères en pixel, et d'utiliser les %, les ems ou les mots-clés : IE ne sait pas agrandir les caractères en pixels, ce qui est une gêne pour l'accessibilité de la page.
Modifié par Laurent Denis (26 Nov 2005 - 20:35)
En effet, j'ai mis la taille en %, et cela semble fonctionner.

Mais le résultat sur firefox est tout de même un peu écrasé vs ie, pas le même espace entre les mots, pourtant je l'ai exprimé en em.

cf: www.princessedunjour.com/nouveau2.htm

En tout cas pour un débutant comme moi, c'est pas évident du tout toutes ces subtilités de navigateurs ! Smiley rolleyes
les joies des bugs de ie, en effet...

par ex mon logo est assez bien positionné mais sur ie il est vraiment décalé sur le bas, du coup c'est pas terrible comme rendu Smiley decu

comment faire ? et vive ff Smiley cligne

en tout cas merci pour tes conseils !