Alignement de deux blocs en CSS HTML [Résolu/Fermé]

Messages postés
8
Date d'inscription
lundi 24 juin 2013
Statut
Membre
Dernière intervention
2 juillet 2013
-
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
Afficher la suite 

12 réponses

Meilleure réponse
Messages postés
1828
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
241
1
Merci
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 :
<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à

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60124 internautes nous ont dit merci ce mois-ci

EdeNCaRNaGe
Messages postés
115
Date d'inscription
samedi 31 mars 2012
Statut
Membre
Dernière intervention
31 décembre 2015
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
lundi 24 juin 2013
Statut
Membre
Dernière intervention
2 juillet 2013
-
Merci beaucoup pour ta réponse, je m'en occupe demain et vous tiendrais informé si je suis arrivé au bout...
Messages postés
8
Date d'inscription
lundi 24 juin 2013
Statut
Membre
Dernière intervention
2 juillet 2013
0
Merci
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
Messages postés
1292
Date d'inscription
mardi 24 janvier 2012
Statut
Membre
Dernière intervention
26 octobre 2014
216
0
Merci
Salut,

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>


Messages postés
1828
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
241
0
Merci
Ceux sont juste tes blocks qui sont trop long.
Passe la largeur à width:240px; et c'est bon

Messages postés
8
Date d'inscription
lundi 24 juin 2013
Statut
Membre
Dernière intervention
2 juillet 2013
0
Merci
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.
Messages postés
1828
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
241
0
Merci
la page est vide ...
juste une colonne a droite

Ecrit et assumé par Inspiring - copyright 2009-2013
Messages postés
8
Date d'inscription
lundi 24 juin 2013
Statut
Membre
Dernière intervention
2 juillet 2013
tryan44
Messages postés
1292
Date d'inscription
mardi 24 janvier 2012
Statut
Membre
Dernière intervention
26 octobre 2014
216 -
Alors, ça fonctionne ou pas?
Messages postés
8
Date d'inscription
lundi 24 juin 2013
Statut
Membre
Dernière intervention
2 juillet 2013
0
Merci
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à...
Messages postés
8
Date d'inscription
lundi 24 juin 2013
Statut
Membre
Dernière intervention
2 juillet 2013
0
Merci
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
Messages postés
1292
Date d'inscription
mardi 24 janvier 2012
Statut
Membre
Dernière intervention
26 octobre 2014
216
0
Merci
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 ?
Messages postés
8
Date d'inscription
lundi 24 juin 2013
Statut
Membre
Dernière intervention
2 juillet 2013
0
Merci
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.
Messages postés
1292
Date d'inscription
mardi 24 janvier 2012
Statut
Membre
Dernière intervention
26 octobre 2014
216
0
Merci
Tester ça :

<!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 :).