[résolu]Problème d'alignement HTML

[Invité Diana]

Bonsoir,

 

j'ai un soucis d'alignement horizontale. Mes tutos ne veulent pas s'aligner horizontalement. Ya un truc qui méchappe

 

 

<a href="wamp1/wamp1.html" onclick="window.open(this.href); return false;"><img src="ordi.gif" alt=""><br>Wamp</a>
	<a href="thunderbird/thunderbird.html" onclick="window.open(this.href); return false;"><img src="ordi.gif" alt=""><br>Client Mail</a>

 

 

Merci for help me

Modifié le 18 février 2007 par Diana

[Dylav]

Ben oui, il fait ce que tu lui dis. Tu dis image, saut à la ligne, texte, image, saut à la ligne, texte. Si tu veux avoir

image ... image

texte ..... texte

il faut l'exprimer autrement !

 

Mets par exemple chaque ensemble (lien, image, saut, texte) dans un bloc <div> flottant cadré à gauche, et les blocs s'appuyeront les uns sur les autres.

 

<style type="text/css">
.bloc {float:left}
</style>

et

 

<div class="bloc"><a href="..."><img src="..."><br>texte1</a></div>
<div class="bloc"><a href="..."><img src="..."><br>texte2</a></div>

et ça devrait le faire...

 

Remarque : quand ta "ligne" sera pleine et qu'un nouveau bloc voudra s'installer, il le fera automatiquement en dessous du 1er ("retour à la ligne" automatique).

[Invité Diana]

Bonsoir,

 

Bon je vais essayé je connais pas du tout encore Float. J'ai juste remarquer quil était utilisé dans un de mes gabarits.

faut il utiliser clear:both; ?

[ricou33]

Salut Diana,

 

A priori non, sauf peut-être à la fin de la liste de tes tutoriaux, si, en suivant le code de Dylav, tu souhaites écrire quelque chose en dessous de la liste, tu devras peut-être utilisé clear.

clear sert a "interrompre" le flottement d'un bloc, il peut prendre l'argument "left" pour supprimer un float: left, "right" pour supprimer un float: right ou "both" pour supprimer les deux.

En clair, dans le code html, tu dois avoir le bloc qui sera en float: left en premier obligatoirement, en dessous le bloc qui sera à côté de celui qui est en float, si tu créé plusieurs bloc à la suite du float left, tous se mettront à côté du bloc en float jusqu'au bas de celui-ci. Si tu n'en veux qu'un à côté du bloc en float, il faut mettre clear: left ou both pour que les blocs après cette commande soient en dessous du bloc en float et non à côté.

je suis pas sûr d'avoir été si clair que ça, avec un exemple ça ira peut-être mieux

<style type="text/css">
.un	{
	float: left;
	border: solid 5px red;
	padding: 60px;	}
.deux {
	float: left;
	border: solid grey;	}
.trois {
	border: solid blue;	}
.quatre	{
	border: solid silver;	}
.cinq	{
	clear: both;	}
</style>

<div class="un">
<p>
	bloc 1 : en float left
</p>
</div>
<div class="deux">
<p>
	bloc 2 : à coté du bloc précédent
</p>
</div>
<div class="trois">
<p>
	bloc 3 : à côté du 2 car le 2 est aussi en float left
</p>
</div>
<div class="quatre">
<p>
	bloc 4 : en dessous de 2 car il n'y a plus de place à côté, mais à côté de 1 qui est plus grand
</p>
</div>
<div class="cinq">
<p>
	<strong>bloc 5 : en dessous de tout les blocs avec clear</strong>
</p>
</div>

Modifié le 14 février 2007 par ricou33

[KewlCat]

Pourquoi imbriquer des <p> dans tes <div> alors qu'il est si simple d'appliquer les classes directement aux <p> !?

[ricou33]

C'était pour suivre le conseil de Dylav qui utilise des div, et puis par la suite chaque bloc pourra comporter autre chose qu'une ligne de texte.

Mais c'est vrai que dans ce cas les div sont complètement inutile, tu as bien fait de me le faire remarquer.

 

 

PS : content de te revoir Kewlcat, le forum programmation est bien vide sans tes connaissances.

Modifié le 14 février 2007 par ricou33

[Dylav]

Pourquoi imbriquer des <p> dans tes <div> alors qu'il est si simple d'appliquer les classes directement aux <p> !?

Oui, c'est vrai, je n'y pense jamais... (je fais compliqué quand je pourrais faire simple!)

[Invité Diana]

Bonjour @ tous,

 

Merci pour les explications, je sens que cela va me servir pour mon prochain gabarit en float. J'avais bien trouvé un doc la dessus, mais yen a qui explique mal et puis vaut mieux la pratique avec moi que la théorie

 

En faite pour mon problème là, mes lignes s'agencent avec le flux naturel, donc je peux pas les alignés

 

MAis c'est un nouveau concepte pour moi ce genre de gabarit Block-absolute/flux normal/block-absolute. Alors que mes précédent page tout était en absolute sans flux. Que des problèmes de compatibilité avec les navigateurs.

 

Mon prochain gabarit block-float/flux normal/block-float. Comme ça je vais maitriser les 2 façons de faire.

 

Merci pour votre précieuse aide

Modifié le 14 février 2007 par Diana

[Invité Diana]

Bon j'ai essayé les floats, ça marche

 

j'ai un autre soucis mais la je l'explique pas du tout :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
	<title>
	</title>
	<style type="text/css">
	body{font-family:arial,verdana;font-size:12;}
	.bloc {float:left;text-align:center;margin-left:10px;}
	 img{border:0;}
	 p{margin:0px;color:red;font-weight:bold;}
	 a{font-weight:bold;color:purple;}
	 a:hover{color:green;}
	</style>
</head>
<body>
<div class="bloc">
<a href="wamp1/wamp1.html" style="text-decoration:none;" onclick="window.open(this.href); return false;">
	<img src="ordi.gif" alt="">
	<br><p>Wamp</p></a>
</div>
<div class="bloc">
<a href="thunderbird/thunderbird.html" style="text-decoration:none;" onclick="window.open(this.href); return false;">
	<img src="ordi.gif" alt="">
	<br><p>Client Mail</p></a>
</div>

</body>
</html>

 

J'ai rajouté a et a:hover pour qu'au passage de la souris sur les liens tutos, ils changent de couleurs.

 

ça marche pas là mais sur l'autre page qui contient mon script php navigation ! page-1 page-2 ... C'est bizarre ça !

 

décidément mdr

 

Vous avez une idée ?

 

http://isis.no-ip.info/www/tutos/tutos.php

Modifié le 14 février 2007 par Diana

[Dylav]

Il est effectivement étonnant de constater que la balise <p> semble étanche aux attributs de la balise <a> qui l'encapsule, et dont elle devrait donc hériter. Mais il te suffit d'ajouter une spécification ciblée, pour retrouver l'effet désiré.

 

a:hover p {color:green;}

Tu peux d'ailleurs combiner les deux spécifications a:hover ainsi, où la virgule sépare les deux cibles.

 

a:hover, a:hover p {color:green;}

Pour le rouge en revanche, c'est normal, puisque tu imposes la couleur rouge dans <p>, qui prend donc la priorité sur la couleur violette de la balise <a> encapsulante. Si tu tiens au violet, même punition, même motif

 

a, a p {color:purple;}

Il reste un phénomène que je n'explique pas : les liens actifs dans <p> devraient être soulignés. Or ils se comportent comme si on leur avait imposé text-decoration:none ?