[Résolu] Une bordure qui ne s'enlève pas...

Bien le bonjour,

J'ai un sacré problème avec la maquette d'une page xhtml/css. En effet, celle-ci se compose de deux cadres dont le premier (à gauche) comporte une bordure en haut que je n'arrive pas à annuler. Pour bien distinguer les deux cadres, je les ai placé sous un fond rouge (très moche d'ailleurs) ; la page est accessible à l'url : http://www.xn--ngel-poa.com/construction/.

J'ai pourtant à peu près tout tenté, avec des :

margin:0;
padding:0;

Mais la bordure en haut du cadre id="banniere_verticale_gauche" reste visible et l'on peut voir clairement que le grand titre Espace d'administration n'est pas au même niveau que Information (alors que ces deux titre sont hierarchisés <h3> chacun.

Bref, vous l'avez compris, je n'arrive ni à comprendre pourquoi j'ai cette différence ni quoi faire pour qu'elle s'annule . Je précise que je teste les pages avec FireFox (biensûr )

Merci d'avance pour m'éclairer dans ce problème pour le moins pas très rationnel
Modifié par tsing (23 May 2005 - 09:44)

Je n'ai pas d'explications rationnelles à te fournir dans cette brume matinale, mais j'ai constaté que ton cadre gauche est floaté et non pas le contenu.

En enlevant le float de gauche ou en rajoutant un au contenu, les 2 h3 se comportent alors pareil.

Problème identifié, on attend les experts pour le diagnostic

Ah ok, ça viendrait du cadre flottant... C'est assez ennuyeux car j'en ai besoin pour respecter ma charte graphique. D'après vous, est-il donc nécessaire que je fasse flotter le cadre du contenu à droite ?

Non cela ne vient pas du cadre flottant, mais de la fusion des marges.
Vous découvrirez qu'il y a 4 circonstances qui empêchent la fusion des marges :
- un padding non nul
- une bordure
- la propriété float (sur le container et pas le contenu)
- {overflow:auto}
Modifié par Xavier (23 May 2005 - 10:41)

Très bien. Mais que dois-je faire concrètement pour outre passer ce problème à cause que les marges horizontales ne fusionnent jamais ?

Dans ton cas au contraire les marges fusionnent : les marges des éléments <h3> par exemple fusionnent avec celle des <div> qui les contiennent. Ce que tu veux c'est empêcher la fusion, et je t'ai listé les 4 possibilités qui s'offrent à toi.

Chic ça à l'air de fonctionner
J'ai modifié le bloc d'information de droite comme ceci :

#contenu_principal
{
	overflow:auto;

	background-color:#transparent;
	padding: 0;
	margin-left: 2em;

	/*margin-left: 215px;*/
}

...Où j'ai dût retirer la marge de gauche parce qu'apparemment le navigateur décale déjà automatiquement ce bloc à droite par rapport à la longueur du bloc de gauche. Par contre, j'ai encore l'impression qu'il y a 2 ou 3 pixels de différence m'enfin, ça ne se voit plus beaucoup moins maintenant

Merci pour cette aide
Modifié par tsing (23 May 2005 - 11:24)