Forums Développement Multimédia

Aller au contenu

barre de défilement

Débuté par 7he SlowCoach, Aug 12 2004 11:40 AM
CODE HTML CSS

11 réponses à ce sujet

#1 7he SlowCoach

    Ceinture Jaune

  • Members
  • PipPip
  • 21 messages

Posté 12 August 2004 - 11:40 AM

salut!
je viens vous embeter encore une fois avec mes petits problèmes!
pourquoi y a til une barre de défilement sur ma page?

http://ntn.ntn.free.fr

code de la page html:
<!DOCTYPE HTML SYSTEM>
<html>
<!-- Date de création: 10/1/2004 -->
<head>  

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Site du Docteur Olivier PAIRET</title>
<meta name="description" content="Site du Docteur Olivier Pairet, médecin généraliste">
<meta name="keywords" content="Docteur,Olivier Pairet, Pairet, Medecine, Medecine Generale, Medecine du Sport, Perbais, Walhain">
<meta name="author" content="Pairet Kids">
<meta name="generator" content="WebExpert 5">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


<div class="conteneur">


<div class="fond">
</div>
<ul>
   <li >    <a class="accueil"   href="http://ntn.ntn.free.fr/index.php"      title="Accueil du site du Docteur Pairet">      </a>   </li>
   <li >    <a class="cabinet"   href="http://ntn.ntn.free.fr/cabinet.php"    title="Informations concernant le cabinet du docteur Pairet">      </a>   </li>
   <li >    <a class="activites" href="http://ntn.ntn.free.fr/activites.php"  title="Informations concernant les activités d'un médecin généraliste">    </a>   </li>


   <li >    <a class="horaires"  href="http://ntn.ntn.free.fr/horaire.php"    title="Horaires de consultation du Docteur Pairet">     </a>   </li>
   <li >    <a class="gardes"    href="http://ntn.ntn.free.fr/garde.php"      title="Informations concernant la garde du week-end ">       </a>   </li>
</ul>
  

<div class="contenu">
Bienvenue sur le site du Docteur Pairet. Cliquez sur les liens ci dessus pour parvenir à chaque rubrique.<br>
<br>
<br>


Le docteur Pairet sera en congé du 15 août au 2<sup>er</sup> septembre. Durant cette période vous pouvez contacter les docteurs Bleeckx et Fremy.

<br><br>
Dr Bleeckx : 081/61 45 40

<br>
Dr Fremy : 010/65 50 62

<br>
<br>
La garde urgente du week-end reste toujours disponible au 010/650 150

<div align="right">
<a href="mail.php" title="envoyer un e-mail au Docteur Pairet">me contacter</a>

   <a href="liens.php" title="Liens référencés par le site du Docteur Pairet">Liens</a>
</div>


</div>






</body>
</html>

code css:



@charset "iso-8859-1";

/* auteur: Pairet Kids */

/* Date de création: 10/1/2004 */



.fond {

background: url(style2.png) no-repeat;

background-color: #fff;
z-index: 1;

width: 777px;

height: 300px;

}



.contenu {

background-color: #ffffff;
width:600px;

position: relative;

top:-50px;

left:150px;

height:225px;

font-size : 12px;

font-weight: normal;

font-family: "verdana", sans-serif;

z-index:2;

overflow: auto;



}



.conteneur {

position: absolute;

left: 50%;

top: 0px;

width: 777px;

margin-left: -388px;

border: 2px solid gray;

background-color: #ffffff;



}

body {

background: url(fond.png);

height: 100%;

width: 100%;

}



li {

list-style-type: none;

margin: 0px;

}



ul {

position: absolute;

top:0px;

left:0px;

margin: 0px;



}



.accueil {

background: url(acc.png) no-repeat;

width: 69px;

height: 31px;

position: absolute;

top: 173px;

left: 199px;

margin-left: 0px;

margin-top: 0px;

}





.cabinet {

background: url(cab.png) no-repeat;

width: 69px;

height: 30px;

position: absolute;

top: 160px;

left: 294px;

margin-left: 0px;

margin-top: 0px;

}



.activites {

background: url(act.png) no-repeat;

width: 74px;

height: 31px;

position: absolute;

top: 146px;

left: 389px;

margin-left: 0px;

margin-top: 0px;

}



.horaires {

background: url(hor.png) no-repeat;

width: 78px;

height: 35px;

position: absolute;

top: 138px;

left: 496px;

margin-left: 0px;

margin-top: 0px;

}



