Centrer un groupe d'images avec CSS

Question

Lokomass

8 Aug 2011 à 14:55

Bonjour à tous.

Je suis tout débutant en html et css donc je vais surement demander quelque chose de très facile mais je ne trouve pas ce que je veux sur internet.

J'ai une page html avec un menu horizontal.
Ce menu est constitué de 7 images, des rectangles avec fond blanc (normal_bar.jpg) et des qu'on passe la souris dessus, ces rectangles deviennent gris (survol_bar.jpg).
Mon soucis est que j'aimerai centrer ce groupe de 7 images, parce que jusqu'a maintenant je les positionnaient à 30px du bord mais sur une résolution plus grande je me suis rendu compte que c'était tout décalé. DU coup j'aimerai tout centrer comme ça plus de soucis.
Je ne sais pas comment faire j'ai essayer des align-center et tout et tout mais rien.
Voici mon html et css, merci à ceux qui voudront bien m'aider....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
	   <link rel="shortcut icon" href="favicon.ico" >
	   <link rel="icon" type="image/x-icon" href="favicon.ico" />
	   <link rel="icon" type="image/png" href="favicon.png" />
       <title>Les Copains Fou</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" href="ie.css" />
   

</head>
   <body>
        <div id="en_tete">
			<center><img src="les.gif"/><img src="copains.gif"/><img src="fou.gif"></center>
		</div>
		<div id="=menu">
			<ul id="menu1">
				<li><a href="accueil.html">Accueil</a></li>
			</ul>
			<ul id="menu2">
				<li><a href="evenements.html">Evénements</a></li>
			</ul>
			<ul id="menu3">
				<li><a href="photos.html">Photos</a></li>
			</ul>
			<ul id="menu4">
				<li><a href="videos.html">Vidéos</a></li>
			</ul>
			<ul id="menu5">
				<li><a href="forum.html">Forum</a></li>
			</ul>
			<ul id="menu6">
				<li><a href="contacts.html">Contacts</a></li>
			</ul>
			<ul id="menu7">
				<li><a href="liens.html">Liens</a></li>
			</ul>
		</div>

		 
		<div id="corps">
		   <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) -->
		</div>
		 
		<div id="pied_de_page">
		   <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
		</div>
   </body>
</html>

@font-face {
font-family: "Snap";
font-style:  normal;
font-weight: normal;
src: url(Snap.eot)format(TrueType);
}


#menu1 { 
	color: black ; 
    list-style: none ; 
	margin-left:0px;
	text-decoration: none;
	background-repeat: no-repeat ;
	text-align: center;
    }
#menu1 a { 
	color: black ; 
    list-style: none ; 
	height: 1.8em ; 
	margin-left: -7.8px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu1 li { 
    color: black ; 
	background:  url(normal_bar.jpg); 
	font: 1.2em "Snap ITC"; 
    border: none; 
	float: left ; 
	padding : 1.2em 2.55em;
	width : 61px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu1 li a:hover, #menu li a:focus, #menu li a:active { 
	color: white;
	background:  url(survol_bar.jpg) ; 
	padding : 1.2em 2.1em;
	margin-left:-49px;
	background-repeat: no-repeat ;
    }


	
	
