Problème CSS
Dimanche 28 décembre 2008 à 17 h 00
Salut les pros, voilà je continue sur mon site actuellement mais voilà j'ai un gros problème de background c'est à dire que celui ci ne s'adapte pas en fonction de l'écran de chaque pc.
J'ai réalisé mon body et mon header sous photoshop pour pouvoir les insérer dans ma page web, le header et le body sont disposés de cette façon :

le header est inclus dans chaque page en introduisant un lien php dans chaque body de chaque page :
le code php du header et genre :
<div id="header">
<img src="/blabla/include/header.png" usemap="#map_header" />
<map name="map_header">
<area shape="rect" coords="160,113,319,164" alt="membres_BDE" href="http://blalbalbal/presentation_BDE.php" />
<area shape="rect" coords="492,113,590,163" alt="commande_ptitdej" href="http://blablalbalblbal/petitdej/petitdej.php" />
<area shape="rect" coords="597,114,760,163" href="http://ballbalblbalblablaevenement.php" />
<area shape="rect" coords="324,113,486,164" href="http://ballbalblbalblablblabllabprogramme.php" />
<area shape="circle" coords="87,138,67" alt="index_site" href="http://lbalblablblalblabl/index.php" />
</map>
</div>
En gros le code html d'une page donne ça :
<?php session_start(); ?>
<!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>
<title>Commandez votre petit déjeuner !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="image/x-icon" href="transparent.ico" />
<link rel="stylesheet" media="screen" type="text/css" title="Osmoz" href="../design.css" />
</head>
<body>
<?php include("../include/header.php") ?>
<div class="corps">
.................................................
Et ma CSS la suivante :
body
{
background: #FFFFFF url("bordure.png") no-repeat center;
background-position: 0px 235px;
padding: 0;
margin: 0;
}
#header {
backround-image: #FFFFFF url("header.png")no-repeat center;
background-position: relative ;
padding: 0;
margin-left: 2px;
width: auto;
}
.corps {
margin-left: 320px;
}
Je comprends pas comment je peux adapter c'est #!#¤ de fond aux écrans.
Merci de votre aide, je suis au bord du pétage de plomb.
Au passage je ne peux pas vous montrer le site puisqu'il m'est interdit de le montrer (pour l'instant), j'en suis totalement désolé.
J'ai réalisé mon body et mon header sous photoshop pour pouvoir les insérer dans ma page web, le header et le body sont disposés de cette façon :

le header est inclus dans chaque page en introduisant un lien php dans chaque body de chaque page :
le code php du header et genre :
<div id="header">
<img src="/blabla/include/header.png" usemap="#map_header" />
<map name="map_header">
<area shape="rect" coords="160,113,319,164" alt="membres_BDE" href="http://blalbalbal/presentation_BDE.php" />
<area shape="rect" coords="492,113,590,163" alt="commande_ptitdej" href="http://blablalbalblbal/petitdej/petitdej.php" />
<area shape="rect" coords="597,114,760,163" href="http://ballbalblbalblablaevenement.php" />
<area shape="rect" coords="324,113,486,164" href="http://ballbalblbalblablblabllabprogramme.php" />
<area shape="circle" coords="87,138,67" alt="index_site" href="http://lbalblablblalblabl/index.php" />
</map>
</div>
En gros le code html d'une page donne ça :
<?php session_start(); ?>
<!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>
<title>Commandez votre petit déjeuner !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="shortcut icon" type="image/x-icon" href="transparent.ico" />
<link rel="stylesheet" media="screen" type="text/css" title="Osmoz" href="../design.css" />
</head>
<body>
<?php include("../include/header.php") ?>
<div class="corps">
.................................................
Et ma CSS la suivante :
body
{
background: #FFFFFF url("bordure.png") no-repeat center;
background-position: 0px 235px;
padding: 0;
margin: 0;
}
#header {
backround-image: #FFFFFF url("header.png")no-repeat center;
background-position: relative ;
padding: 0;
margin-left: 2px;
width: auto;
}
.corps {
margin-left: 320px;
}
Je comprends pas comment je peux adapter c'est #!#¤ de fond aux écrans.
Merci de votre aide, je suis au bord du pétage de plomb.
Au passage je ne peux pas vous montrer le site puisqu'il m'est interdit de le montrer (pour l'instant), j'en suis totalement désolé.
3 commentaires, dernier de moechofe.
