[Résolut]Plusieurs questions à propos du Xhtml

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Résolut]Plusieurs questions à propos du Xhtml

Alexzo

Bonjour,
Je debute dans le xhml
Je viens de commencer mon premier petit site réalisé avec notepad++ ,j'ai beaucoup avancé grace aux tutos mais j'ai des questions :
-Comment faire pour réaliser un liens où il y a deux images...C'est à dire ,avec photoshop ,j'ai fais deux images une avec le texte en gris (non eclairé) et une avec le texte en blanc (texte eclairé) et donc je voudrais que on voit le texte en gris sur la page ,puis quand la sourie va dessus on vois le texte en blanc (deuxieme image) et que le tout donne sur un lien.
-Ensutie je m'amuse donc a faire un menu avec des images en colonne.Le problème c'est que toutes mes images sont séparé par un petit blanc...Et je n'arrive pas à y remedier.

J'éspère que vous avez à peut près compris ce que je voulais.
Au pire je vous mettrais des images.
Merci d'avance

Message édité par Alexzo le 22-06-2006 à 01:03:11

Publicité

Alexzo

Pas de réponse ?Même a au moins une question ?

afbilou

pouet your life

http://afbilou.free.fr/tmp/preload.html

Message cité 1 fois

Alexzo

Oui voilà c'est ca !!Comment je fais ?

Message cité 1 fois

Alexzo

une question de plus : est ce que l'on peut interdire les cliques droits avec du xhtml ?

afbilou

pouet your life

Alexzo a écrit :

Oui voilà c'est ca !!Comment je fais ?

Si je te donnais un exemple ultra basique tu penses que tu pourrais l'etudier pour comprendre ?

Alexzo

oui
Je suis pas idiot ,j'ai déjà de bonne conaissance ,mais il y a des choses que je ne connais pas ^^

afbilou

pouet your life

Exemple ultra basique : http://afbilou.free.fr/tmp/preload.html :s

Astuce : lire le code source minimaliste ... et regarder l'image "image.jpg"

Alexzo

ok je vois le code sourceet dans le fichier image ,il ya à deux images ,je vais essayer de me debrouiller avec ca.
Merci ^^

Alexzo

faut que je met <style type="text/css">
a {
display: block;
width: 280px;
height: 99px;

background-image: url(image.jpg);
background-position:0 0;
}
a:hover {
background-position:0 98px;
}
</style>

Dans le fichier .css ? Ou je peux le mettre directement dans le fichier .html ?

Message cité 1 fois

Publicité

Alexzo

j'ai beau faire avec ton exemple ,mais ya rien a faire ,min image ne s'affiche pas du tout...

Alexzo

En gros moi ca donne ca :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Crealexzo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="style" href="style.css" />
</head>
<body>
<div id="en_tete">
</div>

<div id="menu">
<a href="http://www.crealexzo.free.fr"><img src="boutons/acceuil_noir.jpg"/> </a> <br/>
<style type="text/css">
a {
display: block;
width: 150px;
height: 75px;

background-image: url(boutons/gallerie.jpg);
background-position:0 75px;
}
a:hover {
background-position:0 75px;
}
</style> <br/>
</div>(après ya la suite mais là ya pas besoin....)

Ou est mon erreur ?

afbilou

pouet your life

Alexzo a écrit :

L'exemple ne repondrait il pas de lui meme ? :heink:

Alexzo

ok ,donc faut que je le met dans le .css ,c'est pour ca que ca marche pas.

afbilou

pouet your life

L'exemple fonctionne comme ceci :

* on crée un fichier image qui comprend les deux etats de l'image : au repos et parcouru par la souris - voir image.jpg
* la CSS indique que le lien <a> doit avoir comme image de fond image.jpg . Comme l'element <a> a une certaine dimanesion ... il se trouve que on ne verra que la partie de image.jpg que l'on souhaite.
* Quand le lien est survolé par la souris on modifie les coordonnées d'affichage du fond pour que ce soit la deuxieme partie de l'image que l'on voit a travers la "fenetre" de l'element <a>.

Alexzo

Ca j'ai compris ,mais alors je vois pas ou est mon erreur

afbilou

pouet your life

Ben tu fais totalement n'importe koi dans TON exemple.
Je n'arrive pas a imaginer que tu puisses avoir compris quoi que ce soit
Tu connais pourtant les CSS ??

Alexzo

