[HomeCustom] Plusieurs bloc à côté [Réglé]
Comment afficher différents bloc sur la page d'accueil
Créations de Modules
herwan Membre non connecté
-
Booster Bazooka
- Voir le profil du membre herwan
- Inscrit le : 19/07/2009
Je suis actuellement en train d'essayer de recréer ma page d’accueil personnalisé (HomeCustom), mais je coince.
Sur mon site en V3.0, j'avais une page d'accueil personnalisé (index.php), désormais (puisque j'ai fait la mise a jour 4.0) je souhaites passer par le HomeCustom, et j'ai donc tenté d'injecter le contenu de celle-ci, mais j'ai un gros problème avec la mise en page.
Idéalement, j'aurais aimé (comme c'était auparavant) mixer plusieurs bloc, par exemple :
[--------Slide -------]
[-bloc-1-][-bloc-2-]
[------bloc Pub-----]
[-bloc-3-][-bloc-4-]
[------bloc Pub-----]
Cependant, bien que le contenu s'affiche, le fond noir (j'utilise le thème Summerday) ne suis pas le contenu des différents bloc et s'arrête avant...
J'ai testé ceci :
Code HTML :
<div>
<div style="float:left;width:49%;">
<div class="module_acc_top">
<div style="text-align:left"><a href="/syndication/?url=/rss/news/" title="News"><img class="valign_middle" src="/templates/Summerday/images/rss.png" alt="Rss" title="Rss" align="left" border="0"></a>
<h5> Actualités 1</h5>
</div>
</div>
<div class="spacer"></div>
<div>
${Feed::get_parsed('news', 'master', 0, false, 5)}
</div>
<div style="padding:2px 0 0 0"></div>
<div class="news_bottom">
<div style="text-align:right;">
<a href="./news/news.php" class="small_link">Plus de news...</a>
</div>
</div>
</div>
<div style="float:right;width:49%;">
<div class="module_acc_top">
<div style="text-align:left"><a href="/syndication/?url=/rss/news/" title="News"><img class="valign_middle" src="/templates/Summerday/images/rss.png" alt="Rss" title="Rss" align="left" border="0"></a>
<h5> Actualités 2</h5>
</div>
</div>
<div class="spacer"></div>
<div>
${Feed::get_parsed('news', 'master', 0, false, 5)}
</div>
<div style="padding:2px 0 0 0"></div>
<div class="news_bottom">
<div style="text-align:right;">
<a href="./news/news.php" class="small_link">Plus de news...</a>
</div>
</div>
</div>
</div>
<br />
<br />
<div>
<div style="float:left;width:49%;">
<div class="module_acc_top">
<div style="text-align:left"><a href="/syndication/?url=/rss/news/" title="News"><img class="valign_middle" src="/templates/Summerday/images/rss.png" alt="Rss" title="Rss" align="left" border="0"></a>
<h5> Actualités 3</h5>
</div>
</div>
<div class="spacer"></div>
<div>
${Feed::get_parsed('news', 'master', 0, false, 5)}
</div>
<div style="padding:2px 0 0 0"></div>
<div class="news_bottom">
<div style="text-align:right;">
<a href="./news/news.php" class="small_link">Plus de news...</a>
</div>
</div>
</div>
<div style="float:right;width:49%;">
<div class="module_acc_top">
<div style="text-align:left"><a href="/syndication/?url=/rss/news/" title="News"><img class="valign_middle" src="/templates/Summerday/images/rss.png" alt="Rss" title="Rss" align="left" border="0"></a>
<h5> Actualités 4</h5>
</div>
</div>
<div class="spacer"></div>
<div>
${Feed::get_parsed('news', 'master', 0, false, 5)}
</div>
<div style="padding:2px 0 0 0"></div>
<div class="news_bottom">
<div style="text-align:right;">
<a href="./news/news.php" class="small_link">Plus de news...</a>
</div>
</div>
</div>
</div>
ce qui donne ceci (j'ai mis le contenu en surbrillance afin de bien voir la disposition des blocs) :
En supprimant les "float" sur la seconde partie des <div> (annonces 3 et 4), les blocs 1 et 2 s'affichent correctement (l'un à côté de l'autre), mais les 3 et 4 s'affichent l'un sur l'autre (par contre là le fond noir du thème, se prolonge d'autant).
J'ai testé plusieurs choses, mais je n'y arrives pas...
Depuis hier, je suis en train de m'arracher les cheveux (et le problème c'est qu'il m'en reste pas forcément des tonnes... de cheveux !),
donc si quelqu'un avait une solution ça serait sympa, parce que là...
ElenWii Membre non connecté
-
Administrateur
- Voir le profil du membre ElenWii
- Inscrit le : 14/08/2009
- Site internet
- Groupes :
-
Equipe Graphique
Il faut mettre après les div blocs et avant de fermer le div conteneur un <div class="spacer"></div> qui contient en fait l'element clear:both; qui annule les floats et permet de prendre en compte la place "visuel" d'un flottant.
Code TPL :
ElenWii
herwan Membre non connecté
-
Booster Bazooka
- Voir le profil du membre herwan
- Inscrit le : 19/07/2009
et mon cerveau qui était en train de surchauffer) tout de suite, ça fonctionne parfaitement...En fait je ne mettais pas le "<div style="clear:both;"></div>", j'aurais pu tester encore pendant longtemps...
Encore une fois merci
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie