pb sur mon site

11 oct. 2007, 09:55

Bonjour,

Je suis en train de faire mon premier site en html/php sur base mysql.
On peux le trouver ici:
http://alpha.genese-guild.com
J'ai un soucis de mise en page.

Mon premier soucis, c'est que je n'arrive pas à faire en sorte que mon site soit centré au milieu de la page.

Mon deuxième soucis concerne ma couleur de fond, qui ne descend pas jusqu'en bas..

voici le code de ma page principale

<head>
<title>Site Genese</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body style=" margin:0;">
<table border=2 style="width: 1024px; height: 1280px; background-color: rgb(183, 172, 172); margin: 0; align:middle;" >
<center><div style="align:middle;">
<tr>
<td>
<!--site header-->
<div class="siteheader" >
<?php
include("header.php");
?>
</div>
<div class="sitebrasdroit" >
<?php
include("brasdroit.php");
?>
</div>
<div class="sitebrasgauche" >
<?php
include("brasgauche.php");
?>
</div>
<!--fin du site header-->
<!--bouton forum-->
<div class="boutonaccueil" >
<a href="index.php" onmouseover="img1.src='images/Bouton_Allume_Accueil.png' " onmouseout="img1.src='images/Bouton_eteint_Accueil.png' "><img class="bouton" name="img1" src="images/Bouton_eteint_Accueil.png"></a>
</div>
<div class="boutonforum" >
<a href="http://www.genese-guild.com/forum/" onmouseover="img3.src='images/bouton_allume_fond_forum.png' " onmouseout="img3.src='images/bouton_eteint_fond_gris_forum.png' "><img class="bouton" name="img3" src="images/bouton_eteint_fond_gris_forum.png"></a>
</div>
<div class="boutonrecrutement" >
<a href="index.php?page=recrutement" onmouseover="img2.src='images/Bouton_allume_fondgrisrecrutement.png' " onmouseout="img2.src='images/Bouton_Eteint_fondgrisrecrutement.png' "><img class="bouton" name="img2" src="images/Bouton_Eteint_fondgrisrecrutement.png"></a>
</div>
<!--fin du bouton forum-->
<!--menu de gauche-->
<div class="menug" >
<?php
include("menugauche.php");
?>
</div>
<!--fin du menu de gauche-->
<!--menu de droite-->
<div class="menud" >
<?php
include("menudroite.php");
?>
</div>
<!--fin du menu de droite-->
<!--pannel de gauche-->
<div class="pannelhg" >
<?php
include("pannelhautgauche.php");
?>
</div>
<!--fin du pannel de gauche-->

<!--pannel de gauche-->
<div class="pannelhd" >
<?php
include("pannelhautdroit.php");
?>
</div>
<!--fin du pannel de gauche-->
<!--pannel de News-->
<div class="middlepannel" >
<?php
if ($_GET['page']== "recrutement"){
include("pannelrecrutement.php");}
if ($_GET['page']== ""){
include("middlepannel.php");}
if ($_GET['page']== "charte"){
include("charte.php");}
?>
</div>
<!--fin du pannel de News-->
</td>
</tr>
</div>
</center>
</table>
</body>

Et voici mon css:

Code : Tout sélectionner

.red{
color:#660000;
}

a:visited { 
color:#00099;
text-decoration:none;
font-weight:bold; 
}

a:hover {
color:#CC3333;
text-decoration:none;
font-weight:bold;
}

a:link {
color:#000099;
text-decoration:none;
font-weight:bold;
}

.menug{
position:absolute;
left:20px;
top:364px;
}

.pannelhg{
position:absolute;
left:166px;
top:309px;
}

.pannelhd{
position:absolute;
left:515px;
top:309px;
}

.menud{
position:absolute;
left:865px;
top:364px;
}

.middlepannel{
position:absolute;
left:166px;
top:533px;
}

.boutonforum{
position:absolute;
left:199px;
top:208px;
}

.boutonaccueil{
position:absolute;
left:456px;
top:248px;
}

.boutonrecrutement{
position:absolute;
left:704px;
top:208px;
}

.siteheader{
position:absolute;
left:0px;
top:0px;
}

.sitebrasdroit{
position:absolute;
left:861px;
top:309px;
}

.sitebrasgauche{
position:absolute;
left:0px;
top:309px;
}