.gardes {

background: url(gar.png) no-repeat;

width: 69px;

height: 41px;

position: absolute;

top: 129px;

left: 610px;

margin-left: 0px;

margin-top: 0px;

}



.accueil:hover {

background: url(accover.png) no-repeat;

width: 70px;

height: 40px;

position: absolute;

top: 170px;

left: 196px;

margin-left: 0px;

margin-top: 0px;

}



.cabinet:hover {

background: url(cabover.png) no-repeat;

width: 73px;

height: 36px;

position: absolute;

top: 157px;

left: 295px;

margin-left: 0px;

margin-top: 0px;

}



.activites:hover {

background: url(actover.png) no-repeat;

width: 76px;

height: 40px;

position: absolute;

top: 142px;

left: 393px;

margin-left: 0px;

margin-top: 0px;

}



.gardes:hover {

background: url(garover.png) no-repeat;

width: 70px;

height: 38px;

position: absolute;

top: 129px;

left: 612px;

margin-left: 0px;

margin-top: 0px;

}



.horaires:hover {

background: url(horover.png) no-repeat;

width: 66px;

height: 38px;

position: absolute;

top: 133px;

left: 503px;

margin-left: 0px;

margin-top: 0px;

}



a {

text-decoration: none;

}





.tablehoraire{

border: 0;

font-size : 12px;

font-weight: normal;

font-family: "verdana", sans-serif;





}



<img scr="acc.png" style="display: none;" alt="" />    

<img scr="accover.png" style="display: none;" alt="" />
<img scr="act.png" style="display: none;" alt="" />
<img scr="actover.png" style="display: none;" alt="" />
<img scr="cab.png" style="display: none;" alt="" />
<img scr="cabover.png" style="display: none;" alt="" />
<img scr="fond.png" style="display: none;" alt="" />
<img scr="gar.png" style="display: none;" alt="" />
<img scr="garover.png" style="display: none;" alt="" />
<img scr="hor.png" style="display: none;" alt="" />
<img scr="horover.png" style="display: none;" alt="" />
<img scr="style2.png" style="display: none;" alt="" />

Merci de votre aide!

#2 Oliver1327245721

  • Members
  • PipPipPipPipPipPipPipPip
  • 1104 messages

Posté 12 August 2004 - 13:32 PM

Salut ! Bizarre... Je me demande si ça ne vient du fait que tu as définis pour tes class "conteneur" et "fond" un largeur de 777 px ? Quelle est la largeur de ton image de fond, "style2.png" ?

#3 Oliver1327245721

  • Members
  • PipPipPipPipPipPipPipPip
  • 1104 messages

Posté 12 August 2004 - 13:34 PM

En fait, je suis en train de me dire que ça peut aussi venir de ta class "body" qui est en 100% ? Mais attendons qu'un de nos pros se penchent sur le pb ! :)

#4 7he SlowCoach

    Ceinture Jaune

  • Members
  • PipPip
  • 21 messages

Posté 12 August 2004 - 18:12 PM

J'ai enlevé les propriétés width et height de ma class body et ca fonctionne!!! Merci beaucoup oliver...
Cependant je ne comprends pas trop pourquoi! Si qqu sait m'expliquer, ce serait super!

Encore merci
[ génial ce forum!!! ]

#5 Groumphy

  • Members
  • PipPipPipPipPipPipPipPip
  • 1084 messages

Posté 12 August 2004 - 18:36 PM

N'est-ce pas parce que tu détermine 100% sur la largeur et la hauteur de ton background qui se trouve etre une image ?

#6 7he SlowCoach

    Ceinture Jaune

  • Members
  • PipPip
  • 21 messages

Posté 12 August 2004 - 18:44 PM

J'ai essayé en enlevant l'image de fond. Et la barre de défilement est revenue. J'en deduis que ce n'est pas du a l'image.
Est-ce le fait que je donne une largeur de 100% et une hauteur de 100% au body qui fait ca ??!! ( ce serait qd mm absurde, non?)



body {

height: 100%;

width: 100%;

}

 


Sans les attributs height et width, les barres de défilement disparaissent!


body {

background: url(fond.png);

}

++ 7he SlowCoach

#7 wox-xion

  • Members
  • PipPipPipPipPipPipPipPip
  • 2009 messages

Posté 12 August 2004 - 20:52 PM

bas, c'est bien probable, car si tu utilise un conteneur principal à 100%, mais qu'il n'est pas seul.. et bien la page se fait exploser (entendre que le body en sort :wink: )

#8 Antoine

    Membre

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9152 messages

Posté 13 August 2004 - 09:53 AM

