28173 sujets

CSS et mise en forme, CSS3

Pages :
Bonjour à tous, j'ai découvert ce site il y'a deux jours et il m'a décidé à refaire la page d'accueil du site que je réalise pour mon stage, mais sans tableaux...

Je me suis donc mis à l'ouvrage mais après plusieurs heures de recherche je reste bloqué sur un problème d'affichage.

Le problème est que le site s'affiche come je le souhaite sous Firefox, mais pas du tout sous IE, voici le site.

Le CSS:


.contenu {
margin-left: auto;
margin-right: auto;
width: 798px;
height: 100%;
background-color:#01014B;
background-image:url(images/damier.jpg);
background-repeat:repeat-y ;
}

.entete {
margin-left: auto;
margin-right: auto;
width: 798px;
height: 250px;
}

.titre {
position: absolute;
z-index: 2;
}

.gauche {
position: absolute;
z-index:1;
}

.centre {
margin-left: 150px;
width: 648px;
height:100%;
}

body {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	color: white;
	background : black;
	margin: 0; /* pour éviter les marges */
    text-align: center; /* pour corriger le bug de centrage IE */
}

a {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 13px;
	color : #F7BF02;
	text-decoration: none;
}


a:visited {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 13px;
	color : #F7BF02;
	text-decoration: none;
}

a:hover {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 13px;
	color : blue;
	text-decoration: none;
}


table {
	background: #01014B;
	font-family: arial, Tahoma, Verdana, sans-serif;

}

a.mod {
	text-decoration:none;
	color : #F7BF02;
}

a:visited.mod {
	text-decoration: none;
	color : #F7BF02;
}

a:hover.mod {
	text-decoration: none;
	color : #F7BF02;
}
	

.important {
 color: red;
 }


/*#01014B bleu kln
#F7BF02 jaune kln*/


et le code principal:


<?php

