28117 sujets

CSS et mise en forme, CSS3

Rajouter un menu déroulant.

Bonjour :
je suis débutant et j'aimerai ajouté un menu déroulant sur mon site
http://www.premiumorange.com/bazarduweb/
j'aimerai que lorsque on passe la souris(ou en cliquant dessus)
sur gallery un sous menu de quatre lien
se déroule dessous .
je trouve pas a chaque foi ces la pagaille dans le style général de la page , la taille n'ai pas la bonne. j'en ais ras le bol. un coup de main serai vraiment le bien venu .
je joins le code css
merci.


 body {
margin : 0 ; 
padding : 0 ; 
text-align : center;
 background : #6482A6 url(images_site/bg_all.gif) repeat-x;
 font-family : arial; 
 font-size : 12px; 
 color : #000000}

#content {
position : relative; 
width : 857px; 
 background : transparent;
 margin-left : auto;
 margin-right : auto;
 text-align : center; 
}

#haut {
border-top : 1px solid #E3FF78;
width : 100%; 
height : 303px ; 
background : url(images_site/haut.gif) no-repeat;
 margin-left : auto;
 margin-right : auto;
 text-align : left; }
 
 .img_haut {
 background : url(images_site/expo.gif) no-repeat;
 width : 558px;
 height : 206px;
margin : 80px 0 0 200px}
 

 
#centre {
width : 100%; 
background : url(images_site/centre.gif);
 margin-left : auto; 
 margin-right : auto;
 padding-bottom : 0;
 text-align : left }
 
#bas{
width : 100%; 
height : 151px ; 
background : transparent url(images_site/bas.gif);
 margin-left : auto;
 margin-right : auto }
 
 #menu {
 position : absolute ; 
left : 0px ; 
 top : 26px ;
text-align : left;
background : url(images_site/menuhaut.gif) top left no-repeat;
}


#menu ul{ 
 width : 202px ; 
 height : 275px; 
list-style: none; 
margin : 5px 0 0 0;
padding : 25px 0 0 29px;
text-transform : uppercase; 
}

 #menu li{
margin :0 ;
padding : 0 ;
list-style: none; 
line-height : 30px;
text-align : left;
text-indent : 5px  }

 #menu li a {
 background : transparent url(images_site/bg_menu.gif) bottom no-repeat; 
width: 150px;
display: block;
height : 30px;
text-decoration: none;
margin :  0;
padding : 0;
list-style: none;
color  : #FFF }


#menu li a:hover {
 background : transparent url(images_site/bg_menu_ov.gif) bottom no-repeat; 
 height : 30px;
}

.corect_bug_galery { 
width: 100%;
height: 145px;
 background : #CBFF00 url(images_site/bgbugmenu.jpg)}

dl.gallery
{

background : #6B82AD;
width: 167px;
text-align: center;
float: left;
margin : 0;
padding : 0;
color : #fff;
}

.gallery dt { }

.gallery dt img
{

width: 167px;
height: 124px;
border : none; 

}


.gallery dd
{
 font-weight: bold; 
 text-transform : uppercase; 
margin: 0;
padding: 0 0 4px 0;
background : #6B82AD;
color : #fff
}

.gallery dd a
{
color : #fff ; text-decoration : none; 
}

.gallery dd a:hover
{
color : #fff ; text-decoration : underline; 
}



#pub{
position : absolute;
bottom : 36px  !important; 
bottom : 35px ;
right : 2px  !important;
right : 1px;
width : 224px; 
height : 403px; 
 background : transparent url(images_site/menubrun.gif) top left no-repeat;
color : #fff; 
text-align : left; 

 }
 
.text_pub { 
 overflow : auto;
 width : 174px; 
height : 360px; 
margin : 20px 0 0 25px;
padding : 0;
background : transparent;  }


  
  .text_pub p{ 
padding : 0  10px 0  10px;
  }
  
  .text_pub a{ 
color : #fff ; text-decoration : underline
  }
  
    .text_pub a:hover{ 
color : #ffa500;  text-decoration : underline 
  }
  
  

.text_pub .top {padding-top : 20px; text-transform : uppercase; font-weight : bold} 





#bloc_centre{ 
width : 670px; 
 padding-bottom : 30px; 
background : #fff;
 margin-left : 88px !important;
 margin-left : 88px ;
