28172 sujets

CSS et mise en forme, CSS3

Encore une mise en forme sans tableau problématique

Bonjour.

Pour la présentation de galeries de photos, je voudrais obtenir ceci :

http://a.imagehost.org/t/0833/copie.jpg

Je précise que j'ai placé tout dans un tableau pour cette copie d'écran mais que je désire une mise en page sans tableau, mais j'ai un problème.

Voici le HTML :

<body>
<div id="page">		
	<div id="header"></div>
	<div id="content">
		<div id="container">

			<div class="miniature"><img src="img01.jpg" width="150" height="150" class="photo" alt="" /></a></div>
			<div class="introduction"><h3>Galerie 1</h3><p>Le texte de droite ici...<p><a href="photos_01.html">Afficher la galerie</a></div>

			<div class="miniature"><img src="img02.jpg" width="150" height="150" class="photo" alt="" /></a></div>
			<div class="introduction"><h3>Galerie 2</h3><p>Le texte de droite ici...</p><a href="photos_02.html">Afficher la galerie</a></div>

		</div>
	</div>
	<div id="footer"></div>
</div>
</body>

Et une partie du CSS, là où probablement ça déconne.

html {
	font-size: 100%;
	font-family: "Trebuchet MS", sans-serif, Verdana, Helvetica;
	color: #FFFFFF;
}

body {
	background: #000000;
	margin: 0;
	font-size: 0.8em;
}

div#page {
	background: #000000;
	width: 800px;
	margin: 0 auto;
	border: 1px solid #FFFFFF;
}

div#header {
	width: 800px;
	height: 350px;
	display: block;
	background: url(../images/logo_header.jpg);
}

div#content {
	padding: 0 10px 0 10px;
}

div#container {
	padding: 0;
	overflow: auto;
}

.miniature {
	float: left;
	width: 150px;
	height: 150px;
	margin: 0;
}

.explain {
	float: right;
	width: 600px;
	height: 150px;
	margin-left: 10px;
}
div#footer {
	background: url(../images/logo_footer.jpg);
	width: 800px;
	height: 60px;
}
Bonjour,

Quelques remarques en vrac avant tout :
- ta div#header n'a pas besoin de précision sur son comportement (display: block est évident pour une division)


- 
padding: 0 10px 0 10px;
peut être écrit de la sorte 
padding: 0 10px;


Ensuite pour ton code HTML et CSS, il y a un souci de nom de classe d'un côté ou d'un autre. En effet dans le HTML je vois un nom introduction, de l'autre côté (côté CSS) je vois le nom explain.

Voilà pour le moment. Si c'est un de tes premiers essais en CSS, je pense que tu vas revenir compléter ta demande d'ici peu une fois que tu auras avancé Smiley smile

Tu vas voir c'est marrant ! Smiley biggol
Salut,

Personnellement je pense que j'engloberais les deux <div> miniatures et et introduction dans un bloc, histoire de les regrouper et de gérer chaque blocs entre eux. Smiley smile
Riku
Oui, en fait j'ai introduction pour chaque entrée ; j'ai oublié d'en changer quand j'ai inséré le code dans le message ; le problème n'était donc pas là
Pour le padding, ok aussi ; inatention.

Mikashu
Après avoir posté le sujet, j'ai fait quelques modifications et ça s'affiche correctement :

.miniature {
	float: left;
	width: 150px;
	height: 150px;
	padding: 10px 0;
}

.introduction {
	float: right;
	width: 610px;
	height: 150px;
	padding: 10px 0;
}

Reste un problème sous IE6. Avec 2 galeries, ça ne se voit pas, mais avec 25, en bas de page, la colonne de droite - introduction - subit un décalage vers le bas. Avec ces 25 galeries, l'entête Galerie 25 si situe à peu près au milieu de la vignette.
J'ai donc fait un essai en intégrant les deux class dans une div, aucun changement.

Question supplémentaire : pourquoi définir un margin à 0 n'affiche pas la même chose que de ne pas définir un margin du tout ?
Modifié par Nerva (13 May 2010 - 13:57)
Hello,

Pour répondre à ta question supplémentaire, il faut avoir conscience que les navigateurs appliquent des styles par défaut aux pages qu'ils affichent. Ceux-ci peuvent ou non être paramétrables par l'utilisateur du navigateur.

Ainsi, si tu ne précises pas que tu souhaites un margin nul pour tel ou tel élément, le navigateur appliquera peut-être par défaut un margin de 2px.

À ce sujet, je te conseille l'excellent article Styles auteur, utilisateur et agent utilisateur : 3 raisons de lâcher prise sur votre design.
Modifié par biouchy (13 May 2010 - 14:22)
Sujet clos
Aller à