Liens soulignés

Résolu/Fermé
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008 - 1 avril 2007 à 23:26
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 8 avril 2007 à 03:23
Bonsoir,

Petit problème avec tous les liens qui sont soulignés et je ne le souhaite pas.
J'ai essayé des trucs trouvés dans le forum, mais rien n'y fait. C'est dans la feuille de style que ça se situe mais je ne vois pas où car j'ai pourtant un text-decoration:none;
Quelque chose m'échappe.
D'autre part, j'ai trop d'espaces entre mes titres :
Contact et A savoir, je voudrais le réduire, mais suis pas très forte en margin ou padding.
Voici l'adresse du site pour jeter un oeil (attention, il est en construction, seul l'index est visible). et la feuille de style.
http://chrisneau.free.fr/
Merci à tous pour cet excellent forum et cette aide précieuse.
CN
body {
background: #FFF url('images/back8.jpg') no-repeat top left fixed;
margin: 0 0 20px 0;
padding: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.95em;
color: purple;
line-height: 1.5em;
}

#header {
width: 80%;
background:transparent;
margin: 0 auto;
padding: 0;
height: 101px;

}

#header h1 {
padding: 30px 0;
color: purple;
font-size: 1.4em;
letter-spacing: 3px;
margin: 0;
text-align: right;
}

#nav {
position: absolute;
top: 85px;
left: 10%;
width: auto;
padding: 0;
margin: 0 auto;
font: bold 11px Verdana, sans-serif;
height: 25px;


}

#nav li {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}

#nav li a {
padding: 3px;
margin: 0;
border: 1px solid #B78E96;
border-bottom: none;
background: transparent url(images/trans6.gif) repeat;
text-decoration: none;
}

#nav li a:link { color: purple;
}
#nav li a:visited { color: purple;
}

#nav li a:hover {
color: #ffffcc;
background: transparent url(images/trans7.gif) repeat;
}

#nav li a#current {
color: white;
background: transparent url(images/trans7.gif) repeat;
border-bottom: 1px solid #999;
}

#container {
background: transparent url('images/trans5.gif') repeat;
width: 80%;
margin: 0 auto;
padding: 0;
}

#content {
margin: 0;
padding: 40px;
}

#content1 {
margin: 0;
padding: 40px;
}

#content2 {
margin: 0;
padding: 40px;
}

#footer {
background: transparent;
padding: 5px 10px 2px 0;
text-align: right;
font-size: 0.75em;
clear: both;
line-height: 1.15em;
}

a, a:visited {
background: transparent;
color: purple;
border-bottom: 1px solid #333;
text-decoration: none;
font-weight: bold;
outline: none;
}

a:hover, a:active {
background: transparent;
color: #FFFFCC;
text-decoration: none;
}

h2 {
color: #FFFFCC;
border-bottom: 1px solid #666;
margin: 0;
padding: 10px 0 1px 0;
font-size: 1.2em;
}

h3 {
color: #FFFFCC;
border-bottom: 1px solid #666;
margin: 0;
padding: 10px 0 1px 0;
font-size: 1em;
}

14 réponses

txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
2 avril 2007 à 01:52
Salut poky17, ouaouh ! super design ! chapeau la miss !
Tu a vraiment des Pb avec tes feuilles de style toi hi hi hi hi.
Je les trouve très compliquées. Tu sais faut les maitriser.
Un très bon site pour apprendre, c'est même la référence en matière de feuille de styles. http://www.csszengarden.com/tr/francais/
Bon pour tes liens: Tu a quelque part sur ta CSS spécifié un soulignement noir car tous tes liens sont soulignés en noir (?).
Une chose très imoprtante quand même: tu ne met pas de texte alt="speetch" pour qu'il s'affiche quand on passe la souris dessus.
il faut faire un truc du genre:
<a href="......" border="0" alt="mon_texte" title="mon_texte_pour_Firefox"></a>

