Questions pour un débutant en CSS

Questions pour un débutant en CSS - HTML/CSS - Programmation

Marsh Posté le 25-10-2007 à 11:07:00    

Bonjour à tous,
 
Je suis en train de faire un site en CSS, et j'ai quelques petites questions, qui pour vous sembleront peut-être évidentes, mais pour moi qui ne le sont pas forcément  :)  
 
Tout d'abord, lorsque l'on crée un site en CSS, doit-on pour chaque lien recharger l'ensemble de la page (avec menu, header, etc...) ou peut-on juste changer ce qu'il y a dans la partie principale ? (Je sais pas si je me fais bien comprendre  :sweat: )
 
Ensuite, j'ai un petit souci avec la fonction "overflow" que je n'arrive pas à activer; peu importe où je la place (code HTML ou CSS), ça ne fonctionne pas et, lors de mes tests, la page s'étend en longueur...
 
voici le code html :
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>plop</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="plop.css" rel="stylesheet" type="text/css">
</head>
 
<body bgcolor="#000000" leftmargin="0">
<table width="750" border="0" align="center" cellpadding="0" cellspacing="0" background="images/fond.jpg">
  <tr>
    <td align="center" valign="top">
<!--DEBUT HEADER=============================================-->  
 <table width="750" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><img src="images/header.jpg" width="750" height="140"></td>
        </tr>
      </table>
<!--FIN HEADER=============================================-->    
      <table width="750" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="120" align="center" valign="top">
<!--DEBUT MENU=============================================-->      
            <table width="120" height="400" border="0" cellpadding="0" cellspacing="0">
              <tr>  
                <td align="center"><a href="index.html" class="Rubrique">Accueil</a></td>
              </tr>
              <tr>  
                <td align="center"><a href=".html" class="Rubrique">lien 1 </a></td>
              </tr>
              <tr>  
                <td align="center"><a href=".html" class="Rubrique">lien 2 </a></td>
              </tr>
              <tr>  
                <td align="center"><a href=".html" class="Rubrique">lien 3 </a></td>
              </tr>
              <tr>  
                <td align="center"><a href=".html" class="Rubrique">lien 4 </a></td>
              </tr>
              <tr>
                <td align="center"><a href="mailto:" class="Rubrique">Contact</a></td>
              </tr>
            </table>
<!--FIN MENU=============================================-->    
          </td>
          <td align="center" valign="top">