.menughead{ 
background-image: url(images/top-menu-gauche.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.menugleft{
background-image: url(images/left-border-menug.jpg);
background-position: center top;
background-repeat: repeat;
}

.menugright{
background-image: url(images/right-border-menug.jpg);
background-position: center top;
background-repeat: repeat;
}

.menugbody{
background-image: url(images/fond.jpg);
background-position: center top;
background-repeat: repeat;
font-family: Georgia;
font-style: italic;
font-weight: bold;
font-size:13px;
color: #000099;
}

.menugbottom{
background-image: url(images/bottom-menu-gauche.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.pannelhgbottom{
background-image: url(images/bottom-pannelhg.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.pannelhghead{ 
background-image: url(images/top-pannelhg.jpg);
background-position: center top;
background-repeat: no-repeat;
font-family: Georgia;
font-style: italic;
font-weight: bold;
font-size:20px;
color:#000099;
vertical-align:bottom;
}

.pannelhgbody{
background-image: url(images/fond.jpg);
background-position: center top;
background-repeat: repeat;
font-family: Georgia;
font-style: italic;
font-weight: bold;
font-size:13px;
color: #000099;
marging-left: 10px;
}

.pannelhgleft{
background-image: url(images/left-border-pannelhg.jpg);
background-position: center top;
background-repeat: repeat;
}

.pannelhgright{
background-image: url(images/right-border-pannelhg.jpg);
background-position: center top;
background-repeat: repeat;
}

.pannelhdbottom{
background-image: url(images/bottom-pannelhd.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.pannelhdhead{ 
background-image: url(images/top-pannelhd.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.pannelhdbody{
background-image: url(images/fond.jpg);
background-position: center top;
background-repeat: repeat;
font-family: Georgia;
font-style: italic;
font-weight: bold;
font-size:13px;
color: #000099;
marging-left: 10px;
}

.pannelhdleft{
background-image: url(images/left-border-pannelhd.jpg);
background-position: center top;
background-repeat: repeat;
}

.pannelhdright{
background-image: url(images/right-border-pannelhd.jpg);
background-position: center top;
background-repeat: repeat;
}

.menudhead{ 
background-image: url(images/top-menu-droit.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.menudleft{
background-image: url(images/left-border-menud.jpg);
background-position: center top;
background-repeat: repeat;
}

.menudright{
background-image: url(images/right-border-menud.jpg);
background-position: center top;
background-repeat: repeat;
}

.menudbody{
background-image: url(images/fond.jpg);
background-position: center top;
background-repeat: repeat;
font-family: Georgia;
font-style: italic;
font-weight: bold;
font-size:13px;
color: #000099;
}

.menudbottom{
background-image: url(images/bottom-menu-droit.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.middlepannelhead{ 
background-image: url(images/top-middle-pannel.jpg);
background-position: center top;
background-repeat: no-repeat;
font-family: Georgia;
font-style: italic;
font-weight: bold;
font-size:19px;
color:#000099;
vertical-align:bottom;
}

.middlepannelleft{
background-image: url(images/left-border-middle-pannel.jpg);
background-position: center top;
background-repeat: repeat;
}

.middlepannelright{
background-image: url(images/right-border-middle-pannel.jpg);
background-position: center top;
background-repeat: repeat;
}

.middlepannelbody{
background-image: url(images/background-middle-pannel.jpg);
background-position: center top;
background-repeat: repeat;
font-family: Arial;
font-style: italic;
font-weight: bold;
font-size:13px;
color: #000099;
}


.middlepannelbodyrecrutement{
background-image: url(images/background-middle-pannel.jpg);
background-position: center top;
background-repeat: repeat;
font-family: Arial;
font-style: italic;
font-weight: bold;
font-size:15px;
color: #000099;
}

.middlepannelbottom{
background-image: url(images/bottom-middle-pannel.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.bouton{
border: 0px solid ;
width: 115px;
height: 30px;
}

.header{ 
background-image: url(images/siteheader.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.brasdroit{ 
background-image: url(images/brasdroit.jpg);
background-position: center top;
background-repeat: no-repeat;
}

.brasgauche{ 
background-image: url(images/brasgauche.jpg);
background-position: center top;
background-repeat: no-repeat;
}

Je positionne toutes mes page php avec un position:absolute, je pense que le problème viens de là, mais je ne trouve pas de solution pour centrer ça correctement.

PS:pour les bouton du haut, et l'image qui n'apparait pas, c'est normal

11 oct. 2007, 10:18

Arg, des tables, quelle horreur ..

Pour faire court, je mettres un gros <center>(contenu)</center> autour de la table (à l'extérieur des balises <table>, pas à l'intérieur). Même si ma conscience me dicte de t'obliger à tout mettre dans des divs, et de centrer alors le contenu comme indiqué dans ce sujet:
http://www.phpfrance.com/forums/viewtop ... ht=css+pur

11 oct. 2007, 10:24

Déjà, conseil, évite de disséminer partout du CSS : tu as une feuille de style externe, tout ce qui concerne la présentation devrait donc s'y trouver, sauf obligation ...

Pour centrer un bloc sur Firefox, il faut lui indique ceci :

Code : Tout sélectionner

bloc {
    margin-left: auto;
    margin-right: auto;
}

Et pour IE6, il faut tricher un peu

Code : Tout sélectionner

body {
    text-align : center;
}

et après dans ton bloc principal, tu repasses en text-align : left - ou right -
Pour le problème de couleur de fond => http://forum.alsacreations.com/faq/faq- ... teur-.html

M'est avis que tu devrais revoir ta structure html

11 oct. 2007, 10:30

M'est avis que tu devrais revoir ta structure html

On a tous commencé un jour

11 oct. 2007, 11:06

En effet, je te souhaite bon courage

Ah et tu devrais te renseigner sur les class et id. Quand un attribut html est unique, autant lui assigner un id. Quand tu réutiliseras plusieurs fois cet attribut, utilise class.

exemple :

Code : Tout sélectionner

<body>
<div id="conteneur">
  <p><span class="couleur">Chaussette sale</span> à venir déposer dans <span class="couleur">panier à linge</span></p>
</div>
</body>

12 oct. 2007, 15:48

Y'a du mieux

http://alpha.genese-guild.com

Mais maintenant pour les résolution superieur à 1024, ça fait moche, on voit des marges qui tranchent avec mon dégradé noir..

12 oct. 2007, 16:14

La solution que je verrais, pour éviter ce genre de déconvenue, c'est de mettre le même dégradé en arrière-plan, de quelques pixels de large, avec une répétition sur l'axe X.

Du genre:

Code : Tout sélectionner

body {
 background:url(./degrade.jpg) repeat-x);
}

pb sur mon site

Qui est en ligne