[résolu] Ne pas afficher la bordure commune à 2 div

Bonjour à tous,

je suis débutant et je coince sur un problème : comment ne pas afficher la bordure commune à 2 div ?
Quelques explications complémentaires et un exemple en ligne pour illustrer mes propos.

L'objectif recherché serait de pouvoir donner l'illusion visuelle que le menu gauche et la zone du contenu forment un tout.
Pour cela, je souhaiterais que la bordure commune :
- au menu "En bref"
- au contenu (le grand carré vert à sa droite)
ne soit pas affichée.

Une piste, tentée sans succès, serait de faire "déborder" le menu au dessus du carré vert mais j'en suis incapable.

A défaut de me donner la solution, auriez vous une piste pour m'aiguiller dans mes recherches ?

Merci de votre aide.
Manu
Modifié par Velo (12 Aug 2007 - 20:13)

Bonjour,

Je tenterais avec un margin-right négatif pour ma part.

Par exemple ainsi:

#menu a.actif {
	...
	margin: 0 -2px 5px 0;
}

Sinon, en donnant une largeur de 202px à div#menu ça semble marcher aussi. Mais ça peut être plus difficile à gérer avec Internet Explore, par exemple.

Sinon, sans rapport:

Velo a écrit :
je suis débutant (...) Quelques explications complémentaires et un exemple en ligne pour illustrer mes propos.

Si tous les débutants pouvaient être comme ça...
Modifié par Florent V. (12 Aug 2007 - 17:51)

Florent V. a écrit :
Sinon, en donnant une largeur de 202px à div#menu ça semble marcher aussi. Mais ça peut être plus difficile à gérer avec Internet Explore, par exemple.

Merci beaucoup pour cette solution qui fonctionne. Et en lisant la suite, j'ai pensé à tester avec Firefox : résultat concluant !
Mais comme tu l'avais pressenti, ça ne marche pas sous IE

Sans vouloir abuser de votre gentillesse (et de votre compétence), quel est maintenant le "truc" pour qu'IE rentre dans le rang ?

Velo a écrit :
Merci beaucoup pour cette solution qui fonctionne. (...) Mais (...) ça ne marche pas sous IE

La solution en question était la deuxième préconisée. Tu as testé la première?

Pour rappel:

#menu a.actif {
	...
	margin: 0 -2px 5px 0;
}

Tout à fait, solution testée mais non opérationnelle : IE7 ne veut rien entendre le bougre.

Velo a écrit :
Tout à fait, solution testée mais non opérationnelle : IE7 ne veut rien entendre le bougre.

Effectivement, il semblerait que les marges négatives ne permettent pas de faire dépasser du contenu de son conteneur flottant (ou doté du HasLayout, ou les deux...).

Bon. Dans ce cas, au grands mots les grands remèdes: on va utiliser le positionnement relatif.

Il te faut:
- ménager un peu de place à gauche du menu, en ne donnant au conteneur global qu'un padding-left de 3px au lieu de 5px;
- diminuer la largeur de tous les liens du menu non actifs de deux pixels à gauche grâce à un margin-left: 2px;
- décaler entièrement le lien actif de deux pixels vers la droite, grâce à un position: relative; left: 2px.

Testé avec succès dans Firefox 2 et Internet Explorer 6-7.

Et bien que dire, à part merci !
Ca fonctionne, merci beaucoup pour ton aide.

Manu

Salut Manu ,

en passant je te signale que le min-height:400px; dans ton div content n'est pas interprété par IE6.

Tu pourrais utiliser :

#content { 
	height: 400px;
}

html>body #content {
	height: auto;
	min-height: 400px;
}

A+
Modifié par Heyoan (12 Aug 2007 - 20:45)

Heyoan a écrit :
Tu pourrais utiliser...

...un commentaire conditionnel plutôt qu'un hack CSS, bien entendu.

(Pour les notions de hacks CSS et de commentaires conditionnels, voir la FAQ du forum.)
Modifié par Florent V. (12 Aug 2007 - 22:12)

Ah oui tiens ! La FAQ a été mise à jour !

Vraiment sympa ce forum : on arrive avec un souci, on repart avec une solution et en plus on vous donne des pistes pour des problèmes que vous n'aviez pas identifié...
Je fais la modification ASAP.
Merci encore pour votre aide.