<!--DEBUT BLOC CONTENT=====================================-->    
    <table width="620" height="400" border="0" cellpadding="0" cellspacing="0">
              <tr>
                <td class="Content"><p>Mel etiam oportere ex. At sea copiosae recteque. Mel ut alii dicit, ei usu   perpetua periculis contentiones, probo semper pri id. Usu no magna omittm   appellantur, ei vel ponderum facilisi. His alia natum facilis te, vis hinc oratio probatus cu. In sed sint eruditi voluptatum. Mutat habemus no qui, vis   facer labitur labores an, hinc albucius consulatu ius ea. Nec at dicunt   ancillae. Tritani invenire te sea, ea vix quod suas vidisse. Usu deleniti   quaerendum in, mea et minim eruditi percipit. Has ad interesset accommodare, quo   dicit nihil intellegebat ei, has epicuri gloriatur instructior ea. Qui no   persius bonorum dissentiunt, qui et molestiae cotidieque consectetuer, his   cetero viderer consulatu te. Oportere disputando philosophia id usu. Assum   comprehensam in mea, nam ex vituperatoribus sanctus iudico. Elitr fabulas mel   ex. Sed admodum detracto an. In vel diam quas exerci, at velit aliquip denique   cum. His ex altera definitionem, in sumo eloquentiam pro, nec ut posse reformidans. Nonumy aliquando vim at, in alterum torquatos consetetur vel. Viris   habemus dolores nam ea, utinam option eu per, cu duo vidit modus deterruisset. Cum te diam persecuti. Iudico partiendo concludaturque pro ex, no quas natum   volumus est, vis et dicunt scripta. Te ius feugiat euripidis reprehendunt,   vocent aliquip nonummy per ea, te duis graeci conceptam nam. No nullam habemus   vel, te est autem verterem detraxit, eu minimum propriae ius. Mel diam quidam   te, at cum stet convenire expetenda, cum senserit democritum te. Ad elit   ancillae neglegentur his, et eam placerat conceptam, justo quaerendum sed te.   Vel tamquam nominavi torquatos ad, te option phaedrum pro, elit aliquip   corrumpit in ius. Eum volumus pericula cu. Per lorem saepe timeam te, cum ludus   inciderint ut. Mucius rationibus eloquentiam nec eu, virtute accusata assueverit   an pri, ei mea tempor bonorum equidem. Qui idque molestiae mnesarchum ex. Sit   voluptaria consequuntur interpretaris ea, salutatus comprehensam usu ea. Qui te   summo electram iracundia, ex mel scripta tritani. Eos eius minim laoreet ne,   labitur pertinax est ne. Nam et tamquam appellantur, enim mediocrem cu cum.   Everti verear cu has, ad quo facete fastidii. Te est alia ubique. Mea in populo   utamur assueverit, delenit oportere explicari in sit, possim abhorreant   deterruisset ea ius. Eam ei augue possit minimum. Eam cu facete mollis, debitis   patrioque quaerendum duo eu. Pri probo error id. Tation volumus cu sea, id enim   agam meis vim. Cu mucius intellegebat delicatissimi eum, illum movet labore usu   ei. At ferri ubique vix, has eu omnesque evertitur, commodo nusquam deleniti in   sed. Euismod intellegat per cu. Cum et eros quaestio, enim populo cum in.<br>
                    <br>
     Sit voluptaria consequuntur interpretaris ea, salutatus comprehensam usu ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur, enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii. Te est alia ubique. Mea in populo utamur assueverit, delenit oportere explicari in sit, possim abhorreant deterruisset ea ius. Eam ei augue possit minimum. Eam cu facete mollis, debitis patrioque quaerendum duo eu. Pri probo error id. Tation volumus cu sea, id enim agam meis vim. Cu mucius intellegebat delicatissimi eum, illum movet labore usu ei. At ferri ubique vix, has eu omnesque evertitur, commodo nusquam deleniti in sed. Euismod intellegat per cu. Cum et eros quaestio, enim populo cum in.<br>
     <br>      
                     Lorem ipsum no sit altera forensibus, vix ea veniam fierent molestie. Duo iriure   veritus ei, est no regione dolores. Vel et labore nemore referrentur, aeterno   convenire eu sed, cum porro zzril te. Et ius labitur explicari, has no quis   sententiae moderatius. Aliquip scaevola apeirian vel eu, aliquip mentitum ut   pri, rebum nihil te his. Eam malis euismod ad. Aeterno corrumpit eu quo. Solet   vocent voluptatibus at cum, animal constituto definitiones sit ei. Qui et tale   recteque, habeo persecuti dissentias in his. Id eum mollis insolens maiestatis.   Minim noster corrumpit cu usu, eu ferri oportere consequuntur vel. Porro   salutandi assentior vis ad, no has assum sonet sapientem, usu doctus euismod te.   Sed vitae noster ei, no duo sumo facer. Ne sed imperdiet voluptatum   disputationi. Wisi aliquid in pro, ex ridens tritani docendi nam, ius ut   ocurreret persecuti. Ne quo eius falli eruditi, ius alia oblique antiopam ut, ne   nec impedit corpora eligendi. His puto menandri ad, idque similique abhorreant   et pri. Ad sint inermis eligendi mea, te sit possit offendit. Ex clita fierent   eum, an qui debitis nonummy facilisis, in per moderatius definitiones. Nonummy   repudiare eos ea. Ius modo putant expetenda ad, ius nostrud eligendi te, vis   partem minimum cu.</p>
                </td>
              </tr>
            </table>
<!--FIN BLOC CONTENT=====================================-->
          </td>
        </tr>
      </table>
<!--DEBUT FOOTER=========================================-->    
      <table width="750" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" valign="bottom" class="Footer">Design &copy; plop</a></td>
        </tr>
      </table>