Peux-t-on m'expliquer qu'est-ce que des balise HTML img font dans la CSS ?

#9 mEga

  • Guests

Posté 13 August 2004 - 10:44 AM

Citation

Peux-t-on m'expliquer qu'est-ce que des balise HTML img font dans la CSS ?
il ya effectivement des balise <img> qui se perdent dans la css mais pas de balise <html> enfin ceci etant

Citation

<img scr="acc.png" style="display: none;" alt="" />
<img scr="accover.png" style="display: none;" alt="" />
<img scr="act.png" style="display: none;" alt="" />
<img scr="actover.png" style="display: none;" alt="" />
<img scr="cab.png" style="display: none;" alt="" />
<img scr="cabover.png" style="display: none;" alt="" />
<img scr="fond.png" style="display: none;" alt="" />
<img scr="gar.png" style="display: none;" alt="" />
<img scr="garover.png" style="display: none;" alt="" />
<img scr="hor.png" style="display: none;" alt="" />
<img scr="horover.png" style="display: none;" alt="" />
<img scr="style2.png" style="display: none;" alt="" />
n'a rien a faire dans une feuille de style :mrgreen:

#10 7he SlowCoach

    Ceinture Jaune

  • Members
  • PipPip
  • 21 messages

Posté 13 August 2004 - 11:19 AM

Effectivement ces balises ne doivent pas se trouver dans les css., merci :).
J'ai suivis l'article de AC-graphicstudio ( seulement j'ai du sauter les commentaires :mrgreen:
http://users.skynet.be/bs301964/acgraphic/...les/btperso.htm
Merci, oh cher responsable TIC :wink:

7he SlowCoach

@ Antoine: vive box office :wink:

#11 Antoine

    Membre

  • Honoris
  • PipPipPipPipPipPipPipPip
  • 9152 messages

Posté 13 August 2004 - 11:58 AM

Mort de rire.

bienvenue à toi !
J'avais pas shifter avec le nom :mrgreen:

#12 7he SlowCoach

    Ceinture Jaune

  • Members
  • PipPip
  • 21 messages

Posté 13 August 2004 - 13:05 PM

:wink: !!

J'ai encore un autre problème [incroyable mais vrai!! si si !!]
J'ai fait un menu en forme de stétoscope. lors du survol de chaque lien, une image doit s'afficher entre les deux barres métaliques ( a la place de menu ).
Sous Firefox, ca fonctionne parfaitement, mais pas sur IE6

le lien:http://apairet.free....650150/asbl.php
extrait html:
<div class="menu">
   <ul>
   <li ><a class="asbl"   href="#" title="ASBL"> <span id="spanasbl"></span>          </a>   </li>
   <li ><a class="generalistes"   href="#"    title="Les généralistes"><span id="spangeneralistes"></span> </a></li>
   <li ><a class="services" href="#" title="Nos services">  <span id="spanservices"></span></a></li>
   <li ><a class="gardes" href="#"  title="la Garde">  <span id="spangardes"></span> </a></li>
   <li >    <a class="liens" href="#" title="liens utiles">  <span id="spanliens"></span></a></li>
   <li ><a class="contact" href="#" title="Nous contacter"> <span id="spancontact"></span> </a></li>
</ul>                            

   </div>

extrait css:
 

.menu a span {

display: none;

font-weight: normal;

line-height: 1.2em;

text-align: left;

color: white;

z-index: 5;

}



.menu a:hover span {

display: block;

width: 87px;

height: 51px;

font-size: 0.8em;

z-index: 5;

}

#spanasbl{
position: absolute;

top:-36px;

left:424px;

background: url('.../menu/spanasbl.png');

z-index:5;

}



#spangeneralistes{
position: absolute;

top:-26px;

left:364px;

background: url('.../menu/spangeneralistes.png');

z-index:5;

}



#spanservices{
position: absolute;

top:-6px;

left:237px;

background: url('.../menu/spanservices.png');

z-index:5;

}



#spangardes{
position: absolute;

top:14px;

left:145px;

background: url('.../menu/spangardes.png');

z-index:5;

}



#spanliens{
position: absolute;

top:26px;

left:61px;

background: url('.../menu/spanliens.png');

z-index:5;

}



#spancontact{
position: absolute;

top:-25px;

left:83px;

background: url('.../menu/spancontact.png');

z-index:5;

}

 

Merci de votre aide!!
ps: merci à raphaël Goetter et www.alsacreations.com :mrgreen:
et tous les autres![/url]
Retourner dans Mise en page (x)HTML / CSS

1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)