[Résolu] position des différentes parties

Lolo3194 · Message par **Lolo3194** » 20 avr. 2005, 18:03

Bonjour,

Je continue mon périple dans le monde du CSS. J'espère avoir bien rebranché mon cerveau.
Ma page est composée de 5 parties:
- entête avec le nom de la page ;
- pied de page avec un logo ;
- 2 parties latérales contenant le nom des cépages
- 1 partie centrale affichant les caractéristiques des cépages.

Les noms des cépages sont des balises <a href> passant à mon script les paramètres à afficher dans la partie centrale. (Ceci grâce à vos conseils).

Lors du premier chargement de la page, la partie centrale affiche du blabla et toutes les parties sont parfaitement jointes.
Quand je clique sur un nom, la page centrale affiche bien les caractéristiques du cépage, à l'aide d'un tableau. Mais une bande blanche apparaît entre l'entête et le reste de la page.

Pour résoudre ce problème, j'ai inclus toutes mes parties dans un conteneur comme je l'ai vu faire sur les exemples du site alsacréation, mais cela ne solutionne pas le pb.
Si je mets position:absolute dans la description de la partie centrale, la bande blanche n'apparaît plus. Mais lors du premier chargement, j'ai un gros blanc sur la partie droite de la partie centrale. Ce gros blanc n'apparaît plus lors de l'affichage des caractéristiques.

Je voudrais savoir si l'utilisation d'un tableau peut engendrer l'apparition d'un décalage entre l'en-tête et la partie centrale.
Si oui existe-til un moyen de résoudre ce pb ?

Merci d'avance.
Laurent

calimo · Message par **calimo** » 20 avr. 2005, 18:10

Sans voir la page c'est absolument impossible de te répondre.

Lolo3194 · Message par **Lolo3194** » 20 avr. 2005, 18:32

Pour voir la page, tu veux le code css, celui du script php, ou une image.
Pour les images, cela risque d'être difficile, je n'ai pas de compte pour les mettre en ligne.

Amicalement
Laurent

Lolo3194 · Message par **Lolo3194** » 20 avr. 2005, 22:11

Si cela peut aider, voici le css

