Discussion :

[JefReb]

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ?

[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.

[Bovino]

Codepen me donne une erreur aussi.

Ah...
Où ça ?

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

[JefReb]

Je viens d'utiliser Codepen sur Chrome et j'ai bien le problème ...
http://codepen.io/anon/pen/dsGjA

[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 ?

[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

[Bovino]

Pas moi...

[JefReb]

[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?

[Bovino]

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...
Je crois que même un chausse-pieds ne t'aidera pas !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
.logo { ...; height:125px; ...; }
#menu { ...; height:42px; ...;}

[JefReb]

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:


Si une piste, elle sera la bienvenue...

[Bovino]

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

[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

[JefReb]

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

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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