Bonjour !
Je rencontre un léger problème, à mi-chemin entre le PHP et le HTML.
J'ai mis en place un système de news pour un site avec base de données, interface d'administration, etc. Je souhaite ainsi afficher mes 4 dernières actualités sur la page d'accueil, celles-ci contiendront, de plus, une image miniature.
Cependant, j'ai remarqué que ma page d'accueil se voit décalée de quelques pixels (une dizaine environ) sur la gauche par rapport à la normal, et après recherche, j'ai vu que la cause du décalage était justement ces miniatures. Une idée du problème ?
Il faut savoir que la récupération des news s'effectue à l'aide de la traditionnelle boucle après la demande sur la base.
Code HTML généré :
CSS associé et condensé :
De plus, n'hésitez pas à émettre des critiques sur les codes, car sur un autre site on m'a signalé que je faisais n'importe quoi.
EDIT : j'ai un peu réduit les codes
Modifié par Kleiny (24 Apr 2011 - 13:11)
Je rencontre un léger problème, à mi-chemin entre le PHP et le HTML.
J'ai mis en place un système de news pour un site avec base de données, interface d'administration, etc. Je souhaite ainsi afficher mes 4 dernières actualités sur la page d'accueil, celles-ci contiendront, de plus, une image miniature.
Cependant, j'ai remarqué que ma page d'accueil se voit décalée de quelques pixels (une dizaine environ) sur la gauche par rapport à la normal, et après recherche, j'ai vu que la cause du décalage était justement ces miniatures. Une idée du problème ?
Il faut savoir que la récupération des news s'effectue à l'aide de la traditionnelle boucle après la demande sur la base.
Code HTML généré :
<!-- Doctype, <html>, <head>, </head> -->
<body>
<div id="header">
</div>
<div id="corps">
<div id="contenu">
<h2>À la une</h2>
<div id="news_principales"> <!-- DIV des 4 dernières actualités -->
<h3><strong>Actualités</strong> générales</h3>
<!-- Section x4 -->
<h4>Article 3</h4>
<p>
<span class="date">Publié le 21/04/2011 dans <a href="url">Divers</a></span><br />
<img src="images/miniatures/monimage.jpg" alt="" />
Texte d'introduction<br />
<a href="url">Lire la suite</a>
</p>
<!-- Fin section x4 -->
<div class="voir_tout"><a href="actualite.php?rubrique=article">Tous les articles d'actualité</a></div>
</div>
<!-- 3 boites qui flottent à droite -->
<div class="news_secondaires">
<h3><strong>Documents</strong> en ligne</h3>
<!-- Liste de documents -->
</div>
<div class="news_secondaires">
<h3><strong>Actualités</strong> pratiques</h3>
<!-- Liste d'actu pratique -->
</div>
<div class="news_secondaires">
<h3><strong>Prochains</strong> évènements</h3>
<!-- Liste évenements -->
</div>
</div>
<!-- Menu sur la gauche -->
<div id="bandeau">
<!-- Liste de lien -->
</div>
</div>
<div id="footer">
<!-- Liste de lien -->
</div>
</body>
CSS associé et condensé :
body {
margin-top: 0px;
width: 900px;
margin: 0 auto;
}
#header {
background: url(images/header.jpg);
height: 249px;
position: relative;
}
#corps {
margin-top: 0;
overflow: auto;
padding-bottom: 10px;
}
#bandeau {
margin-left: 24px;
width: 202px;
color: #333333;
}
#bandeau ul {
list-style: inside;
display: inline;
}
#bandeau li {
margin-left: 15px;
}
#contenu {
width: 650px;
float: right;
margin-right: 8px;
}
#news_principales, .news_secondaires {
padding-bottom: 5px;
margin-bottom: 15px;
border-bottom: 5px solid;
}
.news_secondaires {
background: #E8E8E8;
border-color: #D03434;
margin-right: 3px;
width: 38%;
float: right;
}
.news_secondaires ul {
list-style-type: none;
padding-left: 0;
}
.news_secondaires li {
margin: 0 0 3px 3px;
}
#news_principales {
border-color: green;
width: 60%;
float: left;
}
#news_principales h4 {
font-size: 1.2em;
display: inline;
}
#news_principales img {
float: left;
margin-right: 3px;
}
#news_principales p {
overflow: auto;
margin-top: 0;
}
.voir_tout {
float: right;
display: inline;
}
De plus, n'hésitez pas à émettre des critiques sur les codes, car sur un autre site on m'a signalé que je faisais n'importe quoi.
EDIT : j'ai un peu réduit les codes
Modifié par Kleiny (24 Apr 2011 - 13:11)
