28172 sujets

CSS et mise en forme, CSS3

Ombre sur une image

Bonjour, je suis nouveau et je commence avec le langage html et css Smiley smile .
Voilà mon problème après avoir mis une ombre sur ma gallerie d'image et opéré
un décalage avec hover lors du passage de la souris,une bande blanche apparait sur le côté de mes images lors de l'animation, j'aimerais m'en dèbarasser,de même quel propriété dois-je utiliser si je veux élargir mon ombre lors du passage de la souris sur l'image(décalage+ombre).
Merci beaucoup si vous pouvez me filer un coup de pouce.


p.s:sur la droite de ma page aès avoir utilisé max weight pour définir mon body,
je me retrouve avec la moitié de ma page vide sur la droite de mon site(marge blanche)comment pourrais je y remédier?.Merci encore.
bonjour,oui désolé voici mon html;

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />



<title>Ma Gallerie</title>

</head>





<body>
<header>
<div class id="bandeau">
<div class id="texteg"><font color="white"><h1>MA GALERIE</h1></font></div>
<nav><a href="index.php">
<font color="white">MON PROFIL</a><a href="bdd.php"></font>
<font color="white">LIENS</a><a href="perso.php"> </font>
<font color="white">ME CONTACTER</a></nav></font>
</div>
</header>



<article>
<div id="titre">

<font color="black"><h2>MES DERNIÈRES OEUVRES</h2></font>

<font color="black"><p>voici les derniéres oeuvres que j'ai réalisées,je vous invite à les consulter.Chacune d'elle demande plusieurs jours de travail,sans compter les recherches préalables.N'hésitez pas à me contacter si vous souhaitez faire l'acquisition de l'une d'entre elles ou tout simplement pour obtenir des renseignements sur les dimensions ou tout autre détail.</p>
</font>
</div>





<ul>
<li class="zoomarticle">
<div class="article_big_img">
<a href="http://lorempixel.com/800/800/abstract/1/"><img src="http://lorempixel.com/200/200/abstract/1/"/></a>
</div>
</li>


<li class="zoomarticle">
<div class="article_big_img">
<a href="http://lorempixel.com/800/800/abstract/2/"><img src="http://lorempixel.com/200/200/abstract/2/"/></a>
</div>
</li>

<li class="zoomarticle">
<div class="article_big_img">
<a href="http://lorempixel.com/800/800/abstract/3/"><img src="http://lorempixel.com/200/200/abstract/3/"/></a>
</div>
</li>

<li class="zoomarticle">
<div class="article_big_img">
<a href="http://lorempixel.com/800/800/abstract/4/"><img src="http://lorempixel.com/200/200/abstract/4/"/></a>
</div>
</li>


<li class="zoomarticle">
<div class="article_big_img">
<a href="http://lorempixel.com/800/800/abstract/5/"><img src="http://lorempixel.com/200/200/abstract/5/"/></a>
</div>
</li>

<li class="zoomarticle">
<div class="article_big_img">
<a href="http://lorempixel.com/800/800/abstract/6/"><img src="http://lorempixel.com/200/200/abstract/6/"/></a>
</div>
</li>

<li class="zoomarticle">
<div class="article_big_img">
<a href="http://lorempixel.com/800/800/abstract/7/"><img src="http://lorempixel.com/200/200/abstract/7/"/></a>
</div>
</li>

<li class="zoomarticle">
<div class="article_big_img">
<a href="http://lorempixel.com/800/800/abstract/8/"><img src="http://lorempixel.com/200/200/abstract/8/"/></a>
</div>
</li>

<li class="zoomarticle">
<div class="article_big_img">
<a href="http://lorempixel.com/800/800/abstract/9/"><img src="http://lorempixel.com/200/200/abstract/9/"/></a>

</div>
</li>
</ul>








</article>



