28173 sujets

CSS et mise en forme, CSS3

[résolu]Problème de border+bgcolor

Bonjour,
j'essaye d'appliquer à des éléments qui se trouvent les uns à coté des autres des background-color et des border, mais les background-color "mangent" les border:

<html>
<head>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}

#header {
background-color: #eeffff;
}

#conteneur {
margin-left: 5%;
margin-right: 5%;
margin-top: 5px;
background-color:#eeffff;
border: 1px solid #0099cc;
height:200px;
}
.menu {
position: absolute;
text-align:center;
background-color: #eeffff;
}
</style>
</head>

<body>

<div id="conteneur">

	<div id="header">
		<div class="menu" id="td0" style="left:5%;width:18%;border-right: 1px solid #0099cc;"><a>bla bla</a></div>
		<div class="menu" id="td1" style="left:23%;width:18%;border-right: 1px solid #0099cc;">bla bla</div>
		<div class="menu" id="td2" style="left:41%;width:18%;border-right: 1px solid #0099cc;">bla bla</div>
		<div class="menu" id="td3" style="left:59%;width:18%;border-right: 1px solid #0099cc;">bla bla</div>
		<div class="menu" id="td4" style="left:77%;width:18%;">bla bla</div>
	</div>

</div>
	  

</body>
</html>

Vous pouvez voir ce que ça donne ici
NB: ceci est un code simplifier, dans la réalité, je cherche à faire un rollover donc la couleur des cases devra être modifier une par une

Le bug se produit uniquement à gauche sous ie, partout sous ff, et aléatoirement sous opera
Si quelqu'un pouvait m'aider, il serait le bienvenu...
Modifié par sousoulebarbu (06 Nov 2007 - 10:18)
Hello,

Je pense que tes width sont mal choisies.
En effet, si on compte bien, le conteneur global fait 90% (marge 5% gauche et droite) et 5 conteneurs internes a 18% ca fait aussi 90%.

Le seul souci c'est que les borders sont AJOUTES à la taille que tu spécifies pour ton conteneur, tu te retrouves donc avec 90% + 4*1px

Pourquoi ça ne bug pas trop sous IE : car IE ajoute mal les border il me semble (à moins que ce soit juste les padding ?) et les compte à l'intérieur de la zone que tu spécifies (ptet que je confonds avec les padding en fait)

Bref donc je pense que la solution est là : donner des tailles moins grandes (ou du moins compter le border dans la taille que tu donnes)

De plus, n'oublie pas que les tables ne servent qu'à la représentation de données... Si c'est le cas ici, n'hésite pas à les utiliser Smiley cligne
Merci Lideln, mais que je sache, il est impossible de faire width:18%-1px
donc sachant que je souhaite que mes colonnes aient des largeur flexible mais que les bordure aient des valeurs fixes, comment dois-je m'y prendre (en évitant le javascript si possible(mais je sens que ça ne va pas être possible...)
Oula je t'ai jamais dit de mettre "width: 18% -1px" lol
Non si tu as compris ça c'est que je me suis mal exprimé.

Ce que je t'ai dit, c'est de revoir tes width. Essaie déjà de voir si avec une width:17% ça corrige ton problème de border, ce sera déjà ça de fait.

Ensuite au lieu de border tu peux essayer le outline, qui je crois ne modifie pas la taille totale de ton div.

outline: 1px solid red;


Encore une fois, si c'est pour représenter des données, rien ne vaut alors une table.
Lideln a écrit :
Essaie déjà de voir si avec une width:17% ça corrige ton problème de border, ce sera déjà ça de fait.

Bin, c'est justement ce que je voulais dire quand j'ai écrit 18%-1px: le problème c'est qu'en mettant 17%, il y a un espace de 1% entre chaque menu, et comme je mets border-right, ce qui est dans les cellules n'est pas centré.

outline: 1px solid red;

Sauf erreur de ma part, je viens de tester et il y a un gros problème: ie6 ne le comprend pas

a écrit :
Encore une fois, si c'est pour représenter des données, rien ne vaut alors une table

Le problème c'est que je compte faire des rollover en changeant la couleur de fond, et avec un table, c'est moyen moyen non? et en plus, je ne sais pas si ça change quelque chose, mais il y aura des images dedans. Mais de toutes les façons, je vais sûrement avoir le même problème non?
Modifié par sousoulebarbu (05 Nov 2007 - 16:37)
Mmmmh

