28172 sujets

CSS et mise en forme, CSS3

Image qui depasse du conteneur

Bonjour,

je tente de créer un site avec un conteneur general, puis a l'interieur une div d'entete, une div menu, une div principale ou je souhaiterai faire défiler des photos avec un scroll ou overflow, et une div copyright.

seulement voila mes photos depassent de ma div photos tout autant que de son conteneur?!!.... et du coup mon site n'est pas fixe mais bouge horizontalement à cause d'un overflow qui se cré tout seul en bas de ma page (navigateur) et hors de mon conteneur????

quelqu'un peut il me dire comment faire pour fixer mon site et créer un overflow seulement a l'intieur de la div photo? merci merci merci d'avance
Salut xyck,
a écrit :
créer un overflow seulement a l'intieur de la div photo?
div#photo {overflow:auto}
Si ça ne résoud pas ton problème, il faudrait voir ta page en ligne (idéalement), ou au moins que tu recopies son code HTML/CSS intégral ici.
bonjour,

voici le code html et css pour mieux expliquer mon cas:


<body>
<div id="conteneur">

  <div id="entete"></div>
  
  <div id="menu">
   <ul>
    <li><a href="javascript:;"><img src="image/template/home.jpg" alt="home" longdesc="http://home" /></a></li>
    <li><a href="javascript:;"><img src="image/template/portrait.jpg" alt="portraits" longdesc="http://portraits" /></a></li>
    <li><a href="javascript:;"><img src="image/template/urbain.jpg" alt="urbain" longdesc="http://urbain" /></a></li>
    <li><a href="javascript:;"><img src="image/template/paysage.jpg" alt="paysage" longdesc="http://paysage" /></a></li>
    <li><a href="javascript:;"><img src="image/template/contact.jpg" alt="contact" longdesc="http://contact" /></a></li>
   </ul>
  </div>
  
  <div id="photos">
   <img src="image/contenu/don't walk_1.jpg" alt="don't walk" longdesc="http://don't walk" />
   <img src="image/contenu/don't walk_2.jpg" alt="don't walk2" longdesc="http://don't walk2" />
   <img src="image/contenu/don't walk_3.jpg" alt="don't walk3" longdesc="http://don't walk3" />
   <img src="image/contenu/don't walk_4.jpg" alt="don't walk4" width="266" height="400" longdesc="http://don't walk4" />  </div>
  
  <div id="copyright">Placez ici le contenu de  id "copyright"</div>
</div>
</body>





#conteneur {
	height: 650px;
	width: 800px;
	border: thin solid #000000;
	clip: rect(auto,auto,auto,auto);
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
#entete {
	background-image: url(fr/image/template/bandeau_haut_final.jpg);
	background-repeat: no-repeat;
	height: 58px;
	width: 800px;
}
#menu {
	width: 233px;
	height: 562px;
	display: inline;
	float: left;
}
#menu ul {
	list-style-type: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

#photos {
	height: 562px;
	width: 2000px;
	display: inline;
	float: left;
	position: absolute;
	overflow-x: hidden;
}
#menu a {
	list-style-image: none;
}

img {
	float: left;
}

#copyright {
	background-image: url(fr/image/template/bloc_bas.jpg);
	background-repeat: no-repeat;
	height: 30px;
	width: 800px;
}


merci encore pour vos reponse, je suis en train de lire ton aide raphael, merci
Modifié par xyck (05 May 2009 - 16:07)
Hello,

Pourrais-tu éditer ton post et utiliser les balises "code" du forum pour rendre ça plus lisible stp ?
Bonjour Misticke,

je ne vois pas ce que je dois faire pour editer "mon post" (qu'est ce que c'est?) et qu'appelles tu les balaises "code" du forum?

merci d'avance
Hello xyck et bienvenue Smiley smile ,

Voici le message standard qui devrait être plus clair :

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

Bonne continuation Smiley smile
voila pour l'edition avec le code hé hé

pour l'instant je ne comprends rien à la reponse donnée, à savoir l'histoire du clear:both;

pour mieux m'exprimer voila ce que cela doit donné:

upload/21382-Image1copi.jpg

sachant que tout ce qui depasse du conteneur principal ne doit pas etre aparent comme c'est le cas (en rouge sur mon exembple)
et que l'overflow doit apparaitre sous les photos (la ou c'est jaune sur mon exemple) qui doivent du coup défilé; je ne veux pas de l'overflow en bas de mon navigateur;

helpppppppppppp

merci d'avance
Tu dois rajouter un conteneur entre #photo et tes images. Idéalement une ul, pour mettre tes images dans des li, mais pour faire simple, on va utiliser une div ici :
[b]HTML[/b]
<div id="photos">
    <div>
        <img />
    </div>
</div>

[b]CSS[/b]
#photos {
	height: 562px;
	width: 2000px;  ==> mettre largeur voulue pour div#photos
	display: inline;  ==> inutile
	float: left;
	position: absolute;  ==> inutile
	overflow-x: hidden;  ==> overflow:auto pour avoir la scrollbar
}
#photos div {
	width: 2000px;
}

Modifié par marcv (05 May 2009 - 19:30)
Sujet clos
Aller à