Texte qui dépasse une div + footer décalé

**idate** · 15/02/2013, 00h03

Bonjour,

Je demande votre aide pour un problème de mise en page.

Je dois faire un site web pour un serveur, j'ai donc pas mal de catégorie à créer et à coordonner mais ce n'est pas ce qui me donne le plus de mal apparement ! ^^

Premièrement, mon index a tout ce qu'il y a de plus banal. Je fais un include pour que toutes mes pages aient le même design.

Cependant, j'ai un problème avec ma page de news. J'ai codé un système de news basique avec php et mysql, mais je rencontre des problèmes de mise en page.

http://www.hostingpics.net/viewer.php?id=774686site.jpg

Comme vous pouvez le voir , chaque news est écrite dans une div que je design à l'aide de mon fichier .css cependant, mon texte sort de cette div et je ne trouve pas d'où ça vient.

Voici mon code de news et le css associé:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
// on se connecte à notre base
$base = mysql_connect ('localhost', 'root', 'root');
mysql_select_db('aumtuto', $base);
 
// lancement de la requête. on sélectionne les news que l'on va ordonner suivant l'ordre "inverse" des dates (de la plus récente à la plus vieille : DESC) tout en ne sélectionnant que le nombre voulu de news à afficher (LIMIT)
$sql = 'SELECT * FROM aumtuto_news ORDER BY date DESC;';
 
// on lance la requête (mysql_query) et on impose un message d'erreur si la requête ne se passe pas bien (or die)
$req = mysql_query($sql) or die('Erreur SQL !<br />'.$sql.'<br />'.mysql_error());
 
// on compte le nombre de news stockées dans la base de données
$nb_news = mysql_num_rows($req);
 