Le border="0" c'est pour supprimer la très vilaine bordure bleue qu'IE affiche sur des images-lien.
Le title="****" c'est pour le navigateur Firefox qui n'affiche pas de texte au passage de la souris sur un lien.
Dis donc! quand tu aura fini ce site, tu voudrais pas reprendre le mien ? hi hi hi il est trop beau !
Ah oui ! pour les espacement trop grands dans tes titres c'est à cause des balises <h1>, <h2> etc...
Ce sont des balises de type bloc donc, ils se placent toujours l'un en dessous de l'autre.
Je ne suis pas expert en CSS, loin de là, mais faudrait lire de la doc dessus peut-etre chez https://www.alsacreations.com/
Continue, tu fais un sacré boulot.
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
2 avril 2007 à 11:35
salut,

Merci pour ces compliments et ces conseils.
Tu as vu ça, je me suis énervée, j'ai repris tout à zéro et c'est plus joli et surtout ça fait plus professionnel.
CN
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
3 avril 2007 à 04:08
Salut txiki,

Un petit rectificatif.
    alt
    title

Ça dit que “alt” sert à remplacer l'image qui ne s'afficherait pas, par du texte, dans la page.
“title” sert à afficher du texte dans une info-bulle, au-dessus de la page.

Et donc, c'est Firefox qui se comporte comme on s'y attend (-;
0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
2 avril 2007 à 02:01
Au fait, j'ai un script tout fait pour t'ouvrir des photos en popup mais pas n'importe lesquelles.
Elles sont centrées sur l'écran, toujours, pas besoin de donner de taille (le contenant s'adapte au contenu) et surtout ce ne sont pas de vraies pop up mais des pseudo pop up, sans le internet explorer qui s'écrit dans la barre de titre du pop up? Bref c'est très joli et adapté pour ouvrir de grandes photos à partir d'un lien classique ou d'une vignette (photo très réduite) voir ici: http://abarka.free.fr/diaporama/diaporama-1.php
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
2 avril 2007 à 11:37
Alors là, j'adore, tu m'envoies ce scipt d'urgence, c'est exactement ce que je cherchais, ça m'évitera ces miniature et cette galerie que personne n'aime.
C trop cool.
Mais, je vois que Txiki est un Basque, quelle bonne nouvelle !
J'adore le Pays Basque, j'ai fait des colos là-bas et connais plein de monde à Saint Jean Pied de Port.
Merci encore et vivement que je me penche sur ce script.
CN
0
pour les liens, il est preferable de mettre le style desiré dans la balise, ex a href=lelien.html class= ou style= ou id=...

pour l'espacement, tu as donc 2 blocs div (content1 et content2) tout deux avec padding=40,
ce qui fait:
padding en bas de content1: 40

padding en haut de content2: 40

sans compter les marges par defaut des H l'spacement est deja de 40+40=80.

je te conseille d'ajouter un padding-top plus petit a content2, pareil, un padding-bottom a content1

si ton texte est fixe, donne une hauteur height au divs

concernant les H, et toutes div par ailleurs, met pour chacun d'eux un margin:0; padding:0; puis ajuste avec des margin-top, padding-left, etc... au cas par cas

bien vu le travail sur photo et la correlation avec l'image de fond
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
2 avril 2007 à 13:27
Bonjour,

Merci beaucoup pour ces astuces, je vais commencer à étudier tout ça et je te tiens au courant. En espérant avoir du mieux.
CN
0
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47
2 avril 2007 à 07:42
Bonsoir,

curieux, les soulignés. Un bug, probablement.
Et si tu essayais ça, pour voir?:
div#footer a { text-decoration: none; }

Serge.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
2 avril 2007 à 09:38
salut et bravo !

je l'ai... ton lien n'est pas souligné mais a une bordure en bas :
a, a:visited {
	background: transparent;
	color: purple;
	/*border-bottom: 1px solid #333;*/
	text-decoration: none;
	font-weight: bold;
	outline: none;
}

