18073 sujets

Questions générales et questions de débutants

Pb modele 15 mise en page

Bonjour

je me prends la tête depuis des jours sur ma page qui reprend le modèle 15 (Modèle basé sur le positionnement flottant : Adapté à la plupart des cas. Adaptés également pour des colonnes de hauteurs égales. ) de ton site
Je veux juste rajouter une photo dans :
<div id="centre">
<p><img src="monImage.jpg" alt="" width="450" height="158" /></p>
<p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de "pousser" le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
</div>

Seulement voilà, autant avec que du texte ça fonctionnne et le texte commence en haut, autant avec une image celle-ci + le texte commence à la fin de la hauteur du menu gauche. Biensûr ceci ne fonctionne pas sur IE 6 alors que firefox c'est OK.
Connaîs-tu l'astuce pour que cela fonctionne sur ie ?

Merci de votre aide
Salut et ouebcome

Fais une recherche sur la notion de « spacer ». Ça doit être dans la faq il me semble.
globy a écrit :
Salut et ouebcome

Fais une recherche sur la notion de « spacer ». Ça doit être dans la faq il me semble.


Voici mon probleme sur ie (sur firefox, non)
upload/4010-ecranie.jpg

merci de vos réponses
Regarde dans tes classes et id #centre et #centre p, il se pourrait qu'il traîne un attribut de trop.
Au fait, le code se présente entre les balises "codes" que tu trouveras sous les smileys lors de la composition de ton message. Tu es en droit de t'éditer pour faire ça bien Smiley cligne
globy a écrit :
Regarde dans tes classes et id #centre et #centre p, il se pourrait qu'il traîne un attribut de trop.
Au fait, le code se présente entre les balises "codes" que tu trouveras sous les smileys lors de la composition de ton message. Tu es en droit de t'éditer pour faire ça bien Smiley cligne


voici le code du tuto modele15 , je ne comprends pas...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Largeur fixe (750px, header/menu haut/menu gauche flottant/menu droite flottant/contenu/footer.</title>
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
p {
margin: 0 0 10px 0;
}
#header {
height: 50px;
background-color: #99CCCC;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
#conteneur {
width:750px;
margin:0 auto;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;

}
#gauche {
float:left;
width: 150px;
}
#droite {
float:right;
width: 150px;
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}
#menuhaut {
list-style-type: none;
margin: 0;
padding:0;
}
#menuhaut li {
display: inline;
}
#menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menuhaut a:hover {
text-decoration: none;
}
#menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
#menugauche li {
margin-bottom: 5px;
}
#menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menugauche a:hover {
text-decoration: none;
}
#menudroit {
list-style-type: none;
margin: 0;
padding:0;
}
#menudroit li {
margin-bottom: 5px;
}
#menudroit a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
#menudroit a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div id="conteneur">
  <div id="header"> Header (modèle utilisant les positionnement flottants)<a
        href="http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS"> (voir tous les mod&egrave;les)</a> </div>
  <div id="haut">
    <ul id="menuhaut">
      <li> <a href="#">Menu 1</a> </li>
      <li> <a href="#">Menu 2</a> </li>
      <li> <a href=""">Menu 3</a> </li>
      <li> <a href="#">Menu 4</a> </li>
    </ul>
  </div>
  <div id="gauche">
    <p> menu gauche </p>
    <p> largeur fixe : 150px avec utilisation de la propriété <code>float:left;</code> </p>
    <ul id="menugauche">
      <li> <a href="#">Menu 1</a> </li>
      <li> <a href="#">Menu 2</a> </li>
      <li> <a href="#">Menu 3</a> </li>
      <li> <a href="#">Menu 4</a> </li>
    </ul>
  </div>
  <div id="droite">
    <p> menu droit </p>
    <p> largeur fixe : 150px avec utilisation de la propriété <code>float:right;</code> </p>
    <ul id="menudroit">
      <li> <a href="#">Menu 1</a> </li>
      <li> <a href="#">Menu 2</a> </li>
      <li> <a href="#">Menu 3</a> </li>
      <li> <a href="#">Menu 4</a> </li>
    </ul>
  </div>
  <div id="centre">
    <p><img src="monImage.jpg" alt="" width="450" height="158" /></p>
    <p>Même avec contenu central court, l'utilisation des flottants combinés à l'utilisation de la propriété <code>clear:both;</code> sur le pied de page, permet à ce dernier de &quot;pousser&quot; le conteneur pour intégrer les éléments en float. Le pied de page est correctement positionné à la suite des parties en float les plus longues.</p>
    <p>Si le contenu central est plus long que les menus latéraux, il "pousse" également le pied de page vers le bas.</p>
  </div>
  <div id="pied"> pied de page (se place en dessous des éléments flottants grâce à <code>clear:both;</code>) </div>
</div>
</body>
</html>


Aidez-moi SVP... je craques !!!! Smiley bawling
Merci d'avance !
ctito17 a écrit :


Voici mon probleme sur ie (sur firefox, non)
upload/4010-ecranie.jpg

merci de vos réponses



Smiley lol
Au fait, j'ai trouvé la solution...
c'était mon image qui était trop grande de... 1pixel...
pfffffffff !!!!!!!!!!!!!!

Merci à ceux qui ont essayé de m'aider !

Bonne journée
Salut
Ça m'avait fait le même coup avec un flash.
Quand le browser était redimensionné à moins de 800 pixels de largeur (j'avais fait le calcul juste pile poil), sous Fifefox on avait un ascenseur horizontal : c'était parfait. Avec IE le flash chassait sous mon menu Smiley biggol
Sujet [Résolu] je crois.
Modifié par globy (12 Dec 2005 - 21:13)
Sujet clos
Aller à