28173 sujets

CSS et mise en forme, CSS3

Positionnement d'un élément en *clear:both*.

Bonjour bonjour,

Je viens de remarquer que j'ai un problème de positionnement sur les albums photos des membres de mon site utilisant un thème graphique particulier.
Voyez plutôt pour l'exemple :
http://album.widjoo.com/Sam/Alfa-147-gta-at-sunset.jpg.html
Sur cet album, il y a un espace entre le fichier original et les éléments "Fichiers suivants" et "Fichiers précédents". Le plus étonnant c'est que sur un autre thème graphique, utilisant quasiment la même structure, le problème n'est pas présent ; exemple :
http://album.widjoo.com/demo/1-188.jpg.html

J'aimerais donc savoir d'où vient le problème sur ce thème graphique en particulier ... j'ai conscience que ce n'est pas forcément simple de fouiller dans un code source mais j'espère que vous pourrez m'aider. Voici la partie qui semble "déconner" ; mais comme je disais, c'est sur un thème en particulier et pas les autres ... :


#page_file {
	width: 690px;
	background-color: #000000;
	color: #ffffff;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	padding: 5px
}

#page_file h3 {
	color: #ffffff;
	margin: 0 1% 0.5% 1%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.8em;
	font-style: italic;
	font-weight: normal;
	text-align: right
}

#page_file h4.h4_file {
	width: 50%;
	background-color: #000000;
	color: #ffffff;
	font-size: 1.2em;
	margin: 15px 0 5px -5px;
	padding: 2px 5px;
}

#page_file dl {
	border-left: 3px solid #009900;
	margin: 5px 0 5px 40px;
	padding: 10px 5px
}

#page_file dl dt {
	margin-right: 5px;
	float: left;
	font-weight: bold
}

#page_file dl dt a {
	color: #ffffff;
	font-weight: bold;
	text-decoration: none
}

#page_file dl dt a:hover {
	text-decoration: underline
}

#page_file dl dd {
	margin-bottom: 2px
}

#page_file ul {
	text-align: center
}

#page_file ul li {
	margin: 0 10px 10px 10px;
	display: inline;
	font-weight: bold
}

#page_file ul li a {
	background-color: #ffffff;
	color: #000000;
	border-top: 1px solid #009900;
	border-right: 3px solid #009900;
	border-bottom: 1px solid #009900;
	border-left: 3px solid #009900;
	padding: 2px 5px;
	text-decoration: none
}

#page_file ul li a:hover {
	background-color: #009900
}

#page_file ul li.ul_li_left {
	float: left
}

#page_file ul li.ul_li_right {
	float: right
}

#page_file p {
	clear: both;
	text-align: center
}

#page_file p#description {
	clear: none;
	text-align: justify
}

#page_file p.links {
	float: left;
	clear: none;
	font-size: 0.85em
}

#page_file p.links a {
	color: #ffffff
}

#page_file p img {
	border: 1px solid #ffffff;
	padding: 1px
}

#page_file_bottom {
	width: 95%;
	background-color: #ffffff;
	color: #000000;
	margin: 10px auto 0 auto;
	padding: 5px
}

#page_file #page_file_bottom form fieldset legend, #page_file #page_file_bottom form fieldset p {
	color: #ffffff
}

#page_file_bottom p {
	text-align: justify
}

#page_file_bottom a {
	color: #000000
}

#page_file_bottom form fieldset p.input_submit {
	text-align: center
}

#page_file_bottom p.file_thumb {
	margin: 0 0 10px 10px;
	float: right
}

#page_file_bottom p.file_thumb img {
	border: 1px solid #000000;
	padding: 1px
}


Merci d'avance,
Gaylord.P.
tu ne precises pas sur quel navigateur cela pose probleme, en effet sur firefox ça a l'air correct par contre ie6...
Salut,

Je pense que c'est un problème de sorti de float, ton clear: both sur ton <p> fait passer le bloc sous le bloc de gauche (div#menu) au lieu de venir se poser là où il faut.
Essaye d'utiliser la propriété overflow: auto pour sortir de ton float, suivant le contexte ça devrait marcher.
#page_file p {
	overflow: auto;
	text-align: center
}


Bonne continuation.
Hello,

Il s'agit du problème suivant:
Float, clear et contextes de formatage.

La propriété clear prendra en compte tous les éléments flottants placés avant l'élément clearé dans le code HTML, à moins qu'elle ne soit restreinte par un contexte de formatage.

Tu pourrais appliquer un contexte de formatage à div#page_file avec la propriété overflow et les valeurs "auto", "scroll" ou "hidden". Mais ici, cela rognerait l'image ou ferait apparaitre une barre de défilement horizontale. Pas sûr que l'effet soit heureux...

Si tu ne peux pas utiliser de contexte de formatage via la propriété overflow, il faudra s'arranger pour ne pas utiliser la propriété clear (ou alors faire uniquement un clear: right, vu que le menu est en float: left).

À vue de nez, on peut virer le clear: left appliqué à div#page_file p.
Sujet clos
Aller à