text-align : left;}
 








 h1 {
 margin : 0  ; 
 padding :10px 0 0 15px ; 
 font-size : 24px ;  
 clear : left }
 
  h1 a{
color : #373737; text-decoration : none }
 

p {margin : 0  ;  padding : 0 0 0 15px ; }


.spacer {clear : both ; height : 13px}
.para_court {width : 70% ; padding : 5px 0 0 0 ; margin : 0 25px 0 20px ; }

a {color :#8b4513 ; text-decoration : underline}
a:hover {color : #000 ; text-decoration : underline}






.content_img {
background-color: #fff;
width: 141px ;
text-align: left;
padding: 10px 10px  0 12px ;
float: left;}

.google {width : 468px; height : 60px; background : #fff ; margin : 10px 10px  0  100px  }


h2 {margin : 0  ; padding :  0 ; font-size : 16px ; clear : left ; color : #373737 }
 
 
.speed  {
float : left ; 
width : 150px ; 
margin : 10px 0 0 15px !important ; 
margin : 10px 0 0 10px ; 
padding : 0 ; 
list-style : none}

.poussetop {margin-top : 10px}

.poussetop2 {margin-top : 5px}



.signature {height : 40px ; margin : 0 ; padding : 0 ; line-height : 40px ;}
Smiley biggrin
Modifié par yelo (26 Jan 2007 - 15:01)
Administrateur
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
bonjour et merci l'accueil,
j'ai déja fait des recherches essayé d'adapter des codes de menus
déroulant trouvé sur le net,mais je veux seulement rajouté sous gallery quatre choix et le seul menu que j'ai placer sans problème est en java avec un style des débuts de l'informatique. Smiley smile
Administrateur
a écrit :
le seul menu que j'ai placer sans problème est en java
Ah oui en effet, un menu en java Smiley sweatdrop

Hello,

Il y'a un tutoriel pas trop loin d'ici et qui me semble répondre à tes besoins.
Ce tutoriel n'est pas trop obsolète, il n'a qu'un an (même s'il est en cours de remaniement).
Modifié par Raphael (26 Jan 2007 - 15:16)
Administrateur
yelo a écrit :
Oui ces ca ou plutôt dans cette taille.

http://www.cssplay.co.uk/menus/dropdown.html

mais je l'ai ai deja essayer ces codes le probème ces comment je l'installe pile poil à la place de mes gallery, ces cela que je bataille a faire depuis plusieur jour.
Smiley ohwell

Voudrais-tu faire un effort sur l'orthographe et la lisibilité de tes messages car comme tu le sais, la vocation de ce forum est d'être accessible à tous... même aux personnes qui suivent ton sujet à l'aide d'une synthèse vocale.

Merci d'avance.

Pour ce qui est de la taille, des couleurs et des positions, il te suffit de les préciser au niveau de la feuille de style CSS qui est faite pour ça.

J'ai l'impression que les CSS ne te sont pas familiers, il va donc te falloir apprendre les bases minimales sans quoi il va être difficile de t'aider Smiley decu
je crois que je me suis tromper de forum. Smiley rolleyes
j'ai présisé au tout début que j'était débutant. Smiley confused
j'ai touché pour la première foi de ma vie un pc il y a même pas un an
15 heures par jour en moyenne pour apprendre le peut que je sais Smiley murf
si je viens sur un forum ces pour avoir de l'aide,et enfin passer à autre chose.je m'escuse pour les fautes d'ortographe ,je fais un effort mais on n'ai pas tous ingenieur. Accessible a tous veux dire aussi à tous les niveaux d'étude et tout age Smiley decu
sinon pour mon problème personne ne peux me dire ceux qui faut que je rajoute à la feuille de style et dans le code html pour avoir trois choix sous
gallery.
Merci pour votre aide et de vos conseils. Smiley cligne
Administrateur
Oups, j'espère que je ne t'ai pas vexé.
Je vais essayer de clarifier ce que je voulais dire et de t'apporter des pistes pour t'aider.

yelo a écrit :
je crois que je me suis tromper de forum. Smiley rolleyes

Ce forum, comme tu as pu le lire dans les Règles pendant ton inscription, est spécifique aux Standards Web, c'est à dire particulièrement aux langages XHTML, CSS, à l'accessibilité, etc.

Rien ne t'empêche d'être un débutant dans la conception web conforme, nous l'avons tous été.
Par contre je ne pouvais pas deviner que tu n'avais jamais touché aux CSS. Je t'invite donc à suivre une base minimale indispensable : http://normandlamoureux.com/cours/xhtml/

yelo a écrit :
je m'escuse pour les fautes d'ortographe ,je fais un effort mais on n'ai pas tous ingenieur. Accessible a tous veux dire aussi à tous les niveaux d'étude et tout age Smiley decu

Ne t'inquiète pas, je ne suis pas ingénieur, et je crois que je ne suis pas le seul. Cela ne m'empêche pas de faire attention à ce que j'écris, voire d'utiliser un dictionnaire pour être sûr... surtout quand j'ai envie qu'on m'aide ! Je crois que cela n'à rien à voir avec le niveau d'étude... enfin il me semble que l'orthographe de base est apprise au CP et à l'école élémentaire.

Le problème d'un message qui contient énormément de fautes est que cela devient inaccessible à une certaine partie de la population : notamment les non-voyants (entre-autre), qui utilisent un logiciel de lecture vocale des pages web... et qui n'arrivera pas à lire ce que tu as écrit.
Nous tenons à coeur d'être aussi accessibles à ces personnes.


yelo a écrit :
sinon pour mon problème personne ne peux me dire ceux qui faut que je rajoute à la feuille de style et dans le code html pour avoir trois choix sous
gallery.
Merci pour votre aide et de vos conseils. Smiley cligne

Il faudrait déjà nous montrer où tu en es. Comment as-tu intégré le code XHTML et le code CSS ? Qu'est-ce qui ne fonctionne pas ? etc.
Je comprend . Smiley confused le lien pour apprendre les bases du css est trés bien merci.Il ait dans mes favoris
pour mon problème

voila le code sur la page web
<div id="centre"> 
    <div id="bloc_centre"> 
      <div class="corect_bug_galery"> 
        <dl class="gallery">
          <dl> <IMG SRC="images_site/logophoto.jpg"></dl>
          <dd>[b]<a href="flach/index.php">gallery </a>[/b]</dd>
        </dl>

je voudrais rajouté en dessous de gallery( en gras au dessus)un petit sous menu et ne rien toucher au style de le page
le code css 
.gallery dd
{
 font-weight: bold; 
 text-transform : uppercase; 
margin: 0;
padding: 0 0 4px 0;
background : #6B82AD;
color : #fff
}

.gallery dd a
{
color : #fff ; text-decoration : none; 
}

.gallery dd a:hover
{
color : #fff ; text-decoration : underline; 
}
Smiley confused
bonsoir,
voila ! j'y suis presque seulement ,je rencontre un problème
pour le placer comme il faudrait, voila le resultat
http://www.premiumorange.com/bazarduweb/index1.html
je continue à chercher

Smiley cligne

j'ai réusi je suis content ,genial Smiley lol
oublié de fermer une ou deux balise
vous pouvez faire la corection pour voir si tout fonctionne
Modifié par yelo (26 Jan 2007 - 21:15)
il doit avoir un problème que je n'arrive pas à trouver le problème
pourtant j'ai vérifié trois fois ,?le menu de droite sous sculture est différent
je trouve pas l'erreur Smiley biggrin
Administrateur
Je ne le vois pas différent des autres : les éléments sont centrés comme les autres sous-menus.
Attentions aux fautes : c'est "Galerie" en français et "Sculptures sur glace"

EDIT : "Effémaire", c'est... "éphémère", etc.

C'est dommage de discréditer ton site avec de grosses fautes de français qui font très amateur Smiley decu
Modifié par Raphael (26 Jan 2007 - 21:58)
il y a une chose encore que j'aimerais vous demander,
je remarque qu'il faut retourner sur accueil pour que le sous menu disparaisse
il n'ait pas possible de faire en sorte qu'il disparaisse au depard de la souris.

Je voudrais m'escusé au prés des personnes non-voyante ,si il sont eu des problèmes pour suivre le sujet.
Et MERCI! Raphael,au moment ou j'ai baissé les bras face à ceux problème vous avez fais en sorte que je perssiste à chercher et enfin trouvé par moi même. Smiley cligne
@bientôt
Sujet clos
Aller à