Substitution d'image et affichage d'un flux RSS

Nicosmos · Message par **Nicosmos** » 19 févr. 2006, 19:34

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 ^^

jpbardiau · Message par **jpbardiau** » 19 févr. 2006, 21:20

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>

vielasymphonia · Message par **vielasymphonia** » 19 févr. 2006, 21:57

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.

jpbardiau · Message par **jpbardiau** » 19 févr. 2006, 22:10

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.

vielasymphonia · Message par **vielasymphonia** » 19 févr. 2006, 22:57

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) ?

calimo · Message par **calimo** » 20 févr. 2006, 09:59

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)

Nicosmos · Message par **Nicosmos** » 20 févr. 2006, 10:39

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é ?

calimo · Message par **calimo** » 20 févr. 2006, 12:59

Dans l'onglet "outils", tu as des validation, soit WAI (W3C) soit Section 508, qui est une loi des USA pour l'accessibilité

jpbardiau · Message par **jpbardiau** » 20 févr. 2006, 19:11

Nicosmos a écrit :Autant faire ça entièrement sans tableaux, si c'est si biens les CSS ...

Tu as tout à gagner

, ça veut dire reprendre tout à zéro mais tu ne le regretteras pas car je suppose que ton site va continuer à se développer.

Nicosmos · Message par **Nicosmos** » 20 févr. 2006, 19:18

Bon, j'ai réussi à décaler les images vers la droite, et à mettre le dégradé au fond en position fixée ...

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

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

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;
}

GizMecano · Message par **GizMecano** » 21 févr. 2006, 11:31

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,

Nicosmos · Message par **Nicosmos** » 21 févr. 2006, 12:15

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 ...

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

Nicosmos · Message par **Nicosmos** » 24 janv. 2007, 19:00

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

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.

Geckozone

Substitution d'image et affichage d'un flux RSS

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

Qui est en ligne ?