Forum d'entraide PHPFrance

Venez poser vos questions PHP, MySQL, HTML5, CSS, Javascript, Gestion de serveurs à la communauté PHPfrance
https://forum.phpfrance.com/

<div> MiseEnPage 2blocs+2èmEnteteDroite avec 3colonnes

https://forum.phpfrance.com/viewtopic.php?f=6&t=9334

Page 1 sur 2

<div> MiseEnPage 2blocs+2èmEnteteDroite avec 3colonnes

Posté : 07 oct. 2005, 14:54
par Lareine
Bonjour :) !

J'utilise pour l'instant des tableaux pour faire mes mises en pages.
Vous pouvez voir ce que ça donne en bas avant le bloc de bouton
sur cette page: http://ippai.free.fr/ippaifm.php

Donc j'aimerais pouvoir réalisé une mise en page composé de
deux blocs <div>:
  • La premier à gauche comportant une entête avec en dessous 1 colone.
  • La seconde à droite comportant une entête avec dessous 3 colonnes.
  • Et 1 bloc de texte en pied faisant la largeur de ses deux blocs.

    -----------------------------------------------------
    | . Première entête. | . Deuxième entête. |
    |------------------------|--------------------------|
    | 1 description avec | colo-. | colo- | colo- |
    | PDF en download: | nne1 | nne2 | nne3|
    |---------------------------------------------------|
    | 2 à 3 Recomandations en pied des bloc |
    ----------------------------------------------------
Voici le code utilisé dans mon css:
[ippai.css]

Code : Tout sélectionner