#header {
font-family:Verdana, Arial, Helvetica, sans-sherif;
height: 100px;
background-color: #99CCCC;
background-image : url("./image/decor/logo.png");
background-repeat : no-repeat;
}
#conteneur {
position: absolute;
width: 100%;
height:100%;
}
#centre {
font-family : Georgia, "Bitstream Vera Serif", serif;
margin-left: 150px;
margin-right: 150px;
height : 80%;
background-image : url("./image/decor/sand.png");
}
#gauche {
float:left;
left:0px;
width: 150px;
height : 80%;
background-image : url("./image/decor/ice-light.png");
}
#droite {
float:right;
right:0px;
width: 150px;
height : 80%;
background-image : url("./image/decor/ice-light.png");
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
background-image : url("./image/decor/npp.png");
background-repeat : no-repeat;
}
td {vertical-align:top}
H1 {color: #ca0000};
td {text-align:left};

Amicalement
Laurent

calimo · Message par **calimo** » 20 avr. 2005, 22:17

Le mieux c'est de pouvoir voir la page "en vrai", en action. Si tu peux la mettre en ligne c'est l'idéal.

Une image ne sert à rien. Pas plus qu'un code CSS sans l'HTML d'ailleurs.

Si tu ne peux pas mettre la page qui pose problème en ligne, mets le CSS et le HTML ici dans des balises

Code : Tout sélectionner

 (mais le mieux reste de mettre l'exemple en ligne). :wink:

Lolo3194 · Message par **Lolo3194** » 20 avr. 2005, 22:48

Pour mettre en ligne, cela va être disponible. Je n'ai pas d'hébegeur et je ne sais si club internet dans ses pages persos supporte mysql.
Sinon, je mettrai le css et le html entre des balises codes.
la présence de php et de commande mysql pose-t-elle des problèmes ?
Merci et je verrai cela lors de mon retour de week-end.

Amicalement
Laurent

calimo · Message par **calimo** » 21 avr. 2005, 16:29

Le mieux c'est de mettre le code HTML+CSS de la page qui pose problème pour qu'on puisse le regarder directement en action dans notre navigateur favori

Lolo3194 · Message par **Lolo3194** » 25 avr. 2005, 09:31

Le xweek-end est terminé, je reviens donc avec mon problème.
Suite à vos conseils voici le code et le css.

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta name="generator" content="Notepad++ editor, http://notepad-plus.sourceforge.net/fr/site.htm">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  <meta http-equiv="Content-Language" content="fr" />
  <Link rel=stylesheet href="cepage3.css" type="text/css">
  <title>Essai Cépage</title>
  </head>
  <body>

<?php
//Connexion à la table Cépage de la base de données
require_once ("connect.php");
require_once ("connexion.php");
require_once ("ExecRequete.php");
require_once ("affi_cepage.php");

$connexion = Connexion (NOM, PASSE, BASE, SERVEUR);
$resultat = ExecRequete ("SELECT * FROM cepage", $connexion);

//Lecture de la table Cépage
$count=0;
while($cep = LigneSuivante ($resultat))
{
  $count++;
  $nom[$count] = $cep[nom_cep];
  $coule[$nom[$count]] = $cep[cou_cep];
}
?>
<div id="conteneur">
<div id="header">
<H1><center>Interrogation de la table cepage</H1></center>
</div>

<div id="gauche">
  <b><center>Cépage Rouge</center></b><br>
  <?php
    for ($i=1; $i<=$count; $i++)
    {
      if (strcmp($coule[$nom[$i]], 'rouge')==0 or strcmp($coule[$nom[$i]], 'Rouge')==0)
      {
	   echo "<a href='./test-cepage22.php?id_cep=$i'>$nom[$i]</a><br>";
      }
    }
  ?>
</div>

<div id="droite">
  <b><center>Cépage Blanc</center></b><br>
  <?php
    for ($i=1; $i<=$count; $i++)
    {
      if (strcmp($coule[$nom[$i]], 'blanc')==0 or strcmp($coule[$nom[$i]], 'Blanc')==0)
      {
       echo "<a href='./test-cepage22.php?id_cep=$i'>$nom[$i]</a><br>";
      }
    }
  ?>
</div>

<div id="centre">
  <?php
    if ($id_cep == 0)
	{
      echo "<center>Cette section affichera les informations sur les cépages sélectionnés 
            dans les colonnes de droite ou de gauche</center>";
	  echo "La base de données contient $count enregistrements";
	}
	else
	{
	  $connexion = Connexion (NOM, PASSE, BASE, SERVEUR);
      $resultat = ExecRequete ("SELECT * FROM cepage", $connexion);
	  
	  $count2=1;
      while($count2 != $id_cep+1)
      {
		$cep = LigneSuivante ($resultat);
        $nom = $cep[nom_cep];
        $coule[$nom] = $cep[cou_cep];
        $synon[$nom] = $cep[syn_cep];
        $clone[$nom] = $cep[clo_cep];
        $ident[$nom] = $cep[iden_cep];
        $descr[$nom] = $cep[des_cep];
        $produ[$nom] = $cep[prod_cep];
        $typev[$nom] = $cep[vin_cep];
		$count2++;
      }
      $nom_im = "./image/Cepages/" .$coule[$nom]. "/" .$nom. ".jpg";
	  $nom_im2 = str_replace(" ", "_", $nom_im);
   
      echo "<H1><center>$nom</center></H1><br>";
      echo "<img src=$nom_im2 align='right' alt='cepage';/>";
	
    ?>
    <table>
      <tr>
        <td nowrap><b>Couleur : </b></td>
        <td><?php echo "$coule[$nom]"; ?></td>
      </tr>
      <tr>
        <td nowrap><b>Synonyme :</b></td>
        <td><?php echo "$synon[$nom]"; ?></td>
      </tr>
      <tr>
        <td nowrap><b>Clone : </b></td>
        <td><?php echo "$clone[$nom]"; ?></td>
      </tr>
      <tr>
        <td nowrap><b>Identification : </b></td>
        <td><?php echo "$ident[$nom]"; ?></td>
      </tr>
      <tr>
        <td nowrap><b>Description : </b></td>
        <td><?php echo "$descr[$nom]"; ?></td>
      </tr>
      <tr>
        <td nowrap><b>Production : </b></td>
        <td><?php echo "$produ[$nom]"; ?></td>
      </tr>
      <tr>
        <td nowrap><b>Type de vins : </b></td>
        <td><?php echo "$typev[$nom]"; ?></td>
      </tr>
    </table>
	<?php
	}
	?>
</div>
	
<div id="pied">
<center>En cours de construction</center>
</div>
</div>

</body>
</html>

/* CSS issu des tutoriels www.alsacreations.com/articles */
body {
/*font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em; */
margin: 0;
padding: 0;
}
#header {
font-family:Verdana, Arial, Helvetica, sans-sherif;
height: 100px;
background-color: #99CCCC;
background-image : url("./image/decor/logo.png");
background-repeat : no-repeat; 
}
#conteneur {
position: absolute;
width: 100%;
height:100%;
}
#centre { 
font-family : Georgia, "Bitstream Vera Serif", serif; 
margin-left: 150px;
margin-right: 150px;
height : 80%;
background-image : url("./image/decor/sand.png");
}
#gauche {
float:left;
left:0px;
width: 150px;
height : 80%;
background-image : url("./image/decor/ice-light.png");
}
#droite {
float:right;
right:0px;
width: 150px;
height : 80%;
background-image : url("./image/decor/ice-light.png");
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
background-image : url("./image/decor/npp.png");
background-repeat :  no-repeat;
}
td {vertical-align:top}
H1 {color: #ca0000};
td {text-align:left};

Merci d'avance
Amicalement
Laurent

calimo · Message par **calimo** » 25 avr. 2005, 14:04

Sauf que là c'est le code php. Le navigateur reçoit du HTML, donc c'est au niveau du HTML qu'il y a une erreur, du moins c'est avec le code HTML qu'on va pouvoir copier dans un fichier et voir ce qui se passe.

Avec un code php on ne pourra pas l'ouvrir dans le navigateur, comment veux-tu qu'on puisse voir ce qui se passe ?

Lolo3194 · Message par **Lolo3194** » 25 avr. 2005, 14:12

Calimo, si je te comprends bien, je dois vous donner du html.
Comment dois-je faire ?
La bonne solution est-elle d'éditer la source de la page lors de sa visualisation ?

Amicalement
Laurent

P.S : désolé de ne pas comprendre vite.

Lolo3194 · Message par **Lolo3194** » 25 avr. 2005, 17:09

Je viens de résoudre.
Le cécalage était du au fomat de la balise H1 et de sa marge supérieure.
Dans le css, j'ai supprimé la marge du haut et plus rien ne se décale.

Merci de votre aide.
Laurent

calimo · Message par **calimo** » 25 avr. 2005, 18:19

Avec Firefox tu peux simplement afficher la source et copier le résultat

Geckozone

[Résolu] position des différentes parties

[Résolu] position des différentes parties

Qui est en ligne ?