0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
2 avril 2007 à 13:25
Bien vu, dalida, c'était tou bête, mais il fallait le voir.
Merci beaucoup de ton aide.
CN
0
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47 > poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
2 avril 2007 à 20:03
Ah oui, je ne l'avais pas vu non plus. Je vais mieux regarder avec "rechercher sur cette page" à l'avenir.
0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
2 avril 2007 à 15:40
Salut poky, et les autres évidement ! ;-))
Eh oui! chui basque !
voici le script:
<!-- redirection des liens image jpg. Michel Deboom 05/2005 
  
// Création de la pseudo-popup : (le z-index est important pour etre sur qu'il soit au premier plan)
fe='<div id="pop" style="position:absolute;left:180px;top:300px;display:none;z-index:200;background-color:#FFFFFF;border:3px outset;' 
//ajoute une ombre pour IE seulement 
fe+='filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#63421b,strength=6)">' 
fe+='<div id="tet" onmousedown="dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;" onmouseup="drag=0" style="cursor:move;background-color:#267726;line-height:18px;color:white;font-size:12px;padding:0 20px 0 .5em;font-family:Verdana, Helvetica, Arial;">' 
// (entête c'est là ou tu met le bouton avec la croix pour fermer le pseudo pop up (vire ces commentaires))
fe+='entête<img title=" Fermer " src="url de ton.gif" onclick="voirSelect(\'visible\');gdim.style.display=\'none\'" height="14" width="16"' 
fe+='style="cursor:default;position:absolute;margin:1px;right:0;top:0; " /></div></div>' 
  
function initLienImg(){ 
db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6 
gdim=D.getElementById('pop'); lx=D.getElementById('tet') 
addEvent(D,"mousemove",controle_position) 
elem=document.getElementsByTagName('select'); 
  
//création de l'image 
im1=D.createElement("img");gdim.appendChild(im1); 
with(im1.style){border=0;margin="1px";} 
//écriture des évènements 
l=D.getElementsByTagName('a'); 
for(var i=0;i<l.length;++i){ 
  //ajoute onclick=grdimg dans liens image avec extention .jpg ou .JPG 
  result=l[i].href.search(/jpg$|JPG$/); 
  if(result!=-1){l[i].onclick=grdimg;} 
  } 
} 
  
function controle_position(e){ 
sx=gk?pageXOffset:db.scrollLeft; //scroll h 
sy=gk?pageYOffset:db.scrollTop; //scroll v 
px=gk?e.pageX:event.clientX+sx; //curseur x 
py=gk?e.pageY:event.clientY+sy; //curseur y 
if(drag)with(gdim.style){left=px-dx+"px";top=py-dy+"px";} 
return false 
} 
//Renvoi image et title dans le calque. 
function grdimg(){ 
fx=gk?innerWidth-20:db.clientWidth //l fenêtre 
fy=gk?innerHeight:db.clientHeight //h fenêtre 
//charge l'image dans le cache du navigateur. 
im=new Image();im.src=this.href; 
    //l'affiche en grandeur réduite repositionnée. 
with(gdim.style){display="block";top=sy+2+'px'}; 
with(im1){src=im.src;width=height=100}; 
if(!cr)cr=gdim.offsetHeight-127; 
if(gk)im1.style.marginBottom=-cr+"px";//correction Gecko 
//montre le message d'attente. 
lx.firstChild.data="patientez svp"; 
//colore le lien comme visité, récupère le message title 
this.style.color=D.vlinkColor;txt=this.title; 
//Lance le controle de chargement (c'est le temps que la grande image s'affiche, patientez patatipatata...)
actif=setTimeout('controleChargement()',100) 
//désactive l'action normale du lien HTML 
;return false 
} 
      //controle du chargement de l'image 
function controleChargement(){ 
//éxécute imgOK quand c'est terminé 
im.complete?imgOK(): 
//sinon relance le contrôle toutes les 100 ms 
actif=setTimeout('controleChargement()',100) 
} 
  
function imgOK(){ // image chargée. 
clearTimeout(actif);lx.firstChild.data=txt; 
//L'image ne dépasse pas la fenêtre: 
if(im.width>=fx){im.height*=(fx-20)/im.width;im.width=fx-20;} 
if(im.height>=fy){im.width*=(fy-30)/im.height;im.height=fy-30;} 
  
//applique les dimensions recalculées à l'image. 
im1.width=im.width;im1.height=im.height; 
voirSelect('hidden') 
} 
  
// bug ie corrigé : cache les <select> 
function voirSelect(v){ 
if(!gk){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;} 
} 
  
function addEvent(obj,evType,fn,capt){ // ajoute un événement sans écraser l'éxistant. 
if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // NS6+ 
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+ 
else {return false;} 
} 
  
// initialisation 
D=document;gk=window.Event?1:0/*Gecko*/; 
dx=dy=e=drag=cr=0 
addEvent(window,"load",initLienImg) 
D.write(fe) 
//-->

Tu le copie dans un fichier à part en g_img.js et dans le head tu met:
<script language="javascript" src="url/g_img.js" type="text/javascript"></script>

ensuite, dans tes vignettes tu met ceci:
<a href="dossierphotosgrandetaille/ma-photo-1.jpg" title="speechtquiapparaîtradanslabarredetitre"><img src="dossiervignettes/ma-vignette-1.jpg" alt="speechtquiapparaîtradanslabarredetitre" border="0" /></a>

