28173 sujets

CSS et mise en forme, CSS3

[Résolu] Espace disgracieux difficile à enlever

Bonjour,

J'ai cet espace que je n'arrive pas à enlever :
upload/7447-test.jpg

Si quelqu'un peut m'aider parceque là je ne vois plus quoi essayer.
CSS :
body {
background: #D7DCBC;
}

#total {
border: solid #fff 7px;
width: 775px;
}

#top {
padding: 0.3em;
background: #7E816B;
}

#top ul{
margin: 0.1em;
text-align: right;

}

#top li{
margin-top: 0;
display: inline;
list-style-type: none;
border-left: solid 1px #fff;
padding-left: 0.6em;
}

#top a{
color: #fff;
text-decoration: none;

}

#top li.premier{
border: 0;
padding-right: 0.5em;
}

#header {
border-top: solid #fff 7px;
border-bottom: solid #fff 7px;
}
#menu {
height: 304px;

}
#menu ul{

}

#logo {
color: #fff;
background: #7E816B;
}
#photo {
width: 514px;
height: 304px;
float: right;
background: url(images/photo.jpg) no-repeat;
border-left: solid #fff 7px;

}

#footer {
padding: 0.3em;
border-top: solid #fff 7px;
}


Le html :
<body>
<div id="total">

<div id="top">
<ul>
  <li class="premier"><a href="#">Accessibilité</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</div>

<div id="header">
<div id="photo"></div> 
    <div id="menu">
	<div id="logo">
      <h1>L.J Traiteur</h1>
		<p>Traiteur à domicile</p>
		<p>Organisation de réceptions</p>
		</div>
      <ul>
        <li><a href="#">Accueil</a></li>
        <li><a href="#">Formules</a></li>
        <li><a href="#">Prestations</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Devis</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>


</div>
<div id="contenu">
<h2>L.J Traiteur</h2>
<p>Repas d'entreprises, mariages, baptêmes, L.J Traiteur à domicile organise vos 
  réceptions. L.J Traiteur propose différentes formules : service à l'assiette, 
  buffet, cocktail, plateaux repas et prestations : serveurs, location de matériel, 
  structures (chapiteaux) et salles.</p>
   <h2>Services et prestations</h2>
  
<p>Personnel, mat&eacute;riel, structures et emplacements.</p>  
  <h2>Les formules</h2>
  <p>Service à l'assiette, buffet, cocktail.</p>
 <h3>Le menu en exemple</h3>
 <h4>Titre menu</h4>
 
<p>un assortiment d'amuses bouches raffinés, salés et sucrés: coupelles, verrines, 
  feuilletés, cuilléres, fagots d'asperges au bacon, roulés nordiques au saumon, 
  canpés etc...à partir de 6 pièces par personne. Possibilité forfait boissons, 
  location de materiel et serveurs.</p>
<p>Tarif en &euro;</p>
</div>
<div id="footer">
<ul>
  <li>&copy; L.J Traiteur</li>
  <li>Informations l&eacute;gales</li>
  <li>Contact</li>
</ul>
<a href="#">Lien externe </a>
</div>
</div>
</body>


Je ne comprends vraiment pas pourquoi le fond de mon div id="logo" laisse cet espace à droite.

Merci pour votre aide,
Hello,
si tu avais un lien en ligne ça serait beaucoup plus simple de t'aider.
Ca ne serait pas le "3 pixels jog"?
Modifié par Ralfman68 (22 Oct 2006 - 18:51)
C'est peut-être le "3 pixels jog" car c'est vrai qu'on dirait que ça fait 3 pixels.
J'ai mis l'exemple en ligne:
http://www.lj-traiteur.com/test/
Si quelqu'un peut jeter un oeil pour me confirmer et m'expliquer comment résoudre ce pb.
Juste pour info, je vous montre ce que je veux faire :
upload/7447-traiteur.jpg

Merci
Avec ffox et ie7 pas de décallage tel que décrit dans ton premier message.
Modifié par Ralfman68 (22 Oct 2006 - 19:40)
Bonjour,

Sous FF pas d'espace disgracieux mais un décallage du titre vers le bas, sous IE6 comme tu le dis ...
Alors comment faire pour éviter ce problème?
J'ai essayé avec ça :
<!--[if lte IE 6]>
<style>
#menu { height: 1px; }
</style>
<![endif]-->

Mais ça ne marche pas

Et sinon, puis-je installer plusieurs navigateurs sur un même poste sans problème?
En regardant la différence entre l'affichage de ie et de ff, tu vois que les polices de texte n'ont pas pris sous ie (on reconnait la police par défaut times new roman) il ya déja un probleme de sélecteurs css à régler.

Oui tu peux installer plusieurs navigateurs sur le même pc(firefox et opera par exemple).Par contre il faut feinter (j'ignore comment) pour installer deux versions d'un même navigateur (ie6 et ie7 par exemple).
Modifié par Ralfman68 (22 Oct 2006 - 21:06)
J'ai mis la font dans le selecteur body en espérant que ça marche...

Je vais installer les autres navigateurs.

Et existe-t-il des émulateurs pour simuler un écran de téléphone portable?
Modifié par jpsartre (22 Oct 2006 - 23:24)
Salut.

Désactiver la feuille de style te donnera un premier aperçu du résultat sur un appareil mobile (ou un navigateur texte) ... Si ta page reste fonctionnelle, lisible & organisée, c'est déjà bien Smiley cligne

Pour le problème de décalage, voici une solution (fonctionne sous Firefox & sous IE 6, en tous cas) : 
#menu {
margin-right: 520px;
}
#menu ul{
width: 200px;
margin: 1.5em auto;
padding: 0;
}
#menu li{
padding: 0.3em 0;
list-style-type: none;
border-bottom: solid 1px #fff;
}
#logo {
padding: 5px 10px;
color: #fff;
background: #7E816B;
}
#photo {
width: 514px;
height: 304px;
float:right;
background: url(images/photo.jpg) no-repeat;
border-left: solid #fff 7px;
}
Je n'ai remis que les parties que j'ai modifiées (enfin, je crois).
Merci pour le code,
j'ai essayé et ça marche.
J'ai le même problème plus bas, je vais essayer de le réparer, mais peux-tu m'expliquer la démarche. Je n'ai pas bien compris.

Et sinon, quelqu'un pourrait-il m'expliquer comment mettre une ombre ainsi que je l'ai fait sur l'image jointe dans un message au dessus. C'est que je ne vois pas comment faire à cause du dégradé vertical.

Merci
Modifié par jpsartre (22 Oct 2006 - 23:58)
J'ai un peu nettoyé le code, supprimé quelques éléments inutiles ou redondants, etc. En faisant cela, j'ai supprimé le layout que tu avais donné à l'élément #menu.

Il s'agissait bien du "three pixel jog". Il est d'ailleurs toujours présent, mais on ne le voit plus ... Lire l'explication de Laurent Denis pour en savoir plus. On est simplement passé du cas "avec layout" au cas "sans layout".
Sujet clos
Aller à