28172 sujets

CSS et mise en forme, CSS3

Alignements, adaptation résolution et IE/FF/Safari

Bonjour à tous,

Je galère depuis maintenant 1 mois avec ça, même après avoir lu et relu les tutus, je n'y arrive pas.
Voilà je suis en train de faire un petit site internet. Le problème c'est que d'un navigateur à l'autre c'est pas toujours pareil, au niveau des alignements entre le menu et le corps c'est jamais pile en face, et j'aimerai centrer le tout en fonction de la résolution d'écran.
Bref j'ai essayé tellement de choses, je vous post une page et le css.

Merci d'avance à celui ou ceux qui prendront du temps pour 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="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</h1>
			<h2 id="header">FOU</h2>
				<img id="ipo" src="ipo.png">
				<img id="foulard" src="foulard.png">
				<img id="lamer" src="lamer.png">
				<ul id="menu">
					<li id="p1"><b href="accueil.html">Accueil</b></li>
					<li id="p2"><a href="evenements.html">Evénements</a></li>
					<li id="p3"><a href="photos.html">Photos</a></li>
					<li id="p4"><a href="videos.html">Vidéos</a></li>
					<li id="p5"><a href="forum.html">Forum</a></li>
					<li id="p6"><a href="contacts.html">Contacts</a></li>
					<li id="p7"><a href="lamer.html">La Mer</a></li>
				</ul>
				
				<div id="corps1">Soyez les bienvenues sur le tout nouveau site officiel des copains fou.
				</div>
				
				<p id="footer">©2011. Les Copains Fou. Tous droits réservés.</p>
		</div>
		 
   </body>
</html>



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

 body {
	margin: 0px 0;
	margin-left: auto;
	margin-right: auto;
	background: #dea ;
}

div#conteneur {
	width: 1050px;
	margin: 0 auto;
}


h1#header {	
	font: 5em "Snap ITC";	
	text-align:center;	
	margin: 20px 0px;
	margin-left:-120px;
}


h2#header {	
	font: 6em "Snap ITC";
	text-align:center;	
	margin: 0 0;
	height: 200px;
	margin-left:350px;
}


img#ipo {
	position : absolute;
	margin: -300px -20px;
}

img#foulard {
	position : absolute;
	margin: -300px 750px;
}

img#lamer {
	position : absolute;
	margin: -210px 300px;
}

ul#menu {
	list-style-type: none;
    display:inline-block;  
	margin: 10px;
	margin-left: -42px;
}

ul#menu li {
	margin: 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.22em;   
}


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 : 350px;
	width : 987px;
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
	background: #fff ;
	text-align : justify;
}

div#corps1 {
	border:solid 5px black; 
	padding : 20px 20px;  
	height : 350px;
	width : 987px;
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
	background: #99FF99;
	text-align : justify;
}

#p1 b{
    font: 1.2em "Snap ITC"; 
	font-weight: bold ;
	display: block ;
	text-decoration: none ;
	background: #99FF99;
	padding : 0.6em 1.22em;   
}

div#corps2 {
	border:solid 5px black; 
	padding : 20px 20px;  
	height : 350px;
	width : 987px;
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
	background: #FFCC99;
	text-align : justify;
}

#p2 b{
    font: 1.2em "Snap ITC"; 
	font-weight: bold ;
	display: block ;
	text-decoration: none ;
	background: #FFCC99;
	padding : 0.6em 1.22em;   
}

div#corps3 {
	border:solid 5px black; 
	padding : 20px 20px;  
	height : 350px;
	width : 987px;
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
	background: #33CCFF;
	text-align : justify;
}

#p3 b{
    font: 1.2em "Snap ITC"; 
	font-weight: bold ;
	display: block ;
	text-decoration: none ;
	background: #33CCFF;
	padding : 0.6em 1.22em;   
}

div#corps4 {
	border:solid 5px black; 
	padding : 20px 20px;  
	height : 800px;
	width : 987px;
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
	background: #999999;
	text-align : justify;
}

#p4 b{
    font: 1.2em "Snap ITC"; 
	font-weight: bold ;
	display: block ;
	text-decoration: none ;
	background: #999999;
	padding : 0.6em 1.22em;   
}

object#v1 {
	position: absolute;
	margin: 50px -905px;
}

object#v2 {
	position: absolute;
	margin: 50px -420px;
}

object#v3 {
	position: absolute;
	margin: 430px -905px;
}

object#v4 {
	position: absolute;
	margin: 430px -420px;
}
	

div#corps5 {
	border:solid 5px black; 
	padding : 20px 20px;  
	height : 350px;
	width : 987px;
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
	background: #FFCC66;
	text-align : justify;
}


#p5 b{
    font: 1.2em "Snap ITC"; 
	font-weight: bold ;
	display: block ;
	text-decoration: none ;
	background: #FFCC66;
	padding : 0.6em 1.22em;   
}

div#corps6 {
	border:solid 5px black; 
	padding : 20px 20px;  
	height : 350px;
	width : 987px;
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
	background: #00CCCC;
	text-align : justify;
}


#p6 b{
    font: 1.2em "Snap ITC"; 
	font-weight: bold ;
	display: block ;
	text-decoration: none ;
	background: #00CCCC;
	padding : 0.6em 1.22em;   
}

div#corps7 {
	border:solid 5px black; 
	padding : 20px 20px;  
	height : 350px;
	width : 987px;
	display:inline-block; 
	font: 1.1em "Snap ITC"; 
	background: #FFCCFF;
	text-align : justify;
}


#p7 b{
    font: 1.2em "Snap ITC"; 
	font-weight: bold ;
	display: block ;
	text-decoration: none ;
	background: #FFCCFF;
	padding : 0.6em 1.22em;   
}

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

pre {
	overflow: auto;
}
Salut,
moi aussi je galere à positionner correctement sous Kompozer.
le gabarit sous Kompozer est de 1600px et quand je verifie sur mon ecran en 1920px c'est décalé Smiley confus

pareil, je n'arrive pas à trouver de regles
faut il placer les elements dans des tableaux ? ou faut il les placer selon le .css

ça me rend dingue aussi Smiley eek

si qq'un peut nous aider en effet

Merci
Ashtar Smiley biggrin
Sujet clos
Aller à