Partage
  • Partager sur Facebook
  • Partager sur Twitter

liste a puces cote a cote dans le footer

Sujet résolu
    25 septembre 2021 à 17:51:34

    Bonjour,

    Je suis à la création du site de zozor dans le cours HTML/CSS. 

    Dans le footer je voudrait mettre mes deux liste à puces côte à côte. 

    Apres plusieurs recherche j'ai essayé display: inline; display: inlin-block; float:left mais rien n'y fait mes deux liste reste l'une en dessous de l'autre.

    je comprends pas pourquoi elle ne se mette pas comme je veux, j'ai également essayé de réduire la taille que prend mes listes en pensant que c'était peut être une histoire de place pour le navigateur mais ca ne fait rien. je vous joint la partie footer du code en html et en css en espérant qu'une personne puisse m'aider.

    Bonne journée à vous.

    <footer>
    			<div id="tweet">
    				<h1>Mon dernier tweet!</h1>
    				<p>Hiiiiiii Haaaann!!</p>
    				<p>Le 12 mai 2021</p>
    			</div>
    			
    			<div id="mes_photos">
    				<h1>Mes photos</h1>
    				<p>
    				   <img src="images/photo1.jpg" alt="" id="Photographie1" />				
    				   <img src="images/photo2.jpg" alt="" id="Photographie2" />
    				   <img src="images/photo3.jpg" alt="" id="Photographie3" />
    				   <img src="images/photo4.jpg" alt="" id="Photographie4" />
    				</p>
    			</div>
    
    			<div id="mes_amis">
    					<h1>Mes amis!</h1>
    				<div id="liste_amis">
    						<ul>
    							<li>Pulpi le lapin</li>
    							<li>Mr Baobab</li>
    							<li>Kaiwaii</li>
    							<li>Perceval.eu</li>
    						</ul>
    						<ul>
    							<li>Belette</li>
    							<li>Le concombre masqué</li>
    							<li>Ptit prince</li>
    							<li>Mr Fan</li>
    						</ul>
    					</div>
    				</div>
    			</footer>
    /* Footer */
    footer
    {
    	display: flex;
    	flex: 3;
    	background: url('images/ico_top.png') no-repeat top center, url('images/separateur.png')
    	 repeat-x top, url('images/ombre.png') repeat-x top;
    	 padding-top: 25px;
    }
    footer p, footer url
    {
    	font-size: 0.9em;
    }
    footer h1
    {
    	font-size: 0.9em;
    }
    #tweet
    {
    	width: 25%;
    }
    #mes_photos
    {
    	width: 35%;
    }
    #mes_amis
    {
    	width: 40%;
    }
    #mes_photos img 
    {
    	border: 1px solid #181818;
    	margin-right: 1.5px;
    }
    #listes_amis
    {
    	display: flex;
    	justify-content: space-between;
    	margin-top: 0;
    }
    #mes_amis ul
    {
    	list-style-image: url('images/ico_liensexterne.png');
    	padding-left: 2px;
    }
    #mes_amis a 
    {
    	text-decoration: none;
    	color: #760001;
    }




    • Partager sur Facebook
    • Partager sur Twitter
      25 septembre 2021 à 18:14:18

      Bonjour, tu ne cible pas le bon élément, dans ton html tu as id="liste_amis"  et dans ton CSS tu as comme sélecteur #listes_amis   

      Donc pas de correspondance.

      Un conseil pour tes futures développement, utilise uniquement des class pour le CSS et garde les identifiants pour les ancres et le JS. C'est une question de poids de sélecteur. 

      • Partager sur Facebook
      • Partager sur Twitter
        25 septembre 2021 à 18:29:37

        Merci beaucoup faut vraiment que je fasse beaucoup plus attention à l'ortographe en reprenant mon selecteur:colere:.

        Encore Merci de ton aide et merci pour le conseil et l'article.:)

        Bonne continuations à toi.

        • Partager sur Facebook
        • Partager sur Twitter

        liste a puces cote a cote dans le footer

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown