Sujet Précédent Sujet Suivant

Alignement de deux blocs en CSS HTML

Résolu/Fermé
Jiraldine Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 2 juillet 2013 - Modifié par Jiraldine le 24/06/2013 à 00:33
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 - 2 juil. 2013 à 18:05
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
A voir également:

12 réponses

Réponse 1 / 12
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
24 juin 2013 à 01:30
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à
1
EdeNCaRNaGe Messages postés 112 Date d'inscription samedi 31 mars 2012 Statut Membre Dernière intervention 31 décembre 2015 40
24 juin 2013 à 01:31
Merci poto ! Si tu fait des cours hein je suis là j'ai envie d'apprendre ;)
0
Jiraldine Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 2 juillet 2013
24 juin 2013 à 01:57
Merci beaucoup pour ta réponse, je m'en occupe demain et vous tiendrais informé si je suis arrivé au bout...
0
Réponse 2 / 12
Jiraldine Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 2 juillet 2013
28 juin 2013 à 10:36
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
0
Réponse 3 / 12
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
28 juin 2013 à 11:42
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>

0
Réponse 4 / 12
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
28 juin 2013 à 12:21
Ceux sont juste tes blocks qui sont trop long.
Passe la largeur à width:240px; et c'est bon

0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
Jiraldine Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 2 juillet 2013
28 juin 2013 à 15:07
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.
0
Réponse 6 / 12
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 265
Modifié par inspiring le 29/06/2013 à 00:20
la page est vide ...
juste une colonne a droite

Ecrit et assumé par Inspiring - copyright 2009-2013
0
Réponse 7 / 12
Jiraldine Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 2 juillet 2013
29 juin 2013 à 00:32
Essai n°2...
http://moustiquesandco.over-blog.com/les-a%C3%A9roports
0
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
30 juin 2013 à 10:22
Alors, ça fonctionne ou pas?
0
Réponse 8 / 12
Jiraldine Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 2 juillet 2013
Modifié par Jiraldine le 2/07/2013 à 00:47
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à...
0
Réponse 9 / 12
Jiraldine Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 2 juillet 2013
2 juil. 2013 à 01:01
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
0
Réponse 10 / 12
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
2 juil. 2013 à 08:43
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 ?
0
Réponse 11 / 12
Jiraldine Messages postés 8 Date d'inscription lundi 24 juin 2013 Statut Membre Dernière intervention 2 juillet 2013
2 juil. 2013 à 14:48
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.
0
Réponse 12 / 12
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
2 juil. 2013 à 18:05
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 :).
0

Discussions similaires

Alignement du texte à gauche et à droite
Owrell -
Anonyma16_42 -

8 réponses
Un seul de mes écouteurs marche. Que faire ?
VM_417 -
vali54 -

4 réponses
2 comptes facebook avec même mail et même nom
sarabi21 -
MICHEL69220 -

12 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses