Aller au contenu

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


serik

Messages recommandés

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...

Lien vers le commentaire
Partager sur d’autres sites

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...

Lien vers le commentaire
Partager sur d’autres sites

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

Lien vers le commentaire
Partager sur d’autres sites

ç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 :

f7d6b9617ecee6a9123938436a4b4d50.PNG

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!

Lien vers le commentaire
Partager sur d’autres sites

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!

2e94da209762339348e53cfb7f3a63ff.PNG

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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?

Lien vers le commentaire
Partager sur d’autres sites

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;

Lien vers le commentaire
Partager sur d’autres sites

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 :iloveyou:

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

Lien vers le commentaire
Partager sur d’autres sites

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 :iloveyou:

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 :iloveyou:

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

×
×
  • Créer...