28220 sujets

CSS et mise en forme, CSS3

Bonsoir à tous,

Je suis en train de m'entrainer à monter des pages entièrement en css, sans utiliser de tableaux. Smiley murf Et j'avoue que c'est vraiment puissant.
Actuellement je travaille sur cette page : http://idays.free.fr/apci/page1.html et j'aimerais arriver à ce resultat :
http://idays.free.fr/apci/maquette.jpg
Mais je n'arrive pas à caser mon logo "observerdesign "en dessous de mes deux colonnes d'images. Si je le met dans un "dl", sa taille est rétrécie (normal la "dl" fait 90 px de largeur). Mais si je le met en dehors en <img src> direct dans mon code, la position de mes éléments change complètement.
Je ne trouve pas de solution pour résoudre ce problème.

Je vous remercie pour vos remarques

Pouleytte
Bonsoir pouleytte !

Je n'ai pas le temps de me pencher sur ton problème, mais si ton sujet ne trouve pas preneur, n'hésite pas à le faire remonter en postant à nouveau.

Mon avis est qu'il doit y avoir un balisage plus approprié que des <dl> pour réaliser ton projet.

Courage, des suggestions viendront Smiley cligne
Oui merci pour l'info ! Je reposterais.
J'ai beaucoup cherché mais je n'ai rien vu de mieux que les "dl". Pour le moment. J'espère trouver une solution.
Merci beaucoup ^^
Smiley cligne

Pouleytte
Question : quelle est la fonction de ces images ?

De simples vignettes décoratives ?
Sont-elles destinées à recevoir des liens (comme un menu) ?
Sont-elles interchangeables ou il y a un ordre logique ?

<edit />
Il serait utile d'inclure l'image problématique dans ton code, sinon c'est plus difficile de t'aider Smiley smile
Modifié par Stephan (06 May 2005 - 01:35)
OK ! Donc j'y jetterai un oeil plus tard (chez moi il est 20h36) Smiley lol

<edit />
Note : le <body> ne peut être inclus dans un <div> :

[b][#red]<div id="global">
<body>[/#][/b]

Modifié par Stephan (06 May 2005 - 06:11)
Je me suis concentré sur ta colonne gauche.
Voici donc ma vision de la chose.

Tout d'abord j'ai « cancellé » les déclarations suivantes :

/* petit menu*/
ul[b][#red].cancel[/#][/b] {
	list-style-type: none; /* on supprime les puces, inutiles */
	width: 100%; /* précision pour Opera */
	margin-top: 16px;
	margin-left: 1px;
	float: left;
	
}
li[b][#red].cancel[/#][/b] { 
	float: left; /* on aligne les listes sur la gauche */
}

Ensuite, j'ai changé class="menu" et class="gallery" par des id et j'ai placé ton logo dans un « header », suivi d'une liste de liens (le menu) puis des vignettes :

<div id="gauche">
	<h1><img src="images/logo-etoile.gif" alt="observerdesign"></h1>
	<ul id="menu">
		<li><a href="">APCI</a></li>
		<li><a href="">Le design</a></li>
		<li><a href="">Archives de l'actualité</a></li>
		<li><a href="">Observateur du design</a></li>
		<li><a href="">Contact</a></li>
	</ul>
	<div id="gallery">
		<img src="images/g-1.gif" alt="">
		<img class="pousseruneimage" src="images/g-2.gif" alt="">
		<img src="images/g-3.gif" alt="">
		<img src="images/g-4.gif" alt="">
		<img src="images/g-5.gif" alt="">
		<img src="images/g-6.gif" alt="">
		<img src="images/g-7.gif" alt="">
		<img src="images/g-8.gif" alt="">
		<img class="pousserdeuximages" src="images/g-9.gif" alt="">
		<img class="pousserdeuximages" src="images/g-10.gif" alt="">
	</div>
</div>

Le CSS qui va avec :

#gauche {
	position: relative;
	float: left;
	width: 300px;
	margin-top: 10px;
	margin-left: 10px;
	text-align: left;
}
#gauche h1 {
	position: absolute;
	top: 310px;
	left: 110px;
}
#menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	position: absolute;
	left: 192px;
	width: 300px;
	padding: 0;
	padding-top: 20px;
	margin: 0;
}
#menu li {
	list-style-type: none;
	line-height: 1.5em;
}
#menu a {
	color: #000000;
	text-decoration: none;
}
#gallery {
	padding-top: 20px;
}
#gallery img {
	float: left;
	padding-right: 7px;
	padding-bottom: 7px;
}
#gallery img.pousseruneimage {
	padding-right: 100px;
}
#gallery img.pousserdeuximages {
	padding-right: 200px;
}

J'ai travaillé avec Firefox/Mac et je n'ai pas testé le rendu sur les différents navigateurs/plates-formes.
Personnellement, je regrouperais toutes les vignettes sur la même image que je placerais en arrière-plan.

Bonne continuation Smiley lol
Modifié par Stephan (06 May 2005 - 07:37)
Donc si ton problème est réglé, un petit [Résolu] serait apprécié dans ton sujet (en éditant le post qui a servi à le créer). Au passage, tu pourrais changer ton titre pour quelque chose de plus évocateur (pour de futures recherches) comme par exemple : Positionnement de vignettes ou un autre titre de ton choix Smiley cligne

Merci !