<font color="black"><aside></font>
<div class="aside">
<font color="black"><h2>CONTACT</h2></font>
<font color="black"><h2>Par mail</h2></font>
<a href="mailto:jl.godasse@gmail.com">jeffstalker4@gmail.com</a>
<h2>Par courrier</h2>
<div>Jean-Luc Godasse</div>
<div>12 rue du cherche-midi</div>
<div>13008 Marseille</div>
</div>
</aside>
</font>

<div class id="bandeaubas">
<font color="white"><footer>© jeffstalker4@gmail.com</footer>
</font>
</div>

</body>
</html>
et mon css Smiley smile ,c'est en fait un entrainement que je fais pour créer un site :

@charset "utf-8";
/* css Document */

body {

max-width: 945px;
border-width: 0;
margin-left: -5px;
}



div#bandeau {
width: 1248px;
height:86px;
background-color: #688EE3;
text-decoration: none;
text-indent: 10px;
margin-top: -28px;
margin-left: 5px;
margin-right: -10px;
clear:both;


}

div#titre {

margin-left: 23px;

}
li.zoomarticle {


}

div#bandeaubas{
width: 1248px;
height:65px;
background-color: #688EE3;
margin-left: -8px;
clear:both;
position: relative; bottom :-15px;
}




.aside {
float:right;
margin-right: -163px;
margin-top: -535px;

}

a {
text-decoration: none;
}


nav {
text-align: right;
margin-top: 28px;
margin-right:-618px;
margin-bottom: 900px;
position: relative; top :35px;
position: relative; right : 650px;
}

footer {
text-align: left;
margin-top: 0px;
margin-left: 10px;
text-indent: 10px;
}

.zoomarticle {
height: auto;
float: left;
margin-bottom: 0.5em;
margin-left: 1%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
display: inline-block;
}




.zoomarticle {

box-shadow: 0px 0px 5px 3px #999999;
-webkit-box-shadow: 0px 0px 5px 3px #999999;
-moz-box-shadow: 0px 0px 5px 3px #999999;
transform: scale(0.90);
-ms-transform: scale(0.90);
-webkit-transform: scale(0.90);
-o-transform: scale(0.90);
-moz-transform: scale(0.90);
text-align: left;
padding: 0;

}

img:hover {
right: -5px;
top: -5px;
position : relative;
box-shadow:10px 4px 10px 28px #999999;
-webkit-box-shadow: 10px 4px 10px 28px #999999;
-moz-box-shadow: 10px 4px 10px 28px #999999;

}

.article_big_img {
width: 194px;
height: 194px;
overflow: hidden;
padding: 0px;

}


h1 {
position: absolute; top :5px;
position: absolute; left :10px;

}

article {
margin-top: 39px;
}

footer {
position: absolute; bottom :25px;
position: absolute; left :12px;
}
Bonjour,

Pour retirer le décalage, il faut rétirer:


img:hover {
right: -5px;
top: -5px;
}


de la déclaration:


img:hover {
right: -5px;
top: -5px;
position : relative;
box-shadow:10px 4px 10px 28px #999999;
-webkit-box-shadow: 10px 4px 10px 28px #999999;
-moz-box-shadow: 10px 4px 10px 28px #999999;
}


Au passage de la souris, vous décaler l'image de 5px vers la droite et de 5px vers le haut. D'ailleurs, toute la déclaration peut-être supprimée. Le 'box-shadow' sera sur '.zoomarticle'.


.zoomarticle:hover{
  box-shadow:10px 4px 50px 28px #999999;
}


'box-shadow' ne fonctionne que sur des éléments de type 'block' ou 'inline-block'. img est de type 'inline'. Dans la déclaration au dessus, c'est la 4ème valeur qu'il faut changer. En fait, il faut redéfinir la propriété 'bow-shadow' tout simplement.

