probleme de mise en page [Résolu]

[mely79]

Bonjour a tous!

j'ai besoin de votre aide sur un code de news. J'essai de mettre la news en forme avec du css et des div mais comme je suis novice je bute sur un problème d'affichage.

Quand j'entre le code sans mise en page, j'ai mes 3 news qui s'affiche correctement, quand j'ajoute la mise en page je n'ai plus 1 news qui s'affiche

j'aurais donc besoin d'un petit coup de pouce pour m'aider a trouver mon probleme

merci bcp

voici le code

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
//on creer la requete sql pour les news
$sql='SELECT * FROM news ORDER BY date DESC LIMIT 3';
 
//on envoi la requete
$req=mysql_query($sql)or die('Erreur SQL <br/> '.$sql.' <br/> '.mysql_error());
 
//on creer la boucle
while($data=mysql_fetch_assoc($req)){
 
//le code sans mise en page mis en commentaire
//	echo "<div id=\"article\"> <a href=\"index1.php?page=voir&amp;id={$data["id"]}\">{$data["titre"]}</a><br/>";
//	echo "".date("j/n/y G:i",strtotime($data["date"]))."<br/>";	
//	echo "".substr($data["contenu"],0,200)."...</div>";
 
 
//le code avec la mise en page 
echo '
 
<div id="Tableau_article">
	<div id="arttitre">
    <a href="index1.php?page=voir&amp;id='.($data['id']).'">'.($data['titre']).'</a><br/>
	</div>
 
 
	<div id="artdate">
    '.date('j/n/y G:i',strtotime($data['date'])).'<br/>	 
	</div>
 
 
	<div id="image-article">
		<img src="images/image_article.gif" width="135" height="120" >
	</div>
	<div id="artcontenu">
    '.substr($data['contenu'],0,200).'...
	</div>
</div>
 
';
 
}

[mely79]

en chipotant un peu je me rend compte que ça vient surement de mon code css, j'ai l'impression qu'il superpose les 3 requete au lieu de les mettre en boucle....

voici le code css

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
 
#Tableau_article {
 
	left:0px;
	top:0px;
	width:396px;
	height:161px;
}
 
#arttitre {
	position:absolute;
	left:0px;
	top:0px;
	width:396px;
	height:23px;
	background-color:#FFFFFF;
}
 
#artdate {
	position:absolute;
	left:0px;
	top:23px;
	width:396px;
	height:18px;
	background-color:#FFFFFF;
}
 
#image-article {
	position:absolute;
	left:0px;
	top:41px;
	width:135px;
	height:120px;
	background-color:#FFFFFF;
}
 
#artcontenu {
	position:absolute;
	left:135px;
	top:41px;
	width:261px;
	height:120px;
	background-color:#FFFFFF;
}

[SuperKnacky]

Bonjour,

J'ai regardé et cela provient du ton css pour moi. En effet, tu mets leur position en absolute, ce qui fait sortir les éléments pointés du flux. Google saura mieux t'expliquer que moi à ce niveau la.

Tu peux regarder sur ton nav en faisant afficher la source (clique droit => afficher la source sur ladite page) tu pourras apercevoir tes informations provenant de ta base de donnée.

Pour mettre en forme tes informations, je pense qu'il serait judicieux d'appliquer les effets généraux à Tableau_article, d'attribuer à arttitre, artdate, artcontenu les effets spécifiques.

En espérant ne pas avoir dit de bêtise.

[Torgar]

Envoyé par DjPwneD

Bonjour,

J'ai regardé et cela provient du ton css pour moi. En effet, tu mets leur position en absolute, ce qui fait sortir les éléments pointés du flux. Google saura mieux t'expliquer que moi à ce niveau la.

Tu peux regarder sur ton nav en faisant afficher la source (clique droit => afficher la source sur ladite page) tu pourras apercevoir tes informations provenant de ta base de donnée.

Pour mettre en forme tes informations, je pense qu'il serait judicieux d'appliquer les effets généraux à Tableau_article, d'attribuer à arttitre, artdate, artcontenu les effets spécifiques.

En espérant ne pas avoir dit de bêtise.

