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é.
salut
je suis entrain de faire un site et je suis bloquer
j'ai fait une bannière et avec quelque code j'ai reussi a la faire devenir cliquable (clique dessus retour a l'accueil).
pour mon menue j'ai fait une image de font mais celle ci prend les proprietés de ma bannière et devient aussi cliquable (clique dessus retour a l'accueil) mais moi je ne veux pas; comment laisser cette propriété qu'a la bannière?
MON 2eme PROBLÈME:
j'ai fait donc le font de mon menu et dessus j'aimerais y mettre des bouton cliquable
mais c'est bouton se mette dessous ou sous le font du menue
comment les mettre dessus?
j'espère que j'ai été clair c'est dur a expliquer ^^
voici mes codes:
le html
<!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="en_tete">
<a href="accueil.html"><img src="http://images3.hiboox.com/images/1708/85az7vqb.jpg" alt="Banierre site reptiland.com" title="Cliquez ici pour revenir à l'accueil" />
</div>
<div id="menu">
<a class="mes_reptiles"href="reptiles" alt="bouton_mes_reptiles" title="cliquez ici pour decouvrir mes reptiles"></a>
<img class="font_menu" src="http://images3.hiboox.com/images/1708/saqcjj2c.jpg" alt="planche_menu" title=" Menue"/>
</div>
<a class="mes_reptiles"href="reptiles" alt="bouton_mes_reptiles" title="cliquez ici pour decouvrir mes reptiles"></a>
<div id="corps">
<!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
<h1>Bienvenue</h1>
Bonjour et bienvenue sur mon nouveau site,</br>
ici je vous presente ma passion pour les reptiles.
</div>
<div id="pied_de_page">
Copyright 2008, tous droits réservés
</div>
<a class="bouton_bon_de_commande" href="http://www.google.fr/ig?hl=fr"></a>
</body>
</html>le css:
mes_reptiles
{
display: block;/*pour que l'ensemble soit cliquable et pas seulement le texte du lien*/
width: 280px;
height: 250px; /*remplace par les dimensions de l'image*/
background: url(http://images3.hiboox.com/images/1708/94n2v7tj.png) no-repeat;
margin-left: 290px;
}
.mes_reptiles:hover /*pasag souri*/
{
background: url(http://images3.hiboox.com/images/1708/ruhrqcro.png) no-repeat;
}
#menu
{
float: left; /* Le menu flottera à gauche */
width: 280px; /* Très important : donner une taille au menu */
height:800px;
background-repeat: no-repeat;/*limag se repet pa*/
}
.font_menu
{
margin-left: 30px;
border: 4px ridge #6f3b02; /* bordure otour du menu*/
}
.bouton_bon_de_commande {
display: block;/*pour que l'ensemble soit cliquable et pas seulement le texte du lien*/
width: 232px;
height: 74px; /*remplace par les dimensions de l'image*/
background: url(http://images3.hiboox.com/images/1608/baobju94.jpg) no-repeat;
}
.bouton_bon_de_commande:hover{ /*passage de la souri dessu*/
background: url(http://images3.hiboox.com/images/1608/sf9md0by.jpg) no-repeat;
}
a img
{
border: none;/*enleve les bordure des image lien*/
}oila
si vous avez pas compris mes explication rentre le css et html dans un ficher .css et.html vous comprendrez vite 
merci
Hors ligne
Salut,
Pour commencer pour mettre une image en fond, background-image fonctionne mieux.
Ensuite, penses à bien fermer toutes tes balises html à chaque fois sinon tu auras des miseres quand tu reviendras dessus.
Je pense que ça devrait suffire à te sortir la tête de tes pépins ^^.
Hors ligne
oki merci
je vais tester sa
Hors ligne
c'est encore moi ^^
j'ai reffet mon code html
avec background-image et sa ne marche pas ma baniere ne s'affiche pas;j'ai du oublier une balise mais je vois pas la quelle:
voici mes code:
html:
<!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="en_tete">
<!-- Ici on mettra la bannière -->
</div>
<div id="menu">
<div class="element_menu">
<h3>---->MENUE<----</h3> <!-- Titre du sous-menu -->
<ul>
<li><a href="accueil.html">Lien</a></li>
<li><a href="page2.html">Lien</a></li>
<li><a href="page3.html">Lien</a></li>
</ul>
</div>
</div>
<div id="corps">
<!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
<h1>Bienvenue</h1>
Bonjour et bienvenue sur mon nouveau site,</br>
ici je vous présente ma passion pour les reptiles.
</div>
</div>
<div id="pied_de_page">
<!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
Copyright 2008, tous droits réservés
</div>
</body>
</html>et mon css:
body
{
width: 100%;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background: url("http://images3.hiboox.com/images/1708/fqlq67xu.jpg") repeat-x;
}
en_tete
{
width: 1024px;
height: 300px;
margin: auto;/*centre la baniere*/
background-image: url("http://images3.hiboox.com/images/1708/85az7vqb.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
}merci pour votre futur aide
a+
Hors ligne
Bonjour,
Il ne manquerait pas un bout de ton css par hasard ?
La prochaine fois, upload également tes fichiers et donne les liens (en tout cas moi je préfère ^^).
++
Hors ligne
salut
il a pas de fichier page1.html et page2.html sont des truck que j'ais mis comme sa pour me reperer je les changerer plus tard
accueil.html c'est le code que vous voyez
et non il ne manque pas de css ^^
je vien de me rendre conpte que j'avais oublier le # avan en-tete mais sa ne marche toujour pas.....
mon probleme le font du site :
body
{
width: 100%;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background: url("http://images3.hiboox.com/images/1708/fqlq67xu.jpg") repeat-x;
}
se met sur la banniere :s
quand j'enleve le font la baniere apparait
??????
++
Hors ligne
c'est bon j'ai resolut mon probleme
merci
Hors ligne
Ok tant mieux alors ^^
ps : quand je parlais d'uploader tes fichiers, je parlais de tes fichiers sources pour éviter de copier/coller le code à partir du forum.
Hors ligne
ok j'avais pas compris ^^
mais je pense que je vais avoir besoin de votre aide tres rapidement ^^
ps:
vraiment bien se forum bravo a l'administrateur et au membre qui prenne le temps de nous aider
merci encore et a bientôt je pense ^^
Hors ligne
bon be c'est encore moi ^^
j'aimerais que ma baniere prenent tout l'écran du visiteur quelque soi sa resolution
es possible?
merci encore 
Hors ligne
tu l'as fait pour ton body ^^ -> width : 100%
Hors ligne
ouèp mais le body c'est la page entiere pas la bannière ^^
et quand je met les dimension de ma baniere en % sa ne change rien elle prend pas toute la page.... 
Hors ligne
width -> largeur
height -> hauteur
donc width: 100% devrait te permettre d'afficher ton image sur toute la largeur disponible de la fenetre
Hors ligne
regarde:
css:
body
{
width: 100%;
margin: auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
background: url("http://images3.hiboox.com/images/1708/fqlq67xu.jpg") repeat-x;
}
#en_tete
{
width: 1024px;
height: 300px;
margin: auto;/*centre la baniere*/
background-image: url("http://images3.hiboox.com/images/1708/85az7vqb.jpg");
background-repeat: no-repeat;
margin-bottom: 10px;
}html:
<!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="en_tete">
<!-- Ici on mettra la bannière -->
</div>
<div id="menu">
<div class="element_menu">
<h3><center>MENUE</center></h3> <!-- Titre du sous-menu -->
<ul>
<li><a href="accueil.html"><img src="http://images0.hiboox.com/images/1908/0nnhpk4b.png" alt="Banniere site reptiland.com" title="Cliquez ici pour revenir à l'accueil"/></li>
<li><a href="page2.html"</a></li>
<li><a href="page3.html"</a></li>
</ul>
</div>
</div>sa ne me fait rien
++
Hors ligne
je n'est toujours pas reussi a metre la banniere extansible sur toute la page : (
mais j'ai un autre probleme ^^
entre la baniere et le menue il y a un espace j'aimerais qu'il y en est pas
regarder sur la photo:
http://www.hiboox.com/lang-fr/image.php … pl6o0p.jpg
et mes code qui on pas mal avancer:
html:
<!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>
<a class="baniere" href="accueil.html" alt="Banniere" title="Cliquez ici pour revenir à l'accuiel"/></a>
<div id="menu">
<div class="element_menu">
<h3><center>MENUE</center></h3> <!-- Titre du sous-menu -->
</div>
<a class="mes_reptiles" href="reptiles.html" alt="Bouton_mes_reptiles" title="Cliquez ici pour decouvrir mes reptiles"/></a>
<a class="mes_dispo" href="dispo.html" alt="Bouton_mes_disponibilités" title="Cliquez ici pour decouvrir mes reptiles à vendre"/></a>
<a class="mes_instalation" href="instalation.html" alt="Bouton_mes_instalation" title="Cliquez ici pour decouvrir mes terrariums"/></a>
</div>
<div id="corps">
<!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
<h1>Bienvenue</h1>
Bonjour et bienvenue sur mon nouveau site,</br>
ici je vous présente ma passion pour les reptiles.
</div>
</div>
<div id="pied_de_page">
<!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
Copyright 2008, tous droits réservés
</div>
</body>
</html>et mon css:
body
{
width: 100%;
margin: auto; /* Pour centrer notre page */
margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
background: url("http://images3.hiboox.com/images/1708/fqlq67xu.jpg") repeat-x;
margin-bottom:0px;
}
.baniere
{
display: block;/*pour que l'ensemble soit cliquable et pas seulement le texte du lien*/
width: 100%;
height: 380px;
margin: auto;/*centre la baniere*/
background: url("http://images0.hiboox.com/images/1908/i8vygbxt.jpg");
background-repeat: no-repeat;
margin-left: 280px;
}
#menu
{
width: 280px;
height: 718px;
background-repeat: no-repeat;/*limag se repet pa*/
background-image: url("http://images0.hiboox.com/images/1908/5kwst7r1.jpg");
background-repeat: no-repeat;
margin-left: 30px;
border-bottom: 4px ridge #6f3b02; /* bordure otour du menu*/
border-left:4px ridge #6f3b02; /* bordure otour du menu*/
margin-top:0px
}
.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/1908/xrw5bubq.png);
background-repeat: no-repeat;
margin-left:30px;
margin-bottom:20px;
}
.mes_reptiles:hover /*pasag souri*/
{
background: url(http://images0.hiboox.com/images/1908/tiioto8o.png);
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/1908/wpa9kg5l.png);
background-repeat: no-repeat;
margin-left:30px;
margin-bottom:20px;
}
.mes_dispo:hover /*pasag souri*/
{
background: url(http://images0.hiboox.com/images/1908/nq0s699u.png);
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/1908/ycxaar4f.png);
background-repeat: no-repeat;
margin-left:30px
}
.mes_instalation:hover /*pasag souri*/
{
background: url(http://images0.hiboox.com/images/1908/nelqsvia.png);
background-repeat: no-repeat;
}
a img
{
border: none;/*enleve les bordure des image lien*/
}comment enlever cette espace?
merci
Hors ligne
Salut
je pense qu'en mettant float:left dans les propriétés de la bannière et du menu ça devrait marcher
Hors ligne
Pour la banniere qui ne prend pas toutes la page, comme tu mets un no-repeat, il faut que ton image de fond fasse la même largeur que ton style en_tete, donc 1024px.
Petite remarque : menu ne prends pas de E à la fin... ^^
Hors ligne
salut merci de votre aide
mais j'ai deja reussi 
mais j'ai un autre probleme ^^
j'aimerer que le corp ( en maron) qu'il y est un marge entre la banniere et le corp et une marge entre le menu et le contenu marron vous me suivez ?
voici mes codes:
<!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="http://www.reptiland.fr/" 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="conteneur2">
<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>
<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>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-color: #a0522d;*/
/* 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 {
margin-left : 280px;
}
#conteneur2
{
position : relative;
margin-left: 0 20%;
margin-top: 0 20%;
background-color: #a0522d;
}
#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/1908/xrw5bubq.png);
background-repeat: no-repeat;
margin-left:30px;
margin-bottom:20px;
}
.mes_reptiles:hover /*pasag souri*/
{
background: url(http://images0.hiboox.com/images/1908/tiioto8o.png);
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/1908/wpa9kg5l.png);
background-repeat: no-repeat;
margin-left:30px;
margin-bottom:20px;
}
.mes_dispo:hover /*pasag souri*/
{
background: url(http://images0.hiboox.com/images/1908/nq0s699u.png);
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/1908/ycxaar4f.png);
background-repeat: no-repeat;
margin-left:30px
}
.mes_instalation:hover /*pasag souri*/
{
background: url(http://images0.hiboox.com/images/1908/nelqsvia.png);
background-repeat: no-repeat;
}
a img
{
border: none;/*enleve les bordure des image lien*/
}merci
Hors ligne
J'ai récuperé ton code et j'ai bien un espace entre le container et le menu et la bannière..
Tu veux peut-être dire entre le texte dans le container et les bord de celui-ci ?
Si c'est le cas il faut que tu mettes un padding dans ton container.
Par exemple pour mettre un espace en haut, à droite, en bas et à gauche :
padding : 5px
Tu peux aussi l'écrire comme ça pour avoir des valeurs différentes :
padding : 5px 3px 2px 5px;
Les valeurs étant dans l'ordre : haut droite bas gauche (comme le sens des aiguilles d'une montre)
Hors ligne
non ce n'est pas sa je ne veux pas deplacer le texte
regardez avec cette image tres tres vite fait ^^
je veux que ou on vois le trais noir la avec ecris font ici je veux que l'on vois le font du site (le degrader)
vous comprenez?
merci
Hors ligne
Tu as oublié de mettre l'image je crois ^^
ça m'arrangerais bien parce que j'ai un peu de mal à comprendre ce que tu veux ^^
PS : et mets un D à la fin de fond parce que du coup je confonds avec "font" en css ^^
Hors ligne
lol tien
je ne sais pas si tu comprend mais bon si tu compren pas je te ferais sa au propre sur photoshop
Hors ligne
|
|
|
|
