Alignement de deux blocs en CSS HTML
Résolu
Jiraldine
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
-
tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention -
tryan44 Messages postés 1288 Date d'inscription Statut Membre Dernière intervention -
Bonjour Bonjour. Je suis en train de personnaliser mon blog sur OVERBLOG KIWI, et je fait une mise en valeur l'article suivant ou précédent en affichant un résumé avec l'image de couverture du post précédent et du post suivant.
Inconvénient : je n'arrive pas à aligner les deux résumés, l'un (post précédent par exemple) se met automatiquement sous l'autre. ça suis l'ordre hiérarchique tapé en HTML. Si vous avez besoin je vous fais par de mes codes HTML et CSS, en attendant voici ce que ça donne sur le blog : http://moustiquesandco.over-blog.com/madamada
Que faut-il faire pour permettre au deux blocs d'être au même niveau vertical ?
Merci beaucoup d'avance
Inconvénient : je n'arrive pas à aligner les deux résumés, l'un (post précédent par exemple) se met automatiquement sous l'autre. ça suis l'ordre hiérarchique tapé en HTML. Si vous avez besoin je vous fais par de mes codes HTML et CSS, en attendant voici ce que ça donne sur le blog : http://moustiquesandco.over-blog.com/madamada
Que faut-il faire pour permettre au deux blocs d'être au même niveau vertical ?
Merci beaucoup d'avance
A voir également:
- Alignement de deux blocs en CSS HTML
- Nombre de jours entre deux dates excel - Guide
- Editeur html - Télécharger - HTML
- Deux ecran pc - Guide
- Comment faire deux colonnes sur word - Guide
- Espace en html - Astuces et Solutions
12 réponses
Bonjour,
il faut que tu reprenne le code, ce n'est pas un bon départ :
- tu utilise 2 x le meme id "excerpt", ce qui est en dehors des standards
- tes 2 blocs (next -prev) doit etre dans le meme conteneur, tu te complique la tache comme tu as fait là
Vite fait, je ferais :
Bon attention, il est 1h30 du matin et c'est pondu vite fait :) il y a surement des point à reprendre mais la base est là
il faut que tu reprenne le code, ce n'est pas un bon départ :
- tu utilise 2 x le meme id "excerpt", ce qui est en dehors des standards
- tes 2 blocs (next -prev) doit etre dans le meme conteneur, tu te complique la tache comme tu as fait là
Vite fait, je ferais :
<div id="excerpt">
<div class="prev">
<img ........ />
<p class="txt-prev">le texte accompagnant l'image</p>
</div>
<div class="next">
<img ........ />
<p class="txt-next">le texte accompagnant l'image</p>
</div>
</div>
Avec un CSS
#excerpt {overflow:auto;}
.prev {width:340px; float:left;}
.prev img {float:left;display:inline-block;}
.txt-prev {max-width:***px; padding-left:**px; float:left; display:inline-block;}
et inversement pour l'ensemble next
Bon attention, il est 1h30 du matin et c'est pondu vite fait :) il y a surement des point à reprendre mais la base est là
EdeNCaRNaGe
Messages postés
112
Date d'inscription
Statut
Membre
Dernière intervention
40
Merci poto ! Si tu fait des cours hein je suis là j'ai envie d'apprendre ;)
Jiraldine
Messages postés
8
Date d'inscription
Statut
Membre
Dernière intervention
Merci beaucoup pour ta réponse, je m'en occupe demain et vous tiendrais informé si je suis arrivé au bout...
Merci Inspiring pour tes éléments. J'ai pris en compte tes remarques, mais j'ai encore un alignement que se fait mal : les flèches et "article suivant" "article précédent" qui ne sont pas sur la même ligne... je n'y arrive pas, même en utilisant la balise "inline-block", le pire étant sur la dernière page, où là tout se décale... Revoilà le lien :
http://moustiquesandco.over-blog.com/bienvenue-%C3%A0-johannesburg
Je sais que je ne suis pas loi, mais ça bloque. Merci
http://moustiquesandco.over-blog.com/bienvenue-%C3%A0-johannesburg
Je sais que je ne suis pas loi, mais ça bloque. Merci
Salut,
Un autre exemple :
Un autre exemple :
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
<style type="text/css">
#pagination{
border:1px solid red;
height:auto;
padding:5px 30px;
overflow:auto;
}
#avant,#apres{
list-style-type : none;
border:1px solid green;
padding: 5px 30px;
}
#avant{
float:left;
background: url('http://assets.over-blog-kiwi.com/themes/31/images/arrow-l.png') no-repeat center left;
}
#apres{
float:right;
background: url('http://assets.over-blog-kiwi.com/themes/31/images/arrow-r.png') no-repeat center right;
}
</style>
</head>
<body>
<ul id="pagination">
<li id="avant"><a href="#">Lien avant</a></li>
<li id="apres"><a href="#">Lien après</a></li>
</ul>
</body>
</html>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Merci encore Inspiring, ça a fonctionné, effectivement, c'était tout con ! Par contre sur mon dernier article, étant donné qu'il n'y a pas de page suivante, ça créé de nouveau un décalage énorme, les commentaires remontent, et pire la bannière des widgets se retrouve catapultée en bas !!! c'est encore une erreur de largeur ou quelque chose comme ça, mais ça ne se débloque toujours pas dans ma tête... Voir ci joint : http://moustiquesandco.over-blog.com/les-a%C3%A9roports.
J'espère que c'est la dernière fois que je vous embête.
J'espère que c'est la dernière fois que je vous embête.
Bonsoir à tous. Le problème persiste, j'ai même l'impression d'empirer la chose, j'ai toujours ce décalage de mes widgets lors de l'ouverture du dernier article (car pas de page suivante en bas d'article). Je ne trouve pas le couac ! Je continue à chercher ma boulette, mais si quelqu'un à la solution miracle, je suis preneur... Merci !
PS:Cela ne semble pas être du au CSS page suivante + CSS page précédente, car si je l'enlève, le problème est toujours là...
PS:Cela ne semble pas être du au CSS page suivante + CSS page précédente, car si je l'enlève, le problème est toujours là...
C'est bon, j'ai trouvé, il fallait que j'insère un {% if not isIndex %} à la fin du code HTML de la page suivante, pour réindexer les blocs suivants (à savoir les commentaires).
Merci à vous
Merci à vous
C'est normal que la flèche de droite (Article suivant) soit complètement décalée à droite alors que le texte "Article suivant" est à gauche ?
Nop, ce n'est pas normal, c'est effectivement un élément que je n'ai pas réussi à régler. Encore une histoire d'alignement, mais rien y fait, je ne trouve pas.
Tester ça :
Les bordures, c'est juste pour vous repérez sur qui fait quoi :).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>****</title>
<style type="text/css">
#pagination{
border:1px solid red;
height:auto;
padding:5px 30px;
overflow:auto;
margin: 0 auto;
width: 980px;
}
#avant,#apres{
border:1px solid green;
padding: 5px 30px;
}
#avant{
float:left;
background: url('http://assets.over-blog-kiwi.com/themes/31/images/arrow-l.png') no-repeat center left;
}
#apres{
float:right;
background: url('http://assets.over-blog-kiwi.com/themes/31/images/arrow-r.png') no-repeat center right;
}
.cadreavant{
float:left;
border:1px solid purple;
width:300px;
padding:5px;
clear:left;
}
.cadreapres{
float:right;
border:1px solid purple;
width:300px;
padding:5px;
text-align:right;
}
</style>
</head>
<body>
<div>Ceci est juste un texte</div>
<div id="pagination">
<div id="avant"><a href="#">Article précédent</a></div>
<div id="apres"><a href="#">Article suivant</a></div>
<br/>
<br/>
<div class="cadreavant"><img style="width: 110px; height: 110px; float: left;" alt="ff" src="http://img.over-blog-kiwi.com/110x110-ct/0/51/86/22/201306/ob_1167107b0784c3a83575d894bd42e5ec_fond.JPG" align="top" hspace="2" vspace="2">
En route pour le Cap<br/>
03 06 2013<br/>
1- Peut être ne l'avez vous pas remarqué mais dans la marge de gauche, grisée il y a un petit...
</div>
<div class="cadreapres"><img style="width: 110px; height: 110px; float: right;" alt="ff" src="http://img.over-blog-kiwi.com/110x110-ct/0/51/86/22/201306/ob_13a248_120702-breche-de-roland-3.JPG" align="right" hspace="2" vspace="2">
Les Aéroports<br/>
04 06 2013<br/>
Nous qui ne pensions jamais trouver ce style de vie à Hong-Kong, nous
étions...
</div>
</div>
<div>Ceci est juste un texte</div>
</body>
</html>
Les bordures, c'est juste pour vous repérez sur qui fait quoi :).
