28220 sujets

CSS et mise en forme, CSS3

Salut,

J'essaye de faire une sorte de portfolio dont le contenu (des textes avec titre et photo) défilerait avec une scrollbarre horizontale.

J'ai fait le contenu avec des DL (c'est la première fois que je m'en sers). Jusque là, la présentation n'est pas trop mal => new4.php mais l'overflow est vertical. Hors, je voudrais que le défilement se fasse à l'horizontal.

Voici la partie du code HTML
		<div id="photos">
			<dl>
				<dt><strong>Frederic</strong></dt>
				<dt><a href="Javascript:alert('Zoom Fred');">Agrandir l'image [+]</a></dt>
				<dt><img src="frederic.jpg" alt"fred" /></dt>
				<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</dd>
			</dl>
			<dl>
				<dt><strong>Pierre</strong></dt>
				<dt><a href="Javascript:alert('Zoom Pierre');">Agrandir l'image [+]</a></dt>
				<dt><img src="pierre.jpg" alt"Pierre" /></dt>
				<dd>Phasellus varius eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </dd>
			</dl>
			<dl>
				<dt><strong>Nafem</strong></dt>
				<dt><a href="Javascript:alert('Zoom Nafem');">Agrandir l'image [+]</a></dt>
				<dt><img src="nafem2003.jpg" alt"Nafem" /></dt>
				<dd>Class  aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</dd>
			</dl>
			<dl>
				<dt><strong>Frederic 2 (le retour)</strong></dt>
				<dt><a href="Javascript:alert('Zoom Fred');">Agrandir l'image [+]</a></dt>
				<dt><img src="frederic.jpg" alt"fred" /></dt>
				<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</dd>
			</dl>
		</div>
le calque #photos étant, avec les autres calques de contenu, dans un div nommé #client (celui avec la grosse bordure bleue) et sa correspondance en CSS
#client #photos {
	position: relative;
	border: solid 1px gray;
	margin: 10px 0;
	padding: 5px;
	overflow: auto;
	height: 200px;
	}
#client #photos dl, #client #photos dl dt, #client #photos dl dd {
	margin: 0;
	padding: 0;
	}
#client #photos dl {
	float: left;
	width: 260px;
	margin-right: 1em;
	padding-left: 3px;
	background-color: #ddd;
	border: solid 1px black;
	min-height: 180px;
	}
#client #photos dl dt strong {
	display: block;
	font-size: 1em;
	text-align: center;
	background-color: #01516d;
	color: #EEE;
	padding: 2px;
	margin: 3px 3px 0 0;
	}
#client #photos dl dt a {
	align: right;
	text-decoration: none;
	font-size: 0.8em;
	color: blue;
	border: solid 0px maroon;
	}
#client #photos dl dt img {
	float: left;
	border: 1px solid black;
	width: 95px;
	height: 95px;
	margin-right: 5px;
	}

J'ai également d'autres petits soucis de présentation mais on en reparlera après Smiley lol

EDIT: correction de quelques fautes d'orthographe.
PS : Se serait bien d'avoir le bouton "Prévisualiser" lorsque l'on crée ou que l'on édite un post Smiley smile
Modifié par Ricou13 (12 May 2005 - 18:51)
J'me sens seeeuuullll Smiley bawling

Je suis obligé de tout faire tout seul, pas cool.

J'ai donc ajouté un calque interne à ma pseudo-frame (Haha, je pense que ce mot magique va en faire réagir Smiley lol ) et c'est lui qui contient les "articles" (cadre avec titre, photo et texte). Ainsi j'espérais faire en sorte que sa largeur soit dynamique (en fonction du nombre d'articles) et que, du fait que son conteneur soit en overflow, cela fonctionne correctement.

C'est le cas, sauf que pour empêcher les articles de revenir à la ligne, je suis obligé de définir une largeur importante (1500 px actuellement).
Or, d'une part cela ne marchera plus si j'augmente le nombre d'article et d'autre part, si le cadre est trop long, on pourra scroller bien au-delà du contenu.
J'ai mis une bordure rouge au cadre interne pour que vous puissiez voir sa largeur.

Et j'ai mis le portfolio en double (toujours ici ). Le premier (l'effet que je souhaite obtenir) a une largeur fixe (1500px) mais non dynamique. Le second n'a aucune règle concernant sa largeur et les articles passent automatiquement à la ligne.

Ca doit pas être si compliqué pourtant ? On peut bien fixer une largeur en laissant la hauteur s'aggrandir en fonction du contenu, pourquoi pas fixer une hauteur et laisser la largeur s'aggrandir en fonction du contenu ?

ou alors, faut pas utiliser <DL>
sinon, je vais être obligé de passer par un tableau Smiley confus
Effectivement, ils ont une solution intéressante :

- Tous les blocs "articles" sont positionnés en absolute et seul le top est défini.
- Chaque "article" possède alors un style "inline" définissant sa position left...

Je l'ai appliqué sur ma version 5

Simple mais impose que le positionnement "left" soit définit dans le code HTML. Ca ne me pose, personnellement, pas de pb puisque mes "articles" seront générés en PHP depuis une base de données.
Mais ce n'est pas du CSS "propre" (Olivier va-t-il sauter au plafond ? Smiley lol ) et j'aimerais bien avoir l'avis des "pros" avant de mettre [Résolu].

En attendant Smiley biggthumpup Merci Daweed (ça me fait penser à la façon de prononcer les noms qu'utilisait l'alien dans "Enemy Mine" - Excellent film au passage) pour le lien.
Ricou13 a écrit :
j'aimerais bien avoir l'avis des "pros"


Alors les "pros", pas d'avis ?
Pas d'autre solution ?
Cela ne vous dérange pas de mettre du style inline dans les balises ?
Vous pourriez me faire un café ?
Smiley lol
J'ai finallement trouvé une solution plus simple sur le principe précédent.
Modifié par Ricou13 (15 May 2005 - 02:42)