//si aucun contenu spécifié, contenu par defaut
if (isset($_GET['content'])) {
	$content = $_GET['content'];
}	
else {
	$content = 'accueil';
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="kln.css" />
<title>nom de la société</title>
</head>

<body>

 <!--___________________________________Menu____________________________________________-->

<div class="contenu">

<div class="entete">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="798" height="250" id="act" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="images/but_act.swf" />
	<param name="quality" value="high" />
	<param name="wmode" value="transparent" />
	<param name="bgcolor" value="#01014b" />
	<embed src="images/but_act.swf" quality="high" wmode="transparent" bgcolor="#01014b" width="798" height="250" name="act" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>

<!--____________________________________Partie gauche______________________________________-->
<div class="gauche">

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0" height="327" width="150"  id="LOGO">
  	<param name="movie" value="images/logo.swf">
  	<param name="quality" value="high">
  	<embed src="images/logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="327" width="150">	</embed>
	</object>

	<br /><br />
	<img src="./images/pilote.gif"></div>

<!--________________________________________________Titre______________________________________-->

<div class="titre">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="798" height="90" id="pocket" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="images/titres/<?php echo ("$content.swf"); ?>" />
	<param name="quality" value="high" />
	<param name="wmode" value="transparent" />
	<param name="bgcolor" value="#01014b" />
	<embed src="images/titres/<?php echo ("$content.swf"); ?>" quality="high" wmode="transparent" bgcolor="#01014b" width="798" height="90" name="pocket" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>

<!--________________________________________________Contenu principal___________________________-->
<div class="centre">
<?
	echo ("<br /><br /><br /><br /><br /><br /><br /><br /><br />");
	include("$content.php");
	
?>
</div>
</div>
</body>
</html>


Je débute, merci d'être indulgent Smiley langue

Je compte faire une version avec flash et une sans pour les utilisateurs équipés de connexions bas débit. Si vous avez des suggestions au niveau du code ou du design n'hésitez pas, toute remarque me sera utile

Merci
Fred

EDIT : Autre petite question, je n'arrive pas à faire apparaître le bloc "titre" au dessus du bloc "gauche", je crois que je ne comprend pas l'attribut z-index...
Modifié par Nakuni (23 Mar 2006 - 00:56)
Bonjour Nakuti,

Tu veux parler des images décalées à gauche avec IE ?

Par contre, je ne vois pas ton menu et "Bienvenue" avec Firefox Smiley confus
Je parle du "bienvenue" et des images à gauche qui se décalent sur la droite en effet.

Le fait que tu ne vois pas le menu vient de ton firefox, en effet il faut la dernière version de flashplayer, c'est étrange qu'il ne t'ai pas proposé de l'installer d'ailleurs Smiley ohwell
Modifié par Nakuni (22 Mar 2006 - 11:11)
Ben oui c'est bizarre Smiley ohwell surtout que tu proposes le téléchargement dans ton site je crois
Modifié par blue (22 Mar 2006 - 14:05)
Sinon, rajoutes un :
float: left;

et supprime :
position: absolute;

à ta div
.gauche

et normalement c'est bon Smiley smile

Ah oui, vois cet article car tu utilises des "class" pour des objets uniques, au lieu de "id"
Nakuni a écrit :
"je crois" aussi lol


lol, ça me l'a pas proposé, mais je l'ai vu dans le html de ton site Smiley cligne
C'est marrent je venais de tester de mettre "float:left" à la place du "position:absolute" dans ".titre" et ".gauche", le problème c'est qu'ils ne se chevauchaient pas, je veux que le kart qui amène le titre passe par dessus le logo de gauche.

En remplacant uniquement le "positio:absolute" dans ".gauche" par contre ça me décalle encore plus le titre.

Merci pour l'article je vais remédier à ça Smiley cligne et merci pour ton aide tout court d'ailleurs

EDIT : ah j'ai compris c'étais pour avoir ton 100ème post! Smiley lol
Modifié par Nakuni (22 Mar 2006 - 14:17)
lol, j'avais même pas vu Smiley cligne

bon je n'y arrive pas car il semblerait que z-index ne marche pas sur les images flash

une solution serait de couper ton image flash (avec le laurier) en haut, puisque la partie animée est plus bas, puis la faire descendre par ta div
.gauche

avec :

top: 325px;
left: 0;

en l'ayant remise en position absolue

mais peut-être quelqu'un saura t-il faire passer, en arrière-plan, une image flash sur une autre ?
Je vais attendre pour voir si quelqu'un trouve une solution, sinon je virerai l'animation de la partie gauche que je ne comptait mettre que dans une rubrique, je ne pensais pas que le problème venait du fait qu'il s'agissait d'animations flash.

Encore merci Smiley good
ben moi ça marche

j'ai fait une image de 150x90 avec les attributs :


#imgTest {
background-image: url(nakuni_img_test.gif);
width: 150px;
height: 90px;
float: left;
}


et j'ai mis la div avant ta div gauche

si tu veux, j'upload pour que tu vois
le truc c'est qu'il y'a déjà un background sur le div "fond", dans lequel est inclut ton div, donc on ne le voit pas

ça commence à m'prendre la tête ce truc
ça y'est!!!!!!!

En fait j'ai mis le <div id="titre"> juste après le <div id="fond">

je l'ai mis en absolute avec un top:250px (la taille de l'en-tête) et bingo!!!

Merci de t'être donné autant de mal! En tout cas ce site est devenu ma référence!
j'ai rien dit, maintenant c'est le contenu qui me fait pareil que le titre et qui se décalle sous IE...

EDIT : je post le code à son état actuel, j'ai re up le site, l'erreur sql est en fait le contenu (j'ai pas exporté ma base sql)

css :


.contenuc {  /*Pour le contenu centré */
	margin-left: auto;
	margin-right: auto;
	margin-top:5%;
	text-align:center;
	width: 70%;
}

.contenuj {  /*Pour le contenu justifié */
	margin-left: auto;
	margin-right: auto;
	margin-top:5%;
	text-align:justify;
	width: 70%;
}

#fond {
	margin-left: auto;
	margin-right: auto;
	width: 798px;
	height: 100%;
	background-color:#01014B;
	background-image:url(images/damier.jpg);
	background-repeat:repeat-y ;
}

#entete {
	margin-left: auto;
	margin-right: auto;
	width: 798px;
	height: 250px;
}

#titre {
	position: absolute;
	top: 250px;
	z-index:5;
}

#gauche {
	width: 150px;
	height: 90px;
	float: left;
}