#menu2 { 
	color: black ; 
    list-style: none ; 
	margin-left:30px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu2 a { 
	color: black ; 
    list-style: none ; 
	height: 1.8em ; 
	margin-left: -31px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu2 li { 
    color: black ; 
	background:  url(normal_bar.jpg); 
	font: 1.2em "Snap ITC"; 
    border: none; 
	float: left ; 
	padding : 1.2em 2.55em;
	width : 61px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu2 li a:hover, #menu li a:focus, #menu li a:active { 
	color: white;
	background:  url(survol_bar.jpg) ; 
	padding : 1.2em 0.9em;
	margin-left:-49px;
	background-repeat: no-repeat ;
    }
	
	
	
	
#menu3 { 
	color: black ; 
    list-style: none ; 
	margin-left:30px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu3 a { 
	color: black ; 
    list-style: none ; 
	height: 1.8em ; 
	margin-left: -5px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu3 li { 
    color: black ; 
	background:  url(normal_bar.jpg); 
	font: 1.2em "Snap ITC"; 
    border: none; 
	float: left ; 
	padding : 1.2em 2.55em;
	width : 61px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu3 li a:hover, #menu li a:focus, #menu li a:active { 
	color: white;
	background:  url(survol_bar.jpg) ; 
	padding : 1.2em 2.3em;
	margin-left:-49px;
	background-repeat: no-repeat ;
    }	
	
	
	
	
#menu4 { 
	color: black ; 
    list-style: none ; 
	margin-left:30px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu4 a { 
	color: black ; 
    list-style: none ; 
	height: 1.8em ; 
	margin-left: -5px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu4 li { 
    color: black ; 
	background:  url(normal_bar.jpg); 
	font: 1.2em "Snap ITC"; 
    border: none; 
	float: left ; 
	padding : 1.2em 2.55em;
	width : 61px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu4 li a:hover, #menu li a:focus, #menu li a:active { 
	color: white;
	background:  url(survol_bar.jpg) ; 
	padding : 1.2em 2.3em;
	margin-left:-49px;
	background-repeat: no-repeat ;
    }	


	
#menu5 { 
	color: black ; 
    list-style: none ; 
	margin-left:30px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu5 a { 
	color: black ; 
    list-style: none ; 
	height: 1.8em ; 
	margin-left: 0px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu5 li { 
    color: black ; 
	background:  url(normal_bar.jpg); 
	font: 1.2em "Snap ITC"; 
    border: none; 
	float: left ; 
	padding : 1.2em 2.55em;
	width : 61px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu5 li a:hover, #menu li a:focus, #menu li a:active { 
	color: white;
	background:  url(survol_bar.jpg) ; 
	padding : 1.2em 2.5em;
	margin-left:-49px;
	background-repeat: no-repeat ;
    }	
	
	
	
#menu6 { 
	color: black ; 
    list-style: none ; 
	margin-left:30px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu6 a { 
	color: black ; 
    list-style: none ; 
	height: 1.8em ; 
	margin-left: -15px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu6 li { 
    color: black ; 
	background:  url(normal_bar.jpg); 
	font: 1.2em "Snap ITC"; 
    border: none; 
	float: left ; 
	padding : 1.2em 2.55em;
	width : 61px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu6 li a:hover, #menu li a:focus, #menu li a:active { 
	color: white;
	background:  url(survol_bar.jpg) ; 
	padding : 1.2em 1.8em;
	margin-left:-49px;
	background-repeat: no-repeat ;
    }
	
	
	
#menu7 { 
	color: black ; 
    list-style: none ; 
	margin-left:30px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu7 a { 
	color: black ; 
    list-style: none ; 
	height: 1.8em ; 
	margin-left: 5px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu7 li { 
    color: black ; 
	background:  url(normal_bar.jpg); 
	font: 1.2em "Snap ITC"; 
    border: none; 
	float: left ; 
	padding : 1.2em 2.55em;
	width : 61px;
	text-decoration: none;
	background-repeat: no-repeat ;
    }
#menu7 li a:hover, #menu li a:focus, #menu li a:active { 
	color: white;
	background:  url(survol_bar.jpg) ; 
	padding : 1.2em 2.8em;
	margin-left:-49px;
	background-repeat: no-repeat ;
    }

Modifié par Lokomass (14 Mar 2017 - 09:36)

FloydinBremen

8 Aug 2011 à 15:27

Bonjour Lokomass,

y a quelques petites choses à corriger. la balise center est à virer, tu es en xhtml. une balise img n'est pas fermée. Tu as plusieurs listes avec un seul élément dedans, alors que tu peux faire une seule liste avec plusieurs éléments. elle est compliquée, ta démarche Smiley murf

. humm, voilà de quoi repartir sur une base plus simple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > 
   <head> 
       <link rel="shortcut icon" href="favicon.ico" > 
       <link rel="icon" type="image/x-icon" href="favicon.ico" /> 
       <link rel="icon" type="image/png" href="favicon.png" /> 
       <title>Les Copains Fou</title> 
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
       <link rel="stylesheet" media="screen" type="text/css" href="ie.css" /> 
    
 
</head> 
   <body> 
        <div id="en_tete"> 
            <img src="les.gif"/><img src="copains.gif"/><img src="fou.gif"/> 
        </div> 
               <ul id="menu"> 
                <li><a href="accueil.html">Accueil</a></li> 
                <li><a href="evenements.html">Evénements</a></li> 
                <li><a href="photos.html">Photos</a></li> 
                <li><a href="videos.html">Vidéos</a></li> 
                <li><a href="forum.html">Forum</a></li> 
                <li><a href="contacts.html">Contacts</a></li> 
                <li><a href="liens.html">Liens</a></li>
              </ul>				
         <div id="corps"> 
           <!-- Ici on mettra le contenu principal de la page (tout le texte quoi) --> 
        </div> 
          
        <div id="pied_de_page"> 
           <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... --> 
        </div> 
   </body> 
</html>

une partie de css :


#menu {
width:700px;
position:relative;
left:50%;
margin-left:-350px;
}

li {
display:inline;
margin-left:5px;
}

pareil pour tes images gif, tu peux faire un "display:inline;". Smiley cligne

Lokomass

8 Aug 2011 à 15:41

Merci pour ta réponse, mais du coup comment dois-je faire pour afficher chaque cadre pour mettre le nom des menus dedans.
Maintenant comment centrer les gif justement parce que le display:inline est cencé mettre sur la même ligne non ?
Bref je suis un peu perdu la y'a plus d'affichage comme avant et je comprend pas ce que je dois faire Smiley confused

FloydinBremen

8 Aug 2011 à 18:15

si tu parles des gif de l´entête, tu utilises la même méthode. tu donnes une largeur à ton div d'entête, position relative, left 50% et puis une margin-left négative de la moitié de la largeur de l'entête. tu ajustes les gif les uns avec les autres, avec des "margin".

Lokomass

9 Aug 2011 à 10:27

Je te remercie, voilà ou j'en suis.
J'ai rassemblé un seul menu au lieu d'une balise par menu.
Le problème maintenant, c'est que les mots sont bien alignés sur la page mais comme je n'isole plus chaque cadre je ne peux plus les configurer séparément. Or par exemple le mot le plus long Evenements voudra prendre un cadre nettement plus grand que Liens par exemple. Je peux plus lui dire de démarrer plus tôt l'écriture je sais pas si tu vois ce que je veux dire...
J'aimerai de plus que cet ensemble de menu soit centré sur la page que ce soit pour 1024 ou 1920, qu'il reste bien centré... (je ne pouvais pas y arriver avec ma méthode ?)

Voilà ce que j'ai maintenant (mots alignés sur la page mais pas dans les cadres) :

http://data.imagup.com/11/1127543787.jpg

Et voilà ce que j'avais (et que je veux centré sur la page pour du 1024 comme du 1920)
http://data.imagup.com/12/1127543841.jpg

Voilà mon html :

<body>
        <div id="en_tete">
			<img src="les.gif"/><img src="copains.gif"/><img src="fou.gif">
		</div>
		<ul id="=menu">
				<li><a href="accueil.html">Accueil</a></li>
				<li><a href="evenements.html">Evénements</a></li>
				<li><a href="photos.html">Photos</a></li>
				<li><a href="videos.html">Vidéos</a></li>
				<li><a href="forum.html">Forum</a></li>
				<li><a href="contacts.html">Contacts</a></li>
				<li><a href="liens.html">Liens</a></li>
		</ul>
   </body>

et voilà le css :

@font-face {
font-family: "Snap";
font-style:  normal;
font-weight: normal;
src: url(Snap.eot)format(TrueType);
}

#menu { 
	color: black ; 
	font: 1.1em "Snap ITC"; 
	text-decoration: none;
	background:  url(normal_bar.jpg) no-repeat; 
} 
 
a{
	padding : 1.2em 2em;
	color: black ; 
	display:inline; 
	font: 1.1em "Snap ITC"; 
	text-decoration: none;
	background:  url(normal_bar.jpg) no-repeat;
} 
 
li{ 
	color: black ; 
	display:inline; 
	font: 1.1em "Snap ITC"; 
	text-decoration: none;
} 

li a:hover, li a:focus, li a:active { 
	color: white;
	background:  url(survol_bar.jpg) ; 
	background-repeat: no-repeat ;
	font: 1.1em "Snap ITC"; 
    }

Je te serai reconnaissant si tu pouvais (ou quelqu'un) me donner le morceau de code qu'il me manque ou m'expliquer comment y arriver. Merci
Modifié par Lokomass (09 Aug 2011 - 10:29)

FloydinBremen

9 Aug 2011 à 11:38

Bonjour Lokomass,

tu devrais positionner ton menu, comme je te l´ai indiqué.

tu peux aussi donner une largeur à tes <li>, voire coller un id à un <li> en particulier pour attrribuer une valeur plus importante pour la largeur.

si le background est juste une histoire de couleur, je te conseillerais de retirer les images et utiliser le background-color. En css, tu as aussi la possibilité de jouer avec les cadres (border-color, border-width, border-style). sans parler des coins arrondis en css3.... Smiley rolleyes

ta police en eot va sûrement réjouir tous les utilisateurs autres que internet explorer... Smiley bawling

je reviens un peu plus tard avec des morceaux de code... Smiley cligne

FloydinBremen

9 Aug 2011 à 12:41

donc voilà, je me suis un peu amusé Smiley ravi

, enfin beaucoup Smiley lol

:


 <body> 
        <div id="en_tete"> 
            <img src="les.gif"/><img src="copains.gif"/><img src="fou.gif"> 
        </div>
		 <ul id="menu"> 
          <li class="lien"><a href="accueil.html">Accueil</a></li> 
          <li class="lien"><a href="evenements.html">Evénements</a></li> 
          <li class="lien"><a href="photos.html">Photos</a></li> 
          <li class="lien"><a href="videos.html">Vidéos</a></li> 
          <li class="lien"><a href="forum.html">Forum</a></li> 
          <li class="lien"><a href="contacts.html">Contacts</a></li> 
          <li class="lien"><a href="liens.html">Liens</a></li> 
         </ul>
    </body>


@font-face { 
font-family: "Snap"; 
font-style:  normal; 
font-weight: normal; 
src: url(Snap.eot)format(TrueType); 
} 
body {
background-color:rgb(0,100,255);
}
}
#menu {  
    color: black ;  
    font: 1.1em "Snap ITC";  
    text-decoration: none; 
    background-color:rgb(128,128,128);
	width:1036px;
	position:relative;
	left:50%;
	margin-left:-518px;
	padding:0px;
	}  
li {  
    color: black ;  
    display:table-cell;
	width:148px;
	background-color:rgb(228,228,228);
	font: 1.1em "Snap ITC";  
    text-decoration: none;
	text-align:center;
	border-style:solid;
	border-width:2px;
	border-left-color:black;
	border-top-color:black;
	border-bottom-color:white;
	border-right-color:white;
 }
a{ 
    color:black;
    font: 1.1em "Snap ITC";  
    text-decoration: none; 
	text-align:center;
 }  
.lien:hover {  
    background-color:rgb(98,98,98);
	border-style:solid;
	border-width:2px;
	border-left-color:white;
	border-top-color:white;
	border-bottom-color:black;
	border-right-color:black;	
      } 
a:hover {
    color:white;
}

attention, table-cell n'est compris qu'à partir de IE8. Smiley eek

gc-nomade

9 Aug 2011 à 13:28

Bonjour,

avec inline pour li et inline-block pour a , ça marche pour IE7 et moins:
exemple sans images:

<ul id="menu">
				<li><a class="menu1" href="accueil.html">Accueil</a></li>
				<li><a class="menu1" href="evenements.html">Evénements</a></li>
				<li><a class="menu1" href="photos.html">Photos</a></li>
				<li><a class="menu1" href="videos.html">Vidéos</a></li>
				<li><a class="menu1" href="forum.html">Forum</a></li>
				<li><a class="menu1" href="contacts.html">Contacts</a></li>
				<li><a class="menu1" href="liens.html">Liens</a></li>

		</ul>

et css associé :


 
@font-face { 
font-family: "Snap ITC"; 
src: url("Snap.ttf"); 
format ("truetype"); 
}

#menu { 
	color: black ; 
	font: 1.1em "Snap ITC"; 
	text-decoration: none;
	text-align:center;
} 
 #menu  li{
	display:inline; 
} 
 a.menu1 {
	padding : 0.5em;
	color: black ; 
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
	text-decoration: none;
	border:solid 4px black	
} 
 a.menu1:hover, a.menu1:focus, a.menu1:active { 
	color: white;
	background:  #999
    }

