Questions pour un débutant en CSS
Questions pour un débutant en CSS - HTML/CSS - Programmation
Marsh Posté le 25-10-2007 à 11:25:59
alors on va commencer par le début 
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.
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 :
|
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
Marsh Posté le 30-10-2007 à 13:40:13
bon c'est encore moi... 
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 :
|
et voici le code css :
Code :
|
avez-vous une idée de comment virer les puces et de mettre ça à l'horizontale ? 
merci 
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: |
ta pub tu te la fous dans le cul ok ![[:pingouino dei]](https://forum-images.hardware.fr/images/perso/pingouino dei.gif "[:pingouino dei]")
ton site est nul
@MrPlop en css :
Code :
|
et dans .images li tu rajoutes
Code :
|
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
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.
Marsh Posté le 30-10-2007 à 14:11:45
rapide notre nouveau elmoreichstag
elmodit : par contre je sais pas qui a effacé le message, harko surement ![[:dawao]](https://forum-images.hardware.fr/images/perso/dawao.gif "[: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
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
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
Marsh Posté le 30-10-2007 à 19:29:48
merci, ça marche nickel !
et comme on dit, à la prochaine =P
Marsh Posté le 12-12-2007 à 16:14:10
Yop à tous, ça fait un bail, 
Je viens de terminer mon site à 93.4% 
(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 ? 
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
Marsh Posté le 12-12-2007 à 17:30:30
désolé =) mais bon y'a rien de bien compliqué
pour le html
Code :
|
pour le css
Code :
|
si il manque quelque chose dans le code, une partie en particulie, il suffit de demander 
Message édité par mrplop le 13-12-2007 à 09:24:17
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
Sujets relatifs:
- [CSS/xHTML] - Bloc qui "bouge" ?
- apprentissage CSS
- [debutant][résolu]C++ et QT4...Conversion de type??
- [CSS] problème sous IE pour placer un pied de page
- [CSS? JavaScript? Paint?]J'vais sûrement passer pour un con mais...
- [CSS] Decentrage du contenu d'un tableau [résolu]
- XLS de débutant
- Exo dos débutant
- Questions diverses sur le java
- CSS - Questions de débutant
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
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 © 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
Merci
---------------
sauvez un arbre, mangez un castor...