28172 sujets

CSS et mise en forme, CSS3

Bonjour a tous,
Je ne comprend pas pourquoi mon header est différent entre firefox et internet explorer.
Pour firefox c'est niquel mon titre et slogan s'affichent bien sur mon fond d’écran par contre sous internet explorer j'ai un cadre qui apparait à la place du titre et le slogan se retrouve plus bas.
Modifié par ancien (17 Feb 2013 - 19:21)
Hello,
Ton "titre" est une image vide :
<img src="" alt="REGAPARTS" />

IE affiche un cadre pour indiquer qu'il devrait y avoir une image mais qu'il n'a pas réussi à la trouver, alors que FF se contente de l'ignorer.

Donc tu ferais mieux de ne pas mettre d'image mais un simple <h1>
Modifié par BlueScreenJunky (16 Feb 2013 - 09:13)
Merci pour ta réponse

Voici le code que j'ai trouvé dans ma page header.php

<div id="logo"><a href="<?php bloginfo('url'); ?>/"><img src="<?php echo get_option('alltuts_logo_img'); ?>" alt="<?php echo get_option('alltuts_logo_alt'); ?>" /></a><br /><span><?php echo get_settings('blogdescription');?></span></div>


C'est bien ce code qu'il faut modifié ? Ou dois-je placé le <h1> ?
Il y un décalage du header entre FF et les autres navigateurs.

Cela provient du boby dont le line-height est fixé à 125%.

Enlevez cette déclaration (de manière conditionnelle) et réglez tous vos marin-top et padding-top liés au header.
Ok pour cette information en plus par contre je ne vois pas ou modifié le premier code
Pour la deuxième modification pouvez vous précisez les modification a apportées
Merci d'avance.
Ça va pas être facile...

Dans votre feuille de style.css il y a :

body {
  color: #333;
  background: url(images/piecespoidslourd.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
 [b] line-height:125%;[/b]
}

Isoler le line-height de cette manière:


body {
  color: #333;
  background: url(images/piecespoidslourd.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
 [b]// line-height:125%;[/b]
}
Ensuite

#logo {
        font-size: 110px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
	color:#080830;
       [b]// padding-top: 40px;[/b]
}

#logo img {
        margin-left: auto;
        margin-right: auto;
}

#logo span {
	display:block;
        margin-left: auto;
        margin-right: auto;
	[b]//padding-top:60px;[/b]
	text-transform:uppercase;
	color:#000000;
	font-size:25px;
}


Pour gérer les calages verticaux jouez avec les padding-top et margin-top.
C'est résolu ? Smiley smile

Bon courage.

Ps: attention au line-height car il affecte tous les éléments du site. Il faudra vérifier si sa suppression n'a pas généré d'autres nouveaux décalages.
Je ne peu pas voir la différence entre internet explorer et firefox car j'ai toujours pas réglé le fait de l'image qui n'apparait pas sous internet explorer.
Tu peux m'aider car je vois pas comment faire par rapport a ce que ma dit la personne dans la première réponse de ce topic
Comme l'a dit @BlueScreenJunky il manque la source de l'image.

Essayez ça:


<img src="" alt="REGAPARTS" src="alltuts_logo_img"/>
ok donc sa donne sa :

<div id="logo"><a href="<?php bloginfo('url'); ?>/"><img src="" alt="REGAPARTS" src="alltuts_logo_img"/></a><br /><span><?php echo get_settings('blogdescription');?></span></div>
Quelqu'un peux m'aider a modifié le code que je puisse régler cette différence de navigateur.
Merci d'avance
Essaye de remplacer ça
<div id="logo"><a href="<?php bloginfo('url'); ?>/"><img src="<?php echo get_option('alltuts_logo_img'); ?>" alt="<?php echo get_option('alltuts_logo_alt'); ?>" /></a><br /><span><?php echo get_settings('blogdescription');?></span></div>


Par ça :
<div id="logo">
    <a href="<?php bloginfo('url'); ?>/">
        <h1><?php echo get_option('alltuts_logo_alt'); ?></h1>
    </a>
    <br />
    <span>
        <?php echo get_settings('blogdescription');?>
    </span>
</div>

je suppose que ça devrait marcher, même s'il y a surement mieux que get_option('alltuts_logo_alt') pour récupérer le titre Smiley lol
Mais comme je ne connais pas wordpress (et donc encore mois le thème Alltuts) je ne pourrai pas t'aider plus que ça.
Modifié par BlueScreenJunky (16 Feb 2013 - 16:16)