#centre {
	position:absolute;
	margin-top:16%;
	margin-left: 150px;
	width: 648px;
	height:100%;
	z-index:0;
}

#pied {
	margin-left: 150px;
	width: 648px;
}

.important {
	width:inherit;
	padding:1%;
	margin-top:5%;
	color: red;
	border-color:#F7BF02;
	border-style:dotted;
}

body {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	color: white;
	background : black;
	margin: 0; /* pour éviter les marges */
    text-align: center; /* pour corriger le bug de centrage IE */
}

a {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	color : #F7BF02;
	text-decoration: none;
}


a:visited {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	color : #F7BF02;
	text-decoration: none;
}

a:hover {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	color : blue;
	text-decoration: none;
}

hr {
	margin-top:5%;
	margin-left: 150px;
	border: thin solid #F7BF02;
	width: 648px;
}

table {
	margin-left: auto;
	margin-right: auto;
	border: medium solid #F7BF02;
	width: 90%;
}

td {
	border: thin solid #000000;
}

caption{
	margin-left: auto;
	margin-right: auto;
	padding:2%;
	font-variant:small-caps;
}

h1 {
	font-style:italic;
}


a:visited.mod {
	text-decoration: none;
	color : #F7BF02;
}

a:hover.mod {
	text-decoration: none;
	color : #F7BF02;
}




/*#01014B bleu kln
#F7BF02 jaune kln*/


Et le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="kln.css" />

<title>nom de la société</title>

<?php

//si aucun contenu spécifié, contenu par defaut
if (isset($_GET['content'])) {
	$content = $_GET['content'];
}	
else {
	$content = 'accueil';
}

?>

</head>

<body>



<div id="fond">

<!--________________________________________________Titre______________________________________-->

<div id="titre">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="798" height="90" id="pocket" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="images/titres/<?php echo ("$content.swf"); ?>" />
	<param name="quality" value="high" />
	<param name="wmode" value="transparent" />
	<param name="bgcolor" value="#01014b" />
	<embed src="images/titres/<?php echo ("$content.swf"); ?>" quality="high" wmode="transparent" bgcolor="#01014b" width="798" height="90" name="pocket" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>


 <!--___________________________________Menu____________________________________________-->
<div id="entete">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="798" height="250" id="act" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="images/but_act.swf" />
	<param name="quality" value="high" />
	<param name="wmode" value="transparent" />
	<param name="bgcolor" value="#01014b" />
	<embed src="images/but_act.swf" quality="high" wmode="transparent" bgcolor="#01014b" width="798" height="250" name="act" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>

<!--____________________________________Partie gauche______________________________________-->
<div id="gauche">

<!-- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0" height="327" width="150"  id="LOGO">
  	<param name="movie" value="images/logo.swf">
  	<param name="quality" value="high">
  	<embed src="images/logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="327" width="150">	</embed>
	</object>-->
	<img src="images/logodamier.jpg" />
	<br /><br />
	<img src="./images/pilote.gif" />

</div>



<!--________________________________________________Contenu principal___________________________-->
<div id="centre">
<?

	include("$content.php");
	
?>
</div>
<hr>
<div id="pied">
adresse
<br />
tel
mail

</div>
</div>

</body>
</html>

Modifié par Nakuni (23 Mar 2006 - 00:57)
si tu utilises une marge négative gauche pour centrer en largeur comme ça :

#centre {
	position:absolute;
	margin-top:16%;
	left: 50%;
	margin-left: -234px;
	width: 648px;
	height:100%;
	z-index:0;
}

ça doit être bon Smiley smile
éhéhé le problème c'est que le fond bleu ne s'étire plus en fonction du contenu et que le pied de page passe en haut et chevauche le centre Smiley sweatdrop
en mettant #centre en float:right ça passe yeah!

mon dieu la bidouille lol, bon j'ai plus qu'à regler un nouveau problème de pied de page et ça sera bon, je repasserai filer le code final si ça peut servir...

edit: enfin c'est pas gagné maintenant c'est les styles d'un tableau qui passent sous IE mais pas sous firefox, quelle prise de tête serieux!!

re-edit cette fois je crois que c'est bon, je file le code final au cas où ça puisse servir

css:

.contenuc {  /*Pour le contenu centré */
	margin-left: auto;
	margin-right: auto;
	margin-top:5%;
	text-align:center;
	width: 70%;
}