h3,h6 { font-weight:bold; } h3,h6,td { text-align:center; } h3 { font-size:12pt; } h6 { font-size:9pt; } hr { color:fuchsia; background-color:#FF00FF; height:3px; border:0; } div#gauche { float:left; } div#droite { width:345px; float:right; } div#lecpdf { width:115px; display:inline; } div#piedbl { clear:both } .cadrpg { width:600px; margin:0 auto; border:0; } .ajuste { width:100%; margin:0; padding:0; border:0; } .alerte { color:#FF0000; background-color:inherit; } img { vertical-align:middle; border:none; display:inline; }


Voilà la mise en page avec un tableau:
              <table class="ajuste" cellpadding="0" cellspacing="0" summary="Telechargement en PDF">
                <tr>
                  <th scope="col"><span class="alerte">Affiche de l'&Eacute;mission</span></th>
                  <th colspan="3" scope="col"><span class="alerte">Vous n'avez pas de lecteur PDF ?</span></th>
                </tr>
                <tr>
                  <td><h6>Pour&nbsp;imprimer&nbsp;l'affiche<br />
                    &nbsp;du 27/09/2005:<img src="nouveau.gif" alt="Nouveau" /><br />
	    <a href="ippaifm216.pdf">Fichier PDF&nbsp;de 500 Ko: 
				            <img src="pdficonm.gif" alt="T&eacute;l&eacute;charger le PDF" /></a></h6>
                 </td>
                  <td>
                     <h6><a target="_blank" href="http://www.adobe.fr/products/acrobat/readstep.html">
				             <img src="telacrd.gif" alt="[T&eacute;l&eacute;charger "Adobe Acrobat Reader"]" />
				             <br /> Acrobat: (4 &agrave; 8Mo)</a></h6>
				          </td>
                  <td><h6><a href="pdfviewer.x86.zip"><img src="telpdfviewerx86.gif" alt="T&eacute;l&eacute;charger 
                      PDFViewer x86 pour BeOS" /><br />Intel x86: (240 Ko)</a></h6>				  
                  </td>
                  <td><h6><a href="pdfviewer.ppc.zip"><img src="telpdfviewerppc.gif" alt="T&eacute;l&eacute;charger 
                      PDFViewer PowerPC pour BeOS" /><br />PowerPC: (130Ko)</a></h6>
                  </td>
                </tr>
                <tr>
                  <td colspan="4"><h6><span class="alerte">Conseil : Pour profiter de toutes les fonctionalités 
                  "d'Acrobat Reader".</span><br />(Ouvrez-le.&nbsp;&nbsp;Faite "Ctrl+K" ou dans son menu "Fichier",
                  &nbsp;&nbsp;cliquer sur "Préférence" "Générales…".<br />
                  Dans l'onglet "Options" décocher la case "Intégrer au navigateur Web". &nbsp;Validez et 
                  c'est tout ^–^ !)</h6>
                  </td>
                 </tr>
              </table>
Et mon essais de mise en page avec les blocs <div> .°/ ! :

<div id="gauche">
    <span class="alerte">Affiche de l'&Eacute;mission</span></h3>

<div>
   <h6>Pour&nbsp;imprimer&nbsp;l'affiche<br />&nbsp;du 27/09/2005:<img src="nouveau.gif" alt="Nouveau" />
   <br /><a href="ippaifm216.pdf">Fichier PDF&nbsp;de 500 Ko: <img src="pdficonm.gif" 
   alt="T&eacute;l&eacute;charger le PDF" /></a></h6>
</div>

</div>

<div id="droite">
       <h3><span class="alerte">Vous n'avez pas de lecteur PDF ?</span></h3>

<div id="lectpdf">
   <h6><a href="pdfviewer.ppc.zip"><img src="telpdfviewerppc.gif" /><br />PowerPC: (130Ko)</a></h6>
</div>
<div id="lectpdf">
    <h6><a href="pdfviewer.x86.zip"><img  src="telpdfviewerx86.gif" /><br />Intel x86: (240 Ko)</a></h6>
</div>
<div id="lecpdf">
   <h6><a target="_blank"   href="http://www.adobe.fr/products/acrobat/readstep.html"><img  src="telacrd.gif" alt="[T&eacute;l&eacute;charger "Adobe Acrobat Reader"]" /><br />Acrobat: (4 &agrave; 8Mo)</a></h6>
</div>

</div>




<div id="piebl">
     <h6><span class="alerte">Conseil : Pour profiter de toutes les fonctionalit&eacute;s 
      "d'Acrobat Reader".</span><br />(Ouvrez-le.&nbsp;&nbsp;Faite "Ctrl+K" ou dans son menu 
     "Fichier",&nbsp;&nbsp;cliquer sur "Pr&eacute;f&eacute;rence"  "G&eacute;n&eacute;rales…".<br />
	 Dans l'onglet "Options" d&eacute;cocher la case "Int&eacute;grer au navigateur Web". 
	 Validez et c'est tout ^–^ !) </h6>
</div>
Malgré le display:inline; les 3 boites à droite ne s'aligne pas :-k !

Et je suis embêtée car je ne trouve aucun exemple de ce type sur
le net...

Si quelqu'un aurait une idée merci d'avance :o !

Posté : 07 oct. 2005, 19:39
par bubka
essai de placer ta balise avec le float:right a l'interieur de la premiere balise.

Code : Tout sélectionner

<div> <div style=float:right> ton bloc de droite avec ses sous div </div> Le contenu de ton bloc de gauche ( le float:left n'est pas indispensable je pense ) </div> <div> ton 3ieme bloc</div>

Posté : 08 oct. 2005, 00:20
par Lareine
Merci pour ton conseil bubka :) !

Je l'ai suivi en rajoutant right dans chaque colonne et ça fonctionne
dans l'éditeur DreamWeaver.

Mais une fois testées sous ie et firefox la colone de gauche passe
dessous les bloc de droite.

Il n'y a que sous Opera pourtant réputé mal supporté le css où la
mise en page est respecté :-k !

Voici le code : :-$ !
[ippai.css]

Code : Tout sélectionner

h3,h6 { font-weight:bold; text-align:center; } h3 { font-size:12pt; } h6 { font-size:9pt; } div#droite { float:right; } div#lecpdf { width:115px; float:right; display:inline; } div#piedbl { clear:both } 
<div id="droite">
  <h3 class="alerte">Vous n'avez pas de lecteur PDF ?</h3>

<div id="lecpdf">
    <h6><a href="pdfviewer.ppc.zip"><img src="telpdfviewerppc.gif" /><br />
  PowerPC: (130Ko)</a></h6>
</div>
<div id="lecpdf">
  <h6><a href="pdfviewer.x86.zip"><img src="telpdfviewerx86.gif" /><br />
  Intel x86: (240 Ko)</a></h6>
</div>
<div id="lecpdf">
  <h6><a target="_blank"  href="http://www.adobe.fr/products/acrobat/readstep.html">
  <img src="telacrd.gif" alt="[T&eacute;l&eacute;charger "Adobe  Acrobat Reader"]" />
  <br />Acrobat: (4 &agrave; 8Mo)</a></h6>
</div>

</div>


<div>
  <h3 class="alerte">Affiche de l'&Eacute;mission</h3>

  <div>
   <h6>Pour&nbsp;imprimer&nbsp;l'affiche&nbsp;du 27/09/2005:<br />
  <a href="ippaifm216.pdf">Fichier PDF&nbsp;de 500 Ko: <img src="pdficonm.gif" 
  alt="T&eacute;l&eacute;charger le PDF" /></a><img src="nouveau.gif" alt="Nouveau" 
  width="47" height="12" /></h6>
</div>

</div>

<br />

<div id="piebl"><br />
     <h6><span class="alerte">Conseil : Pour profiter de toutes les fonctionalit&eacute;s 
  "d'Acrobat Reader".</span><br />(Ouvrez-le.&nbsp;&nbsp;Faite "Ctrl+K" ou dans son
   menu "Fichier",&nbsp;&nbsp;cliquer sur "Pr&eacute;f&eacute;rence" "G&eacute;n&eacute;rales…".
  <br />Dans l'onglet "Options" d&eacute;cocher la case "Int&eacute;grer au navigateur Web". 
   Validez et c'est tout ^–^ !) </h6>
</div>
Personne n'aurait une idée pour éviter le passage en bas de la
colonne gauche #-o !

Posté : 08 oct. 2005, 11:56
par jeff
c'est pas tester mais tu peut essaye ca

Code : Tout sélectionner

<div id='conteneur'> <div id='gauche'><h2>mon titre</h2>ljgjg</div> <div id='droite'><h2>mon titre</h2>ljgjg</div> <hr/> </div> <div id='footer'>bas de la page</div>
et le css

Code : Tout sélectionner

#droite{float:left;/*ou droite a essayer*/} #gauche{float:left;} hr{clear:both;}

Posté : 09 oct. 2005, 10:19
par Lareine
Nan, ça se casse toujours la figure et encore plus là :roll: !

J'ai l'impression que les possibilités des boîtes div avec float,
sont limité si l'on veut rester compatible ie et firefox :? !

http://www.fastclemmy.com/index.php?vie ... t-Explorer

quelqu'un aurrait une idée :o ?

Merci d'avance :) !

Posté : 09 oct. 2005, 11:04
par Cyrano
Tiens, essaye d'adapter ceci: 
<?xml version="1.0" encoding="iso-8859-1" ?>
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title></title>
<style>
/* <![CDATA[ */
#ensemble div {
    border: none;
    text-align: center;
    padding: 0;
}
#ensemble {
    position: relative;
    width: 750px;
    padding: 0;
}
#gauche {
    width: 285px;
}
#droite {
    float: right;
    width: 460px;
}
#droite div {
    float: left;
    width: 151px;
}
#pied_bloc {
    clear: both;
}
div div h3, div div p {
    margin: 0.2em 0;
}
/* ]]> */
</style>
</head>
<body>
<div id="ensemble">
  <div id="droite">
    <h3>Titre de droite</h3>
    <div id="adobe_gauche">Lien de gauche</div>
    <div id="adobe_centre">Lien central</div>
    <div id="adobe_droite">Lien de droite</div>
  </div>
  <div id="gauche">
    <h3>titre de gauche</h3>
    <p>Description et lien vers le pdf</p>
  </div>
  <div id="pied_bloc">
  <h4>Titre du pied</h4>
  <p>texte de description du pied</p>
  </div>
