Questions de débutant

Bonjour,

Je suis nouveau sur le forum et je m'apel KOogar
Plein de questions qui ont déjà du etre traité,
sry 4 that !!

1°

#titre
{
  display: block ;
  text-decoration: none ;
  background: url(images.gif);
}

avec

<div id="titre">titre</div>

J'ai par exemple ce bloc, si je desire afficher ce bloc 10 fois mais avec 1 url differente (background: url(images2222.gif); à chaque fois, en je ne veux pas réécrire ce block 10 fois, surtout si je n'ai qu'1 seule propriété qui va changer

comment je fais ??

2°
Je voudrais sur le hover d'un lien mettre une boite, juste les lignes du bord
mais à chaque fois il me manque le bord à droite :

a.lien:hover {
             width: 100%;
             padding:0px;
             border:1px solid #000;
             margin:0px;
             }

Comment je fais pour avoir les bords des 4 cotés ?

3° C'est parceque je fais ma v2 que je vous demande tout ca : -http://v2.phpsources.org

Dans le menu du haut, (PHP, MySQL...) la couleur change au survol de la souris. Mais comment je fait pour qu'une
fois sur la page celle ci reste ?
Faut repasser par le body mais je vois pas comment

Merci d'avance pour votre aide
Modifié par KOogar (16 Oct 2006 - 12:40)

Bonjour et bienvenue Koogar,

KOogar a écrit :
Bonjour,

Je suis nouveau sur le forum et je m'apel KOogar

Si tu le souhaites, tu peux te présenter au Bar du Forum dans le sujet des présentations.

KOogar a écrit :
1°

#titre
{
  display: block ;
  text-decoration: none ;
  background: url(images.gif);
}

avec

<div id="titre">titre</div>

J'ai par exemple ce bloc, si je desire afficher ce bloc 10 fois mais avec 1 url differente (background: url(images2222.gif); à chaque fois, en je ne veux pas réécrire ce block 10 fois, surtout si je n'ai qu'1 seule propriété qui va changer

comment je fais ??

Tu ne pourras déjà pas utiliser 10 fois le même id dans une même page. Il faudra donc 10 id différentes pour ces 10 div, chacun ayant une image CSS différente:

#titreN { background: url(imageN.gif); }

