28172 sujets

CSS et mise en forme, CSS3

Problème de positionnement css

Bonjour

Désolé mais j'ai vraiment tout essayé normalement j'arrive à me débrouiller tout seul mais sur ce code je bloque et je voudrais que ce soit propre sans trop de balises.

je vous ai mis le rendu souhaité en pièce jointe
merci pour votre aide


<div class="line">
<img src="1.jpg" />
<h2>tire 1</h2>
<ul>
<li>texte</li>
<li>texte</li>
<li>texte</li>
<li>texte</li>
</ul>
</div>

<div class="line">
<img src="2.jpg" />
<h2>Titre 2</h2>
<ul>
<li>texte</li>
<li>texte</li>
<li>texte</li>
<li>texte</li>
<li>texte</li>
</ul>
</div>

<div class="line">
<img src="3.jpg" />
<h2>Titre 3</h2>
<ul>
<li>texte</li>
<li>texte</li>
<li>texte</li>
</ul>
</div>



.line {
clear: both;
}
#content img {
float: left;
margin-right: 20px;
}
#content h2 {
float: left;
margin: 0;
}
#content ul {
float: left;
}
upload/1933-alsatest.gif
Salut,

Pour qu'il y ait une solution à ton problème, encore faut-il qu'il y ait un problème clairement exposé, ce qui n'est pas le cas de ton sujet. Il serait en effet bon que tu mettes toutes les chances de ton côté pour que nous comprenions ton problème, et que nous puissions t'y apporter une ou plusieurs solutions.

Dans l'ordre de priorité, tu peux nous fournir :
1. un descriptif très précis de ton problème, impératif pour focaliser notre recherche dans le bons sens.
2. un lien vers une page en ligne, qui permet de constater ce problème par nous même, ne nécessitant parfois pas d'autres informations.
3. l'intégralité du code html et css produit dans le navigateur (et pas seulement des extraits, car le problème se situe parfois ailleurs dans le code).
4. des schémas ou captures d'écran.

La rapidité d'obtention de la réponse dépendra de la qualité les informations que tu nous fourniras.

Bonne chance à toi. Smiley cligne
bonjour
en espérant que cela te convienne désormais :

1. le positionnement ne veut pas se faire correctement
la liste vient se greffer à gauche du titre h2 et non juste en dessous comme je le voudrais
et impossible d'espacer deux conteneur div (class line)avec margin-top uniquement padding-top fonctionne
2. je n'ai rien en ligne pour le moment mais ci-joint le code complet
3. voir code ci dessous
4. capture du rendu dans le premier post.


<!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=UTF-8" />
<STYLE type="text/css">
body {
font-size: 9px;
}
.line {
clear: both;
width: 100%;
margin-top: 10px;/*ne fonctionne pas*/
}
img {
float: left;
margin-right: 20px;
}
h2 {
float: left;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 0;
float: left;
margin-top: 10px; /*marge en dessous de H2*/
}
</STYLE>
<title>TEST</title>
</head>
<body>

<div class="line">
<img src="1.jpg" />
<h2>TITRE H2</h2>
<ul>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
</ul>
</div>

<div class="line">
<img src="1.jpg" />
<h2>TITRE H2</h2>
<ul>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
</ul>
</div>

<div class="line">
<img src="1.jpg" />
<h2>TITRE H2</h2>
<ul>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
<li>LISTE</li>
</ul>
</div>

</body>
</html>
Bonjour, j'ai modifié un peu ton code html et css.


<div class="line"> 
	<img src="http://lesoiseauxfamiliersdesjardinsetparcsdewallonie.blogspirit.com/images/medium_pinson_des_arbres.jpg" alt="pinson" height="271" width="360" />
    <div>
        <h2>TITRE H2</h2>
        <ul>
            <li>LISTE</li>
            <li>LISTE</li>
            <li>LISTE</li>
            <li>LISTE</li>
            <li>LISTE</li>
        </ul>
    </div>
</div>




* {
	padding:0;
	margin:0;
}
body {
	font-size: 9px;
}
.line {
	clear: both;
	width: 100%;
	margin-top: 10px;
	float:left;
}

.line div {
	float:left;
}

img {
	float: left;
	margin-right: 20px;
	width:150px;
	height:150px;
}
ul {
	margin-top: 10px; /*marge en dessous de H2*/
}


C'est comme ça que je le ferais. C'est normal que ça fonctionnait pas puisque tu utilisais des éléments flottant sur les 3 items ( img, h2, liste ). J'ai rajouté un <div> pour que celui-ci float avec ton image et que dans ce div, ton h2 et ta liste agisse sans flottement, dans leur comportement naturel ( des blocs ).

J'espère que ça t'aidera.
Merci

a vrai dire je m'obstinais à vouloir le faire sans rajouter de bloc div pour h2 et ul.
Donc à priori ce n'est pas possible.

Par contre ce que je ne comprends pas :
pourquoi doit-on mettre float: left pour la class line étant donné que ces blocs sont les uns aux dessous des autres
sans ce float: left rien ne change sauf margin-top qui ne fonctionne plus
Si vous pouviez m'expliquer ce serait sympa

par contre j'ai un bug si le contenu dans .line div est trop long, il repart à la ligne
Pour le float:left, si tu veux mieux comprendre tu peux mettre des bordures sur ton div.line avec et sans float.

Il me semble avoir vu un article alsacréations avec ce même genre de question mais malgré que Heyoan vante la recherche, je n'ai pas réussi à retrouver cet article qui explique pourquoi il faut "clearer" ses conteneurs float.
yes je venais de comprendre en faisant border:1px solid; Smiley cligne
pour mon soucis de retour à la ligne j'ai ajouté l'attribut width sur .line div {

sérieusement je fais du css depuis pas mal d'années déjà
et franchement il y a des trucs qui restent encore flou chez moi niveau positionnement Smiley smile

Merci pour le coup de main

topic résolu (je trouve pas l'option pour indiquer le post comme résolu)
Sorano a écrit :
je n'ai pas réussi à retrouver cet article qui explique pourquoi il faut "clearer" ses conteneurs float.
Euh... ben il ne faut pas spécialement les clearer. Smiley rolleyes

Peut-être que tu veux parler du dépassement des flottants ?

Sinon je serais plutôt parti sur ça : 
.line {
    overflow: hidden;
	margin: 5px 0;
}  
 
.line img, .line div {
	float: left; 
}  
 
.line img {
	margin-right: 5px;
}  
 
.line ul {
	margin: 0;
	padding: 0 0 0 20px;
}

@jch > voir le Guide de survie du positionnement CSS.

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
Modifié par Heyoan (12 Feb 2010 - 16:10)
Sujet clos
Aller à