Aidenet.com Aide informatique et nouvelles technologies
 |
|
|
||||||||||||||||||||||||||||
|
Aidenet.com Aide informatique et nouvelles technologies
|
|||||||||||||||||||||||||||||||
Forum d'entraide sur l'informatique et les nouvelles technologies
Vous n'êtes pas identifié.
IE 6...
et ça marche également sous firefox sauf que le marron passe par dessus le menu...
C'est le problème avec les CSS, il faut s'adapter aux différents navigateurs et surtout IE6 ^^
Donc obligé de faire des petits hacks...
Pour le noir dans les images de ton menu dans IE6 c'est parce qu'il gère mal la transparence des png.
Mets les plutôt en gif pour IE6.
Je n'ai pas encore installé IE7 donc je ne pourais pas t'aider beaucoup, mais comme il est un peu plus respectueux que IE6 avec les feuilles de style, le code doit-être proche de celui pour firefox.
essaye quand même de mettre dans #conteneur2, margin-top : 20px
D'ailleurs je ne connais pas tout en CSS, mais margin-top : 0 20% me semble étrange... Tu donnes 2 valeurs sur une seule chose.
Hors ligne
salut 0 sa le centre 20 px c la largeur de la marge en haut 
j'ai esseiler oui dans 2 conteneur mais imposible.....
je n'y arrive pas
Hors ligne
Alors essaye peut-être dans #corps en enlevant le 0 comme ça : margin-top : 20px
En tout cas je continu de regarder pourquoi ça fonctionne dans IE6 et Firefox et pas IE7
Pour en revenir à margin-top : 0 20%, très franchement je n'ai jamais vu ça dans une feuille de style ou comme exemple sur un site.
En plus l'interêt de centrer une marge extérieure m'échappe...
Tu as codée ta CSS tous seul ou tu l'a récupérée ? si c'est le cas j'aimerais bien voir la source.
Hors ligne
salut
j'ai coder une partit de ma feuille
et des menbre "du site du zer" ma filer quelque code comme celui la
me vais tester sa avec le corp
et j'ai mis tout les image en gif comme sa sa marche partout et la qualiter est la meme
++
Hors ligne
non sa ne marche pas 
enfete c'est pas e corp qui donne se font maron mais le contener regarde :
#conteneur {
position : relative;
margin: 0 5%;
/* width : 1130px;*/
background-color: #a0522d;
/* background: url(images/5kwst7r1.jpg) 280px 380px repeat-x;*/
}
Hors ligne
non sa ne marche pas
sa ne change rien
personne d'autre
??
Hors ligne
salut je vais tester sa je n'est plus contener 2 dans mon code cetais un essais
je vais tester sa dans le corps
++
Hors ligne
salut
c'est bon j'ai reussi a faire se que je veuw
mais mintenan j'aimerais que mon menue ainsi que mon corp soit dans un disigne extansible ( disigne fluid)
regarder mais nouveaux code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Reptiland.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="accueil" href="accueil.css" />
</head>
<body>
<div id="conteneur">
<a class="baniere" href="accueil.html" title="Cliquez ici pour revenir à l'accueil">
<img src="http://images0.hiboox.com/images/1908/vsv4kh61.jpg" />
</a>
<div id="menu">
<div class="element_menu">
<h3>MENU</h3> <!-- Titre du sous-menu -->
<a class="mes_reptiles" href="reptiles.html" title="Cliquez ici pour decouvrir mes reptiles"></a>
<a class="mes_dispo" href="dispo.html" title="Cliquez ici pour decouvrir mes reptiles à vendre"></a>
<a class="mes_instalation" href="instalation.html" title="Cliquez ici pour decouvrir mes terrariums"></a>
</div>
</div>
<div id="corps">
<!-- Ici on mettra le contenu principal de la page -->
<h1>Bienvenue</h1>
<p>Bonjour et bienvenue sur mon nouveau site,<br />
ici je vous présente ma passion pour les reptiles.</p>
</div>
<div id="pied_de_page">
<!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
<p>Copyright 2008, tous droits réservés</p>
</div>
</div>
</body>
</html>et le css
body
{
width: 100%;
margin: 0 auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. */
background: url("http://images3.hiboox.com/images/1708/fqlq67xu.jpg") repeat-x;
/* margin-bottom:0px;*/
}
#conteneur {
position : relative;
margin: 0 5%;
/* width : 1130px;*/
/* background: url(images/5kwst7r1.jpg) 280px 380px repeat-x;*/
}
.baniere {
/* display: block;
width: 100%;
height: 380px;
margin: auto;*/
/* background: url(images/i8vygbxt2.jpg) no-repeat;
margin-left: 280px;*/
}
.baniere img {
display: block;
width: 100%;
margin : 0;
}
#menu {
float : left;
width: 280px;
height: 718px;
background-repeat: no-repeat;
background: url(http://images0.hiboox.com/images/1908/5kwst7r1.jpg) 0 0 no-repeat;
/* margin-left: 30px;
border-bottom: 4px ridge #6f3b02;
border-left:4px ridge #6f3b02;*/
margin-top:0px;
margin-right:20px
}
#menu h3 {
margin-top : 0;
text-align : center;
}
#corps {
width: 76%;
height: 100%;
margin-top : 20px;
background-color: #a0522d;
position : relative;
margin-left: 305px;
min-height: 718px;
}
#pied_de_page {
clear : left;
text-align : center;
background-color: #ddd;
}
.mes_reptiles
{
display: block;/*pour que l'ensemble soit cliquable et pas seulement le texte du lien*/
width: 220px;
height: 194px; /*remplace par les dimensions de l'image*/
background: url(http://images0.hiboox.com/images/2008/wcky5sie.gif);
background-repeat: no-repeat;
margin-left:30px;
margin-bottom:20px;
}
.mes_reptiles:hover /*pasag souri*/
{
background: url(http://images0.hiboox.com/images/2008/1yw0b0se.gif);
background-repeat: no-repeat;
}
.mes_dispo
{
display: block;/*pour que l'ensemble soit cliquable et pas seulement le texte du lien*/
width: 220px;
height: 194px; /*remplace par les dimensions de l'image*/
background: url(http://images0.hiboox.com/images/2008/c10hobul.gif);
background-repeat: no-repeat;
margin-left:30px;
margin-bottom:20px;
}
.mes_dispo:hover /*pasag souri*/
{
background: url(http://images0.hiboox.com/images/2008/dhxz5nah.gif);
background-repeat: no-repeat;
}
.mes_instalation
{
display: block;/*pour que l'ensemble soit cliquable et pas seulement le texte du lien*/
width: 220px;
height: 194px; /*remplace par les dimensions de l'image*/
background: url(http://images0.hiboox.com/images/2008/972sa3kt.gif);
background-repeat: no-repeat;
margin-left:30px
}
.mes_instalation:hover /*pasag souri*/
{
background: url(http://images0.hiboox.com/images/2008/kfiixyrf.gif);
background-repeat: no-repeat;
}
a img
{
border: none;/*enleve les bordure des image lien*/
}merci de votre futur aide
++
Hors ligne
bon... si j'ai bien compris tu veux que ton menu s'allonge quand tu rajoutes une image/lien
alors il faut que enleve no-repeat dans #menu
Par contre pour ton #corp (corps s'écrit avec un S à la fin ^^) il s'allongera avec du contenu...
Il faut que tu pense que généralement le menu est plus court que la zone principale...
Hors ligne
non enfete que veux que le corps et le menu soit fluide par raport a la resolution du visiteur
et j'ai remarque que sur ie sa me donne un resultat de m**** pas le meme que sur firerox :s
++
Hors ligne
ouè j'y est pensser aussi je vait voir sa
Hors ligne
j'ai fait ce petit bout de code qui reprends la mise en forme de ta page.
ça fonctionne dans IE6 et Firefox. Pas testé dans IE7 mais ç
<html>
<head>
<style type="text/css">
body {padding:0; margin:5px 0 0 0 ; width: 100%}
.container {display: block; width: 80%; background-color: green;}
.banniere {display: block; background-color: yellow}
.menu {display: block; background-color:orange; float: left; width: 20%}
.corps {display: block; background-color: red; float: left; width: 80%}
.footer {display: block; background-color : green}
</style>
</head>
<body>
<div align="center">
<div class="container">
<div class="banniere">banniere</div>
<div class="menu">menu</div>
<div class="corps">corps</div>
<div class="footer">footer</div>
</div>
</div>
</body>
</html>Hors ligne
mais c'est un code html ou un css que tu ma filais?
Hors ligne
salut
merci de ton aide
j'ai a peut pres compris et j'ai essayer sur mon code imposible sa ne marche pas
tu pourais essayer toi? :s
merci beaucoup
Hors ligne
Le problème ce sont les images en background du menu...
Essaye peut etre avec un tableau et des images comme ça :
<html>
<head>
<style type="text/css">
body {background: url("fqlq67xu.jpg") repeat-x;}
a img {border : 0}
.menu {background: url("5kwst7r1.jpg"); padding-bottom : 20px}
.baniere img {display: block; width: 80%; margin : 0; margin-bottom:20px}
.corps {background-color: #a0522d;}
.footer {background-color: #ddd;}
</style>
</head>
<body>
<div align="center">
<a class="baniere" href="accueil.html" title="Cliquez ici pour revenir à l'accueil"><img src="vsv4kh61.jpg" /></a>
<table border="0" cellspacing="0" cellpadding="0" width="80%">
<tr>
<td width="25%" class="menu" align="center">
<h3>MENU</h3>
<a class="mes_reptiles" href="reptiles.html" title="Cliquez ici pour decouvrir mes reptiles">
<img src="http://images0.hiboox.com/images/2008/wcky5sie.gif" name="reptiles"
onMouseOver="reptiles.src='http://images0.hiboox.com/images/2008/1yw0b0se.gif'"
onMouseOut="reptiles.src='http://images0.hiboox.com/images/2008/wcky5sie.gif'"></a>
<a class="mes_dispo" href="dispo.html" title="Cliquez ici pour decouvrir mes reptiles à vendre">
<img src="http://images0.hiboox.com/images/2008/c10hobul.gif" name="dispo"
onMouseOver="dispo.src='http://images0.hiboox.com/images/2008/dhxz5nah.gif'"
onMouseOut="dispo.src='http://images0.hiboox.com/images/2008/c10hobul.gif'"></a>
<a class="mes_instalation" href="instalation.html" title="Cliquez ici pour decouvrir mes terrariums">
<img src="http://images0.hiboox.com/images/2008/972sa3kt.gif" name="install"
onMouseOver="install.src='http://images0.hiboox.com/images/2008/kfiixyrf.gif'"
onMouseOut="install.src='http://images0.hiboox.com/images/2008/972sa3kt.gif'"></a></td>
<td width="20px"></td>
<td class="corps" align="center" valign="top"><h1>Bienvenue</h1>
<p>Bonjour et bienvenue sur mon nouveau site,<br />
ici je vous présente ma passion pour les reptiles.</p></td>
</tr>
<tr>
<td colspan="3" align="center" class="footer">Copyright 2008, tous droits réservés</td>
</tr>
</table>
</body>
</html>Hors ligne
salut
merci j'ai trouver le code tout marche merci de ton aide
Hors ligne
|
|
|
|