Mise ne page : un div qui se ferme tout seul

pourquoi ?

21 octobre 2006 à 15:08:55

Bonjour,
J'ai un ptit problème de mise en page...
J'ai un <div> qui, pour je ne sais quel raison, se "ferme"...
Comme ça ne vient apparament, pas du code php qui créé la page, je vous donne le code source une fois celui-ci généré...

<!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="en" lang="en">
<head>
<title>Radios Libres</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<meta content="radio, radios, radios libres, radio libre, années 80, 80, 80', autocollants, autocollant, antenne, emission" name="keywords" />
<meta name="description" content="Un site sur les radios libres des années 80" />
<link rel="stylesheet" type="text/css" href="main.css" />

</head>

<body>

<div class="container">

<div class="header">

</div>

<div class="left">

<div class="leftcontent">
<h2>Menu</h2>
<p><a href="#">Home</a></p>

<p><a href="#">Articles</a></p>
<p><a href="#">News</a></p>
<p><a href="#">Blog</a></p>
<p><a href="#">Forums</a></p>
<p><a href="#">Contact</a></p>

</div>

<div class="leftcontent">

<h2>Ex. autocollant</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>

<div class="leftcontent leftlinks">
<h2>Links</h2>
<p><a href="http://freew.bhxhost.com/">FreeW</a></p>

<p><a href="http://www.sxc.hu/">stock.xchng</a></p>
<p><a href="http://www.google.com/">Google</a></p>
</div>

</div>

<div class="content">

<h1>Accueil</h1>
<h2>Bienvenue</h2>

<p>Vous recherchez la radio de votre jeunesse, vous voulez vous renseigner sur l'époque des radios libres,
vous voulez comparer vos autocollants de radio avec notre collection en ligne ?? Et bien ce site est fait pour vous :
Bienvenue dans la seul autocollanthèque recensant autant de radio !</p>

<h2>Les radios</h2>
<p><img src="multi.jpg" alt="image avec pleins de radios dessus"/></p>

<h2>Gros plan sur l'autocollant</h2><a name="gros_plan"></a>
<h1>tsf</h1>
<p class="center"><img src="photos/tsf.jpg" alt="tsf" title="tsf"/></p>
<h2>Faîtes votre choix !</h2> 

<div class="liste_image"><a href="?image=1.jpg#gros_plan"><img src="photos/miniatures/1.jpg" alt="1" title="1" /><br /></a>1</div><div class="liste_image"><a href="?image=95-2fm.jpg#gros_plan"><img src="photos/miniatures/95-2fm.jpg" alt="95-2fm" title="95-2fm" /><br /></a>95-2fm</div>

</div>

<div class="footer">

<p><a href="#">Accueil</a> |
Radios Libres © 2006 WEBMASTER : Arts and Design by Cesar.<br />
<a href="http://validator.w3.org/check/referer">XHTML 1.0 Strict</a></p>

</div>

</div>

</body>
</html>

Une partie de mon css, au cas ou :

.content {
clear: right;
text-align: left;
margin: 0.5em 0.5em 0 14.2em;
padding: 0.3em 1ex 0.3em 1ex;
border: 1px solid #C4C4C4;
}

.content h2 {
padding: 0 0 0 1em;
}

.footer {
font-size: 75%;
margin: 0.1em;
padding: 0.3em;
text-align: center;
clear: both;
}

.footer p {
border: 1px solid #C4C4C4;
padding: 0.5em;
margin: 0.3em;
}

a img
{
padding: 1px;
border: 1px dotted gray;
}

.liste_image
{
width: 160px;
height: 170px;
float: left;
text-align: center;
font-size: 12px;
}

Image...

Remarque, je me suis inspiré du tuto php créé un diaporama avec glob()...

Merci d'avance de votre aide...

atly

21 octobre 2006 à 15:41:55

C'est tout à fait normal, puisque tes images sont flottantes et donc sorties du flux.

De toute manière, il n'y a pas vraiment d'interêt à faire flotter un élément en-ligne telles que tes images. Tu peux simplement leur appliquer des marges et un text-align:right à div.liste_image.

Et si tu tiens vraiment aux flottants, applique au bloc conteneur un overflow:hidden; ainsi que pour Internet Explorer un height:1%;.

Tchaw.

@rtzér0

21 octobre 2006 à 17:37:46

Merci bcp pour ta reponse !
j'ai utilisé ta technique avec overflow, sa marche, seulement je n'arrive pas maintenant à replacer mon div "content" :
Image utilisateur

Vous l'aurez compris, il est tt décallé...
j'en appelle à votre bon coeur, puisque je suis une vraie bouse en css...
(je vous le met en entier...)

body {
margin: 0;
padding: 0;
padding-top: 20px;
font-family: Verdana, Arial, sans-serif;
font-size: 80%;
color: #545454;
background-color: #648be0;
text-align: center;

}

p {
margin: 0.1em 0 0.1em 0;
}

h1 {
margin: 0;
padding: 0;
padding-left: 42px;
font-size: 300%;
font-weight: normal;
color: #4169E1;
background-image: url(micro2.jpg);
background-repeat: no-repeat;
}

h2 {
margin: 0.1em;
padding: 0;
background-color: #648be0;
color: White;
font-size: 100%;
font-weight: normal;
}

div {
margin: 0;
padding: 0;
display: block;
}

a:link {
color: #4169E1;
text-decoration: underline;
}

a:hover {
color: #E16840;
text-decoration: none;
}

a:active {
color: #4169E1;
text-decoration: underline;
}

a:visited {
color: #B840E1;
text-decoration: underline;
}

.container {
background-color: #FFFFFF;
margin: 0 auto 0 auto;
padding:0;
width: 740px;
}

.header {
padding: 2em;
margin: 0;
text-align: left;
background-image: url(header.jpg);
background-repeat: no-repeat;
background-position: center;
height: 78px;
}

.header p {
text-indent: 8em;
color: #3B4471;
}

ul.navigation {
list-style-type: none;
float: left;
display: block;
width: 740px;
line-height: 0.1em;
clear: both;
margin: 0;
padding: 0;
background-color: White;
border-bottom: 1px solid #C4C4C4;
}

.left {
float: left;
clear: both;
width: 14em;
margin: 0 0 0 0.1em;
padding: 0;
}

.leftcontent {
margin: 0.5em;
padding: 0.3em;
border: 1px solid #C4C4C4;
text-align: left;
}

.leftcontent p {
padding-left: 1em;
}

.leftcontent p a:link, a:visited{
color: #545454;
text-decoration: none

}

.leftcontent p a:hover{
color: #72C32B;
}

.leftcontent p a:active {
color: #545454;
text-decoration: none
}

.left h2 {
text-align: left;
padding: 0 0 0 1em;
}

.leftlinks a {
display: block;
}

.content {
width: 560px;
height : 1%;
overflow:hidden;
clear: right;
text-align: left;
margin: 0.5em 0.5em 0 14.2em;
padding: 0.3em 1ex 0.3em 1ex;
border: 1px solid #C4C4C4;
}

.content h2 {
padding: 0 0 0 1em;
}

.footer {
font-size: 75%;
margin: 0.1em;
padding: 0.3em;
text-align: center;
clear: both;
}

.footer p {
border: 1px solid #C4C4C4;
padding: 0.5em;
margin: 0.3em;
}

a img
{
padding: 1px;
border: 1px dotted gray;
}

.liste_image
{
width: 160px;
height: 170px;
float : left;
text-align: right;
font-size: 12px;
}

Merci d'avance....

atly

22 octobre 2006 à 18:27:55

A vue d'oeil : ta mise en page semble mal construite, on y voit des sections inutiles, des marges et largeurs en fonction de la taille du texte, du code un p eu partout.

Tu devrais revoir les dimensions et les marges de tes éléments (le menu et le contenu en particulier), et leur attribuer une valeur fixe, et non dépendante d'une valeur que le visiteur peut modifier à chaque moment : cela peut casser simplement ton design, niveau esthétique et fonctionnel (tes flottants risquent de ne plus être juxtaposés, mais l'un en dessous de l'autre - ce qui est actuellement le cas d'ailleurs sous IE - ou simplement avoir des dimensions inappropriées).

Le fait d'avoir rajouté une règle overflow:hidden; n'est pas à l'origine de ton problème, mais l'a simplement fait ressortir car il bénéficiait d'une certaine souplesse du rendu.

En bref : revois ta mise en page, les largeurs/marges de ton menu et les marges de ton contenu.

Ah et la règle height:1%; est un trick pour Internet Explorer, puisqu'il est connu qu'il englobe les flottants dans leurs conteneurs dès lors que ceux-ci sont dimensionnés. Mais sous les autres navigateurs le height ne fonctionnera pas comme le min-height voulu.
Fais donc en sorte que cette propriété ne soit lisible que par IE.

Tchaw.

der_shadow

23 octobre 2006 à 0:31:26

Salut,
Enlève la propriété margin de ta classe .content et tu verras une différence.

Tu peux également appliquer la propriété float : right à ta classe .content en diminuant la largeur, parce que là c'est trop large et en enlevant tes propriétés clear