Geckozone

Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
https://forums.mozfr.org/

Substitution d'image et affichage d'un flux RSS

https://forums.mozfr.org/viewtopic.php?t=36379

Page 2 sur 2

Publié : 19 févr. 2006, 19:34
par Nicosmos
jpbardiau a écrit :Les inconvénients d'une mise en page par tableau. La deuxième catégorie de classe que j'ai indiqué plus haut sert justement à positionner avec précision

Code : Tout sélectionner

.cont_img { position: absolute;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    height: 83px;
    top: 419px;
    }
Euh ... left, margin-left, top ... Ca s'utilise comment tout ca ?
C'est la position à partir d'où ...

Edit > J'ai pour l'instant bidouillé un truc avec un autre tableau : http://nicosmos66.free.fr/defaut.html

Edit2 > Bon, finalement, j'ai remis comme avant, parceque c'était plus aux normes ^^

Publié : 19 févr. 2006, 21:20
par jpbardiau
Une partie de ta page sans tableau uniquement en css (très améliorable) : Nicosmos

CSS

Code : Tout sélectionner

a.accueil {
     display: block;
     width: 120px;
     height: 60px;
     background-image: url(img/menu/accueil-off.png);
     background-repeat: no-repeat;
     }    
	 
a.accueil:hover {
     background-image: url(img/menu/accueil-on.png);
     }
     
.cont_accueil {
    position: absolute;
    left: 20px;    
    width: 120px;
    height: 60px;
    top: 240px;
     }
     
a.blog {
     display: block;
     width: 120px;
     height: 60px;
     background-image: url(img/menu/blog-off.png);
     background-repeat: no-repeat;
     }
	 
a.blog:hover {
     background-image: url(img/menu/blog-on.png);
     }
     
.cont_blog {
    position: absolute;
    left: 150px;    
    width: 120px;
    height: 60px;
    top: 240px;
    }      

a.projets {
     display: block;
     width: 120px;
     height: 60px;
     background-image: url(img/menu/projets-off.png);
     background-repeat: no-repeat;
     }
	 
a.projets:hover {
     background-image: url(img/menu/projets-on.png);
     }
     
.cont_projets {
    position: absolute;
    left: 280px;    
    width: 120px;
    height: 60px;
    top: 240px;
    }      
     
a.liens {
     display: block;
     width: 120px;
     height: 60px;
     background-image: url(img/menu/liens-off.png);
     background-repeat: no-repeat;
     }
	 
a.liens:hover {
     background-image: url(img/menu/liens-on.png);
     }
     
.cont_liens {
    position: absolute;
    left: 410px;    
    width: 120px;
    height: 60px;
    top: 240px;
    }      
         
a.contact {
     display: block;
     width: 120px;
     height: 60px;
     background-image: url(img/menu/contact-off.png);
     background-repeat: no-repeat;
     }
	 
a.contact:hover {
     background-image: url(img/menu/contact-on.png);
     }    
    
.cont_contact {
    position: absolute;
    left: 540px;    
    width: 120px;
    height: 60px;
    top: 240px;
    }
HTML

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <title>
      nic
    </title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <br>
    <div style="position: absolute; background-repeat: no-repeat; background-position: center top; width: 800px; margin-left: -400px; left: 50%; background-image: url(img/skin/head.png); top: 10px; height: 300px;">
      <a class="accueil cont_accueil" title="Accueil" href="http://nicosmos66.free.fr/index.html"></a>
      <a class="blog cont_blog" title="Blog" href="http://nicosmos66.free.fr/blog/A"></a>
      <a class="projets cont_projets" title="Projets" href="http://nicosmos66.free.fr/projets.html"></a>
      <a class="liens cont_liens" title="Liens" href="http://nicosmos66.free.fr/liens.html"></a>
      <a class="contact cont_contact" title="Contact" href="http://nicosmos66.free.fr/contact.html"></a>
    </div>
  </body>
</html>

Publié : 19 févr. 2006, 21:57
par vielasymphonia
Bonsoir,