.contenuj {  /*Pour le contenu justifié */
	margin-left: auto;
	margin-right: auto;
	margin-top:5%;
	text-align:justify;
	width: 70%;
}

#fond {
	margin-left: auto;
	margin-right: auto;
	width: 798px;
	height: 100%;
	background-color:#01014B;
	background-image:url(images/damier.jpg);
	background-repeat:repeat-y ;
}

#entete {
	margin-left: auto;
	margin-right: auto;
	width: 798px;
	height: 250px;
}

#titre {
	position: absolute;
	top: 250px;
	z-index:5;
}

#gauche {
	width: 150px;
	height: 90px;
	float: left;	
}

#centre {
	float:right;
	margin-top:16%;
	padding-bottom:6%;
	width: 648px;
	height:100%;
	border-bottom-style:double;
	border-color:#F7BF02;
}

#pied {
	margin-left: 150px;
	width: 648px;

}

.important {
	text-align:center;
	width:auto;
	padding:2%;
	margin-top:5%;
	color: red;
	border-color:#F7BF02;
	border-style:double;
}

.important img {
	float:left;
}

body {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	color: white;
	background : black;
	margin: 0; /* pour éviter les marges */
    text-align: center; /* pour corriger le bug de centrage IE */
}

a {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	color : #F7BF02;
	text-decoration: none;
}


a:visited {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	color : #F7BF02;
	text-decoration: none;
}

a:hover {
	font-family: arial, Tahoma, Verdana, sans-serif;
	font-size: 16px;
	color : blue;
	text-decoration: none;
}

table {
	margin-left: auto;
	margin-right: auto;
	border: medium solid #F7BF02;
	border-collapse:collapse;
	width: 70%;
}

td {
	border: thin solid #000000;
}

caption{
	margin-left: auto;
	margin-right: auto;
	padding:2%;
	font-variant:small-caps;
}

h1 {
	font-style:italic;
}


a:visited.mod {
	text-decoration: none;
	color : #F7BF02;
}

a:hover.mod {
	text-decoration: none;
	color : #F7BF02;
}




/*#01014B bleu kln
#F7BF02 jaune kln*/


code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="kln.css" />

<title>nom de la société</title>

<?php

//si aucun contenu spécifié, contenu par defaut
if (isset($_GET['content'])) {
	$content = $_GET['content'];
}	
else {
	$content = 'accueil';
}

?>

</head>

<body>



<div id="fond">

<!--________________________________________________Titre______________________________________-->

<div id="titre">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="798" height="90" id="pocket" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="images/titres/<?php echo ("$content.swf"); ?>" />
	<param name="quality" value="high" />
	<param name="wmode" value="transparent" />
	<param name="bgcolor" value="#01014b" />
	<embed src="images/titres/<?php echo ("$content.swf"); ?>" quality="high" wmode="transparent" bgcolor="#01014b" width="798" height="90" name="pocket" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>


 <!--___________________________________Menu____________________________________________-->
<div id="entete">

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="798" height="250" id="act" align="middle">
	<param name="allowScriptAccess" value="sameDomain" />
	<param name="movie" value="images/but_act.swf" />
	<param name="quality" value="high" />
	<param name="wmode" value="transparent" />
	<param name="bgcolor" value="#01014b" />
	<embed src="images/but_act.swf" quality="high" wmode="transparent" bgcolor="#01014b" width="798" height="250" name="act" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
	</object>
</div>

<!--____________________________________Partie gauche______________________________________-->
<div id="gauche">

<!-- <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,22,0" height="327" width="150"  id="LOGO">
  	<param name="movie" value="images/logo.swf">
  	<param name="quality" value="high">
  	<embed src="images/logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" height="327" width="150">	</embed>
	</object>-->
	<img src="images/logodamier.jpg" />
	<br /><br />
	<img src="./images/pilote.gif" />

</div>



<!--________________________________________________Contenu principal___________________________-->
<div id="centre">
<?

	include("$content.php");
	
?>
</div>
<hr>
<div id="pied">
nom société
adresse
<br />
moyens de contacts

</div>
</div>

</body>
</html>

Modifié par Nakuni (23 Mar 2006 - 00:55)
Pages :