</div>
</body>
</html>

<div> MiseEnPage 2blocs+2èmEnteteDroite avec 3colonnes

Posté : 09 oct. 2005, 20:05
par Lareine
J'avais lue aussi l'astuce du <?xml version="1.0" encoding="iso-8859-1" ?>
en début de code :ordi: .

Mais j'obtiens à chaque fois que je l'utilise un magnifique:
Parse error: parse error, unexpected T_STRING in /var/www/free.fr/2/5/ippai/essais.php on line 1
Peut être que ça ne fonctionne pas avec mon OS (Win2000) :-k .

Par contre si j'enlève cette balise en adaptant ton exemple
ça passe impec sous ie, Opera et Firefox :pouce: ...
 
<!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" lang="fr"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" /> 
<title></title> 
<style> 
/* <![CDATA[ */ 

h3,h6,.gras { font-weight:bold; margin:0; } 
h3,h6 { text-align:center; } 

.alerte { color:#FF0000; background-color:inherit; }

#cadrebloc { position:relative; width:600px; padding:0; }
#pdftel { width:256px; } 
#pdflec { float:right; width:340px; } 
#pdflec div { float:left; width:112px; } 
#piedbloc { clear:both; } 

/* ]]> */ 
</style> 
</head> 
<body> 

<div id="cadrebloc"> 
  <div id="pdflec"> 
    <h3 class="alerte">Vous n'avez pas de lecteur PDF ?</h3> 
    <div><h6><a onclick="window.open
         (this.href='http://www.adobe.fr/products/acrobat/readstep.html'); 
          return false;"><img src="lecteurs/telacrobatreader.gif" 
          width="109" height="31" alt="[T&eacute;l&eacute;charger  
          "Adobe Acrobat Reader"]" /><br />Acrobat: 
          (4 &agrave; 8Mo)</a></h6>
    </div> 
    <div><h6><a href="PDFViewer.x86"><img src="lecteurs/telpdfviewerx86.gif" 
          width="109" height="31" alt="T&eacute;l&eacute;charger PDFViewer 
          x86 pour BeOS" /><br />Intel x86: (808 Ko)</a></h6>
    </div> 
    <div><h6><a href="PDFViewer.ppc"><img src="lecteurs/telpdfviewerppc.gif" 
          width="109" height="31" alt="T&eacute;l&eacute;charger PDFViewer 
           PowerPC pour BeOS" /><br />PowerPC: (298 Ko)</a></h6>
    </div> 
    </div> 
     <div id="pdftel"> 
    <h3 class="alerte">Affiche de l'&Eacute;mission</h3> 
    <h6>Pour&nbsp;imprimer&nbsp;l'affiche&nbsp;du 13/09/2005:<br /><a 
           onclick="window.open(this.href='ippaifm217.pdf'); return false;">
           Fichier PDF&nbsp;de 500 Ko: <img src="fichiers/pdficon.gif" 
           width="22" height="24" alt="T&eacute;l&eacute;charger le PDF" /></a><img 
           src="fichiers/nouveau.gif" width="47" height="11" alt="Nouveau" /></h6>
     </div>
    <div id="piedbloc"> 
     <h6><br /><span class="alerte">Conseil : Pour profiter de toutes les
            fonctionalit&eacute;s "d'Acrobat Reader".</span><br />(Ouvrez-le.&nbsp
            Faite "Ctrl+K" ou dans son menu "Fichier",&nbsp;&nbsp;cliquer sur 
            "Pr&eacute;f&eacute;rence" "G&eacute;n&eacute;rales&hellip;".<br />
            Dans l'onglet "Options" d&eacute;cocher la case "Int&eacute;grer au navigateur 
            Web". Validez et c'est tout ^&ndash;^ !) </h6> 
     </div> 
  </div> 

</body> 
</html>
Honnêtement, je pensais une tel mise en page, quasi
impossible sans tableaux ou sans avoir recours à des
Hack tordu pour les div dans le css, comme j'ai lue
sur le net :roll: . C'est une révélation pour moi :o !

+ Le code est simplifié et le contenue d'un même bloc
n'est pas mélangé avec celui d'un autre comme dans
le cas des tableau avec des cellules, ce qui facilite
l'éventuel intégration dans des includes pour obtenir
des mises en page avec des blocs modulables, en ne
changeant que ce qui est nécessaire :P .

- Au niveau du positionnement, c'est sensible à la pixel
près. Il vaut donc mieux toujours avoir des blocs plus
réduits que celui qui le contient :? .

Merci de ta réponse Cyrano :) .

