bordures transparentes?

WRInaute passionné
(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:
#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:
border-top:30px transparent;

mais ça ne marche pas...

site concerné

http://vosgesfreeride.zeblog.com
 
WRInaute discret
Je suppose que c'est avec Internet Explorer.
C'est un des navigateurs qui refuse transparent pour border.
 
WRInaute passionné
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...
 
WRInaute discret
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.
 
WRInaute passionné
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!)
 
WRInaute accro
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" ?

;)
 
WRInaute passionné
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:
#TOP {
	BACKGROUND : #8099FB;
	
        border-top:40px solid #000000;
        padding-bottom:10px; 
	border-bottom:40px solid #000000;
	}
 
WRInaute impliqué
carole heinz a dit:
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:
#TOP {
	BACKGROUND : #8099FB;
	
        border-top:40px solid #000000;
        padding-bottom:10px; 
	border-bottom:40px solid #000000;
	}

comme ca ?

Code:
#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.
 
WRInaute impliqué
carole heinz a dit:
(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 ?
 
WRInaute passionné
NxtGen a dit:
comme ca ?

Code:
#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
 
WRInaute discret
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.
 
Haut