Oui si tu travailles en % ET en pixels, tu auras une marge blanche en mettant 17%.

Pour le outline je sais pas si ça marche sous IE(mmerdant), en fait je sais juste que ça marche "en tous cas" sour FF.

Pour les tables, essaie de faire un ptit test, rien ne t'empeche d'affecter une classe à certains TD et de leur définir un :hover
Salut sousoulebarbu Smiley cligne ,

comme le dit Lideln, cela ressemble fort à un tableau. Si c'est la mise en forme qui te pose problème, tu devrais trouver de nombreux exemples à cette adresse Smiley langue .

Concernant le rollover, c'est plutôt le rôle de Javascript même si rien ne t'empêche de le rajouter également dans ta css...

A+
Lideln a écrit :
Pour les tables, essaie de faire un ptit test, rien ne t'empeche d'affecter une classe à certains TD et de leur définir un :hover


Eeeee, c'est sûrement une question débile, mais on peut mettre un attribut hover à une classe? j'avais essayer avec le code de début de page, en rajoutant une partie .menu :hover{...} mais ça ne fonctionnait pas. Je pense que je vais essayer de faire un tableau en fin de compte, pk je ne vais pas m'en sortir sinon...
Je vous tiens au courant
Oui tu peux bien entendu mettre un :hover à une classe.

Le seul truc c'est qu'il faut bien le COLLER à ton nom de classe Smiley smile
Si tu mets un espace (comme tu l'as fait dans ta réponse) ça ne fonctionnera pas !

Enjoy Smiley cligne

EDIT : donc ca te donnera :

table tr td.maClasse:hover
{
   background-color: red;
}


Enfin jte dis que ça marche... J'ai pas testé, mais "en principe" ça devrait Smiley smile
Modifié par Lideln (05 Nov 2007 - 17:51)
Bin sois j'ai mal comris, sois ya un hic:
<style type="text/css">
table td.menu{
background-color:#eeffff;

}
table tr td.maClasse:hover
background-color:#CDFBFE;

}
</style>
<TABLE CELLPADDING=2 CELLSPACING=1 BORDER=0 WIDTH=100% class="menu">
				<TR>
					<TD BGCOLOR=#EEFFFF ALIGN=center ID=td0>
						<img src="http://www.effortetjoie.com/grafx/accueil.gif" border=0>
					</TD>
					<TD BGCOLOR=#EEFFFF onMouseOver= ALIGN=center ID=td1>
						Vie du club
					</TD>
				</TR>
			</TABLE>
			.

Et ça marche pas Smiley decu
Re

lol c'est normal voyons Smiley smile
J'ai mis "maClasse" comme exemple... Et tu ne spécifies meme pas de classe pour tes TD !
Voici un exemple complet alors :
HTML

<tr>
    <!-- Ce TD sera "normal" -->
    <td>blabla</td>
    <!-- Celui la sera spécial -->
    <td class="maClasse">coucou</td>
</tr>

CSS

tr td.maClasse
{
   background-color: red;
}

tr td.maClasse:hover
{
   background-color: blue;
}


Voilà Smiley smile
Oups, en fait dans ce que j'avais testé, j'avais mis la classe sur table dsl Smiley confused
Et en plus je m'étais planté en le copiant dsl
Modifié par sousoulebarbu (05 Nov 2007 - 21:42)
Ah ?

La je peux pas mais ferai des tests asap.
Envoie moi ton code de test stp pour me faire gagner du temps Smiley smile
sousoulebarbu a écrit :
Surprise!! Ca ne marche pas avec ie6!!! Je hais internet explorer!!!

C'est normal car IE6 ne reconnait le hover que sur les liens (a:hover) Smiley cligne ... D'où l'intérêt du Javascript...
Ah ok j'ai testé l'exemple que j'ai donné à Sousoulebarbu avec IE7 et Firefox et ça fonctionnait.

Jpeux pas tester avec IE6 (enfin jcrois ?) donc jte fais confiance Heyoan.
Lideln a écrit :
Jpeux pas tester avec IE6 (enfin jcrois ?) donc jte fais confiance Heyoan.
Merci ! Smiley ravi
C'est fait, j'essayerais de poster quand j'aurais fini de le faire pour les futurs visiteurs.
En tout cas, un grand merci à tous les deux!!
Sujet clos
Aller à