18041 sujets

Questions générales et questions de débutants

Problème avec balise div et include php

Bonjour à tous,
Voilà je m'explique, je dois réalisé un site avec navigation haute, + navigation basse, et entre les 2, le contenu du site. pour ne pas avoir à recharger la nav haute et basse à chaque fois j'ai créé une page en PHP qui affiche dans la partie centrale (main) les différents contenue (pages).
voilà, tout allait bien, sauf que j'ai passé une des page en <div> pour essayer de faire un truc plus simple qu'un tableau pour la mise en forme. Et là gros souci, En fait cette page ne "rentre ou reste" plus dans le cadre central comme ces sœurs, elle se colle systématiquement en haut à gauche du browser, au dessus (masque) le reste du site, et je n'ai pas ce problème avec les tableaux.
suis je assez clair, si oui y a t'il une solution ?
Merci d'avance pour vos réponses.
Hey.
Ton probleme n'est pas simple a resoudre sans un bout de code.

Rapido 1 piste : as-tu essayé de coller ton header (navigation du haut), ta page en <div>, et ton footer (navigation du bas) dans une page html?
Tu verras deja si ton code en un seul bloc et sans include fonctionne.

Tu peux aussi te servir de validateurs Html (trouvable en ligne). Tu copies-colles le code source (depuis ton navigateur) et il te dira si des balises sont ouvertes et pas refermées,etc...

Bon courage Smiley cligne
Modifié par Bobdade (14 Mar 2013 - 23:06)
Merci bobdade,

Si cela peut servir.

Ci dessous, le code de ma page PHP.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" Content="text/html; charset=iso-8859-15">
<title>SBK BATIMENT</title>
<style type="text/css">
<!--
body {
	background-color: #000;
	margin: 0;
	padding: 0;
	color: #000;
}
a img { /* ce sélecteur élimine la bordure bleue par défaut affichée dans certains navigateurs autour d'une image lorsque celle-ci est entourée d'un lien. */
	border: none;
}
-->
</style></head>
<body>
<div align="center" valign="top">

<td width="100%" height="121" align="center" bgcolor="#000" cellpadding="0" cellspacing="0">
<?php include('top.html');  // Nous appelons l'entete du site
?>

<table border="0" align="center" valign="top" cellpadding="0" cellspacing="0">

<td width="165" align="center" valign="top" bgcolor="#000" cellpadding="0" cellspacing="0">
<?php include('left.html');   // Nous appelons notre menu de gauche 
?>


<td align="center" valign="top" bgcolor="#000" cellpadding="0" cellspacing="0">
<?php
  // tableau contenant les pages autorisées
  // ----------------------------------------------------
  $pageOK = array('accueil' => 'accueil.html',
                  'stabul' => 'stabul2.php',
				  'energies' => 'energies.php',
				  'maison' => 'maison.php',
				  'porc' => 'porc.php',
				  'industrie' => 'industrie.php',
				  'collectif' => 'collectif.php',
				  'acces' => 'acces.html',
				  'apropos' => 'apropos.php',
				  'homfem' => 'homfem.php',
				  'materiel' => 'materiel.php',
				  'equipement' => 'equipement.php',);

  // On teste que le paramètre d'url existe et qu'il est bien autorisé
  // -----------------------------------------------------------------
   if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
    include($pageOK[$_GET['page']]);   // Nous appelons le contenu central de la page
  } else {
    include('accueil.html');   // Page par défaut quant elle n'existe pas dans le tableau
  }
?>
</table>
</td>
  
  
    <td width="100%" height="125" align="center" valign="top" bgcolor="#000" cellpadding="0" cellspacing="0">
<?php
  include('footer.html');   // Nous appelons notre navigation basse
?>
</td>

    <td width="100%" height="" valign="top" cellpadding="0" cellspacing="0">
    <img src="transparent.gif" alt="" width="1024" height="1">
    </td>
  </tr>

</div>


ET VOICI LE CODE de la page me posant problème.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SBK - batiment</title>
<style type="text/css">
a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000;
}
h1 {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	color: #fff;
}
h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #000;
	text-align: left;
}
h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	font-variant: normal;
	color: #FFF;
	text-align: right;
}

a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #333;
}
a:hover {
	text-decoration: underline;
	color: #FFF;
	font-weight:bold
}
a:active {
	text-decoration: none;
	color: #333;
}
<!--
a.type1 { color: none; }

a.type2 { color: none; }
-->
</style>







<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'glossy-dark';
hs.wrapperClassName = 'dark';
//hs.captionEval = 'this.a.title';
hs.numberPosition = 'caption';
hs.useBox = true;
hs.width = 600;
hs.height = 400;
hs.dimmingOpacity = 0.7;

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		position: 'bottom center',
		opacity: 0.75,
		hideOnMouseOut: true
	},
	thumbstrip: {
		position: 'above',
		mode: 'horizontal',
		relativeTo: 'expander'
	}
});