ATTENTION: pour le texte destiné à la barre de titre: il ne doit pas etre trop long au risque d'avoir une partie blanche en plus de l'image.
Le script qui centre automatiquement c'est pas celuila (m'est gouré) Il faut le positionner au début des lignes de celui-ci.
Pour l'image de la croix (pour fermer le pop up:
Dessine un carré de 16 x 14 pixels avec une croix.
Tu peux upprimer les commentaires entre ( ) je te les aient mis pour t'éclairer.
Voilà! a toi de l'adapter.
NOTE: toutes tes photos devront avoir leur vignettes (si tu a un logiciel de dessin qui te permette de faire des traitements par lots,
ça ne prendra que quelques secondes.
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
3 avril 2007 à 00:38
Merci beaucoup, je vais essayer de voir tout ça ce soir.
Je te tiens au courant.
CN
ça m'a l'air un peu compliqué
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
3 avril 2007 à 01:13
Re-bonsoir,

Bon alors, je vais t'embêter encore.
Mais quelques précisions.
En fait, j'ai mes photos au format normal que j'ai scanné.
Qu'entends-tu par vignettes pour chaque photo et surtout comment le faire ?
J'ai photofiltre, paintshop, picasa, the gimp, avec tout ça y'a moyen de faire un truc non ?
Le plus dur sera d'intégrer tout ça dans ma page comme tu l'as fait toi, encore du style, je suppose et c'est ma faiblesse, tu l'as remarqué!!!
Merci encore.
CN
0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
3 avril 2007 à 03:02
Non, non !
Puisque tu a les grandes photos, tu les mets dans un dossier. Tu créé un autre dossier pour y mettre les vignettes.
Les vignettes sont de petites photos. D'ailleurs la résolution peut etre moindre, ce qui compte ce sont les grandes qui doivent avoir une résolution de 72DPI (cest suffisant pour le web).
Je ne connais ces logiciels mais tu prend une photo et tu la réduit, beaucoup. Avec Fireworks c'est facile, on indique le pourcentage de réduction, on spécifie un dossier de destination et il va le faire automatiquement pour toutes tes photos sélectionnées. Sinon faudra le faire manuellement. (Pose la question sur ce forum, peut etre que gimp sait faire ça, le traitement par lots).
Tu n'a pas besoin de faire un style supplémentaire. Les miennes se trouvent dans un tableau. A moins que tu créé un style spécifique pour ce tableau qui va contenir les vignettes, fond, padding, images centrées etc...
ça devrait aller.
Déjà tente le coup avec certaines des photos et le script pour les pop up !
@ +
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
3 avril 2007 à 10:45
Salut Txiki,

Bon j'ai fait un essai avec 2 photos chambre et jeux.
ça marche pas mal au niveau des vignettes, mais je n'ai pas le même résultat que toi.
Pas d'attente avec patientez SVP et affichage de la grande photo dans une nouvelle page avec beaucoup de blancs et pas pratique pour le visiteur ça lui ouvre des pages.
Y'a des trucs à revoir sûrement.
Je te donne le lien.
http://chrisneau.free.fr/iris.php
0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
3 avril 2007 à 13:59
Salut poky,
C'est parceque tu n'a pas mis la barre de titre dans ta pop up.
Je ne vois rien dans ton source.
Ou a-tu mis le script ?
Envoi le code de ta page, que je le regarde.
Remarque dans ton cas, c'est bien qu'il n'y ai pas de barre de menu.
Je vais voir si on peut modifier le script g_img.js mais en ce moment je suis un peu chargé....
D'autre part j'ai vu que tu utilisait des frames dans ton site.
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008 > txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024
3 avril 2007 à 15:52
Autant pour moi, j'avais fait une erreur de fichier en rechargeant ma page.
C'est réparé, http://chrisneau.free.fr/iris.php
ça marche nickel tout ça, vas jeter un oeil si tu veux.

Je ne crois pas utiliser de frames dans mon site.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html>
<head>
<title>Le Garrit - Location de gîte en Périgord- Le gîte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Description" content="Le Garrit - Location de gîte à la semaine ou week end à Loubéjac, près de Villefranche du Périgord. Joëlle & Jean-Pierre vous réservent le meilleur accueil pour un séjour réussi en terre périgourdine.">
<meta name="Keywords" content="location gite dordogne,location gite perigord,location gite périgord,gite,gites,location,locations,location vacance perigord,vacance,vacances,saisonniere,location saisonniere dordogne,location saisonniere perigord,gite,gites,piscine,périgord,perigord,perigord noir,périgord noir,dordogne,hebergement,hébergement,herbergement dordogne,hebergement perigord,hébergement périgord,tourisme dordogne, fumel,loubéjac,location vacance dordogne,villefranche du périgord,le garrit">
<meta name="Robots" content="index, follow, all">
<meta name="Author" content="Le Garrit">
<meta name="revisit-after" content="15 days">
<meta name="Copyright" content="Le Garrit">
<meta name="Content-Language" content="fr">
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=1.0, transition=23)">
<meta http-equiv="Site-Enter" content="RevealTrans(Duration=2.0, transition=23)">
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" src="galerie.js" type="text/javascript"></script>
<script type="text/javascript">
var bookmarkurl="http://legarrit.free.fr"
var bookmarktitle="Le Garrit - Location de gîte en Périgord"
function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
</script>
</head>
<body>
<a name="HautdePage"></a>
<div id="header">
<h1>Bienvenue au Garrit </h1>
</div>
<ul id="nav">
<li><a href="index.php">Accueil</a></li>
<li><a href="iris.php" id="current">Le gîte</a></li>
<li><a href="tarifs.php">Tarifs</a></li>
<li><a href="reservation.php">Réservation</a></li>
<li><a href="plan.php">Plan d'accès</a></li>
<li><a href="liens.php">Liens</a></li>
<li><a href="refere.php">Référencement</a></li>
<li><a href="JavaScript:addbookmark();">Ajouter à vos favoris</a></li>
</ul>
<div id="container">
<div id="content">
<h2>Un gîte plein de charme</h2>
<br><a href="diaporama/photos/chambre.jpg" title="La chambre"><img src="diaporama/vignettes/chambre.jpg" alt="La chambre" border="0" /></a>
<a href="diaporama/photos/jeux.jpg" title="Les jeux"><img src="diaporama/vignettes/jeux.jpg" alt="Les jeux" border="0" /></a>
<h5><font color="#FFFFCC">* Un clic sur ces photos permet de les agrandir.</font></h5>
<h5>>>Visitez le Garrit avec notre album photo >><a href="http://legarrit.free.fr/album/index.html" target="blank"> Voir la galerie photos>>></a></h5>
<h5>Ce petit gîte aménagé dans une ancienne grange restaurée est plein de charme.
<br>Sa capacité d'accueil est de 2 personnes plus un enfant, critère très recherché par notre clientèle. Ici, vous vous sentirez comme à la maison.
<br>De par l'épaisseur de ses murs, vous serez agréablement surpris par sa fraîcheur en période caniculaire.
<br>A savoir, depuis cette année, le gîte Iris bénéficie de 2 étoiles préfectorales.</h5>
<h3>Descriptif du gîte Iris :</h3>
<br><h5>Petit gîte indépendant meublé plein de charme dans une ancienne grange restaurée.
<br>Plain-pied.
<br>Cuisine équipée.
<br>Séjour/salon d'une surface de 28m² avec clic-clac (prévoir une couette).
<br>Chambre indépendante d'une surface de 16m² (lit 2 places).
<br>Cabinet de toilettes avec petite baignoire.
<br>Toilettes.
</h5>
<h3>Services disponibles :</h3>
<br><h5>Micro-ondes.
<br>Lave-linge.
<br>Téléviseur couleur avec chaînes hertziennes.
<br>Location de draps et linge de maison sur demande.
<br>Salon de jardin.
<br>Table de ping-pong - portique pour enfants.
<br>Barbecue.
<br>Renseignements excursions en Dordogne/Périgord.
<br>Marché fermier et restauration sur place tous les jeudis à Loubéjac (1Km500 du gîte).
<br>Premier week-end d'août, 3 jours de festivités avec repas et bal gratuit à Loubéjac.
<br>Sentiers de randonnée à proximité.
<br>Sur place, piscine commune hors-sol - Diamètre : 4,60m - Hauteur : 1,20m.
<br>Chéques vacances acceptés.
</h5>
</div>
<div id="content1">
<h2>Contact</h2>
<center><h5>Joëlle et Jean-Pierre MICHOT</h5>
<h5>Le Garrit</h5>
<h5>Tél : (+33)05.53.29.98.36</h5>
<h5><a href="mailto:legarrit@free.fr?subject=Demande%20d%27informations"><img src="images/mailplume.gif" width="45" height="45" hspace="5" border="0" alt="">legarrit@free.fr</a></h5></center>
</div>
<div id="content2">
<h2>A savoir</h2>
<center>
<h6>
<?
include("./visite/visite.php");
print"$compteur visiteurs sur Le Garrit<br />";
print"$compteur_j internaute(s) aujourd'hui<br />";
print"Vous êtes actuellement $compteur_c connecté(s) sur ce site<br />";
?>
</h6>
</center>
<p align="right"><font size="1"><a href="#HautdePage">| Haut de page| </a></font></p>
</div>
<div id="footer">
<p>Copyright© 2006 Le Garrit | Version 2.0<br />
| Réalisation <a href="http://www.info-bulle.net" target="blank">INFO-BULLE </a>| HTML template by <a href="https://karenblundell.com/" target="blank">arwen54</a> | <a href="http://validator.w3.org/check?uri=referer" target="_blank">Valid HTML</a> | <a href="http://jigsaw.w3.org/css-validator/" target="_blank">Valid CSS</a> |</p>
</div>
</div>
</body>
</html>
Voici le script, j'ai juste changé son nom

