Ben, tu inverses les propriétés de col2 et col3, non ?
--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
> Ben, tu inverses les propriétés de col2 et col3, non ?
euh, j'aurais plutôt dit col1 (center) et col3 (right) non ?
j'essaie de suite; ce que j'obtiens :
<http://cjoint.com/11au/AHxrcqGSabw_The_Perfect_3_Column_Liquid_Layout_.
png>
donc en inversant dans le css les propriétés des col1 et col3
c'est donc pas si simple
bien sûr j'ai réduit de moitié la taille des images pour cet essa
i...
--
« C'est pas parce qu'on a rien à dire qu'il faut fermer sa gueule. »
(Michel Audiard)
...Ou tu regardes le design juste à côté :
http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm
(en fait 50 / 25 / 25)
> ..Ou tu regardes le design juste à côté :
> http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm
ah ouais, merci, ptet que ca m'aidera mieux à faire un 25 / 25 / 50
je regarde ca
> ...Ou tu regardes le design juste à côté :
> http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm
> (en fait 50 / 25 / 25)
je suis vraiment pas doué pour les css...
ce que j'obtiens :
<http://cjoint.com/11au/AHxrLPAQRMi_The_Perfect___Blog_Style___3_Column_
Liquid_Layout.png>
en ayant changé le css original :
.blogstyle .colmid {
right:25%; /* width of the right
column */
background:#f4f4f4; /* center column background
colour */
}
.blogstyle .colleft {
right:25%; /* width of the middle
column */
background:#fff; /* left column
background colour */
}
.blogstyle .col1 {
width:46%; /* width of center
column content (column width minus padding on either side) */
left:52%; /* 100% plus left
padding of center column */
}
.blogstyle .col2 {
width:21%; /* Width of left column
content (column width minus padding on either side) */
left:56%; /* width of (right
column) plus (center column left and right padding) plus (left column
left padding) */
}
.blogstyle .col3 {
width:21%; /* Width of right column
content (column width minus padding on either side) */
left:60%; /* Please make note of
the brackets here:
(100% - left column
width) plus (center column left and right padding) plus (left column
left and right padding) plus (right column left padding) */
}
en celui-ci :
.blogstyle .colmid {
right:50%; /* width of the right
column */
background:#f4f4f4; /* center column background
colour */
}
.blogstyle .colleft {
right:25%; /* width of the middle
column */
background:#fff; /* left column
background colour */
}
.blogstyle .col1 {
width:21%; /* width of center
column content (column width minus padding on either side) */
left:27%; /* 100% plus left
padding of center column */
}
.blogstyle .col2 {
width:21%; /* Width of left column
content (column width minus padding on either side) */
left:56%; /* width of (right
column) plus (center column left and right padding) plus (left column
left padding) */
}
.blogstyle .col3 {
width:46%; /* Width of right column
content (column width minus padding on either side) */
left:85%; /* Please make note of
the brackets here:
(100% - left column
width) plus (center column left and right padding) plus (left column
left and right padding) plus (right column left padding) */
> Ben, tu inverses les propriétés de col2 et col3, non ?
en lisant rapidos un tuto alsacréations, j'obtiens :
<http://cjoint.com/11au/AHxr36AhlOA_alsacreations.png>
simplement en changeant les width en px en % :
original :
div#colonne1 {
float: left;
width: 160px;
background: lightblue;
}
div#colonne2 {
float: right;
width: 300px;
background: burlywood;
}
div#centre {
background: khaki;
}
devient pour cet essai :
div#colonne1 {
float: left;
width: 25%;
background: lightblue;
}
div#colonne2 {
float: right;
width: 50%;
background: burlywood;
}
div#centre {
background: khaki;
}
URL du tuto :
<http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html>
ca me praraît prometteur ...
--
« Les créanciers ont meilleure mémoire que les débiteurs. »
(Benjamin Franklin)
> URL du tuto :
> <http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html>
en poursuivant la lecture du tuto et en ajoutant des marges à center :
div#centre {
margin-left: 27%;
margin-right: 52%;
background: khaki;
j'obtiens qqc qui commence à me plaire :
<http://cjoint.com/11au/AHxsdp98L5J_alsacreations_1.png>
et là; miracle; merci benoit 4x4 )))
je pige ce que je fais...
> et là; miracle; merci benoit 4x4 )))
> je pige ce que je fais...
Dans l'ordre d'apparition dans le flux, il faut left, right puis
seulement center qui, si on met margin:0 auto; ira se centrer dans la
place restante au milieu.
--
Ce n'est pas parce qu'ils sont nombreux à avoir tort
qu'ils ont forcément raison. Coluche
>
> Dans l'ordre d'apparition dans le flux, il faut left, right puis
> seulement center qui, si on met margin:0 auto; ira se centrer dans la
> place restante au milieu.
donc; dans ce cas, les divs verticales vont se coller les unes aux
autres ?
j'en suis là, côté css :
body {
margin: 0;
}
div#header {
height:15%;
width: 100%;
background: maroon;
}
div#colonne1 {
float: left;
width: 24%;
margin-right: 1%;
background: lightblue;
}
div#colonne2 {
float: right;
width: 50%;
margin-left: 1%;
background: burlywood;
}
div#centre {
overflow: hidden;
background: khaki;
}
div#footer {
height:10%;
width: 100%;
background: maroon;
}
ce qui donne (pardonner les couleurs ))) :
<http://cjoint.com/11au/AHxtYuy00kx_alsacreations_2.png>
--
« La bouse de la vache est plus utile que les dogmes :
on peut en faire de l'engrais. »
(Mao Tsé-Toung / 1896-1976)
et donc ?
(moi, à la louche, je vois : 25% 25% 50%)
c'est pas bon ?
> en ayant changé le css original :
ben ... c'est tout KKbouillé là ici :-(
> .blogstyle .colmid {
> right:25%; /* width of the right
> column */
> background:#f4f4f4; /* center column background
> colour */
> }
> .blogstyle .colleft {
> right:25%; /* width of the middle
> column */
yapa un fichier qque part ?
Le pb est qu'ici :
<http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm>
le design css n'a rien à voir avec celui html
Donc pour ton "design",
'col1' sera la colonne de droite (mais le 1er div en html)
et 'col3' sera la colonne de gauche
Normalement, ceci devrait fonctionner :
.blogstyle .colmid {
right: 75%; /* width of the right + middle columns */
background: orange /* left column background colour */
}
.blogstyle .colleft {
right: 25%; /* width of the middle column */
background:#fff; /* middle column background colour */
}
.blogstyle .col1 {
width: 48%;
left: 150%;
background: yellow;
padding-left: 2%;
}
.blogstyle .col2 {
width: 21%;
left: 52%;
}
.blogstyle .col3 {
width: 21%;
left: 56%;
}
Et ... ne pas me demander pourquoi !
Ces css sont trop tordues !
--
Stéphane Moriaux avec/with iMac-intel
pourquoi "div" ?
(et si on d�cide de le changer en H1 par exemple ?)
> height:15%;
> width: 100%;
> background: maroon;
> }
> div#colonne1 {
pas trop mal, mais j'eussions fait :
div#contenu { /* col droite */
float: right;
width: 50%;
background: lightblue;
}
div#menus { /* col gauche */
float: left;
width: 25%;
background: burlywood;
}
div#petitsPotins { /* col milieu */
background: khaki;
}
avec le div "contenu" tout au d�but du flux html
<body>
<div id="header">le titre</div>
<div id="contenu">bla bla bla bla bla bla bla bla bla</div>
<div id="menus">liens et pubs</div>
<div id="petitsPotins">news et agenda</div>
--
St�phane Moriaux avec/with iMac-intel
> pourquoi "div" ?
b�te cut'n paste...
mea culpa
> (et si on d�cide de le changer en H1 par exemple ?)
>
> > height:15%;
> > width: 100%;
> > background: maroon;
> > }
> > div#colonne1 {
>
> pas trop mal, mais j'eussions fait :
>
> div#contenu { /* col droite */
> float: right;
> width: 50%;
> background: lightblue;
> }
> div#menus { /* col gauche */
> float: left;
> width: 25%;
> background: burlywood;
> }
> div#petitsPotins { /* col milieu */
> background: khaki;
> }
>
>
> avec le div "contenu" tout au d�but du flux html
>
> <body>
> <div id="header">le titre</div>
> <div id="contenu">bla bla bla bla bla bla bla bla bla</div>
> <div id="menus">liens et pubs</div>
> <div id="petitsPotins">news et agenda</div>
ah oui, je vois, du coup pas besoin de :
overflow: hidden;
dans la col du milieu.
encore mieux qu'alsacr�ations, bravo !!!
mais bon; ca se chevauche :
<http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/blog-style-3-column-li
quid-layout-percentage/stephane_moriaux.html>
--
� Les seuls probl�mes que l'argent peut r�soudre sont
des probl�mes d'argent. �
(Kin Hubbard)
> > ce que j'obtiens :
> >
<http://cjoint.com/11au/AHxrLPAQRMi_The_Perfect___Blog_Style___3_Column_
Liquid_Layout.png>
>
> et donc ?
> (moi, à la louche, je vois : 25% 25% 50%)
> c'est pas bon ?
OUI, tu as raison; je viens de vérifier avec Free Ruler...
MAIS, je n'ai rien dans la seconde colonne en partant de la gauche, pour
l'instant, ton css va peut-etre arranger ca...
> > en ayant changé le css original :
>
> ben ... c'est tout KKbouillé là ici :-(
>
> > .blogstyle .colmid {
> > right:25%; /* width of the right
> > column */
> > background:#f4f4f4; /* center column background
> > colour */
> > }
> > .blogstyle .colleft {
> > right:25%; /* width of the middle
> > column */
>
> yapa un fichier qque part ?
si, il est accessible en IPV6 :
un example qui commence à fonctionner côté css / jxhr et php-sql :
http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/sqlite3/landp.html
le "The Perfect 'Blog Style' 3 Column Liquid Layout (Percentage widths)"
chez moi :
<http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/blog-style-3-column-li
quid-layout-percentage/index.htm>
mon bidouillage de celui-ci :
<http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/blog-style-3-column-li
quid-layout-percentage/untitled.html>
un tuto d'alsacreation :
<http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/blog-style-3-column-li
quid-layout-percentage/alsacreations.html>
deux essais à partit de css creator :
<http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/blog-style-3-column-li
quid-layout-percentage/1016499.html>
<http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/blog-style-3-column-li
quid-layout-percentage/1016497.html>
enfin, "The Perfect 3 Column Liquid Layout (Percentage widths)" chez moi
:
<http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/holy-grail-3-column-li
quid-layout-percentage/index.htm>
mon essai :
<http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/holy-grail-3-column-li
quid-layout-percentage/untitled.html>
>
> Le pb est qu'ici :
> <http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm>
> le design css n'a rien à voir avec celui html
>
> Donc pour ton "design",
> 'col1' sera la colonne de droite (mais le 1er div en html)
> et 'col3' sera la colonne de gauche
>
> Normalement, ceci devrait fonctionner :
>
> .blogstyle .colmid {
> right: 75%; /* width of the right + middle columns */
> background: orange /* left column background colour */
> }
> .blogstyle .colleft {
> right: 25%; /* width of the middle column */
> background:#fff; /* middle column background colour */
> }
> .blogstyle .col1 {
> width: 48%;
> left: 150%;
> background: yellow;
> padding-left: 2%;
> }
> .blogstyle .col2 {
> width: 21%;
> left: 52%;
> }
> .blogstyle .col3 {
> width: 21%;
> left: 56%;
> }
SUPER, merci beaucoup !!!
ca roule au pixel près c'est la version qui est là :
<http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/blog-style-3-column-li
quid-layout-percentage/untitled.html>
en plus pas de marges entre les colonnes; c'est mieux je trouve !!!
>
> Et ... ne pas me demander pourquoi !
> Ces css sont trop tordues !
c(est vrai, je trouve d'ailleurs que le design d'alsacreation est
nettement plus simple et plus gacile à comprendre, moins tordu donc...
--
« Si tu veux pouvoir supporter la vie,
sois prêt à accepter la mort. »
(Sigmund Freud)
Firefox ne peut établir de connexion avec le serveur à l'adresse
[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9].
Je sais pas faire (accès IPv6)
#contenu { /* col droite */
float: right;
width: 49%;
padding: .5%;
background: lightblue;
}
#menus { /* col gauche */
float: left;
width: 24%;
padding: .5%;
background: burlywood;
}
#petitsPotins { /* col milieu */
background: khaki;
margin: 0 50% 0 25%;
padding: .5%;
}
#petitsPotins a { /* liens trop longs */
display: inline-block;
width: 100%;
overflow: hidden;
« actuellement pratiquement aucun fournisseur d'accès ne propose d'accès
IPv6 »
me dit-on ici :
<http://www.commentcamarche.net/faq/7030-desactiver-ipv6-permet-d-accelerer-les-connexions-internet>
Mais ... peut-être est-ce mon gestionnaire de réseau dont l'option IPv6
est réglée sur "automatique" (demerdenzizich quoi)
> « actuellement pratiquement aucun fournisseur d'accès ne propose d'accès
> IPv6 »
free...
en tk
> me dit-on ici :
>
<http://www.commentcamarche.net/faq/7030-desactiver-ipv6-permet-d-accele
rer-les-connexions-internet>
commentcamarche site plutôt pourri...
> Mais ... peut-être est-ce mon gestionnaire de réseau dont l'option IPv6
> est réglée sur "automatique" (demerdenzizich quoi)
ca marche sous Tiger, c'est très pratique pour accéder à une bécanne
donnée dans un lan ...
ainsi je peux impriomer de chez moi sur l'imprimante de ma compagne à 50
km de là...
--
« Je voudrais rassurer les peuples qui meurent de faim :
ici, on mange pour vous. »
(Coluche)
je suis chez Orange, connu notoirement pour sa frilosité
> commentcamarche site plutôt pourri...
je ne fréquente pas, c'est la fôte à Google si j'ai cette réf
> ca marche sous Tiger,
comment ça marche t-il sous Tiger ?
(comment y est réglé ton TdB "Réseaux" ?)
En ts cas ce n'est pas dû à Firefox qui a l'air d'être réglé comme il faut.
> c'est très pratique pour accéder à une bécanne
> donnée dans un lan ...
Bof ... en local, les options sont nombreuses pour joindre un autre ordi.
> ainsi je peux impriomer de chez moi sur l'imprimante de ma compagne à 50
> km de là...
Déjà qu'hier mon imprimante wifi juste à côté n'était pas joignable je
vais avoir du mal à imprimer chez ta petite copine ;-)
> > ca marche sous Tiger,
>
> comment ça marche t-il sous Tiger ?
> (comment y est réglé ton TdB "Réseaux" ?)
très facile sous mac os :
<http://cjoint.com/11au/AHymTm5r9Rs_config_IPV6.png>
>
> En ts cas ce n'est pas dû à Firefox qui a l'air d'être réglé comme il faut.
>
> > c'est très pratique pour accéder à une bécanne
> > donnée dans un lan ...
>
> Bof ... en local, les options sont nombreuses pour joindre un autre ordi.
ben justement c'est pas en local que je m"en sert, c'est en "délocalisé"
)))
>
> > ainsi je peux impriomer de chez moi sur l'imprimante de ma compagne à 50
> > km de là...
>
> Déjà qu'hier mon imprimante wifi juste à côté n'était pas joignable je
> vais avoir du mal à imprimer chez ta petite copine ;-)
je ne t'ai pas donné son IPV6 non + hein ?
son imprimante est une jet d'ancre couleur;
la mienne est une laser n et b
nous sommes "complémentaires"...
--
« Les seuls problèmes que l'argent peut résoudre sont
des problèmes d'argent. »
(Kin Hubbard)
Non, chez moi l'IPv6 n'est pas renseign�.
Et je ne sais comment le faire
(Snow me dit : "le p�riph�rique de l�autre c�t� ne r�pond pas.")
>> Bof ... en local, les options sont nombreuses pour joindre un autre ordi.
>
> ben justement c'est pas en local que je m"en sert, c'est en "d�localis�"
> )))
alors .... c'est-y encore un *L*an ?
> je ne t'ai pas donn� son IPV6 non + hein ?
> son imprimante est une jet d'ancre couleur;
> la mienne est une laser n et b
> nous sommes "compl�mentaires"...
et trop loin de chez moi de ttes fa�ons ;-)
--
St�phane Moriaux avec/with iMac-intel
> alors .... c'est-y encore un *L*an ?
il y a deux LANs locaux; accessibles en NAT IPV4 mais aussi chaque
bécanne et imprimantes accessibles en IPV6.
un lan à Paris, l'autre en banlieue là où il y a des bêtes sauvages
genre moustiques...
>
> > je ne t'ai pas donné son IPV6 non + hein ?
> > son imprimante est une jet d'ancre couleur;
> > la mienne est une laser n et b
> > nous sommes "complémentaires"...
>
> et trop loin de chez moi de ttes façons ;-)
ben oui, fô aller chercher les feuilles imprimées quand même...
Ton FAI semble s'appeler "Orange". Donc pas d'IPV6. Seuls Free et certains privilégiés chez SFR ont l'IPV6... (du moins pour le
"grand public").
et même qu'il a omis de passer mon dernier post dont à propos duquel
j'évoquais la frilosisé de ce FAI (que surtout rien ne lui cause (trop)
de problèmes)
> Donc pas d'IPV6.
c'est bien ce que je subodorais
> Seuls Free et certains privilégiés chez SFR ont l'IPV6...
et voilà !
:-(