[en cours de résolut°] Pb d'alignement horizontal (Scrogneugneu qd mm

Bonjour,

Comment faire pour la liste et l'image soit d'"aplomb" ?

http://www.cyberbreizh.com/wip/test/Edit2.html

J'ai tenté en positionnant l'image avec un float, mais la liste se colle à l'image par le dessus au lieu de le faire sur le coté comme je le voudrais :S

CSS

#truc {	

		width: 760px;
		margin: 0 auto ;
		background: white;
		text-align:center;
	}


#tof_droite {

		
		text-align: right;
		margin-top: 20px;
		margin-bottom: 20px;
		background: red;	

		}
		


#liste {	
		text-align: left;
		font-size: 0.9em;
		width: 200px;
		background: pink;
		
		
	}
	
	#liste ul {
	margin: 0px;
	padding: 0px;
	
	}

merci
Modifié par xis (12 Jul 2007 - 18:10)

Bonjour xis,

Si j'ai le même problème que toi, dois-je chercher "Scrogneugneu" dans le moteur de recherche ?

Peux-tu mettre un titre qui reflète ton sujet s'il te plait ? Merci d'avance.
Modifié par koala64 (12 Jul 2007 - 16:02)

c'est fait =)

utilise un float:left; ou un display:inline;

pardon...dans le #li{}

et pense a augmenter la longueur de la zone dans laquelle se trouve ton #ul{}

Bonjour,

Première chose à faire: travailler dans de bonnes conditions, avec une page HTML (même de test, surtout de test!) valide. C'est à dire, notamment:
- commençant par un Doctype (déclaration de type de document);
- n'ayant pas de </div> en trop comme c'est le cas actuellement.

Ensuite, pour mettre côte à côte deux éléments, on utilisera généralement le positionnement flottant.

xis a écrit :
J'ai tenté en positionnant l'image avec un float, mais la liste se colle à l'image par le dessus au lieu de le faire sur le coté comme je le voudrais :S

L'image est en deuxième dans le code, en dessous d'un élément de type bloc (div), et donc se place naturellement en dessous de cet élément. On peut faire flotter l'image (elle ira se caler le plus à droite possible), mais ça ne fera pas remonter l'image comme par magie à un niveau choisi arbitrairement (le haut du div qui la précède).

C'est plutôt le div qu'il faudrait faire flotter, dans le cas présent.

Et bien j'ai essayé précédemment avec les éléments flottant: j'avais appliqué un "float: left" à l'image mais la liste venait se coller au dessus.

N'étant de toute facon pas sur la méthode employée j'étais repassé à celle que j'ai détaillée ci dessus. Je repars donc sur les flottants.

adlteam: j'ai bien peur que si j'applique un "display: in-line" à la liste, elle ne perde sa forme de "liste" justement.

Merci les gens !

Florent: pinaise, je fais l'effort de faire une page test pour épurer le code afin que y voyiez clair et mossieur voudrait des doctypes que personne ne sait a quoi ca sert ? =))) Je ferais attention la prochaine fois.