28173 sujets

CSS et mise en forme, CSS3

Mettre margin a l'image en grand !!

Salut !!
je voulais savoir comment est ce que je pourrais mettre l'image en grand, dans mon conteneur.
Il s'agit de l'image obtenu a partir du tuto de galerie d'images, en javascript du site
C'est la !!!
Voila le lien, si vous pourriez m'aider, sachant que je ne souhaite mettre QUE l'image en grand dans le conteneur. les apercus doivent rester dans e menu !
D'autre part, je voudrais savoir si quelqu'un sait pourquoi il y a u espace entre les images du main .
Smiley sweatdrop
Merci !! Smiley biggol Smiley biggol
Modifié par Okajima (14 Feb 2007 - 09:28)
Bonsoir,
concernant l'espace entre les images du menu, ça vient d'un retour à la
ligne aprés chaque image au niveau du code et qui provoque un espace indésirable.
Tu dois mettre toutes tes images sur une seule ligne.
Commence par rendre ton code et surtout tes imbrications de balisage
plus conforme:

tu as

	<dl id="photo">
		<dt>Titre de la photo 1</dt>
		<div class="contenu">
		<dd><img id="big_pict" src="images/grand.jpg" alt="Photo 1 en taille normale" /></dd>
	</dl>
</div>


Alors que tu devrais avoir (a priori)

	<dl id="photo">
		<dt>Titre de la photo 1</dt>
		<dd class="contenu"><img id="big_pict" src="images/grand.jpg" alt="Photo 1 en taille normale" /></dd>
	</dl>
je viens de le faire !
malheuresement cela n'arrange pas le probleme, je n'arrive toujours pas a placer le contenu a gauche ..... Smiley confus
J'ai essayer de mettre un float:left;, mais ca passe pas ! Smiley bawling
Décidemment tu n'es pas très clair : tu veux dire le contenu à droite?
Tu as trop de bordel dans ta css, des float:left en trop,
float et position:absolue ne peut être combiné, etc.

Je te conseil d'épurer un peu tes règles CSS et de procéder par
élimination successive pour essayer de détecter la source de l'erreur.
Modifié par Hermann (09 Feb 2007 - 21:11)
Ben a vrai dire, j'ai tester de nombreuses choses, mais ca ne passe pas.
J'ai procédé par élimination, mais ca ne passe toujours pas ... Smiley langue
Okajima a écrit :

J'ai procédé par élimination, mais ca ne passe toujours pas ... Smiley langue


Salut,

Ne procède pas par élimination, je ne pense pas que tu ais le niveau pour ça, sans vouloir te vexer Smiley cligne

Phase 1 : oublis le javascript, oublis les css, fais un document html qui tienne debout.

Dit autrement, pars de zéro Smiley smile

. Déclaration de type de document (DTD)
. Contenu du <head> suffisant, il manque la meta http-equiv qui donne notamment le charset du document. à titre d'exemple (si doctype xhtml):

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

. Aucun <table> dans ton document ! Il sera assez temps après de voir à quoi ça pourrait bien te servir.

. Et même éventuellement aucun <div>, tu as tout ton temps...

. Par contre des <h1>, <h2> etc... Sans aucunes hésitations.

Après ça ira très vite Smiley smile
Merci pour les conseilles, mais a vrai dire, ca ne fait pas avancer mon probleme !
Je voit pas commment faire, je vire les div, ??
Je met des tr a la place ??
Okajima a écrit :
Merci pour les conseilles, mais a vrai dire, ca ne fait pas avancer mon probleme !

Hé bien, disons que ton problème principal c'est qu'il te manque (semble-t-il) pas mal de bases. Alors à moins de passer une heure à te pondre une solution toute faite, je vois pas trop ce qu'on pourrait faire pour toi.

La manière dont tu as imbriqué les éléments est curieuse (l'image à afficher appartient à la colonne de gauche ? Smiley sweatdrop ), tu as utilisé un positionnement absolu mais sans donner de coordonnées, etc.

Donc, la réponse logique est de te conseiller de reprendre un peu les bases. Au sujet du positionnement CSS :
http://openweb.eu.org/articles/initiation_flux/
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/
Okajima a écrit :
Merci pour les conseilles, mais a vrai dire, ca ne fait pas avancer mon probleme !


Si justement c'est le seul moyen de faire avancer ton problème !!!

Ce n'est pas à nous de donner les bonnes réponses c'est à toi de poser les bonnes questions.

Encore une fois pars de zéro, du squelette html :

<!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" lang="fr">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>
             Le titre
        </title>
    </head>
    <body>
    
    </body>
</html>


Ensuite entre <body> et </body> le code html donné pour la galerie javascript du tuto, c'est un bon début.

Aucun problème en ce qui me concerne pour te donner un coup de main. Sauf que ton problème est double :

. Tu ne comprend rien au html

. Tu ne comprends rien aux css

Tant mieux c'est ce qui peut t'arriver de mieux alors profites en !

Encore une fois prend tout à partir de zéro et pose autant de question que tu veux.

Si ça ne te convient pas alors à + Smiley cligne
Ben deja, merci, j'ai suivi vos conseils, et ca pmarche!
Seul bemol, il reste un espace netre certaines images.
et aussi, je voulais savoir comment eviter la puce a chque image ??
Encore merci ! Smiley cligne Smiley cligne
Une petite remarque un peu HS: l'utilisation d'images pour ton menu en haut est-il réellement nécessaire ?
Ben a vrai dire, NON !
mais bon on m'a demander de laisser tel qu'elle alors !
sinon, des propositions ??
Merci pour les reponses !
Ben il me reste un dernier, le dernier probleme !! Smiley prie Smiley prie Smiley hippy
Je voudrais mettre un margin a l'imgae en grand, mais je sais pas ou ???, a quel endroit ??
Merci!
Sujet clos
Aller à