oui
J'ai un fichier .css
qui me determine la position de mes cadres ,la couleur de la police ,la taille ,etc....
Mais là en fait c'est dans un cadre que j'ai appelé menu ,je voudrais mettre environ 4 boutons de ce genre là...
Mais comme en fait le tuto que j'ai vu a propos des cadres et le tient ne corresponde pas .Je suis un peu perdu
Car j'ai bien trouver pour faire la même chose mais que avec des liens alors que je veux le faire mais avec des images...

Alexzo

Bon ,j'ai à peut près réussi ,ca fais l'effet que jeveux ,mais bon c'est pas encore ca ^^
Merci encore à toi
Mais comment faire si je veux faire la meme chose mais avec les boutons les uns sur les autres et comment les associer à un lien ?

Message édité par Alexzo le 20-06-2006 à 22:37:34

afbilou

pouet your life

Exemple avec des "boutons" de dimension 100x40 pixels

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Rollover</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
ul * {
margin: 0;
padding: 0;
}
ul li a {
display: block;
width: 100px;
height: 40px;
background-position:0 0;
}
ul li a:hover {
background-position:0 40px;
}
#bouton1 { background-image: url(image/menu1.jpg); }
#bouton2 { background-image: url(image/menu2.jpg); }
#bouton3 { background-image: url(image/menu3.jpg); }
#bouton4 { background-image: url(image/menu4.jpg); }
#bouton5 { background-image: url(image/menu5.jpg); }
</style>
</head>
<body>
<h1>Un menu avec rollover CSS</h1>
<ul>
<li id="bouton1"><a href="">Menu 1</a></li>
<li id="bouton2"><a href="">Menu 2</a></li>
<li id="bouton3"><a href="">Menu 3</a></li>
<li id="bouton4"><a href="">Menu 4</a></li>
<li id="bouton5"><a href="">Menu 5</a></li>
</ul>
</body>
</html>

Message édité par afbilou le 20-06-2006 à 22:43:48

Alexzo

Merci

Alexzo

Bon ,une fois de plus je n'y arrive pas ,mainteant il me marque *menu 1
*menu 2
Mais bon je vais y arriver ^^

Alexzo

il y a bien une partie a mettre dans le css et une autre dans le htm ?

Alexzo

avec l'ancienne methode à un bouton ca marchait et là ca marche plus
Dans le htm j'i mis ca :

Code :

<div id="menu">
<ul>
<li id="bouton1"><a href="http://www.crealexzo.free.fr">Acceuil</a></li>
<li id="bouton2"><a href="http://www.crealexzo.free.fr/gallerie/">Gallerie</a></li>
</ul>
</div>

et dans le css j'ai mis ca :

Code :

ul * {
}
ul li a {
display: block;
width: 150px;
height: 75px;
background-position:0 0;#
}
ul li a:hover {
background-position:0 75px;
}
ul a#bouton1{ background-image: url(boutons/acceuil.jpg); }
ul a#bouton2 { background-image: url(boutons/gallerie.jpg); }

Quest ce qui manque ?

Message édité par Alexzo le 20-06-2006 à 22:59:10

afbilou

pouet your life

a#bouton1 n'existe pas dans ton html :s

afbilou

pouet your life

http://afbilou.free.fr/tmp/rollover.html

Alexzo

merci ,ca marche un peu mieu ,mainteant jai le lien en bleu souligné qui saffiche avec mes images animés.

Message édité par Alexzo le 20-06-2006 à 23:25:11

afbilou

pouet your life

mais comme tu as de bonnes connaissances tu vas savoir le vire grace aux css

Alexzo

J'ai resolu le problème de du lien souligné en bleu ,il n'apparait plus c'est bon
Par contre maintenant j'ai un point noir a coté de chaque image animé ce qui fais que mes boutons animé sont decallés sur la droite..

Alexzo

Maintenant j'ai ca :

Code :

<div id="menu">
<ul>
<li id="bouton1"><a href="http://www.crealexzo.free.fr"></a></li>
<li id="bouton2"><a href="http://www.crealexzo.free.fr/gallerie/"></a></li>
</ul>

et ca

Code :

ul li a {
display: block;
width: 150px;
height: 75px;
background-position:0 0;#
}
ul li a:hover {
background-position:0 75px;
}
#bouton1 a { background-image: url(boutons/acceuil.jpg); }
#bouton2 a { background-image: url(boutons/gallerie.jpg); }