/ Création de la pseudo-popup : (le z-index est important pour etre sur qu'il soit au premier plan)
fe='<div id="pop" style="position:absolute;left:180px;top:300px;display:none;z-index:200;background-color:#FFFFFF;border:3px outset;'
//ajoute une ombre pour IE seulement
fe+='filter:progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#63421b,strength=6)">'
fe+='<div id="tet" onmousedown="dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;" onmouseup="drag=0" style="cursor:move;background-color:#267726;line-height:18px;color:white;font-size:12px;padding:0 20px 0 .5em;font-family:Verdana, Helvetica, Arial;">'
// (entête c'est là ou tu met le bouton avec la croix pour fermer le pseudo pop up (vire ces commentaires))
fe+='entête<img title="Fermer" src="images/puce.gif" onclick="voirSelect(\'visible\');gdim.style.display=\'none\'" height="14" width="16"'
fe+='style="cursor:default;position:absolute;margin:1px;right:0;top:0; " /></div></div>'

function initLienImg(){
db=!D.documentElement.clientWidth?D.body:D.documentElement //quirk IE6
gdim=D.getElementById('pop'); lx=D.getElementById('tet')
addEvent(D,"mousemove",controle_position)
elem=document.getElementsByTagName('select');

//création de l'image
im1=D.createElement("img");gdim.appendChild(im1);
with(im1.style){border=0;margin="1px";}
//écriture des évènements
l=D.getElementsByTagName('a');
for(var i=0;i<l.length;++i){
//ajoute onclick=grdimg dans liens image avec extention .jpg ou .JPG
result=l[i].href.search(/jpg$|JPG$/);
if(result!=-1){l[i].onclick=grdimg;}
}
}

function controle_position(e){
sx=gk?pageXOffset:db.scrollLeft; //scroll h
sy=gk?pageYOffset:db.scrollTop; //scroll v
px=gk?e.pageX:event.clientX+sx; //curseur x
py=gk?e.pageY:event.clientY+sy; //curseur y
if(drag)with(gdim.style){left=px-dx+"px";top=py-dy+"px";}
return false
}
//Renvoi image et title dans le calque.
function grdimg(){
fx=gk?innerWidth-20:db.clientWidth //l fenêtre
fy=gk?innerHeight:db.clientHeight //h fenêtre
//charge l'image dans le cache du navigateur.
im=new Image();im.src=this.href;
//l'affiche en grandeur réduite repositionnée.
with(gdim.style){display="block";top=sy+2+'px'};
with(im1){src=im.src;width=height=100};
if(!cr)cr=gdim.offsetHeight-127;
if(gk)im1.style.marginBottom=-cr+"px";//correction Gecko
//montre le message d'attente.
lx.firstChild.data="patientez svp";
//colore le lien comme visité, récupère le message title
this.style.color=D.vlinkColor;txt=this.title;
//Lance le controle de chargement (c'est le temps que la grande image s'affiche, patientez patatipatata...)
actif=setTimeout('controleChargement()',100)
//désactive l'action normale du lien HTML
;return false
}
//controle du chargement de l'image
function controleChargement(){
//éxécute imgOK quand c'est terminé
im.complete?imgOK():
//sinon relance le contrôle toutes les 100 ms
actif=setTimeout('controleChargement()',100)
}

function imgOK(){ // image chargée.
clearTimeout(actif);lx.firstChild.data=txt;
//L'image ne dépasse pas la fenêtre:
if(im.width>=fx){im.height*=(fx-20)/im.width;im.width=fx-20;}
if(im.height>=fy){im.width*=(fy-30)/im.height;im.height=fy-30;}

//applique les dimensions recalculées à l'image.
im1.width=im.width;im1.height=im.height;
voirSelect('hidden')
}

// bug ie corrigé : cache les <select>
function voirSelect(v){
if(!gk){for(i=0;i<elem.length;i++)elem[i].style.visibility=v;}
}

function addEvent(obj,evType,fn,capt){ // ajoute un événement sans écraser l'éxistant.
if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // NS6+
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+
else {return false;}
}

// initialisation
D=document;gk=window.Event?1:0/*Gecko*/;
dx=dy=e=drag=cr=0
addEvent(window,"load",initLienImg)
D.write(fe)
//-->
0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
4 avril 2007 à 22:43
Salut poky,
Tiens un lien pour les propriétés en CSS (très utile):
http://fr.selfhtml.org/navigation/css.htm#ecriture

Bon courage !
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
5 avril 2007 à 02:03
Salut Txiki,

Merci pour ce bon lien, trop bien.
Bon, eh bien, tout est ok, après des heures de travail, tu peux aller voir le travail sur http://legarrit.free.fr/
Quelques petits détails me chagrinent encore :
1) Une photo ne s'ouvre pas sur la galerie.
2) La page du formulaire n'est pas valide W3C.
3) Sous Mozilla, l'affichage est moyen dû à la police, un peu crénelé, c'est Verdana.
4) Il faut améliorer le plan d'accès avec Google maps ou un truc du genre.
Dis-moi ce que tu en penses ?
Et merci encore pour ton aide précieuse.
CN
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
5 avril 2007 à 03:43
Bonjour,

