28172 sujets

CSS et mise en forme, CSS3

Alignement menus différents FF/IE

Bonjour à tous,

Me revoilà avec un petit soucis assez embêtant et qui m'a d'ailleurs déprimé pendant quelques temps, si bien que je n'ai pas avancé depuis...
Dans mon alignement de menu encadrés, sous IE et Safari, l'affichage est impec, mais sous FF pas tout à fait aligné, allez comprendre.

Voici les Screenshot pour mieux voir.

IE:

http://hebergeurimage.free.fr/ScreenShot.2011112163940.jpg

FF:

http://hebergeurimage.free.fr/ScreenShot1.2011112163920.jpg


Mon accueil.html :

<!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="index.css" />
   
   
	<STYLE TYPE="text/css" MEDIA="screen"> 
		@font-face { 
		font-family: "Snap ITC"; 
		src: url("Snap.ttf"); 
		format ("truetype"); 
		} 
	</STYLE> 


   </head>
   <body>
        <div class="en_tete">
			Les Copains Fou
		</div>
		<div>
			<table>
				<tr>
					<td><b class="menu1" href="accueil.html">Accueil</b></td>
					<td><a class="menu" href="evenements.html">Evénements</a></td>
					<td><a class="menu" href="photos.html">Photos</a></td>
					<td><a class="menu" href="videos.html">Vidéos</a></td>
					<td><a class="menu" href="forum.html">Forum</a></td>
					<td><a class="menu" href="contacts.html">Contacts</a></td>
					<td><a class="menu" href="liens.html">Liens</a></td>
				</tr>
			</table>
		</div>
		 
		<div>
			<table>
				<tr>
					<td><a class="corps1"><center><br><br>Bonjour à tous.</center>
					<br><br><center>xxxxxxxxxx</center><br><br><center><img src="lard.jpg"/></center></a></td>
				</tr>
			</table>
		</div>
		 
		<div id="pied_de_page">
		</div>
   </body>
</html>


Et le css

@font-face {  
font-family: "Snap ITC";  
src: url("Snap.ttf");  
format ("truetype");  
} 
 
div.en_tete {
	text-align:center;
	font: 7em "Snap ITC"; 
	height: 180px;
}

table { 
	margin:auto; 
	vertical-align:middle; 
	text-align: center;
}

p {
	text-indent: 40px;
}


a.menu:hover, a.menu:focus, a.menu:active {  
    color: white; 
    background:  #999;
} 	
	

a.menu, b.menu1, b.menu2, b.menu3, b.menu4, b.menu5, b.menu6, b.menu7 {
	padding : 0.6em 1.64em;   
    display:inline-block;  
    font: 1.2em "Snap ITC";  
    text-decoration: none; 
	background: white;
}

a.corps, a.corps1, a.corps2, a.corps3, a.corps4, a.corps5, a.corps6, a.corps7 {
	padding : 10px 10px;  
	height : 900px;
	width : 1076px;
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
}

a.menu {
	color: black;
	border:solid 5px black; 
}

a.corps {
	border:solid 5px black;
}

b.menu1 {
	color: blue;
	border:solid 5px blue;	
}

a.corps1 {
	border:solid 5px blue;
}

b.menu2 {
	color: purple;
	border:solid 5px purple; 	
}

a.corps2 {
	border:solid 5px purple;
}


b.menu3 {
	color: lim;
	border:solid 5px lime; 	
}

a.corps3 {
	border:solid 5px lime;
}

b.menu4 {
	color: teal;
	border:solid 5px teal; 	
}

a.corps4 {
	border:solid 5px teal;
}

b.menu5 {
	color: red;
	border:solid 5px red; 	
}

a.corps5 {
	border:solid 5px red;
}

b.menu6 {
	color: fuchsia;
	border:solid 5px fuchsia; 	
}

a.corps6 {
	border:solid 5px fuchsia;
}

b.menu7 {
	color: olive;
	border:solid 5px olive; 	
}

a.corps7 {
	border:solid 5px olive;
}


Que faire ?


Merci
Modifié par Lokomass (02 Nov 2011 - 16:42)
...<table> ?
...<br> ?
...<center> ?

Il y a selon moi des problèmes plus graves que l'alignement de ton menu... Smiley eek
Salut, oui effectivement je suis tout débutant et me suis fait un peu aider a droite a gauche, j'ai déjà lu pas mal de tuto sur ce site, mais c'est pas super évident.
Si l'un d'entre vous aurait le temps de "corriger" quelques soucis, ça m'aiderait énormément
Bonjour,

J'ai repris tout à zéro en suivant toutes vos consignes après avoir lu vos différents topic. Malheureusement je me retrouve toujours bloqué dans l'alignement des blocs entre eux et surtout dans les différences FF/IE.

J'ai aussi une question, comment mettre en forme un texte ou une phrase avec du CSS ? Je veux dire, si je veux écrire : Les copains (et a la ligne) Fou.
Ou bien dans un long discours, mettre des paragraphe, alinéa.
Comment aligner le bloc "corps" sur la page ?

Aussi dans le CSS j'aurai aimé mettre 2 background (un haut gauche l'autre droit) mais il veut qu'un des deux, comment faire ?

Bref,

Voici ce que j'ai fait :

<!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="index.css" />
   
   
	<STYLE TYPE="text/css" MEDIA="screen"> 
		@font-face { 
		font-family: "Snap ITC"; 
		src: url("Snap.ttf"); 
		format ("truetype"); 
		} 
	</STYLE> 
	

   </head>
   
   
   <body>
        <div id="conteneur">
			<h1 id="header">Les Copains Fou</h1>
				<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">xxxxx
				</div>
				
				<p id="footer">©2011. Les Copains Fou</p>
		</div>
		 
   </body>
</html>




@font-face {  
font-family: "Snap ITC";  
src: url("Snap.ttf");  
format ("truetype");  
} 
 
body {
	margin: 0px 0;
	text-align: center;
	background: #dea ;
}

div#conteneur {
	width: 1050px;
	margin: 0 auto;
	text-align: left;
}

h1#header {	
	height: 200px;
	font: 4em "Snap ITC";
	text-align:center;	
	margin: 0 0;
	background: url(ipo.png) no-repeat left top;
	#background : url(foulard.png) no-repeat right top;
}

ul#menu {
	list-style-type: none;
    display:inline-block;  
}

ul#menu li {
	margin: 0px 2px;
	float: left;
	border:solid 5px black; 
	background: #fff;
}


ul#menu li a {
    font: 1.2em "Snap ITC"; 
	font-weight: bold ;
	display: block ;
	text-decoration: none ;
	color: black;
	padding : 0.6em 1.2em;   
}

ul#menu li a:hover, ul#menu li a:focus, ul#menu li a:active {  
    color: white; 
    background:  #444;
} 	

div#corps {
	border:solid 5px black; 
	padding : 20px 20px;  
	height : 300px;
	width : 1050px;
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
	background: #fff ;
}

p#footer {
	font-weight : bold;
	text-align: right ;
}

pre {
	overflow: auto;
}




Merci pour votre aide...
Modifié par Lokomass (04 Nov 2011 - 09:30)
Sujet clos
Aller à