J'ai bien tout lu.
"pour ajouter l'effet tu utilises soit une astuce CSS soit un remplacement d'image par JavaScript (changer l'attribut SRC)."
jpbardiau pourrais tu me préciser comment je change l'attribut SRC.
Dans "évenements javascript" je vois bien "onclick" "onmouseover" ect mais j'écris quoi exactement dans "valeur" ?
(Et j'écris quoi pour que le lien change de couleur au passage de la souris ?)

Merci beaucoup de vous pencher sur les questions basiques d'une amateure qui n'a pas la prétention de se croire webmaster.

Publié : 19 févr. 2006, 22:10
par jpbardiau
vielasymphonia a écrit :Bonsoir,

J'ai bien tout lu.
"pour ajouter l'effet tu utilises soit une astuce CSS soit un remplacement d'image par JavaScript (changer l'attribut SRC)."
jpbardiau pourrais tu me préciser comment je change l'attribut SRC.
Dans "évenements javascript" je vois bien "onclick" "onmouseover" ect mais j'écris quoi exactement dans "valeur" ?
(Et j'écris quoi pour que le lien change de couleur au passage de la souris ?)

Merci beaucoup de vous pencher sur les questions basiques d'une amateure qui n'a pas la prétention de se croire webmaster.
En ce qui concerne le changement de couleur pour les liens, j'ai répondu dans ton premier sujet.
Pour l'image réactive en javascript, je n'y connais rien mais j'ai donné une réponse en CSS.

Publié : 19 févr. 2006, 22:57
par vielasymphonia
Je te remercie pour tes réponses.

J'espére que quelqu'un qui connaît bien la commande "options avancés" voudra bien répondre.
Parce que pour une amateure comme moi c'est justement trés pratique.
Peut-être qu'il y a un listing quelque part de la syntaxe à utiliser pour "valeur" (je ne l'ai pas trouvé dans l'aide de Nvu) ?

Publié : 20 févr. 2006, 09:59
par calimo
jpbardiau a écrit :Une partie de ta page sans tableau uniquement en css (très améliorable) : Nicosmos
Ne serait-ce qu'en définissant un texte pour les liens. En effet, pour l'heure actuelle, ce sont juste des liens vide, et ils ne pourront pas être représentés correctement par des navigateurs non-css2 :?
(nb : même problème dans l'original d'ailleurs.

Pensez à faire valider l'accessibilité (cf web developer toolbar) :wink:

Publié : 20 févr. 2006, 10:39
par Nicosmos
Une partie de ta page sans tableau uniquement en css (très améliorable) : Nicosmos
Wahoo ! Merci ^^

Je pense que je vais partir tranquillement en me basant sur ça, et en reconstruisant la page avec les tutoriaux d'Alsacréation ...

Autant faire ça entièrement sans tableaux, si c'est si biens les CSS ...
Pensez à faire valider l'accessibilité (cf web developer toolbar)
Comment on fait avec Web Devolopper Toolbar pour valider l'accessibilité ?

Publié : 20 févr. 2006, 12:59
par calimo
Dans l'onglet "outils", tu as des validation, soit WAI (W3C) soit Section 508, qui est une loi des USA pour l'accessibilité :wink:

Publié : 20 févr. 2006, 19:11
par jpbardiau
Nicosmos a écrit :Autant faire ça entièrement sans tableaux, si c'est si biens les CSS ...
Tu as tout à gagner :D , ça veut dire reprendre tout à zéro mais tu ne le regretteras pas car je suppose que ton site va continuer à se développer.

Publié : 20 févr. 2006, 19:18
par Nicosmos
Bon, j'ai réussi à décaler les images vers la droite, et à mettre le dégradé au fond en position fixée ...

:wink:

http://nicosmos66.free.fr/defaut2.html

Je vais maintenant essayer de trouver comment faire pour le champ et le bouton de recherche ...

:P

Edit :

En inspirant de cette page : http://css.alsacreations.com/Faire-une- ... s-tableaux, j'ai essayé d'enlever le style qu'il y avait sur le seul <div> et de le mettre dans la feuille de style, séparé.

J'ai ca dans le CSS :

Code : Tout sélectionner

.titre {
background-image: url(img/skin/head.png);
width: 800px;
height: 300px;
position: absolute;
background-repeat: no-repeat;
background-position: center top;
margin-left: -400px;
left: 50%;
top: 10px;
}
Et ca dans la page Html :

Code : Tout sélectionner

<div class="titre">
Et pourtant, le résultat n'est pas comme quand toutes ces propriétés étaient dans la page html, alors que je les ai collé tel quel.

Je ne vois pas l'image du header, et les boutons sont tout à droite ...

Edit 2 :

Même avec un truc plus simple, ca fait pareil :

Code : Tout sélectionner

.titre {
background-image: url(img/skin/head.png);
width: 800px;
height: 300px;
}

Re: Substitution d'image et affichage d'un flux RSS

Publié : 21 févr. 2006, 11:31
par GizMecano
Hello,
Nicosmos a écrit :Je cherche également un code HTML, également aux normes, permettant d'afficher les dernieres entrées d'un fil RSS (...). Mais c'est facultatif et moins urgent ...
Comme il y a déjà eu pas mal de réponses sur le premier point, je te propose seulement une piste pour la seconde question...

Ciao,

Publié : 21 févr. 2006, 12:15
par Nicosmos
Comme il y a déjà eu pas mal de réponses sur le premier point, je te propose seulement une piste pour la seconde question...
Ok, merci beaucoup, je vais voir ca ...

:roll:

Edit : C'est bon, j'ai trouvé une solution a tout mes problêmes.

Publié : 24 janv. 2007, 19:00
par Nicosmos
Je refais juste remonter ce sujet pour vous annoncer que j'ai quasi-terminé (oui je sais, je suis très très lent, et un peu fainéant aussi ^^). Le résultat est là : http://www.nicosmos.net

:P

C'est depuis ce sujet que j'ai découvert les CSS, et que j'ai débuté un site Web dans l'art des standards, donc merci :)

Donc, voilà, que pensez vous du résultat, notamment du côté développement (est-ce que j'aurais pas pu simplifier quelques chose au niveau du code, ou utiliser quelquechose au lieu d'un autre ? ...) :)

Nico.
Fuseau horaire sur UTC+02:00
Page 2 sur 2

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru