OVH Cloud OVH Cloud

modele de pages pour site dynamique

8 réponses
Avatar
hd
Bonjour,

Je pensai avoir compris les modèles 2 ou 3 colonnes trouvés de ci de là
sur le web. Mais quand j'essaie de les dériver et de les utiliser dans
un site dynamique plus rien de va :-((.
Je ne souhaite pas utiliser "position: absolute" car je ne connais pas
toujours la position de mes données (car généré dynamiquement).

J'aurai souhaité avoir une feuille de style "universel" avec
menu horizontal
puis menu vertical gauche + contenu. Ce contenu occupant en général
toute la partie droite sauf dans certains cas ou il comporte un menu
contextuel sur la droite. (On voit souvent ce genre de site qui a partir
d'un contenu permet d'avoir un menu pour d'autres rubriques, mettre
commentaire, ...).


+++++++++++++++++++++++++++++++++++++++++++++++++++++
Menu horizontale
+++++++++++++++++++++++++++++++++++++++++++++++++++++
M. Vert gauche + Contenu ++++++++++++++++++++
+ + Menu contextuel droit
+ + (dès fois n'existe pas
+ + page accueil -ex.)
+ + ++++++++++++++++++++
+
+



Je pense que je vais être oblige de faire 2 mises en pages avec 2
feuilles de styles mais si on pouvait éviter celà serait l'idéal :-).
Si celà vous inspire ou que vous avez d'autres pistes, n'hésitez pas ...
Merci d'avance
Hervé

Ecumant depuis hier le web, je suis revenu à la bonne base de
blogblues.com (que j'avai heureusement archivé).
------------------------------------------------------------------
<!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" lang="fr" xml:lang="fr">

<head>
<title>ECOLEFOURS.COM - exemple</title>

<style type="text/css">
<!--
body {
background-color: #FFC898;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
margin: 0;
padding: 0;
}
#menuprinc{
margin: 10px;
text-align: center;
padding: 20px;
background-color: #7785ff;
}
#bandeau {
margin: 10px;
text-align: center;
font-size: 36px;
line-height: 36px;
padding: 20px;
background-color: #0000ff;
}
#colonnegauche {
float: left;
width: 140px;
height: 100%;
padding: 10px;
background-color: #98C8C8;
margin: 0 10px;
}
#colonnedroite {
float: right;
width: 140px;
height: 100%;
padding: 10px;
background-color: #98C8C8;
margin: 0 10px;
}
#colonnecentrale {
padding: 10px;
background-color: #ffffff;
margin: 0 180px;
}
#colonnecentrale h1 {
text-align: center;
}
-->
</style>
</head>
<body>
<div id="bandeau">
<p>BANDEAU EN-TETE</p>
</div>

<div id="menuprinc">
<p>Menu princ</p>
</div>

<div id="colonnegauche">
<p>Colonne Gauche</p>

<p>lien 1</p>

<p>lien 2</p>
</div>



<div id="colonnecentrale">
<h1>COLONNE CENTRALE</h1>

<p style="text-align: center;"><a
href="http://www.scolagora.com/EcoleFours/ecoleasp/enseignant/questyle/ques7.asp"
title="Retour à la page précédente">Retour à la page précédente</a></p>

<p>Le contenu de la page...</p>

<p>in principio creavit Deus caelum et terram terra autem erat inanis et
vacua et tenebrae

super faciem
abyssi et spiritus Dei ferebatur super aquas dixitque Deus fiat lux et
facta est lux et

vidit Deus lucem
quod esset bona et divisit lucem ac tenebras appellavitque lucem diem et
tenebras noctem

factumque est
vespere et mane dies unus dixit quoque Deus fiat firmamentum in medio
aquarum et dividat

aquas ab aquis
et fecit Deus firmamentum divisitque aquas quae erant sub firmamento ab
his quae erant super

firmamentum
et factum est ita vocavitque Deus firmamentum caelum et factum est
vespere et mane dies

secundus dixit
...</p>