if ($nb_news == 0) {
	echo 'Aucune news enregistrée.';
}
else {
	// si on a au moins une news, on l'affiche
	while ($data = mysql_fetch_array($req)) {
 
		// on décompose la date
		sscanf($data['date'], "%4s-%2s-%2s %2s:%2s:%2s", $an, $mois, $jour, $heure, $min, $sec);
 
		$date = $data['date'];
		$texte = $data['texte'];
		$auteur = $data['auteur'];
		$texte = strtr($texte,array('''=>'\''));
		$texte = nl2br($texte);
		// on affiche les résultats
 echo "<div id=\"news\">";
		echo "<div id=\"news_titre\">";
		echo "<div class=\"newstitre\">".$data['titre']."</div></div>
				<div class=\"news_contenue\">";
 
		echo $texte;
		echo "</div>
				<div class=\"news_posteur\">Posté le$datepar$auteur</div>
			</div>
			<div id=\"news_foot\"></div>
			<br />";
	}
}
// on libère l'espace mémoire alloué à cette requête
mysql_free_result ($req);
 
// on ferme la connexion à la base de données
mysql_close ();
?>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
/* News */
 
#News {
		width: 450px;
		min-height: 200px;
		float: left;
	}
 
#news {
	background-image:url(images/design/news.png);
	width: 509px;
	min-height: 20px;
	}
 
#news_titre {
	background-image:url(images/design/news_top.png);
	width: 501px;
	height: 51px;
	margin-left: 8px;
	}
 
.newstitre {
	padding-left: 45px;
	padding-top: 8px;
	font-weight: bold;
	color: #FFFFFF;
	font-size: 28px;
	}
 
.news_contenue{
	width: 450px;
	margin-left: 30px;
	font-size: 18px;
 
}
 
.news_posteur {
	margin-left: 10px;
	font-style: italic ;
	float: right;
	margin-right: 20px;
	}
 
#news_foot {
	background-image:url(images/design/news_foot.png);
	width: 508px;
	height: 35px;
	margin-left: 4px;
	}

e plus, j'ai du mal à positionner mon footer, malgré beaucoup de modifications, je vous joins le code css. Sachant que mon footer est dans ma div "global".

Illustration:

http://www.hostingpics.net/viewer.ph...sitefooter.jpg

Code css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
/*Footer*/
footer {
	background-image:url(images/design/footer.png);
	width:925px;
	height:223px;
	clear: both;
	margin:auto;
	padding-left: 6px;
}

Si quelqu'un pouvait m'éclairer sur ces différents problèmes, je lui en serais très reconnaissant.

Merci d'avance.

Peace

**Bovino** · 15/02/2013, 08h16

Pourquoi as-tu un sélecteur #News et un #news ?

A part ça, tu définis tes div #news dans une boucle, or un id doit être unique dans la page.

**idate** · 15/02/2013, 12h32

En gros le selecteur #News est équivalent à un selecteur #contenu_middle. C'est celui qui encadre mon include.

Je suis d'accord avec l'unicité des div, cependant, pour designer mes news (qui ne sont pas uniques, elles) qui proviennent de ma base de données, à chaque parcours de mysql_fetch_array je dois bien les délimiter en termes de design.

Donc y a t-il une autre solution?

**Torgar** · 15/02/2013, 12h40

Pourquoi ne pas passer par une classe .news ?

Tes news auront bien la même présentation non ?

De plus, ta div #news n'est jamais fermée.

**idate** · 15/02/2013, 13h20

En passant par une classe .news j'ai toujours le même problème.

Voici une petite amélioration, mais je ne comprend toujours pas pourquoi mon texte sort de ma div #news_contenu.

http://www.hostingpics.net/viewer.ph...45785site2.jpg

Ma div #news est fermée juste avant la div #news_foot, non?

**Torgar** · 15/02/2013, 14h25

Au temps pour moi, mal compté.

Tu positionnes tes #news en float du coup ça sort du flux et l'élément parent ne prend pas les dimensions de ses enfants.

**idate** · 15/02/2013, 21h22

Je ne comprend pas trop ta réponse.

Ce que je veux c'est que mon texte contenu dans ma div #news_contenu. Donc que l'enfant (mon texte) prenne les dimensions du parent (ma div). Et que le parent (#news) englobe les différentes div (enfants) que contient une news.

Je suis peut être à côté de la plaque mais si tu peux être un tout petit peu plus concret, j'en serais ravi!

**Dr.Who** · 16/02/2013, 06h15

Voila du concret :

Le php :

- autant généré de l'HTML5 tout de suite, faut pas utiliser pleins de "div" partout. varier les éléments ça permet aussi de raccourcir et génériser les CSS et d'éviter des mettre pleins de class, id, etc, ça améliore aussi la lécture du code et ça joue sur le référencement naturel.

ici j'ai choisi Article comme conteneur de news, H2 pour le titre de la news (devrait être h3 ou h4 plutôt), Liste de définition -> Définition pour le texte de la news et terme pour la date et l'auteur.
le tout enveloppé dans un div "news".

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<?php
// on se connecte à notre base
mysql_connect('localhost', 'root', 'root');
mysql_select_db('aumtuto');
 
// lancement de la requête. on sélectionne les news que l'on va ordonner suivant l'ordre 
// "inverse" des dates (de la plus récente à la plus vieille : DESC) tout en ne sélectionnant 
// que le nombre voulu de news à afficher (LIMIT)
$q = "SELECT * FROM aumtuto_news ORDER BY date DESC";
 
// on lance la requête (mysql_query) et on impose un message d'erreur 
// si la requête ne se passe pas bien (or die)
$r = mysql_query($q);
 
echo '<div id="news">';
 
if(!$r)
{
  echo '<p class="error">Une erreur est survenue pendant la requette</p>';
} 
else 
{
  // on compte le nombre de news stockées dans la base de données
  $count = mysql_num_rows($r);
 
  if ($count == 0) 
  {
    echo '<p class="noresult">Aucune news enregistrée.</p>';
  }
  else 
  {
    $i = 0;
 
    while($row = mysql_fetch_array($req)) {
      $i++;
 
      // on décompose la date
      // ??! -> sscanf($row['date'], "%4s-%2s-%2s %2s:%2s:%2s", $an, $mois, $jour, $heure, $min, $sec);
 
      // on affiche les résultats
      echo '<article id="news_', $i, '">',
             '<h2>', $row['titre'], '</h2>',
             '<dl>',
               '<dd>',   
                 '<p>', nl2br(strtr($row['texte'], array(''=>"'"))),'</p>',
               '</dd>',
               '<dt>',
                 'Post&eacute; le <span class="date">', $row['date'], '</span> par <span class="author">', $row['auteur'],'</span>',
               '</dt>',
             '</dl>',
           '</article>';
    }
  }
  // on libère l'espace mémoire alloué à cette requête
  mysql_free_result ($req);
}
 
echo '</div>'; // end:div id[news]
 
// on ferme la connexion à la base de données
mysql_close ();
?>

le CSS, la encore, autant faire du CSS 3.0, depuis le temps qu'on l'attend.
faut arrêter avec les vieilles technique pour faire des "bordures jolies". Border-radius, de discret text-shadow et hop.

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
/* COLORS */
#news *{
  color:#444;
}
 
#news article, #news h2, #news dt, #news dt span, #news p.error, #news p.noresult{
  color:#fff;
}
 
#news p.error{
  background-color:#a25;
  border-color:#a25;
}
 
#news p.noresult{
  background-color:#25a;
  border-color:#25a;
}
 
#news article, #news h2, #news dt, #news dt span{
  background-color:#444;
  border-color:#444;
}
 
#news dd{
  background-color:#fff;
}
 
 
/* Reset & global settings for news */
#news *{
  font-family:arial;
  font-size:10pt;
  margin:0;
  padding:0;
}
 
/* Conteneur principal */
#news {
  display:block;
  width:540px;
  min-height:320px;
}
 
/* Messages d'erreurs */
#news p.error{
  display:block;
  border-width:3px; 
  border-style:solid; 
  font-style:italic;
  margin:8px 1px;
  margin-right:-6px;
  padding-left:8px;
  border-radius:8px;
}
 
/* Pas de resultat */
#news p.noresult{
  display:block;
  border-width:3px;
  border-style:solid;  
  font-style:italic;
  margin:8px 1px;
  margin-right:-6px;
  padding-left:8px;
  border-radius:8px;
}
 
#news article{
  display:block;
  width:540px;
  border-width:3px;
  border-style:solid;  
  margin:4px 0;
  border-radius:8px;
}
 
#news h2{
  font-family:arial;
  font-size:14pt;
  display:table-caption;
  font-weight:bold;
  padding:0 8px;
  line-height:29px;
  height:32px;
  text-shadow:0px 1px 1px #000;
}
 
#news dl{
  display:table-row-group;
  margin:4px;
  min-height:72px;
}
 
#news dd{
  display:inline-block;
  min-height:24px;
  padding:8px;
  border-radius:6px;
}
 
#news dd p{
}
 
#news dt,#news dt span{
  font-size:8pt;
  height:16px;
  line-height:19px;
}
#news dt{
  display:block;
  text-align:right;
  bottom:0;
  padding:0 8px;
}
 
#news dt span{
}
 
#news dt span.date{
  font-style:italic;
}
 
#news dt span.author{
  font-style:italic;
}

L'HTML de test :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
<head>
<link href="newsTest.css" type="text/css" rel="stylesheet">
</head>
<body>
  <div id="news">
 
    <p class="error">Test message d'erreur</p>
 
    <p class="noresult">Test message pas de resultat</p>
 
    <article id="news_1">
      <h2>News test</h2>
      <dl>
        <dd>
<p>
<b>Dalek :</b> Exterminer ! Exterminer ! Exterminer ! Tu es un ennemi des Daleks ! Tu dois &ecirc;tre d&eacute;truit !<br/>
<br/>
<i>Le Dalek essaie de le tuer, mais rien ne se passe.</i><br/>
<br/>
<b>Le Docteur :</b> &Ccedil;a ne marche pas ! <i>(Il rit)</i>. Fantastique. Fantastique ! Regarde toi ! La plus grande poubelle de l'univers !<br/>
</p>
        </dd>
        <dt>
          Post&eacute; le <span class="date">2013-02-15 05:35</span> par <span class="author">Dr.Who</span>
        </dt>
      </dl>
    </article>
 
    <article id="news_2">
      <h2>News test</h2>
      <dl>
        <dd>
<p>
<b>Dalek :</b> Exterminer ! Exterminer ! Exterminer ! Tu es un ennemi des Daleks ! Tu dois &ecirc;tre d&eacute;truit !<br/>
<br/>
<i>Le Dalek essaie de le tuer, mais rien ne se passe.</i><br/>
<br/>
<b>Le Docteur :</b> &Ccedil;a ne marche pas ! <i>(Il rit)</i>. Fantastique. Fantastique ! Regarde toi ! La plus grande poubelle de l'univers !<br/>
</p>
        </dd>
        <dt>
          Post&eacute; le <span class="date">2013-02-15 05:35</span> par <span class="author">Dr.Who</span>
        </dt>
      </dl>
    </article>
  </div>
</body>
</html>

Et le resultat en image :

Texte qui dépasse une div + footer décalé

CSS

Discussions similaires

Partager

Partager