CSS : problème de border

Marsh Posté le 21-09-2005 à 15:37:59

Salut à tous :hello:

j'ai un problème de CSS sur un border-bottom .

Voilà de quoi il retourne sur cette >>page<< quand la page d'accueil est active l'onglet est blanc et donc le code CSS est celui-ci :

Code :

#menuTutos a.lienActif {
color: rgb(101,138,170);
background-color:#ffffff;
border-top: 1px solid rgb(121,119,119);
border-left: 1px solid rgb(121,119,119);
border-right: 1px solid rgb(121,119,119);
border-bottom: 1px solid white;
/*border-bottom: 1px solid transparent;*/
text-decoration: none;
padding:2px 4px 4px 4px; /* valeur pour IE 5.5 */
line-height:21px; /* valeur que doit lire IE 5.5 */
voice-family:"\"}\"";
voice-family:inherit;
padding:2px 4px 4px 4px; /* valeur pour IE 6 */
line-height:21px; /* valeur que doit lire IE 6 */
}
html> body #menuTutos a.lienActif {
padding:4px; /* valeur que doit lire Firefox et Opera */
line-height:21px; /* valeur que doit lire Firefox et Opera */
}

Pour que l'onglet se confonde avec la page, j'ai mis un border-bottom blanc.

Sous Firefox tout est parfait.

Sous IE 5.5 et IE 6 le border ne s'affiche pas (mais ce n'est pas trop grâve car Internet Explorer n'a qu'à mieux interpréter le CSS)

C'est sous Opera que cela me contrarie un peu plus, car le border-bottom étant blanc il créé un espace blanc entre le border-left de l'onglet et le border-left du contenu.

J'ai essayé un border-bottom transparent, c'était parfait mais mon CSS n'était plus valide.

Comment solutionner ce problème ?

Mon CSS étant trop long je mets un lien : http://webtutoriels.free.fr/themes/style.css

Merci d'avance pour vos réponses.

[:fafane84]

---------------
Mon Topic de Vente Hardware

Reply

Marsh Posté le 21-09-2005 à 15:37:59

Reply

Marsh Posté le 22-09-2005 à 10:13:02

UP

---------------
Mon Topic de Vente Hardware

Reply

Marsh Posté le 23-09-2005 à 15:42:13

gueudz > cache du navigateur. Il utilise peu d'images, et la css est en cache.

Donc ca s'affiche vite pour les parties qui reviennent.

---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be

Reply

Marsh Posté le 23-09-2005 à 16:03:04

feuille de style liée par la balise link ou soit par la règle CSS @import

<link rel="stylesheet" src="feuille.css" type="text/css" title="Feuille de style" />

Message cité 1 fois

Reply

Marsh Posté le 23-09-2005 à 16:27:15

Salut et merci du compliment

J'ai essayé le border-bottom à 0px mais s'affiche alors le border-top du contenu.

Ceci-dit je pense changer de couleur d'onglet actif et d'après mes premiers test çà règlerai le problème puisque dans ce cas de figure je ferai un border-bottom de la même couleur que les autres.

[:fafane84]

---------------
Mon Topic de Vente Hardware

Reply

Marsh Posté le 23-09-2005 à 16:36:24

gatsusat a écrit :

feuille de style liée par la balise link ou soit par la règle CSS @import

<link rel="stylesheet" src="feuille.css" type="text/css" title="Feuille de style" />

Tiens je ne connaissais pas l'attribut "title" dans une balise <link />.

Peux-tu me dire quel est l'interet de cette balise, çà m'interesse beaucoup.

---------------
Mon Topic de Vente Hardware

Reply

Marsh Posté le 23-09-2005 à 16:39:07

A donner un titre à ta feuille de style si tu as plusieurs CSS liée à ta page

Message cité 1 fois

Reply

Marsh Posté le 23-09-2005 à 16:48:44

gatsusat a écrit :

A donner un titre à ta feuille de style si tu as plusieurs CSS liée à ta page

Et bien c'est le cas.

Chez moi en "local" j'ai 3 styles :

<link href="style1.css" rel="stylesheet" type="text/css" media="screen" />
<link href="style2.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />

J'ai nommé différemment les CSS

Mais je n'ai pas utilisé l'attribut title, concrêtement le titre se traduit comment par un affichage quand on affiche le CSS ?

Mais en y regardant de plus prés, je m'aperçois que mes CSS sont en href et non en src comme toi.

Quel est la différence ?

---------------
Mon Topic de Vente Hardware

Reply

Marsh Posté le 23-09-2005 à 17:14:21

href, c'est l'adresse du fichier
title, c'est pour avoir des affichages alternatif. IE ne le gére pas, mais firefox le gére trés bien. Ca permet de proposer plusieurs tronches au visiteur sans modifier une seule ligne dans la page.

Reply

Marsh Posté le 23-09-2005 à 17:19:53

exemple de openweb :

<link rel="stylesheet" type="text/css" href="/style/original/screen.css" media="screen" title="Normal" />
<link rel="stylesheet" type="text/css" href="/style/original/print.css" media="print" title="Normal" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir/screen.css" media="screen" title="Fond noir" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir/print.css" media="print" title="Fond noir" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir_medium/screen.css" media="screen" title="Fond noir/gros caractères" />
<link rel="alternate stylesheet" type="text/css" href="/style/fondnoir_medium/print.css" media="print" title="Fond noir/gros caractères" />
<link rel="alternate stylesheet" type="text/css" href="/style/minimale/screen.css" media="screen" title="Minimal" />
<link rel="alternate stylesheet" type="text/css" href="/style/minimale/print.css" media="print" title="Minimal" />
<link rel="alternate stylesheet" type="text/css" href="/style/sanshabillage/screen.css" media="screen" title="Sans habillage" />
<link rel="alternate stylesheet" type="text/css" href="/style/sanshabillage/print.css" media="print" title="Sans habillage" />

Reply

Marsh Posté le 23-09-2005 à 17:19:53

Reply

Marsh Posté le 23-09-2005 à 22:33:30

Merci pour toutes ses précisions

[:fafane84]

Message édité par fafane84 le 23-09-2005 à 22:33:57

---------------
Mon Topic de Vente Hardware

Reply

CSS : problème de border

Sujets relatifs:

Leave a Replay