Menu horizontal récalcitrant

Version imprimable

Bonjour à tous,
honte à moi, je n'arrive pas à trouver l'erreur. J'essaye d'aider un ami sur une charte graphique pas terrible.
Le texte ne s'affiche pas dans le menu. L'erreur est surement grossière, mais je ne la vois pas.
J'ai simplifié au maximum en supprimant les images en background.
Codepen me donne une erreur aussi.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html { font-size:100%; }
body { font-size:100%; margin:0; padding:0; background-color:#eef3fa; }
#fond1 { width:950px; height:auto; margin:10px auto; padding:25px; background-color: white;}
#fond2 { width:auto; height:auto; margin:0; padding: 10px; background-color:#7d7d7d; border:5px solid #5d5d5d; }
#fond3 { width:auto; height:600px; background-color:#7d7d7d; border:10px solid white; margin:0; padding:0;}
 
#bandeau { width:898px; height:70px; margin:0; margin-top:5px; border:1px solid green; }
.logo { width:225px; height:125px; margin:0; padding:0px; 
        position:relative; top:-56px; left:-18px;
		transform:rotate(-13deg); border:1px solid black; }
#menu { width:840px; height:42px; margin:0; margin-top:25px; margin-left:50px; padding:0;
         border:1px solid red;}
.hormenu  { list-style-type:none; margin:0; padding:0; margin-left:220px; text-align:center; font-size:85%; }		
.hormenu li { float:left; border:1px solid blue;  }
.hormenu li a  { display:block; width:138px; height:32px; line-height:32px;
                 margin:4px 0; padding:0px; color:#fff; text-decoration:none; }				 
.hormenu li a:hover { color:#5d5d5d; text-decoration:underline;  }

Code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="fond1">
	<div id="fond2">
    	<div id="fond3">
 
<div id="bandeau">
    <div id="menu"> 
    <div class="logo"></div>  
     <ul class="hormenu">
      <li><a href="" title="Présentation">PR&Eacute;SENTATION</a></li>
      <li><a href="" title="Inventions">INVENTIONS</a></li>
      <li><a href="" title="Histoire">HISTOIRE</a></li>
      <li><a href="" title="Contact">CONTACT</a></li>
     </ul>
    </div>
</div>
 
</div><!-- Fin de fond3 -->
</div><!-- Fin de fond2 -->
</div><!-- Fin de fond1 -->

Merci d'avance pour votre aide

23/06/2014, 14h03
Bisûnûrs

Je n'ai aucun problème d'affiche de texte avec le code que tu donnes (Firefox 29). Avec quel navigateur constates-tu le problème ?
23/06/2014, 14h06
JefReb

Je suis avec Firefoxe 30.0
Curieusement, le plugin Battelog (Battlefield 4) pour jouer ne fonctionne pas sur cette version et j'ai un problème avec codepen.
Je vais tester sur un autre navigateur.
23/06/2014, 14h06
Bovino

Citation:

Envoyé par JefReb

Codepen me donne une erreur aussi.

Ah... :koi:
Où ça ? :?

http://codepen.io/bovino/pen/AHFhq
23/06/2014, 14h09
JefReb

Je viens d'utiliser Codepen sur Chrome et j'ai bien le problème ...
http://codepen.io/anon/pen/dsGjA
23/06/2014, 14h13
Bisûnûrs

Je viens de regarder ton lien CodePen et je ne vois pas de problème, sur Chrome ou sur Firefox .. Peut-être que le problème vient de ton poste de travail.
Peux-tu mettre un screenshot du résultat que tu vois sur CodePen ?
23/06/2014, 14h15
JefReb

J'ai la même chose dans Internet Explorer. (Sur Chrome il n'y a pas la rotation du logo) mais pareil que Firefox.
Le menu "présentation, inventions etc. encadré bleu devrait être dans le cadre rouge du #menu
http://codepen.io/anon/pen/dsGjA
23/06/2014, 14h15
Bovino

1 pièce(s) jointe(s)

Pas moi... :weird:

Pièce jointe 149444
23/06/2014, 14h18
JefReb

1 pièce(s) jointe(s)

Pièce jointe 149447
23/06/2014, 14h21
JefReb

Non oubliez le problème codepen, c'est réglé.
Mais on voit bien sur les screenshot que le menu n'est pas dans le cadre rouge réservé pour lui.
Suis-je le seul à voir ce problème?
23/06/2014, 14h24
Bovino
Citation:

Le menu "présentation, inventions etc. encadré bleu devrait être dans le cadre rouge du #menu

Hum... dans ce cas, il faudra que tu nous expliques comment tu fais pour faire rentrer la div .logo de 125px de haut + la liste .hormenu dans la div #menu de 42px de haut... :aie:
Je crois que même un chausse-pieds ne t'aidera pas ! :mouarf:
Code:

1 2 .logo { ...; height:125px; ...; } #menu { ...; height:42px; ...;}
23/06/2014, 14h29
JefReb

1 pièce(s) jointe(s)

Hum oui, c'est vrai! Mais le rectangle en rotation est un logo. J'ai essayé plusieurs méthode, position relative, absolute, ( j'ai pas essayé le fixe) le Zindex etc. Je n'arrive pas à coder cette foutue charte graphique:
Pièce jointe 149453

Si une piste, elle sera la bienvenue...
23/06/2014, 14h34
Bovino

Citation:

J'ai essayé plusieurs méthode, position relative, absolute, ( j'ai pas essayé le fixe) le Zindex etc.

Bah si... position absolute, ça fonctionne, sauf que du coup le logo sort du flux normal et est positionné par rapport à son plus proche ancêtre positionné et non par rapport à son emplacement initial dans le flux...

http://codepen.io/bovino/pen/xivGo

Il faut donc corriger les positions ou plus simplement, utiliser le flottement

http://codepen.io/bovino/pen/fAdnw
23/06/2014, 14h41
JefReb

Merci, j'avais pourtant essayé, mais je finissais par ne plus rien voir. Je vais a refaire avec cette piste.
Dès que j'ai trouvé je cloturerai. Encore merci

Effectivement, la solution est avec un float:left et un margin-top négatif
Code:

1 2 3 4 5 6 .logo { width:225px; height:125px; margin:0; padding:0px; margin-left:35px; margin-top:-26px; float:left; transform:rotate(-13deg); border:1px solid black; }
Résultat: http://codepen.io/JefReb/pen/qDdns

Merci je clos ce topic