CSS : 3 div empilé MAIS espace entre eux sous IE ?

hx.jonathan · 5 Novembre 2009

Salut,

J'ai une autre question en css. J'ai 3 blocs les uns au dessus des autres avec pour chacun une image de fond. Sous firefox j'ai bien mes 3 blocs empilés sans espaces entre eux. Sous IE, j'ai un espace entre le bloc cadrerighttop et le bloc cadrerightrepeat.

Code:

.cadrerighttop {

height:15px;
background-image:url("../images/cadrerighttop.jpg");
background-repeat: no-repeat;
border:black solid 1px;
}
.cadrerightrepeat {

height:100%;
background-image:url("../images/cadrerightrepeat.jpg");
background-repeat: repeat-y;
border:black solid 1px;
}
.cadrerightbottom {

height:14px;
background-image:url("../images/cadrerightbottom.jpg");
background-repeat: no-repeat;
border:black solid 1px;
}

HTML :

Code:

	         <div class="cadrerighttop"></div>
				<div class="cadrerightrepeat"></div>
				<div class="cadrerightbottom"></div>

Auriez-vous une idée sur comment ne pas avoir d'espace du tout entre les 3 div ??

Merci

screuscreu · 5 Novembre 2009

tu as un lien où c'est implémenté que l'on puisse faire joujou avec firebug ?

bon courage

spout · 5 Novembre 2009

Avec une URL ce serait plus simple (barre webdevelopper + edit CSS en live...)
Il n'y aurai pas du padding et/ou margin par hasard ?

Code:

.cadrerighttop, .cadrerightrepeat, .cadrerightbottom{
padding:0;margin:0;
}

hx.jonathan · 5 Novembre 2009

Ouais voilà :

http://www.amisphereclub.be/new/

spout · 5 Novembre 2009

Dans firefox on ne voit même pas le bloc du milieu.
Ca doit etre un problème de margin/padding par défaut du navigateur

C'est pour faire des bords arrondis à un bloc si j'ai bien compris. tu peux essayer de les faire avec ce site: http://www.roundedcornr.com/
Qui génère CSS + images

Sinon en JS pour éviter les div imbriqués: http://www.methvin.com/jquery/jq-corner-demo.html

Je sais pas si ça t'aide...

hx.jonathan · 5 Novembre 2009

J'ai testé jquery mais suis pas une bete en javascript. Je sais pas quoi mettre dans cette balise script en début de page html pour que ça fonctionne. Car dans l'exemple il met ceci :

Code:

<div class="demo"><h1>Round</h1> <p>$(this).corner();</p></div>

Mais moi je veux pas afficher $(this).corner(); Je comprends pas trop. Quelqu'un pourrait me donner un exemple hyper bidon avec juste un div et l'appelle à la bonne fonction. J'ai regardé sur le site mais y a tellement de trucs.

spout · 6 Novembre 2009

Le code jquery, tu dois le mettre dans un document.ready:

Dans ton <head> après l'include jquery et jquery corners:

Code:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$('.demo').corner();
});
//]]>
</script>

bproductiv · 6 Novembre 2009

en css3 hhttp://www.alsacreations.com/tuto/lire/891-coins-arrondis-css-sans-images.html