28220 sujets

CSS et mise en forme, CSS3

Puce et decalage de div

j'espere que ce sera plus lisible ainsi :]

Bonjour tlm,

je n'arrive pas à placer un div situé en dessous d'un autre div contenant des <li>, sans que la derniere puce ne le chevauche ? Même en plaçant directement les <li> dans le code sans le <div>, la derniere puce chevauche encore ce dernier ?? Help !! ;]

J'ai essayé l'alignement <ul> et <ol>

Voici le code html :


<body>
<div id="container">
    <div id="logo"><img class="img" src="/illus-photo/coin-corne-banniere.png"> 
    <span class="marge-gauche"><strong> <a href="#" class="menu">site</a></strong></span></div>
  <div id="description"><span class="marge-gauche">photo</span></div>
  <div id="parcours"><span class="marge-gauche"><a href="#" class="menu">Accueil photo</a> > <span class="bold"><a href="#" class="menu">pays [nb photos]</a></span></span></div>
   <div>
   <ul id="vignette">
<li><a href="#"><img src="/photos1.jpg" height="120" width="160" />titre 1</a></li>
<li><a href="#"><img src="/photos2.jpg" height="120" width="90" />titre 2</a></li>
<li><a href="#"><img src="/photos3.jpg" height="120" width="90" />titre 3</a></li>
<li><a href="#"><img src="/photos4.jpg" height="120" width="160" />titre 4</a></li>
<li><a href="#"><img src="/photos5.jpg" height="120" width="160" />titre 5</a></li>
<li><a href="#"><img src="/photos6.jpg" height="120" width="90" />titre 6</a></li>
<li><a href="#"><img src="/photos7.jpg" height="120" width="160" />titre 7</a></li>
<li><a href="#"><img src="/photos8.jpg" height="120" width="160" />titre 8</a></li>
<li><a href="#"><img src="/photos9.jpg" height="120" width="90" />titre 9</a></li>
</ul>
</div>
		<div id="tips">Photo Tips<br>
<br>
</div>
 <div id="pied">&copy; Reproduction même partielle interdite 
    sans autorisation de l'auteur | <a href="#" class="pied">Plan</a> | <a href="#" class="pied">Contact</a> 
  </div>
</div>
</body>


La feuille de style attachée :


ul, ol, li {
	list-style: none;
}

ul#vignette li {
	float: left;
	padding: 12px;
	text-align: center;
	background: 15px 139px;
}
ul#vignette li a {
	display: block;
	font-size: 11px;
	padding-bottom: 1px;	
	white-space: nowrap;
	border: 1px solid #BBB;
	background: right bottom;
}
ul#vignette li a:hover {
	color: #01A;
	text-decoration: none;
	background-color: #CCC;
}
ul#vignette li a img {
	border: 0;
	display: block;
	padding: 3px 3px 1px;
}

#tips {
	position: aboslute;
	margin-top: 30px;
	font-size: 0.7em;
	color: #333333;
	border: dotted 1px #d3d3d3 100%;
	
}

#pied {
	position: aboslute;
	margin-top: 30px;
	height: 11px;
	background-color: #99CC33;
	font-size: 0.7em;
	color: #333333;
	text-align: center;
	border: 100%;
}


voici a quoi cela ressemble aujourd'hui : l'encadrer en rouge montre le chevauchement de la derniere puce sur les 2 derniers div


merci de vos conseils

vxdav upload/2077-css.gif
Modifié par vxdav (02 Jun 2005 - 15:57)
Bonjour et bienvenue sur Alsacréations vxdav,

Merci de (re)lire les règles et de baliser tes exemples avec [ code][ /code] (sans les espaces). Ton message sera plus lisible pour tout le monde et augmentera tes chances de réponses. Smiley cligne
hum, moi débutant alors pas taper si moi dire bêtise mais dans la mesure où tes li sont en position float, tu dois rajouter un "clear: all" sur un item entre les deux. Je te conseille d'utiliser la balise hr pour ça, c'est plus propre qu'un div juste créé pour l'occasion (au pire un <br clear="all"> n'est pas si vilain que ça)

Ca marche sous IE par contre FF semble faire du boudin

Ah, et ton #tips est en position "aboslute" Smiley cligne
Modifié par Alexboom (02 Jun 2005 - 16:42)
Génial ça fonctionne !

cette balise va régler bien des soucis héhé

merci à toi [g aussi enlevé les aboslute du coup]

pas si newbie que ça Alexboom Smiley cligne

Thx
vxdav
ou alors

#pied {
position: aboslute;
clear: both; <= ICI !!!!!!!!!!!!!!!!!!!!!!!!!
margin-top: 30px;
height: 11px;
background-color: #99CC33;
font-size: 0.7em;
color: #333333;
text-align: center;
border: 100%;
}
je viens d'essayer d'integrer ta solution {clear: both;}

dans 

#pied {
position: absolute;
clear: both; <= ICI !!!!!!!!!!!!!!!!!!!!!!!!!
margin-top: 30px;
height: 11px;
background-color: #99CC33;
font-size: 0.7em;
color: #333333;
text-align: center;
border: 100%;
}


j'ai du coup eliminé le {clear: all;} du style du div#tips (au dessus de div#pied). Mais le {clear:both;} ne me decale que le div#pied et pas le div#tips ?

Est ce normal ? L'utilite de {clear:both;} est bien de n'ajouter qu'une seule fois la classe clear ? Fallait il enlever {clear: all;} du div#tips ?

l'autre solution fonctionnant je suis déjà sauvé, là c pour mieux comprendre. Merci en tt k de tes eclaircissements Smiley biggrin

merci pour votre réactivité, ça le fait !!
Sujet clos
Aller à