répété 10 fois avec N de 1 à 10 ou 01 à 10 (ou à peu près ce que tu veux du moment que c'est compréhensible).
Si ces div ont des points communs (mais qu'il y a d'autres div différentes), ils peuvent faire partie d'une classe commune:

.mestitres
{
  display: block ;
  text-decoration: none ;
}

et dans la partie HTML, tu auras donc:

<div class="mestitres" id="titre01">titre n&deg;1</div>
<div class="mestitres" id="titre02">titre n&deg;2</div>
<div class="mestitres" id="titre03">titre n&deg;3</div>
...

Variante n°1:
pas de classe commune, le CSS des id devient donc:

#titre01, #titre02, #titre03
{
  display: block ;
  text-decoration: none ;
}
#titre01 { background: url(image01.gif); }
#titre02 { background: url(image02.gif); }
#titre03 { background: url(image03.gif); }

Variante n°2:
Tu peux aussi englober en HTML tes div actuels dans un div parent qui aura une id #divparentdestitres que tu styles comme précédemment. Normalement par héritage, les div enfant (#titre01, etc) hériteront de ces propriétés.

KOogar a écrit :

#titre
{
  display: block ;
  text-decoration: none ;
  background: url(images.gif);
}

avec

<div id="titre">titre</div>

J'ai par exemple ce bloc, si je desire afficher ce bloc 10 fois mais avec 1 url differente (background: url(images2222.gif); à chaque fois, en je ne veux pas réécrire ce block 10 fois, surtout si je n'ai qu'1 seule propriété qui va changer

Pour commencer, pas besoin de déclarer display: block pour un élément de type bloc, et le text-decoration: none ne servira à rien non plus (c'est déjà la valeur par défaut). Mais en admettant que tu as d'autres propriétés communes pour tes titres (qui seront, dans la pratique, des titres de section de type h1, h2, h3, plutôt que des éléments neutres comme des divs), tu peux avoir une classe commune, et faire varier en fonction d'une classe supplémentaire ou d'un identifiant, en ne modifiant que le nécessaire.

Petit exemple :

h2 {
	margin: 1.5em 0 1em 0;
	font-size: 1.4em;
	font-style: italic;
	color: white;
	background: black url(images/h2-bg-defaut.png) left top repeat-x;
}
h2.style1 {background-image: url(images/h2-bg-style1.png);}
h2.style2 {background-image: url(images/h2-bg-style2.png);}
...
h2.styleN {background-image: url(images/h2-bg-styleN.png);}

KOogar a écrit :
Je voudrais sur le hover d'un lien mettre une boite, juste les lignes du bord
mais à chaque fois il me manque le bord à droite :

a.lien:hover {
             width: 100%;
             padding:0px;
             border:1px solid #000;
             margin:0px;
             }

Modèle de boîte CSS : largeur visible totale = largeur spécifiée + padding + border.
Avec ton code : largeur visible totale = 100% du bloc parent + 0 + 2px (bordures). Le problème, c'est que 100% + 2px ça fait un peu plus que 100%, et donc si le bloc conteneur est en overflow: hidden;, par exemple, tout ce qui dépasse n'est pas affiché.
La largeur fixe à 100% est-elle nécessaire ? Un display: block ne suffit-il pas (un élément de type bloc prend pour largeur visible totale 100% de la largeur disponible) ?

KOogar a écrit :
Dans le menu du haut, (PHP, MySQL...) la couleur change au survol de la souris. Mais comment je fait pour qu'une
fois sur la page celle ci reste ?

En générant une classe "pageactive" pour le lien pointant vers la page en cours ? En PHP, bien sûr, on ne peut pas faire ça en CSS.


Sinon, deux remarques :
- la page (design fluide) dont tu as donné le lien passe très bien en 800x600. Pourquoi avoir créé un style optionnel en largeur fixe pour cette résolution ?
- tu n'as pas utilisé de titres de section à part ton h1. Pour l'accessibilité d'une site, une structure claire et cohérente de titres de section est un plus non négligeable. De plus, il me semble que <h2>Mon titre</h2> est plus parlant, en cas de reprise du code ou de maintenance, qu'un <div class="titre">Mon titre</div>.


Edit : grillé par Felipe (m'en fiche, je te rattrape au nombre de posts ! ).
Modifié par mpop (16 Oct 2006 - 13:32)

Tout me semble beaucoup + simple avec de l'héritage.

Pour la 'page actif', basiquement je me retrouve avec 6 feuilles supplémentaire car j'ai 6 liens. Je voudrais ne charger qu'1 feuille et transmettre l'url au CSS avec un choix à l'arrivée. possible ?

quelque questions en vrac ?? merci d'avance

1° Dois ton fermer 1 <h1> ?
2° quand peut ton ne pas fermer 1 <div> ?
3° Si j'ajoute des feuilles dans le même navigateur au fur et à mesure que le visiteur navigue, seront-elles interpretés par tous les navigateurs ?


Je commence à m'amuser beaucoup avec le CSS, et l'exercice final c'est bien sur la v2 de phpsources.

Doublement merci

Pour le bar, je finis toujours par y aller, c'est naturel
Modifié par KOogar (16 Oct 2006 - 18:27)

KOogar a écrit :
Pour la 'page actif', basiquement je me retrouve avec 6 feuilles supplémentaire car j'ai 6 liens. Je voudrais ne charger qu'1 feuille et transmettre l'url au CSS avec un choix à l'arrivée. possible ?

Heu... pas sûr d'avoir compris la question.

Ce que je disais, c'est de tester en PHP si l'URL du lien correspond à la page active, et si c'est le cas placer, par exemple, un class="pageactive" pour le lien correspondant.

Ensuite, dans la feuille de style, on a un style défini pour .pageactive, et basta.

KOogar a écrit :
1° Dois ton fermer 1 <h1> ?

Oui, toujours.

KOogar a écrit :
2° quand peut ton ne pas fermer 1 <div> ?

Jamais.

KOogar a écrit :
3° Si j'ajoute des feuilles dans le même navigateur au fur et à mesure que le visiteur navigue, seront-elles interpretés par tous les navigateurs ?

Ça veut dire quoi concrètement, « ajouter des feuilles dans le même navigateur » et pourquoi « au fur et à mesure » ?

Excellent le CSS et les réponses ! topic résolu
vais revenir...

Big thx