// Make all images animate to the one visible thumbnail
var miniGalleryOptions1 = {
	thumbnailId: 'thumb1'
}
</script>

</head>

<body bgcolor="#000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" border="0" valign="top">
<td>
<div style="position:absolute;  top:0px; left:0px; width:8px; height:311px; border:; background-color:#FF6600;">
<div style="position:absolute;  top:0px; left:8px; width:258px; height:311px; border:; background-color:#FF6600;"><h1>AGRICULTURE</h1>      <h2>Le secteur de l'agriculture repr&eacute;sente 1/3 de l'activit&eacute; de l'entreprise.
        SBK intervient sur tout type de projet et s'adapte à chaque client.
        De la ma&ccedil;onnerie &agrave;  la charpente. Toute l'&eacute;quipe
        SBK se mobilise pour concevoir et r&eacute;aliser votre b&acirc;timent.<br>
        <br>
        
        &gt; <a href="index.php?page=porc" title="porc">Porcherie</a><br>
        &gt; <a href="#">Stabulation</a><br>
        &gt; <a href="#">Chèvrerie</a><br>
        &gt; <a href="#">Box à chevaux</a><br>
        &gt; <a href="#">Fosse / Fumi&egrave;re</a><br>
        &gt; <a href="#">Stockage mat&eacute;riel / C&eacute;r&eacute;ales</a><br>
        &gt; <a href="#">Station de traitement</a><br>
        &gt; <a href="#">S&eacute;chage en grange</a></h2></a></div>
        
       <div class="highslide-gallery"> 
       
<div style="position:absolute;  top:0px; left:266px; width:122px; height:311px; border:; background-color:;"><a class='highslide' id="thumb1" href="images_test/thumbstrip12.jpg" onClick="return hs.expand(this, miniGalleryOptions1)"><img src="images/stabul_02.jpg" width="122" height="311" alt=""></a></div>
<div style="position:absolute;  top:0px; left:388px; width:122px; height:311px; border:; background-color:;"><a class='highslide' id="thumb1" href="images/AgricultureG_1.jpg" onClick="return hs.expand(this, miniGalleryOptions1)"><img src="images/stabul_03.jpg" width="122" height="311" alt=""></a></div>
<div style="position:absolute;  top:0px; left:510px; width:122px; height:311px; border:; background-color:;"><a class='highslide' id="thumb1" href="images/AgricultureG_1.jpg" onClick="return hs.expand(this, miniGalleryOptions1)"><img src="images/stabul_04.jpg" width="122" height="311" alt=""></a></div>
<div style="position:absolute;  top:0px; left:632px; width:122px; height:311px; border:; background-color:;"><a class='highslide' id="thumb1" href="images/AgricultureG_1.jpg" onClick="return hs.expand(this, miniGalleryOptions1)"><img src="images/stabul_05.jpg" width="122" height="311" alt=""></a></div>

</div></td>
      <div class="hidden-container">
      
       <a class='highslide' href='images_test/thumbstrip12.jpg'
				onclick="return hs.expand(this, miniGalleryOptions1)">
			<img src='thumb/STABULATION/HPIM0506.JPG' alt=''/></a>

		<a class='highslide' href='images_test/thumbstrip13.jpg'
				onclick="return hs.expand(this, miniGalleryOptions1)">
			<img src='images_test/thumbstrip13.thumb.png' alt=''/></a>

		<a class='highslide' href='images_test/thumbstrip14.jpg'
				onclick="return hs.expand(this, miniGalleryOptions1)">
			<img src='images_test/thumbstrip14.thumb.png' alt=''/></a>

 	</div>
 
</body>
</html>



Merci pour vos lumières.
Modifié par 6l20 (18 Mar 2013 - 16:53)
Merci,
J'ai ajouté une balise <td> au lieu d'une <table> pour faire un test et j'ai oublié de la supp, mais ceci n'a eu aucune incidence sur le comportement de la page. En fait je ne peut pas garder la structure en tableau car des images contenu dans les pages du sites doivent s'ouvrir en highslide (jquerry) et apparemment ceci ne fonctionne qu'avec des pages réalisé en div.
Alors pour t'aider plusieurs choses :

- Oublie la mise en page avec des tableaux :
http://www.alsacreations.com/tuto/lire/538-Construire-un-site-sans-tableaux.html
Tu vas peut-être galérer au début mais tu gagneras un temps fou plus tard...

- Tu ne dois pas connaître le CSS ( c'est pas grave, hein ! Ca s'apprend Smiley cligne )

Tous les blocs ("<div>") que tu as créé ont une règle css position:absolute et top:0px; left:0px;, ce qui "signifie" en langage css : "Colle toi en haut à gauche de ton contenant, c'est une règle absolue, peu importe si tu chevauches un autre bloc pour ça"...

Tout ça pour dire qu'il y a de la lecture à ce sujet ici même:
http://www.alsacreations.com/article/lire/533-initiation-au-positionnement-en-css-partie-1.html
http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html

Et bon courage !!
Sujet clos
Aller à