Problème résolu =D> !

Posté : 09 oct. 2005, 20:36
par Cyrano
Pour le problème de la balise XML de début de page, si ta page est en PHP, remplace par ceci: 
<?php
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");
?>
C'est à cause du "<?" de la balise xml que ça génère une erreur

Posté : 09 oct. 2005, 20:40
par Lareine
Oky :P !
Et sa sert a quoi cette balise exactement :? ?

Posté : 09 oct. 2005, 20:46
par Cyrano
Le XHTML est un langage XML : cette balise l'indique au navigateur.

Posté : 09 oct. 2005, 20:50
par Lareine
Et si on omet la déclaration xml? qu'elles sont les misères que peuvent
nous faire les navigateurs :? ?

Je viens de la rajouter et je perd le centrage de ma page dans ie.
son positionement était déclaré dans mon css ainssi:

Code : Tout sélectionner

.cadrpg { width:600px; margin:0 auto; border:0; }
Il semblerait donc que cette déclaration désactive le centrage
automatique de la page sous ie...

Posté : 09 oct. 2005, 22:29
par Cyrano
Alors enlève le, ce n'est pas indispensable. Mais ça ne devrait pas influencer la mise en page. Il y a peut-être un problème avec ta feuille de style à propos du centrage.
  1. le code html 
    <?xml version="1.0" encoding="iso=8859-1" ?>
