bordures transparentes?

[carole heinz]

(re)bonjour!

je suis en train de revoir le design de mon site et j'aimerais mettre une image en fond.

tout fonctionne, sauf au niveau de ces bordures, que j'aimerais pouvoir rendre transparentes, afin qu'au lieu de bordures noires on puisse voir le fond:

Code: Tout sélectionner

#TOP {
   BACKGROUND : #8099FB;
   
        border-top:30px solid #000000;
        padding-bottom:10px;
   border-bottom:40px solid #000000;
   }


j'ai déjà essayé avec des codes du genre

Code: Tout sélectionner

border-top:30px transparent;


mais ça ne marche pas...

site concerné

http://vosgesfreeride.zeblog.com

[Dan_A]

Je suppose que c'est avec Internet Explorer.
C'est un des navigateurs qui refuse transparent pour border.

[carole heinz]

non, je travaille sous Mozilla et ça ne marche pas... je pense que c'est un détail (faut-il mettre une couleur? ou bien "none" au lieu de "transparent"...?) j'ai essayé pas mal de choses mais rien à faire...

[Dan_A]

La syntaxe c'est :
border-top:40px solid transparent; (on peut remplacer solid par une autre valeur sauf none)
ais le problème c'est qu'un visiteur avec Internet Explorer aura des problèmes.
Il faudrait corriger la syntaxe html (213 erreurs) ainsi que les quelques erreurs dans css.

[carole heinz]

merci pour votre aide, mais ça ne marche pas, les bordures disparaissent complètement et je me retrouve avec un gros bloc bleu unique!

(pour mes erreurs html j'ai vu que c'était le bord**, sur le site du W3C, mais tout marche très bien sur mozilla comme sur IE donc je touche pas!)

[HawkEye]

Les bordures ne servant pas à faire de l'espacement, ne serait-il pas plus sain d'utiliser margin-top: 30px plutôt que de faire une "bordure transparente de 30px" ?

[carole heinz]

oui, c'est juste, l'idée c'est d'avoir une marge en haut, et deux blocs bleus séparés du corps du site, bref tout comme c'est en ce moment mais en transparent... comment ré-écrire ceci?

Code: Tout sélectionner

#TOP {
   BACKGROUND : #8099FB;
   
        border-top:40px solid #000000;
        padding-bottom:10px;
   border-bottom:40px solid #000000;
   }


[NxtGen]

oui, c'est juste, l'idée c'est d'avoir une marge en haut, et deux blocs bleus séparés du corps du site, bref tout comme c'est en ce moment mais en transparent... comment ré-écrire ceci?

Code: Tout sélectionner

#TOP {
   BACKGROUND : #8099FB;
   
        border-top:40px solid #000000;
        padding-bottom:10px;
   border-bottom:40px solid #000000;
   }


comme ca ?

Code: Tout sélectionner

#TOP {
   BACKGROUND : #8099FB;
   padding: 40px 0 40px 0;
   }

ainsi quand tu met une image dans le div #TOP, tu auras en haut et en bas un espace de 40px.

[f_trt]

(pour mes erreurs html j'ai vu que c'était le bord**, sur le site du W3C, mais tout marche très bien sur mozilla comme sur IE donc je touche pas!)

Par expérience ce n'est pas une bonne solution et qui dit que la transparence ne s'active pas a cause d'une de ces erreurs ? Et puis y a pas que IE et FIREFOX, y a les moteurs et d'autres nav non ?

[carole heinz]

comme ca ?

Code: Tout sélectionner

#TOP {
   BACKGROUND : #8099FB;
   padding: 40px 0 40px 0;
   }

ainsi quand tu met une image dans le div #TOP, tu auras en haut et en bas un espace de 40px.

ce code me met un seul gros bloc bleu...ce n'est donc pas ça. pour ceux qui rejoingnent la discussion, je rappelle que le but est d'obtenir exactement le résultat actuellement visible sur le site, mais avec les "bordures noires" transparentes, càd laissant voir l'image qui est en background au niveau de ces bordures (ou marges) noires.

site: http://vosgesfreeride.zeblog.com

[carole heinz]

quelqu'un a-t-il une idée?

[Dan_A]

Quelques idées :
Je crois qu'il faut corriger les erreurs, même si le problème de transparence ne vient pas de là.
Il faudrait aussi distinguer ce que sont margin, padding et border :
http://www.w3.org/TR/REC-CSS2/box.html
http://www.sustainablewebdesign.com/resources/601/
Ces notions devraient pouvoir permettre de réussir, mais différemment.
Le fond pour div #top c'est celui qui est défini dans un des parents dont voici la liste :
body > div #ombre > table > tbody > tr > td #TOP
il faut donc définir "en dernier" le fond qu'on souhaite voir, ce qui n'est pas le cas dans la page.