cordialement

Lokomass

9 Aug 2011 à 14:02

Ouahhhh !!!! C'est vraiment super, un très grand merci à vous deux. En plus ça simplifie tellement.
gc-nomade, tu as presque exactement ce que je veux, mais ton menu est vertical, je croyais qye "display:inline;" faisait justement un menu horizontal... J'ai peut être loupé un truc. Voilà ce que j'ai.
Encore merci vraiment...

http://data.imagup.com/12/1127556823.jpg
Modifié par Lokomass (09 Aug 2011 - 14:02)

gc-nomade

9 Aug 2011 à 14:47

oki, sur ta page demo en ligne tu as une erreur a l'attribut id de ul:

<ul id="=menu">

Un signe egal en trop (et interdis Smiley smile

)
Cela devrait etre comme ça plutôt :

<ul id="menu">

++

FloydinBremen

9 Aug 2011 à 14:48

sinon autre alternative, plus simple...colle le tout dans un tableau....le CSS sera plus simple, du coup. un coup de text-align center dans les td et pis voilà.


 <body> 
        <div id="en_tete"> 
            <img src="les.gif"/><img src="copains.gif"/><img src="fou.gif"> 
        </div>
		 <table>
		  <tr>
                         <td><a href="accueil.html">Accueil</a></td> 
                         <td><a href="evenements.html">Evénements</a></td> 
                         <td><a href="photos.html">Photos</a></td> 
                         <td><a href="videos.html">Vidéos</a></td> 
                         <td><a href="forum.html">Forum</a></td> 
                         <td><a href="contacts.html">Contacts</a></td> 
                         <td><a href="liens.html">Liens</a></td> 
		 </tr>
                      </table>
              
 </body>

