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

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : <div> MiseEnPage 2blocs+2èmEnteteDroite avec 3colonnes

par Lareine » 13 oct. 2005, 11:27

Nan, mais y'a pas d'mal cher seayoung :P !

par seayoung » 12 oct. 2005, 14:03

Maxi mea culpa j'ai lu le post de travers ( tu portes bien ton pseudo )
ce que j ai lu dans les class ouid de positionnement viennent de Cyrano qui as du te les mettres juste pour t'indiquer le positionnement des blocs
DSL :oops:

par Lareine » 10 oct. 2005, 15:41

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 !

par seayoung » 10 oct. 2005, 12:18

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:

par Lareine » 10 oct. 2005, 00:13

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 !

par Cyrano » 09 oct. 2005, 22:29

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; }

par Lareine » 09 oct. 2005, 20:50

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...

par Cyrano » 09 oct. 2005, 20:46

Le XHTML est un langage XML : cette balise l'indique au navigateur.

par Lareine » 09 oct. 2005, 20:40

Oky :P !
Et sa sert a quoi cette balise exactement :? ?

par Cyrano » 09 oct. 2005, 20:36

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

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

par Lareine » 09 oct. 2005, 20:05

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> !

par Cyrano » 09 oct. 2005, 11:04

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>

par Lareine » 09 oct. 2005, 10:19

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 :) !

par jeff » 08 oct. 2005, 11:56

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;}

par Lareine » 08 oct. 2005, 00:20

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 !