<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" xml:lang="fr" />
<title>Centrage par CSS, bloc de dimensions fixes</title>
</head>
<body>
<div id="bloc_principal">
<h1>Titre de la page</h1>
<p>Du texte juste pour meubler</p>
</div>
</body>
</html>
  2. la feuille de stylede centrage d'un bloc de dimensions fixes:

    Code : Tout sélectionner

    #bloc_principal { position: relative; width: 750px; top: 0; left: 50%; margin-left: -375px; border: 1px solid #ccc; }
  3. la feuille de style de centrage d'un bloc de dimensions proportionnelle:

    Code : Tout sélectionner

    #bloc_principal { position: relative; width: 80%; top: 0; left: 50%; margin-left: -40%; border: 1px solid #ccc; }

Posté : 10 oct. 2005, 00:13
par Lareine
Ces deux centrages ne sont malheureusement pas adaptatifs
selon les résolutions utilisées :? ...

Pas grave, je vais me passer de la déclaration xml, dans la
balise php pour plus de simplicité, puisque son absence n'a
aucune conséquence fâcheuse :o !

Encore merci Cyrano, et excellente soirée à toi :P !

Posté : 10 oct. 2005, 12:18
par seayoung
juste un petit point, enfin si je peux me permettre :roll:
tu as découvert la puissance d'un bon code et d'un bon CSS toutefois évite de mettre comme nom de classe des positions car si jamais un jours tu veux faire basculer ton block gauche a droite la signification de ta classe n'aura plus lieu d'être ...
enfin là je chipotte un peut bcp mais c'est juste un truc comme ca :wink:
:oops:

Posté : 10 oct. 2005, 15:41
par Lareine
Tu fais bien seayoung :) !

Ta remarque est pertinente :P !

Pour cela que tu remarqueras qu'a par les id #cadre #pied qui
remplissent des fonctions standard.
J'ai utilisé des termes rappelant plus le contenu de blocs comme
#pdflec #pdftel, que leur positionnement :o !
Heures au format UTC+02:00
Page 1 sur 2
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/