28218 sujets

CSS et mise en forme, CSS3

Zoom image au survol de la souris

Smiley bawling hello
je n'arrive pas à mettre le bon code et pas au bon endroit.

#nav-right img{
margin:5px;
list-style-type: none;
overflow:hidden;
text-align: center;
}


<!-- Right Side Menu --> 
<div id="nav-right" style="margin-bottom:5px;">
<ul> 
<li class="cat" style="border-top: 1px solid #000;">LES PAYS-BAS</li>
<li style="text-align:center"><img src="img/profile.jpg" alt="détails" />
<br />
Here you can describe what your website is about</li>


merci de votre aide
Modifié par Florent V. (25 Apr 2010 - 22:12)
Bonjour,

pintje a écrit :
je n'arrive pas à mettre le bon code et pas au bon endroit.
(...)
merci de votre aide

Vu la profusion d'éléments que tu nous donnes, voici toute l'aide que je peux te donner en retour: je te conseille fortement de mette le bon code au bon endroit. Smiley smile

Bon allez, je peux quand même dire ceci:
- le code CSS montré c'est un peu du grand n'importe quoi;
- pour le code HTML, c'est pas loin d'être la même chose.
Tu devrais donc pouvoir effacer tout ça sans remords. Puis nous décrire ce que tu cherches à réaliser, pourquoi pas.
Modifié par Florent V. (25 Apr 2010 - 22:16)
Bonsoir,

Tu peux définir une taille pour ton image quand la souris n'est pas là :

img {
width:100px;
height:100px
}


et une taille en :hover (qui décrit la situation où la souris est sur l'élément) :

img:hover {
width:150px;
height:150px
}
hello
bon ok je vais faire mieux et mettre le lien de ma page.
Je voudrais simplement faire un zoom sur l'image de droite au passage de la souris.
quel code et surtout ou le placer dans le code existant.
Soyez indulgent avec les personnes qui ne connaissent pas.
merci de votre aide.
http://pagesperso-orange.fr/les.pays.bas
J'ai regardé un peu ton code. Pour ce que tu veux faire :

Au lieu de :

<div id="nav-right" style="margin-bottom:5px;">
<ul>
<li class="cat" style="border-top: 1px solid #000;">LES PAYS-BAS</li>

<li style="text-align:center"><div class="zoom">
<p>	<img src="img/profile.jpg"/> </p>
</div> 
<br />
Here you can describe what your website is about</li>
<li class="cat" style="border-top: 1px solid #333;">LIENS</li>
<li><a href="index.html"class="externe">Link 1</a></li>
<li><a href="index.html"class="externe">Link 2</a></li>
<li><a href="index.html"class="externe">Link 3</a></li>
<li><a href="index.html"class="externe">Link 4</a></li>

<li><a href="index.html"class="externe">Link 5</a></li>
</ul>
</div>


Tu mets ça dans ta page (on enlève tous les styles, on rajoute un alt="profile" dans la balise image):

<ul id="nav-right">
<li class="cat">LES PAYS-BAS</li>
<li><img src="img/profile.jpg" alt="profile" />
<br />Here you can describe what your website is about</li>
<li class="liens">LIENS</li>
<li><a href="index.html">Link 1</a></li>
<li><a href="index.html">Link 2</a></li>
<li><a href="index.html">Link 3</a></li>
<li><a href="index.html">Link 4</a></li>
<li><a href="index.html">Link 5</a></li>
</ul>
</div>


Tu rajoutes dans ta feuille de style :


.cat {border-top: 1px solid #000}

ul#nav-right {text-align:center}

ul#nav-right li a {text-decoration:none;
color:#fff}

.liens {border-top: 1px solid #333}


Pour l'image zoomée :


ul#nav-right li img {width: 50px}

ul#nav-right li img:hover {width: 80px}


Avec quoi as-tu fait ton site ? Accèdes-tu au ftp de ton site ? Parce que, par exemple au lieu d'avoir :

<!-- Change the banner by replacing the image in: img/orange/orange-banner.jpg -->
<div id="main-image"class="imgindex" style="margin-bottom:5px;"></div>
<!-- END Banner -->


avec un css :

#main-image.imgindex{ 
background:url(../img/titrepaysbas.jpg) no-repeat center; 
width:990px;height:220px;border:1px solid #000;padding:0px;margin:0 auto;position:relative;
}


Un code html plus simple serait un mieux :

<img src="img/titrepaysbas.jpg" alt="bannière" />


et un css : 

#main-image {
width:990px;
height:220px;
border:1px solid #000;
padding:0;
margin:0 auto;
position:relative
}


Sans doute que rajouter des commentaires et de organiser un peu mieux ta feuille de style serait un plus pour s'y retrouver 
/*Commentaire ici c'est mon menu */


Sinon enlever les styles de ta page html et les mettre dans ta feuille de style serait mieux aussi.

À quoi sert de mettre une balise h1 si tu ne la remplies pas ? À la toute fin tu as oublié un ">" après le "<p".
ton image ne semble pas presente sur ton hebergement
(http://pagesperso-orange.fr/les.pays.bas/img/profile.jpg)

C'est idiot mais je ne sais pas vraiment quel effet tu recherche , quelles interaction avec les contenus ,l'utilisateur ... ?
hello
merci beaucoup pour les réponses.
Mon site est en construction c'est pour cela qu'il y a des vides et des balises manquantes.
limage n'est pas présente j'ai oublié de la charger sur le serveur.
J'ai fait mon site avec webexpert, photoshop et filezilla.
Je recherce juste un zoom au survol de la souris sur cette image qui "manque" j'ai vu plusieurs code mais pas de précisions ou le mettre exactement au css et au html.
Puis certains ne passent pas apres plusieurs tentatives.
Je vais suivre vos conseils et je vous recontacterais.
Merci à vous de votre temps c'est sympa
cordialement
Sujet clos
Aller à