[Html][DIV][MAJ] Problème d'alignement

[Cubic-Design]

Au niveau du menu et du background tu peux pas le mettre dans la même div ou c'est un backgroung différent ?

A mon avis tu te casse la tête un peu pour rien :s notamment avec la bordure sur le côté droit (bon fo voir après mais le risque c'est que ça fasse quitch)

Parce que avec des pourcentage tu risque de galéré un max

A mon avis le meiux c'est d'utulisé des astuces, notamment en créant des boites plus grandes et placé d'autres au dessus comme ça ce qui dépasse donne l'impression de n'être que sur une partie de la page...

[serik]

Au niveau du menu et du background tu peux pas le mettre dans la même div ou c'est un backgroung différent ?

A mon avis tu te casse la tête un peu pour rien :s notamment avec la bordure sur le côté droit (bon fo voir après mais le risque c'est que ça fasse quitch)

Parce que avec des pourcentage tu risque de galéré un max

A mon avis le meiux c'est d'utulisé des astuces, notamment en créant des boites plus grandes et placé d'autres au dessus comme ça ce qui dépasse donne l'impression de n'être que sur une partie de la page...

Pour la bordure droite rien n'est encore fait, j'aimerais déjà avoir la gauche!

Pourcentages? j'utilise une taille fixe en pixels...

[Cubic-Design]

Avec une taille fixe en pixel c'est facile dans ce cas là.

La hauteur c'est fixe aussi ?

[serik]

J'ai fait un layout simplifié :

Test CSS

Ca correspond à une chose près : il n'y a pas de données dans la colonne R (mais on pourrai mettre un espace insécable).

But: que la colonne L vienne descendre sur la boite b.

La colonne M a une taille variable.

[serik]

J'ai peu être trouvé LA solution, en me replongeant dans un vieux numéro de GNU Linux Mag (HS N°22).

testcss2

Je testerai demain sur ma vraie page.

Reste que si le menu est plus grand que le contenu, alors il dépasse en bas de la colonne gauche, ce qui peut être résolu sous FF par "min-height", mais pas sous IE (et une bonne raison de passer à FF, une!)

[Cubic-Design]

ça marche sur ton deuxième test. Ou est le problème ?

[serik]

ça marche sur ton deuxième test. Ou est le problème ?

Le problème vient du fait que lorsque le menu dépasse le contenu (en hauteur donc), le background du menu ne se poursuit pas. J'ai résolu le problème en appliquant aussi le backgound au menu flottant.

Ce problème est donc solutionné.

Pour le bas de page, j'ai utilisé un div avec comme style "clear:both", et il vient se mettre là où je veux quelque soit le cas.

Par contre ie fait une c*****e :

Ca arrive uniquement si je met la double bordure verte, 6px de large.

Une idée?

Ah j'oublie un truc: plus on descend dans les articles, plus le texte se retrouve décalé vers la gauche!

[Cubic-Design]

Tu as initialisé tout les padding et les margins à 0 au tout debut de ton css ?

Sinon la largeur de tes paragraphe est-elle déterminé ?

La ligne verte c'est un border ?

[serik]

Tu as initialisé tout les padding et les margins à 0 au tout debut de ton css ?

Sinon la largeur de tes paragraphe est-elle déterminé ?

La ligne verte c'est un border ?

Oui

Non, seules les marges et les padding détermines la taille du paragraphe.

<div class="docuMulti">
<div class="titre">
<p>Test News #1</p>
</div>
<div class="articleSpaceUp"></div>
<div class="article">
<p>No text</p>
<p class="profilBas">
<i>Posté le 26/04/2006 à 21:30 par Serik</i>
</p>
</div>
</div>

Le plus bizarre c'est que si je demande une bordure au paragraphe, la bordure est correcte!

[serik]

Une autre chose bizarre : si là où il y a la double bordure verte je met aussi une bordure bottom, alors l'alignement du texte est ok. (en attendant de trouver le problème j'ai mis une bordure blanche).

J'ai aussi constaté que le décalage vers la gauche est inversement proportionnel à la taille de la bordure gauche.

[Cubic-Design]

Essaye de voir si en determinant la taille de tes paragraphes ça change quelque chose

Et assures toi qu'au début de ton css tu as mis un code comme celui-ci :

h1 , h2 , h3 , ul , li , hr , br , p , img , a	{	margin: 0;
											padding: 0;
										}

[serik]

A priori c'est un problème de padding, mais c'est assez bizarre :

div.docuMulti div.article {
	margin: 0 2px 5px 50px;
	padding: 10px 0 0px 10px;
	font-size:14pt;
	color:#0DA1FF;
	text-align: left;
	/*border-bottom: 1px solid white;*/ /* Fix a ie bug */
	border-left: 6px double #0AF580;
}

Ca ça passe.

div.docuMulti div.article {
	margin: 0 2px 5px 50px;
	padding: 10px 0 2px 10px;
	font-size:14pt;
	color:#0DA1FF;
	text-align: left;
	/*border-bottom: 1px solid white;*/ /* Fix a ie bug */
	border-left: 6px double #0AF580;
}

Ca ça passe pas. (ce qui change c'est le padding bottom)

En quoi le fait d'ajouter un padding en bas peut faire décaler le texte sur la gauche?

[Cubic-Design]

Les étrangeté du css.. Des fois il y a des conflites avec les hauteurs et toutes ces hitoire de padding et on ne sait pas pourquoi.

Sinon dans ton code css pour les div tu peux utiliser le signe # s'il s'agit d'id ou . tout seul s'il s'agit de class

#docuMulti ,  #article {
	margin: 0 2px 5px 50px;
	padding: 10px 0 0px 10px;
	font-size:14pt;
	color:#0DA1FF;
	text-align: left;
	/*border-bottom: 1px solid white;*/ /* Fix a ie bug */
	border-left: 6px double #0AF580;
}

ou

.docuMulti ,  .article {
	margin: 0 2px 5px 50px;
	padding: 10px 0 0px 10px;
	font-size:14pt;
	color:#0DA1FF;
	text-align: left;
	/*border-bottom: 1px solid white;*/ /* Fix a ie bug */
	border-left: 6px double #0AF580;

[Yangzebul]

h1 , h2 , h3 , ul , li , hr , br , p , img , a	{	margin: 0;
											padding: 0;
										}

Essaye plutôt ça :

* {
 margin: 0;
 padding: 0;
 }

Sinon pour le problème de padding, j'ai pas regardé mais bon comme d'hab IE, le seul navigateur à calculer les marges differement

En tout cas si c'est résolu tant mieux...

[serik]

h1 , h2 , h3 , ul , li , hr , br , p , img , a	{	margin: 0;
											padding: 0;
										}

Essaye plutôt ça :

* {
 margin: 0;
 padding: 0;
 }

Sinon pour le problème de padding, j'ai pas regardé mais bon comme d'hab IE, le seul navigateur à calculer les marges differement

En tout cas si c'est résolu tant mieux...

C'est pas impossible que ce soit un conflit au niveau des marges, mais la solution trouvée permet d'avoir quelque chose de visuellement approchant sous ie. Pour la peine je mettrai un gros bandeau firefox

[Cubic-Design]

De toute façon il y a toujours quelques différences quand on a une mise en page un peu élaboré, le mieux est de trouver la solution qui permet d'afficher aux mieux sur les deux naviguateur (et de mettre un lien pour firafox dans le bas de la page)