Ah, tu as bien fait de changer (-;

1) Une photo ne s'ouvre pas
   J'en vois 11.

2) La page du formulaire n'est pas valide W3C.
   Tu utilises 2 fois “<p id="civilite">”.
   id ⇒ 1 seule utilisation

3) la police, un peu crénelé
   C'est peut-être dû à “http://legarrit.free.fr/images/trans5.gif” ?

4) améliorer le plan d'accès
   Tu peux peut-être enjoliver le tien (pour la précision) et proposer, en plus https://www.google.fr/maps?f=q&hl=fr&q=le+garrit&layer&sll=44.596701,1.076102&sspn=0.022522,0.049653&ie=UTF8&z=16&t=h&om=1&iwloc=addr

+ https://www.google.fr/search?as_q=&hl=fr&num=100&as_epq=le+garrit&lr=lang_fr&as_ft=i&as_qdr=all&as_occt=any&as_dt=i&gws_rd=ssl
Pas mal (-;
0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
5 avril 2007 à 08:07
Salut a tous,
Moi aussi j'en vois 11.
Un truc: la pseudo pop up s'ouvre un peu trop à droite (IE6 et W2000 pro). Il faut ramener la pop up sur sa gauche manuellement une première fois et puis les autres s'ouvrent çà leur nouvelle position (? ? ?)

Je pense que tu devrais supprimer cet effet 3 d destiné a internet explorer (cette bordure noire). Enfin faut essayer sans pour comparer car suis pas sur que ce soit plus joli avec cette bordure qui de toutes façons n'est interprété que par IE. C'est dans le script g_img.js.

Les controles des champs obligatoires, tu les a fait comment ? En javascript ou php ? Php je présume puisque ça affiche le résumé des champs vides. Donc ça veut dire que le formulaire est soumis puis vérifié sur le serveur.
Ne vaudrait-il pas ajouter un controle en local avec du javascript pour éviter les aller/retour entre le client et le serveur ?

Super look !
Bravo !
0
poky17 Messages postés 53 Date d'inscription lundi 26 mars 2007 Statut Membre Dernière intervention 30 mars 2008
5 avril 2007 à 10:31
Salut à tous,

Merci pour les compliments, mais sans votre aide, le résultat ne serait pas là.
1) Pour les photos, 11, mais que se passe-t-il, je vais essayer sur une autre ordi. Mais, je ne vois pas ce qui a pu se passer. Elles sont toutes en lignes.
2) Gihef, pour la police crénelée, si c'est dû à tans5.gif, on peut y remédier comment ?
3)Ok pour le id utilisait plusieurs fois, mais comment faire autrement ?
4) Je vais suivre tes conseils pour l'ouverture des pop ups, Txiki.
Merci encore.

CN
0
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
8 avril 2007 à 03:23
Bonjour,

1) free est un peu court parfois. En rechargeant ?

2) En assombrissant la couleur du texte ?
En éclaircissant l'image ?
Mais là, le texte en jaune risque de devenir illisible.

3) En la transformant en class
  class="civilite"
Avec
  .civilite
dans la feuille de styles.
0