Pour la marge blanche, essaie de ne pas toucher à la balise 'body' pour gérer la mise en page. Tu places tout le contenu dans une balise 'div', tu lui donnes une classe 'conteneur' par exemple. Ce conteneur aura une max-width de 945px et tu le centres horizontalement avec 'margin: 0 auto'. Ton footer n'a pas besoin de width: 1278px, sauf si c'est primordial. Mais attention à la placer en donner du conteneur puisque ce dernier est limité à 945px.
Modifié par allan00958 (21 Dec 2016 - 11:01)
merci beaucoup,d'avoir pris le temps de me répondre.
Pour les ombres,cela marche très bien,le seul
problème c'est que mon entrainement consiste à absolument toucher
à la balise body et de lui définir un max-width,je me demande donc comment
je peux faire pour obtenir quelque chose sans marge blanche,à moins que définir un max-width oblige à avoir un espace blanc sur un ou deux coté de la page si margin auto?.

j'ai deux petites questions,j'espère ne pas vous ennuyer en les posant
comment puis je faire si je veux que mon texte du site au dessus des images se retrouve aligner avec les 4 images de la colonne du haut par exemple les mots "pour obtenir des "soit juste au bord de la quatrième image?
et comment puis-je obtenir dans mon nav les virgules qui sépare les éléments mais qui n'en sont pas comme dans l' image en pièce jointe?.Merci pour tout.


upload/63519-imagesite.jpg
Modifié par Ildegan29 (21 Dec 2016 - 12:19)
Pour la marge blanche, essayer de rajouter 'margin: 0 auto' à la balise 'body', ce qui va center horizontalement. Je crois pas avoir tout bien compris, mais si vous centrez le contenu, forcément il y aura du blanc à gauche et à droite. J'aurais besoin d"une capture d'écran pour mieux comprendre.

Pour la navigation,

essayer quelqu'un chose comme ca: https://jsfiddle.net/a586hruv/

Pour center le texte du dessus, vous pouvez ajouter de l'espace à l'intérieur de la balise <p> comme ceci:
On ajouter 80px de padding à droite ce qui poussera le texte à passer à la ligne. Il faut retirer le 'margin-left: 23px' qui ajoute de l'espace à l'extérieur du div avec l'id 'titre'.


div#titre {
padding:0 80px 0 0;
}
merci beaucoup pour ton aide les tirets ne fonctionnent pas mais je trouverais un moyen,
au fait pour mettre une majuscule ou agrandir une lettre dans une balise(quand le texte est deja en majuscule) quel propriété utilisé?.Merci Smiley smile
Modifié par Ildegan29 (22 Dec 2016 - 15:51)
Les tirets devraient fonctionner. Vérifie bien que ton html soit pareil.

Il faut mettre la lettre en question dans un 'span', lui donné un classe, et utilisé 'font-size'.

Par exemple,<p>mon <span class="gros">T</span>exte;
merci j'ai essayé pour le span mais ca ne marche pas peux etre trop de balise imbriqué?
html:

<body>
<header>
<div class id="bandeau">
<div class id="texteg"><font color="white"><h1><span class="maj">M</span>A GALERIE</h1></font></div>
<nav><a href="index.php">
<font color="white">MON PROFIL</a><a href="bdd.php"></font>
<font color="white">LIENS</a><a href="perso.php"> </font>
<font color="white">ME CONTACTER</a></nav></font>
</div>


css:
span.maj{
font-size: 200%;
}

Merci Smiley smile
Bonjour.

Ildegan29 a écrit :
ça ne marche pas peut-être trop de balises imbriquées ?

Ça n'a rien à voir...

font est une balise HTML obsolète, est-ce que le problème est là... ?

Le plus simple est de mettre des majuscules là il y a besoin. Scinder des mots, par principe, est embêtant pour les recherches...

Smiley smile
@zelena

Si tu lis plus haut, apparemment, elle veut agrandir la première lettre majuscule d'un mot qui est lui-même tout en majuscule.
Bizarre effectivement.

Retire les balises <front> pour voir. J'aurai besoin de voir tout ton html et css. Utilise jsfiddle.
Sujet clos
Aller à