Je complèterai en ajoutant qu'il n'est pas conseillé d'utiliser des attributs html id="" comme tu le fait ici. Du moins si tu tiens compte de la validité de tes pages suivant les normes en vigueurs.

Mets plutôt des attributs class="" pour ta mise en forme. (cf. Exemple ci-dessous).

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Exemple</title>
    <style type="text/css">
        .Tableau_article {
            width:396px;
        }
 
        .arttitre {
            width:396px;
            height:23px;
            background-color:#FFFFFF;
        }
 
        .artdate {
            width:396px;
            height:18px;
            background-color:#FFFFFF;
        }
 
        .image-article {
            width:135px;
            height:120px;
            background-color:#FFFFFF;
        }
 
        .artcontenu {
            width:261px;
            height:120px;
            background-color:#FFFFFF;
        }
    </style>
</head>
<body>
<?php 
$link = mysql_connect('localhost', 'root', '');
mysql_select_db('temp', $link);
 
//on creer la requete sql pour les news
$sql='SELECT * FROM articles LIMIT 3';
 
//on envoi la requete
$req=mysql_query($sql)or die('Erreur SQL <br/> '.$sql.' <br/> '.mysql_error());
 
//on creer la boucle
while($data=mysql_fetch_assoc($req)){
    //le code sans mise en page mis en commentaire
    //    echo "<div id=\"article\"> <a href=\"index1.php?page=voir&amp;id={$data["id"]}\">{$data["titre"]}</a><br/>";
    //    echo "".date("j/n/y G:i",strtotime($data["date"]))."<br/>";    
    //    echo "".substr($data["contenu"],0,200)."...</div>";
 
    //le code avec la mise en page 
    echo '
    <div class="Tableau_article">
        <div class="arttitre"><a href="index1.php?page=voir&amp;id='.($data['id_article']).'">'.($data['titre']).'</a><br/></div>
        <div class="artdate">'.date('j/n/y G:i',strtotime($data['datec'])).'<br/></div>
        <div class="image-article"><img src="images/image_article.gif" width="135" height="120" alt="" /></div>
        <div class="artcontenu">'.substr($data["contenu"],0,200).'...</div>
    </div>';
 
}
?>
</body>
</html>

Sinon, oui, il faut que tu revois ta mise en page de tes articles.

[mely79]

merci beaucoup pour votre aide

je vais continuer de chercher, vous m'avez donner de bonne piste.
J'ai effectivement changer les "id" en "class" mais le probleme reste le même

si je retire les absolue, j'ai mes 3 news, mais elle s'afficher n'importe comment

je connais maintenant la source du probleme, je vais continuer de chercher, si non je retourner aux tableaux traditionnelles

merci

[Torgar]

C'est à cause des valeurs en left et top du css.

Tu souhaites quoi comme mise en page exactement ?

[mely79]

une image vos milles mots



Uploaded with ImageShack.us

[Torgar]

Code :

1
2
3
4
5
6
7
8
 
<div class="article">
    <div class="titre">Titre</div>
    <div class="date">Date</div>
    <div class="image"><img src="" alt="" /></div>
    <div class="contenu">lorem ipsum dolore sit amet</div>
    <div class="clear"></div>
</div>

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.article {
    width: 396px;
}
 
.titre {
    /* ta mise en forme sur le texte */
}
 
.date {
    /* ta mise en forme sur le texte */
}
 
.image {
    width: 25%; /* à adapter */
    float: left;
}
 
.contenu {
    width: 75%; /* à adapter */
    float: left;
}
 
.clear {
    clear: both; /* supprime le positionne css "float : left" sinon le reste des bloc se mettra à droite du dernier */
}

[mely79]

ohhhh!!! j'en demandais pas temps!! MERCI !!!

ça fonctionne nickel !!

je vais laisser tomber toshop qui génère le css seule et apprendre

merci bcp bcp bcp bcp

j'avais commencer a regarder pour faire a la main comme une grande, mais j'étais loin de se résultat

[Torgar]

Je t'en prie =)

Si c'est bon, penses à mettre le sujet en Résolu via le bouton prévu à cet effet, merci ^^