28172 sujets

CSS et mise en forme, CSS3

Baseline de li accordé avec div suivante

Bonjour tout le monde,

Mon premier post pour mon premier problème !

Bon j'ai un menu vertical avec ul suivi d'une div que j'ai mis inline block.

Le mieux c'est de montrer mon code non ?

Voici le html :

<body>
		<ul id="listCarte">
			<li>Menu</li>
			<li>Sushi</li>
			<li>Maki</li>
		</ul>
		
			<ul id="listMenu"  class="alignement">
				<li id="testMenu1">Menu 1</li>
				<li>Menu 2</li>
				<li>Menu 3</li>
				<li>Menu 4</li>
				
			</ul>
		</div>
		<div id="imageMenu" class="alignement" ><img src="menuA.png"/></div>
		
	</body>



Et voici le css : 


body{
	width : 900px;
	height :500px;
	margin : auto;
	margin-top : 100px;}

#listCarte{
	width : 900px;
	height : 80px;}

#listCarte li{
	display : inline-block;
	padding : 10px;;}
	
#listMenu{
	
	width : 70px;
	height : 420px;}

#listMenu li{
	padding : 10px;}	

#imageMenu{
	
        width : 600px;
	height : 420px;}
	
.alignement{
	display : inline-block !important;}



C'est assez basique c'est bien pour ça que je vois pas l'erreur !

Et une chtiote image pour se représenter la chose !

http://hpics.li/949af7b


Voila merci de votre aide et de votre lecture !
_laurent a écrit :
C'est moi qui fatigue ou il manque la description de ton problème ? Smiley sweatdrop


Ha ouais ! Smiley smile
Alors mon problème c'est que j'aimerai que ma listeMenu soit collée à mon menuCarte alors que là, elle s'accorde plutôt à la div image !

Je sais pas si j'ai été claire !?
Modérateur
C'est mieux oui.

Alors, il y a plusieurs problèmes/trucs a améliorer.

Le premier, pour ton alignement, plutôt que d'assigner cette classe .alignement utilise le paramètre 'float'. cela permet "d'empiler" tes éléments horizontalement sur la gauche et/ou la droite. donc hop suppr ta classe alignement et place
float:left;

dans les styles de #listMenu et #imageMenu.

Un peu de positionnement, même si il est défini par défaut, ne fera pas de mal ! Donc hop-aussi
position:relative;

dans tes class/id principaux, à savoir .body, #listCarte, #listMenu et #imageMenu.

Ca reste un peu déplacé... il faudrait nettoyer un peu tout ca.... en gros tu as la méthode lourde :
margin:0px;
padding:0px;

à placer dans #listCarte, #listMenu et #imageMenu

Sinon il y a la méthode pratique : le CSS Cleaner. C'est une (grande) ligne de code que tu colles au début de ta feuille CSS qui remet TOUT les éléments à zéro. Cela permet de repartir de zero car ici tu vois bien qu'il y a des marges entre tes éléments alors que tu n'as rien spécifié de tel !
Bonjour et merci de ta réponse.


Alors en fait j'avais vu pour le float left mais je voulais savoir si c'était possible comme ça !

Au sujet du reset j'en utilise déja un Smiley smile

Et encore merci
Sujet clos
Aller à