<!--FIN FOOTER=========================================-->    
   </td>
  </tr>
</table>
</body>
</html>

 
 
et voici le code CSS:
 
 

/*image de fond des boutons du menu*/
.Rubrique {
 font-family: Verdana;
 font-size: 10px;
 font-style: normal;
 line-height: 20px;
 font-weight: normal;
 color: #000000;
 text-decoration: none;
 background-image: url(images/rubrique2.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 text-align: center;
 vertical-align: middle;
 display: block;
 height: 20px;
 width: 110px;
}
/*image de fond des boutons du menu lors du passage de la souris*/
.Rubrique:hover {
 font-family: Verdana;
 font-size: 10px;
 font-style: normal;
 line-height: 20px;
 font-weight: normal;
 color: #000000;
 text-decoration: none;
 background-image: url(images/rubrique.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 text-align: center;
 vertical-align: middle;
 display: block;
 height: 20px;
 width: 110px;
}
/*caractéristiques du contenu*/
.Content {
 font-family: Verdana;
 font-size: 10px;
 font-style: normal;
 font-weight: normal;  
 color: #FFCC66;
 text-decoration: none;
 padding: 5px;
 text-align:justify;
}
/*caractéristiques du bas*/
.Footer {
 background-image: url(images/footer.jpg);
 background-repeat: no-repeat;
 background-position: center center;
 height: 140px;
 width: 750px;
 font-family: Verdana;
 font-size: 10px;
 font-style: normal;
 font-weight: normal;
 color: #FFCC66;
 text-decoration: none;
 text-align: center;
 vertical-align: bottom;
 display: block;
 
}
a {
 font-weight: bold;
 color: #FFCC66;
 text-decoration: none;
}
a:hover {
 font-weight: bold;
 color: #FFCC66;
 text-decoration: underline;
}

 
De plus, si vous avez des critiques sur le code, des améliorations qu'il serait bon de faire, ou quoi que ce soit d'autre, je suis preneur  :lol:  
 
Merci  :jap:


---------------
sauvez un arbre, mangez un castor...
Reply

Marsh Posté le 25-10-2007 à 11:07:00   

Reply

Marsh Posté le 25-10-2007 à 11:25:59    

alors on va commencer par le début :o
Tu prends tout ce que tu as fait et tu le mets à la poubelle, ensuite tu vas lire 2/3 tutoriaux sur la mise en page en utilisant des css ( et pas des tableaux) par exemple ici http://css.alsacreations.com/Faire [...] -tableaux/
Et ensuite tu reviens avec tes nouveaux problèmes :)
 
note: il existe une balise code qui permet de mettre en page du ... code dans les topics, n'hésite pas à t'en servir.

Reply

Marsh Posté le 25-10-2007 à 11:32:21    

lol
au moins c'est clair...
je regarde ça et je reviens

Reply

Marsh Posté le 26-10-2007 à 17:56:08    

yop, c'est envore moi...
 
j'ai vu que l'on pouvait changer la barre de défilement d'un site dans la feuille css et à partir de ça, j'ai essayé d'intégrer dans ma feuille le code suivant, mais qui ne donne rien :
 

Code :
  1. textarea {
  2.   background-color:#8C8CC6;
  3.   color:#FFFFFF;
  4.   font-family:"Andale Mono",Arial,sans-serif;
  5.   scrollbar-base-color:#8C8CC6;
  6.   scrollbar-3dlight-color:#FFFFFF;
  7.   scrollbar-arrow-color:#FFFFFF;
  8.   scrollbar-darkshadow-color:#000000;
  9.   scrollbar-face-color:#8C8CC6;
  10.   scrollbar-highlight-color:#FFFFFF;
  11.   scrollbar-shadow-color:#000000;
  12.   scrollbar-track-color:#ACACE6;
  13. }


 
vous auriez une idée du problème ? j'ai essayé de le mettre dans la partie "body" ou dans la partie principale de la page où se trouve le texte... rien du tout =(
 
P.S.: anapajari, effectivement c'est mieux avec la balise code lol


Message édité par mrplop le 26-10-2007 à 17:58:30
Reply

Marsh Posté le 26-10-2007 à 18:01:44    

bon en fait c'est bon j'ai trouvé :P

Reply

Marsh Posté le 29-10-2007 à 14:45:28    

merci du lien, je vais aller voir ça de suite...

Reply

Marsh Posté le 30-10-2007 à 13:40:13    

bon c'est encore moi...  :p  
 
j'ai essayé un petit truc mais le rendu ne correspond pas vraiment à ce que je voulais, et je n'arrive pas à voir où ça merde !
j'ai voulu faire, dans la frame principale, des blocks sur lesquels on peut cliquer et qui contiendront des images : au final, j'aurais voulu 3 lignes de 7 vignettes.
j'ai donc commencé par une ligne pour voir si le code fonctionnait mais je me retrouve avec une ligne verticale de 7 vignettes, qui plus est avec des puces, et je ne sais vraiment pas d'où elles viennent !
 
voici le code html :
 

Code :
  1. <div class="frame">
  2.   <ul class="images">
  3.   <li><a href="" title= "plop1">lien1</a></li>
  4.   <li>test de titre</li>
  5.   <li><a href="" title= "plop2">lien2</a></li>
  6.   <li><a href="" title= "plop3">lien3</a></li>
  7.   <li><a href="" title= "plop4">lien4</a></li>
  8.   <li><a href="" title= "plop5">lien5</a></li>
  9.   <li><a href="" title= "plop6">lien6</a></li>
  10.   </ul>
  11. </div>


 
et voici le code css :
 

Code :
  1. .images li {
  2. margin-top: 30px;
  3. margin-left: 28px;
  4. }
  5. .images a {
  6. margin: auto;
  7. color: #000000;
  8. text-decoration: none;
  9. background-image: url(images/image.jpg);
  10. background-repeat: no-repeat;
  11. background-position: top left;
  12. text-align: center;
  13. text-indent: -4000px ;
  14. display: block;
  15. height: 90px;
  16. width: 50px;
  17. }
  18. .images a:hover {
  19. background-image: url(images/image.jpg);
  20. background-position: top right;
  21. }


 
 
avez-vous une idée de comment virer les puces et de mettre ça à l'horizontale ?  :??:  
merci  :bounce:

Reply

Marsh Posté le 30-10-2007 à 14:06:28    

adnvirus a écrit :

Salut si tu cherche encore des solutions a d'éventuels problème va voir ici:
elmodit : pas la peine de citer le lien :o

 

ta pub tu te la fous dans le cul ok [:pingouino dei]
ton site est nul

 

@MrPlop en css :

 
Code :
  1. ul.images {list-style-type:none;}


et dans .images li tu rajoutes

Code :
  1. display:inline;


Message édité par Elmoricq le 30-10-2007 à 14:08:32

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 30-10-2007 à 14:08:43    

je plussoie miRROR, mais si tu as besoin d'avoir une taille "commune" pour tes li, il te sera alors peut-être nécessaire de les laisser en display block mais avec un float left.

Reply

Marsh Posté le 30-10-2007 à 14:11:45    

rapide notre nouveau elmoreichstag :o

 

elmodit : par contre je sais pas qui a effacé le message, harko surement [:dawao]


Message édité par Elmoricq le 30-10-2007 à 14:13:01

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 30-10-2007 à 14:11:45   

Reply

Marsh Posté le 30-10-2007 à 17:21:41    

merci bien, mais j'ai essayé et ça ne marche pas...
le display:inline a enlevé les puces mais du coup, mes margin top et left sont zappées et les block sont collées les uns aux autres et restent à la verticale.
ensuite, je ne vois pas à quoi sert la fonction ul.images {list-style-type:none;} vu que ça ne change rien dans ma présentation  :(  
j'ai donc essayé l'alternativ d'anapajari et là, c'est bien en ligne mais pareil, les fonctions margin top et left sont zappées aussi et les blocks sont aussi collés...


Message édité par mrplop le 30-10-2007 à 17:22:31
Reply

Marsh Posté le 30-10-2007 à 19:24:36    

comme son nom l indique c est ul.images {list-style-type:none;} qui enleve les puces
et vu ce que tu veux faire la solution d anapajari est mieux
dans .images li display:block;float:left;


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 30-10-2007 à 19:29:48    

merci, ça marche nickel !
et comme on dit, à la prochaine =P

Reply

Marsh Posté le 12-12-2007 à 16:14:10    

Yop à tous, ça fait un bail,  :hello:  
 
Je viens de terminer mon site à 93.4%  :D (j'ai dû le mettre en pause un moment, d'où le temps entre les posts...)
Mais j'ai un petit souci d'image : de façon général, les sources des images sont dans le code CSS comme on me l'a conseillé.
De plus, pour les images qui possèdent un hover comme pour le menu, une image totale a été faite pour tout mais avec des background-position (dans le but de charger qu'une image comme j'ai pu le lire...)
 
Alors je ne sais pas si c'est à cause de ça ou pas (cela se passe aussi pour les images qui n'ont pas cette fonction), mais il y a des fois où les images ne se chargent pas toutes dans l'explorer, sans qu'il y ait pour autant la barre de chargement en bas de la page; pour le navigateur, il a fini de tout charger et je suis obligé d'actualiser la page, une voire plusieurs fois, pour obtenir le site au complet.
Pour le moment il y a juste l'archi complète du site, avec en tout 8 images pour un poids de 165ko... Qu'est-ce que ça sera lorsqu'il y aura les véritables images plus une trentaine d'autre dans les diverses sections ?  :sweat:  
 
Une idée du pourquoi du comment de la raison de cet échec au chargement ?


Message édité par mrplop le 12-12-2007 à 16:14:42
Reply

Marsh Posté le 12-12-2007 à 16:53:13    

Un lien? Du code?
Bouge pas je vais chercher la boule de cristal :o


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 12-12-2007 à 17:30:30    

désolé =) mais bon y'a rien de bien compliqué
 
 
pour le html