<div id="colonnedroite">
<p>Colonne Droite</p>

<p>lien 1</p>

<p>lien 2</p>
</div>

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

8 réponses

Avatar
hd
Bonjour,

Effectivement cela fonctionne quand je n'ai plus la colonne de droite.
Par contre, dès que je stimule (cas appli. dynamique donc non
anticipable par moi) une colonne droite plus haute que le contenu de la
colonne centrale (ou inversement) il y a un débordement.

a+
Hervé

--------------
<!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" lang="fr" xml:lang="fr">

<head>
<title>ECOLEFOURS.COM - exemple</title>

<style type="text/css">
<!--
body {
background-color: #FFC898;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
margin: 0;
padding: 0;
}
#menuprinc{
margin: 10px;
text-align: center;
padding: 20px;
background-color: #7785ff;
}
#bandeau {
margin: 10px;
text-align: center;
font-size: 36px;
line-height: 36px;
padding: 20px;
background-color: #0000ff;
}

#colonnegauche {
float: left;
width: 140px;
height: 100%;
padding: 10px;
background-color: #98C8C8;
margin: 0 10px;
}
#colonnedroite {
float: right;
width: 140px;
height: 100%;
padding: 10px;
background-color: #98C8C8;
margin: 10px;
}
#colonnecentrale {
padding: 10px;
background-color: #ffffff;
/*margin: 0 180px;*/
margin: 0 10px 0 180px;
}
#colonnecentrale h1 {
text-align: center;
}
-->
</style>
</head>
<body>
<div id="bandeau">
<p>BANDEAU EN-TETE</p>
</div>


<div id="menuprinc">
<p>Menu princ</p>
</div>

<div id="colonnegauche">
<p>Colonne Gauche</p>

<p>lien 1</p>

<p>lien 2</p>
</div>

<div id="contenu">
<div id="colonnedroite">
<p>Colonne Droite</p>
<p>lien 1</p>
</div>


<div id="colonnecentrale">
<h1>COLONNE CENTRALE</h1>
<p>in principio creavit Deus caelum et terram terra autem erat inanis et
vacua et tenebrae super faciem
abyssi et spiritus Dei ferebatur super aquas dixitque Deus fiat lux et
facta est lux et vidit Deus lucem
quod esset bona et divisit lucem ac tenebras appellavitque lucem diem et
tenebras noctem factumque est
vespere et mane dies unus dixit quoque Deus fiat firmamentum in medio
aquarum et dividat aquas ab aquis
et fecit Deus firmamentum divisitque aquas quae erant sub firmamento ab
his quae erant super firmamentum
et factum est ita vocavitque Deus firmamentum caelum et factum est
vespere et mane dies secundus dixit
...</p>
</div>

</div>

</body>
</html>

--------------
Avatar
hd a ecrit :

Bonjour,



Bonjour,

J'aurais mis le menu droite en colonne centrale
avec un float: right;

si vide, ne devrait pas trop se voir,

si rempli, devrait occuper l'espace necessaire

Pour que le central soit considéré comme conteneur
jusqu'au bout (qu'il s'allonge autant que le menu droite)
il faut finir son remplissage par un stoppeur de flotaison
comme par exemple

<hr style="clear: both;">


--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
christophe
hd a écrit :

Bonjour,

