28120 sujets

CSS et mise en forme, CSS3

Entourage d'une image avec des coins arrondis et une ombre

salut à tous Smiley smile

j'ai pioché à droite à gauche du code pour faire mes entourages d'images mais ya un truc qui déconne :

ça me donne ça :

http://makrea.free.fr/temp/marchepo.png

mon code CSS :

#ombre {

  float: left;
  padding: 0 0 O O;
  background: #000;
  position: relative;

}

#ombre img{
 				display: block;
}

#hautgaucheim, #hautdroiteim, #basgaucheim, #basdroiteim {
				height: 8px; width: 8px;
				background-repeat: no-repeat;
				font-size:1px;
}

#gaucheim, #droiteim,  {
				height: 1px; width: 8px;
				background-repeat: repeat-x;
				font-size:1px;
}

#basim, #hautim  {
				height: 8px; width: 1px;
				background-repeat: repeat-x;
				font-size:1px;
}

#hautgaucheim {
				background: url(images\im1hg.png);
				float: left;
}
#hautdroiteim {
				float: left;
				background: url(images\im1hd.png);
}
#basgaucheim {
				float: left;
				background: url(images\im1bg.png);
}
#basdroiteim {
				float: left;
				background: url(images\im1bd.png);
}		
#gaucheim {
				float: left;
				background: url(images\im1g.png);
}	

#droitetim {
				float: left;
				background: url(images\im1d.png);
				
}	
#basim {
				float: left;
				background: url(images\im1b.png);
}	

#hautim {
				float: left;
				background: url(images\im1h.png);
}	

*/



mon code HTML :

<div id="ombre"><div id="hautgaucheim"></div>
<div id="hautim"></div><div id="hautdroiteim"></div>
<div id="gaucheim"></div><img src="images/logosds.png" alt="logo"/>
<div id="droiteim"></div><div id="basgaucheim"></div>
<div id="basim"></div><div id="basdroiteim"></div></div>


je suis sur que c'est tout bete mais j'ai essayé plein de trucs et ça marche po.. :'(

si pour vous ça semble clair faites moi signe Smiley cligne
Modifié par zepokpok (30 Oct 2007 - 18:11)
Bonjour,
Et pourquoi pas le faire directement sur l'image dans totoshop ou The Gimp ???
Modifié par gaelgerard (30 Oct 2007 - 21:02)
ben oui tiens, et pourquoi je ferais pas mon site avec des vieilles tables et des cellules moisies aussi ? Smiley smile

blague à part le but du CSS pour moi (et pour bcp je pense) c'est d'automatiser ces petites taches pour les mises à jour par la suite et puis avoir un design qui peut changer avec la simple modification de la feuille de style.

enfin pour moi les CSS ça sert à ça...
Salut,
zepokpok a écrit :
blague à part le but du CSS pour moi (et pour bcp je pense) c'est d'automatiser ces petites taches pour les mises à jour par la suite et puis avoir un design qui peut changer avec la simple modification de la feuille de style.

enfin pour moi les CSS ça sert à ça...
Oui, ça sert à ça. Mais comme les feuilles de style ne font pas encore le café, ni la vaisselle, il faut parfois revoir ses ambitions à la baisse et faire quelques petites choses à l'ancienne Smiley cligne
mais ça se fait partout ce genre de trucs...

voici des tutos :

http://theshapeofdays.com/2005/11/my_contribution.html

http://www.smileycat.com/miaow/archives/000044.html

j'suis simplement pas assez dégourdi pour adapter le truc à ma sauce...

je me trompe de forum visiblement...

merci qd mme à bientot !

PS : je l'ai déjà fait pour les bords de mon contenu, là je voulais l'adapter à une mage, la difficulté réside dans l'ajout de 4 autres div : gauche droite haut bas, que je dois mal placer je pense.
Modifié par zepokpok (31 Oct 2007 - 09:40)
Re.

Ce n'est pas impossible à faire, mais il faut se demander si le jeu en vaut la chandelle ... Quand je vois les styles que tu as écris uniquement pour réaliser une ombre portée et des coins arrondis (sans parler des balises inutiles dans le code html), je me dis qu'il serait plus simple et plus économique de travailler directement sur l'image ...
justement la question après était de savoir si yavait pas moyen de faire les choses correctement dans les feuilles de styles pour que ça s'applique plus facilement à chaque image.

encore une fois je débute. idem si des balises sont inutiles tu peux déjà me citer lesquelles afin que je fasse les choses bien dès le début de cet apprentissage Smiley cligne

merci
Le but du CSS est d'également (et surtout) libérer la mise en page du contenu de ton site.

Or le fait d'ajouter moulte div pour automatiser les coins arrondis de ton image va dans le sens contraire de cette séparation de forme et de contenu.

Je pense qu'il est donc non seulement plus simple, mais meilleur pour ton site de faire cela sous Photoshop. Si tu es un fou de l'automatisation, tu peux toujours faire un script (macro) sous photoshop pour ajouter tes coins arrondis.
le but est aussi à terme de pouvoir changer de mise en page facilement...

et ce n'est pas possible donc de faire une feuille de style plus lourde et qui contiendrait ces infos plutot qu'avoir à placer 40 div sur ma page ?
Je ne pense pas, car tes ombres sont des éléments visuels, qui ont besoin de conteneurs, et les conteneurs sont justement les "moulte" div dont les autres te parlaient précédemment.

Il y a en effet des tutos qui expliquent comment faire, mais je trouve ça tellement LOURD (pour la lisibilité du code d'une part, et pour le poids de la page d'autre part), qu'en effet la meilleure solution reste le script toshop.
(à mon sens en tous cas)
bon...

pour ceux que ça intéresse qd meme, finalement ça marche.
j'ai laissé tomber l'ombrage, ça doublait les div.
mais ça doit etre faisable avec des border-left: telle couleur; qui simulera une legere ombre.

le CSS :

div.shadow {
  float: left;
  padding: 0 0px;
  position: relative;
  margin-left: 7px;
  margin-right: 7px;
  border-left: 1px solid #2A2A2A;
  border-right: 1px solid #2A2A2A;
  background-color : #2A2A2A;
}

div.shadow img {
  padding: 5px 4px 0px 4px;
  }

div.shadow div.topleft {
  width: 5px;
  height: 5px;
  background: url(images/im3hg.png) no-repeat top left;
  position: absolute;
  top: 0px;
  left: -1px;
}

div.shadow div.topright {
  width: 5px;
  height: 5px;
  background: url(images/im3hd.png) no-repeat top right;
  position: absolute;
  top: 0px;
  right: -1px;
}

div.shadow div.bottomleft {
  width: 5px;
  height: 5px;
  background: url(images/im3bg.png) no-repeat bottom left;
  position: absolute;
  bottom: 0px;
  left: -1px;
}

div.shadow div.bottomright {
  width: 5px;
  height: 5px;
  background: url(images/im3bd.png) no-repeat bottom right;
  position: absolute;
  bottom: 0px;
  right: -1px;
}



l'html :

<div class="shadow">
  <img src="images/logosds.png" alt="logo "/>
<div class="topleft"></div><div class="topright"></div><div 
class="bottomleft"></div><div class="bottomright"></div></div>


je trouve pas ça INADMETTABLE !! non plus comme longeur de code pour le rendu au final... ça entoure qd meme toutes mes images à l'identique en 3 clics et surtout ça me permettra d'avoir juste à changer mes 4 images de coin pour passer à un autre style d'encadrement.

happy halloween ! Smiley biggol
Sujet clos
Aller à