Message édité par Alexzo le 20-06-2006 à 23:31:14

afbilou

pouet your life

Wahou ...
Mais c'est mal ! il faut du texte dans les liens !
avec text-indent tu vires le texte grace au CSS.

Alexzo

Peut tu être plus clair stp et me dire la marche a suivre ,car je galère commec c'est pas possbile

Alexzo

Bon j'ai réussi à enlver les point ,maintenant il rest le problème du menu qui est trop à gauche .
Html :

Code :

<div id="menu">
<ul>
<li id="bouton1"><a href="http://www.crealexzo.free.fr"></a></li>
<li id="bouton2"><a href="http://www.crealexzo.free.fr/gallerie/"></a></li>
</ul>

CSS :

Code :

ul {list-style-type: none;
}
ul li a {
list-style-type: none;
display: block;
width: 150px;
height: 75px;
background-position:0 0;#
}
ul li a:hover {
background-position:0 75px;
}
#bouton1 a { background-image: url(boutons/acceuil.jpg); }
#bouton2 a { background-image: url(boutons/gallerie.jpg); }

Et image du problème :

Comme vous pouvez le voir ,mes boutons sont trop à droite et chevauche mon texte,je ne sais pas pourquoi.

Merci pour votre aide .
A demain matin et bonne nuit mdr :sleep:

Message édité par Alexzo le 21-06-2006 à 00:16:04

Alexzo

Bonjour ,un petit up ,car là je suis bloké ,je peux rien fare ^^

Alexzo

bon je galère là...Personne pour m'aider ?
Quand je pense au nombre de fois où ce poste à été lut.
Help

xtof_83

Freeride Spirit

Pas besoin de upper le sujet tout les secondes...

si personne répond, laisse le temps. Ton probléme n'a pas l'air incommensurable, alors cherche un peu de ton côté

Si tu trouves pas , maybe ce soir, je te donne la soluce

j_lecruel

☀ ☁ ☂

J'ai pas suivi le topic... mais tu as bien mis le margin à zéro sur le ul ?

Message édité par j_lecruel le 21-06-2006 à 14:29:37

---------------
♈ ♋ ♌ ♍ ♎ ♏ - Agora Fidelio | Galerie d'art Toulousaine

Alexzo

Ca fais un bon moment que je cherche tout seul (hier soir ,ce matin ,enfin j'arrete pas ) et merci à toi j_lecruel ,j'avais oublié de mettre ca :

Code :

margin: 0;
padding: 0;

à ul ,merci encore pour votre aide ,mon problème est enfin resolu je vais pourvoir avancer
Maintenant ca donne ca :
Pour le css

Code :

#menu
ul
{
padding: 0;
margin: 0;
list-style-type: none;
float: left; /* Le menu flottera à gauche */
}
ul li a {
display: block;
width: 150px;
height: 75px;
}
ul li a:hover { background-position:0 75px;}
#bouton1 a { background-image: url(boutons/acceuil.jpg); }
#bouton2 a { background-image: url(boutons/gallerie.jpg); }

et pour le html :

Code :

<div id="menu">
<ul>
<li id="bouton1"><a href="http://www.crealexzo.free.fr"></a></li>
<li id="bouton2"><a href="http://www.crealexzo.free.fr/gallerie/"></a></li>
</ul>

Si j'ai d'autre problème je vous avert

Message édité par Alexzo le 21-06-2006 à 14:38:47

DrWatson

_@''

afbilou a écrit :

http://afbilou.free.fr/tmp/preload.html

super malin, je n'avais encore jamais vu un rollover sans javascript, merci :jap:

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

[Résolut]Plusieurs questions à propos du Xhtml

Sujets relatifs
insérer plusieurs entrées dans 2 tables avec LAST_INSERT_ID	[SQLServer 2000] Select sur plusieurs BASES du même serveur
Plusieurs colonnes grâce à un while	A propos de AutoIt3
[Résolu] [MySQL] SELECT sur plusieurs tables	Création de wiki ... Quelques questions.[Array Filter PHP]
Parser un fichier xml volumineux sur plusieurs pages ?	Besoin d'aide pour une AP en programation événementiel [résolut]
[Delphi/C++/C#]Webcam pour plusieurs applis	Zoom sur plusieurs Chart
Plus de sujets relatifs à : [Résolut]Plusieurs questions à propos du Xhtml

Page générée en 0.158 secondes