sinon, les points noirs à gauche, tu peux les virer avec list-style-image:none;

Lokomass

9 Aug 2011 à 15:02

gc-nomade a écrit :
oki, sur ta page demo en ligne tu as une erreur a l'attribut id de ul:
<ul id="=menu">
Un signe egal en trop (et interdis )
Cela devrait etre comme ça plutôt :
<ul id="menu">
++

Mon Dieu, j'ai fixé pendant au moins 3 minutes la différence entre les deux en me disant : mais c'est écrit exactement la même chose !! J'ai cru que j'étais fou, heureusement j'ai enfin vu ce fameux égal...
Un immense merci à vous deux, je test le tableau de suite, mais vraiment merci d'avoir pris le temps de m'aider !
Modifié par Lokomass (09 Aug 2011 - 15:02)

gc-nomade

9 Aug 2011 à 15:14

Sinon , pour centré un menu, voici plusieurs technique/solutions via display principalement:

http://yidille.free.fr/plux/valign/?52-menu-centre-technique-de-base-et-avancees

Et pour le centrage de tableau :

table {
/* le tableau */
/margin:auto
;/* le contenu des cellules horizontalement : */ 
text-align:center;
/* le contenu des cellules verticalement : */
vertical-align:middle;
}

Cordialement
Modifié par gc-nomade (09 Aug 2011 - 15:14)

Sujet clos

CSS et mise en forme, CSS3

Centrer un groupe d'images avec CSS