Je pensai avoir compris les modèles 2 ou 3 colonnes trouvés de ci de là
sur le web. Mais quand j'essaie de les dériver et de les utiliser dans
un site dynamique plus rien de va :-((.
Je ne souhaite pas utiliser "position: absolute" car je ne connais pas
toujours la position de mes données (car généré dynamiquement).



ma réponse est un peu à coté, mais tu peu alez voir les exemples
décortiqué sur
http://css-astuces.batraciens.net/3-colonnes-adaptables-1.htm

Maintenant, pour le problème des 3 colonnes, je me demande tjs si un
tableau n'est pas mieux.
Franchement, en dehors de tout pb de grands principes, les CSS ne gère
pas très bien les 3 colonnes.


--
____________________________________________________________________

http://batraciens.net/
"BATRACIENS" : Un site consacré à l'élevage et à la maintenance des
batraciens, aquatiques ou terrestres.
Nombreuses Photos et articles de maintenance. Petites annonces.
____________________________________________________________________
____________________________________________________________________

http://css-astuces.batraciens.net/
Trucs et astuces de codage CSS pour enrichir vos pages Web.
____________________________________________________________________
____________________________________________________________________
Avatar
Dorian B.
christophe wrote:
Maintenant, pour le problème des 3 colonnes, je me demande tjs si un
tableau n'est pas mieux.
Franchement, en dehors de tout pb de grands principes, les CSS ne gère
pas très bien les 3 colonnes.



Bah, s'il n'existe pas d'autre alternative on peut toujours utiliser
display:table; pour simuler un tableau. Quoi ? Comment ca ca ne marche pas ?
Mais si, avec un navigateur compatible CSS2... Bon c'est vrai qu'il faudra
attendre le CSS3 pour un vrai support et encore, ce n'est pas sur.
Avatar
hd
Bonjour,
J'ai essayé mais si j'ai bien compris! c'est catastrophique :-(
a+
hervé

@SM a écrit :
hd a ecrit :

Bonjour,




Bonjour,

J'aurais mis le menu droite en colonne centrale
avec un float: right;

si vide, ne devrait pas trop se voir,

si rempli, devrait occuper l'espace necessaire

Pour que le central soit considéré comme conteneur
jusqu'au bout (qu'il s'allonge autant que le menu droite)
il faut finir son remplissage par un stoppeur de flotaison
comme par exemple

<hr style="clear: both;">


Avatar
hd
christophe a écrit :

hd a écrit :

Bonjour,

Je pensai avoir compris les modèles 2 ou 3 colonnes trouvés de ci de
là sur le web. Mais quand j'essaie de les dériver et de les utiliser
dans un site dynamique plus rien de va :-((.
Je ne souhaite pas utiliser "position: absolute" car je ne connais pas
toujours la position de mes données (car généré dynamiquement).




ma réponse est un peu à coté, mais tu peu alez voir les exemples
décortiqué sur
http://css-astuces.batraciens.net/3-colonnes-adaptables-1.htm

Maintenant, pour le problème des 3 colonnes, je me demande tjs si un
tableau n'est pas mieux.
Franchement, en dehors de tout pb de grands principes, les CSS ne gère
pas très bien les 3 colonnes.




Bonjour,
Non tu n'est pas du tout à coté de la plaque. Seulement il faut
comprendre comme je gère la page dynamiquement je ne maîtrise pas la
hauteur des en-têtes et du contenu de la colonne centrale.
Ce qui fait que sur certaines pages, celà passera mais en général
j'aurai des effets plutôt innaceptable par rapport à la charte graphique
(ex: débordement colonne centrale vers la droite).
Donc je ne peux pas utiliser de position aboslute.
a+
hervé
Avatar
hd a ecrit :

Bonjour,
J'ai essayé mais si j'ai bien compris! c'est catastrophique :-(



??
ou bien tu n'as pas essayé ce que j'ai dit
ou bien on n'a pas les mêmes notions de catastrophe

voici mon test de ta maquette :
(essayer en remplissant + ou - le menu-droite)

<!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" lang="fr" xml:lang="fr">

<head>
<title>ECOLEFOURS.COM - exemple</title>

<style type="text/css">
<!--
body {
background-color: #FFC898;
font-family: arial, verdana, helvetica, sans-serif;
font-size: 12px;
line-height: 14px;
margin: 0;
padding: 0;
}
#menuprinc{
margin: 10px;
text-align: center;
padding: 20px;
background-color: #7785ff;
}
#bandeau {
margin: 10px;
text-align: center;
font-size: 36px;
line-height: 36px;
padding: 20px;
background-color: #0000ff;
}
#colonnegauche {
float: left;
width: 140px;
height: 100%;
padding: 10px;
background-color: #98C8C8;
margin: 0 10px;
}
#colonnedroite {
float: right;
width: 140px;
height: 100%;
padding: 10px;
background-color: #98C8C8;
margin: 0 0 0 10px;
height: 90%;
}
#colonnecentrale {
padding: 10px;
background-color: #ffffff;
margin: 0 10px 0 180px;
text-align: justify;
}
#colonnecentrale h1 {
text-align: center;
}
-->
</style>
</head>
<body>
<div id="bandeau">
<p>BANDEAU EN-TETE</p>
</div>

<div id="menuprinc">
<p>Menu princ</p>
</div>

<div id="colonnegauche">
<p>Colonne Gauche</p>

<p>lien 1</p>

<p>lien 2</p>
</div>

<div id="colonnecentrale">

<h1>COLONNE CENTRALE</h1>

<div id="colonnedroite">
<p>Colonne Droite</p>
<p>lien 1</p>

<p>lien 2</p>
<p>in principio creavit Deus caelum et terram terra autem erat inanis et vacua et tenebrae
super faciem
abyssi et spiritus Dei ferebatur super aquas dixitque Deus fiat lux et facta est lux et
vidit Deus lucem
quod esset bona et divisit lucem ac tenebras appellavitque lucem diem et tenebras noctem
factumque est vespere et mane dies unus dixit quoque Deus fiat firmamentum in medio
aquarum et dividat
aquas ab aquis et fecit Deus firmamentum divisitque aquas quae erant sub firmamento ab
his quae erant super
firmamentum et factum est ita vocavitque Deus firmamentum caelum et factum est vespere et
mane dies
secundus dixit
...</p>

</div>

<p style="text-align: center;"><a
href="http://www.scolagora.com/EcoleFours/ecoleasp/enseignant/questyle/ques7.asp"
title="Retour à la page précédente">Retour à la page précédente</a></p>

<p>Le contenu de la page...</p>

<p>in principio creavit Deus caelum et terram terra autem erat inanis et vacua et
tenebrae super faciem
abyssi et spiritus Dei ferebatur super aquas dixitque Deus fiat lux et facta est lux et
vidit Deus lucem
quod esset bona et divisit lucem ac tenebras appellavitque lucem diem et tenebras noctem
factumque est vespere et mane dies unus dixit quoque Deus fiat firmamentum in medio
aquarum et dividat
aquas ab aquis et fecit Deus firmamentum divisitque aquas quae erant sub firmamento ab
his quae erant super
firmamentum et factum est ita vocavitque Deus firmamentum caelum et factum est vespere et
mane dies
secundus dixit
...</p>

<hr style="clear:both;">

</div>
</body>
</html>
--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************
Avatar
hd a ecrit :

@SM a écrit :

> Qu'ext-ce que c'est que ce truc bidouillé ?
> #menu-princ
> {
> float: left;
> width:100%;
>
> Tu vires le flottage qui ne sert à rien qu'à faire merder
ben non pas si simple, même si je suis d'accord avec toi. Le problème
c'est dès que l'on intègre plusieurs bouts de code 'un peu sophistiquée'
ça casse la barraque



Bon, par ailleurs j'ai vu qu'il était conseillé pour un menu horizontal
de disposer d'un conteneur en float et width:100%
On y met alors des float: left pour les menus

Cependant, j'ai aussi lu qu'après un float, et pour revenir à une normalite
des divs suivants il fallait se débrouiller pour stopper cette flotaison.
Donc avant le menu-gauche tu intercales un truc avec clear:both;
(je doute que IE interprete correctement { clear:both; float:left; } )
(si j'en crois le test que j'avais proposé)

En tous les cas, merci de ton aide. Je poste le résultat pour demander
test dans nouveau fil



J' y cours ;-))

--
******** (enlever/remove [OTER_MOI] du/from reply url) *******
Stéphane MORIAUX : mailto:
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephane.moriaux/internet/
**************************************************************