Code :
  1. <link href="pict_over.css" rel="stylesheet" type="text/css">
  2. <li><a id="lien1" href="index.html" title= "pour retourner à l'accueil">Accueil</a></li>
  3. <li><a id="lien2" href="lien2.html" title= "lien2">lien2</a></li>
  4. <li><a id="lien3" href="lien3.html" title= "lien3">lien3</a></li>
  5. <li><a id="lien4" href="lien4.html" title= "lien4">lien4</a></li>
  6. <li><a id="lien5" href="lien5.html" title= "lien5">lien5</a></li>
  7. <li><a id="lien6" href="mailto: plop@plop.com?subject=plop" title= "pour me contacter">Contact</a></li>


 
 
pour le css

Code :
  1. .menu {
  2. position: absolute;
  3. left:0;
  4. width: 150px;
  5. height: 400px;
  6. top: 225px;
  7. background-image: url(images/menu.jpg);
  8. }
  9. a#lien1 {background-position: 0px 0px;}
  10. a#lien2 {background-position: 0px -100px;}
  11. a#lien3 {background-position: 0px -200px;}
  12. a#lien4 {background-position: 0px -300px;}
  13. a#lien5 {background-position: 0px -400px;}
  14. a#lien6 {background-position: 0px -500px;}
  15. a#lien1:hover {background-position: 0px -50px;}
  16. a#lien2:hover {background-position: 0px -150px;}
  17. a#lien3:hover {background-position: 0px -250px;}
  18. a#lien4:hover {background-position: 0px -350px;}
  19. a#lien5:hover {background-position: 0px -450px;}
  20. a#lien6:hover {background-position: 0px -550px;}


 
 
 
si il manque quelque chose dans le code, une partie en particulie, il suffit de demander  :lol:  


Message édité par mrplop le 13-12-2007 à 09:24:17
Reply

Marsh Posté le 12-12-2007 à 17:47:47    

manque l'accolade de fin de .menu

Reply

Marsh Posté le 13-12-2007 à 09:23:58    

euh ouais désolé... elle y est mais sur la ligne du dessous, j'ai juste oublié de la copier  :D

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed