j'aimerais avoir un design en 3 colonnes un peu comme sur la page :
<http://matthewjamestaylor.com/blog/perfect-3-column.htm>
mais au lieu d'avoir; de gauche à droite; 25 %, 50 % et 25%, j'ai besoin
d'avoir 25 %, 25 % et 50%.
sauriez-vous adapter ce design ???
--
« La chambre des députés, la moitié sont bons à rien.
Les autres sont prêts à tout. »
(Coluche)
j'aimerais avoir un design en 3 colonnes un peu comme sur la page : <http://matthewjamestaylor.com/blog/perfect-3-column.htm> mais au lieu d'avoir; de gauche à droite; 25 %, 50 % et 25%, j'ai besoin d'avoir 25 %, 25 % et 50%. sauriez-vous adapter ce design ???
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
Le 23/08/2011 16:21, Une Bévue a écrit :
j'aimerais avoir un design en 3 colonnes un peu comme sur la page :
<http://matthewjamestaylor.com/blog/perfect-3-column.htm>
mais au lieu d'avoir; de gauche à droite; 25 %, 50 % et 25%, j'ai besoin
d'avoir 25 %, 25 % et 50%.
sauriez-vous adapter ce design ???
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
j'aimerais avoir un design en 3 colonnes un peu comme sur la page : <http://matthewjamestaylor.com/blog/perfect-3-column.htm> mais au lieu d'avoir; de gauche à droite; 25 %, 50 % et 25%, j'ai besoin d'avoir 25 %, 25 % et 50%. sauriez-vous adapter ce design ???
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
unbewusst.sein
Sergio wrote:
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)
Sergio <serge.laposte@delbono.net.invalid> wrote:
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)
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)
Sergio
Le 23/08/2011 16:46, Sergio a écrit :
Le 23/08/2011 16:21, Une Bévue a écrit :
j'aimerais avoir un design en 3 colonnes un peu comme sur la page : <http://matthewjamestaylor.com/blog/perfect-3-column.htm> mais au lieu d'avoir; de gauche à droite; 25 %, 50 % et 25%, j'ai besoin d'avoir 25 %, 25 % et 50%. sauriez-vous adapter ce design ???
Ben, tu inverses les propriétés de col2 et col3, non ?
...Ou tu regardes le design juste à côté : http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm (en fait 50 / 25 / 25)
-- Serge http://leserged.online.fr/ Mon blog: http://cahierdesergio.free.fr/ Soutenez le libre: http://www.framasoft.org
Le 23/08/2011 16:46, Sergio a écrit :
Le 23/08/2011 16:21, Une Bévue a écrit :
j'aimerais avoir un design en 3 colonnes un peu comme sur la page :
<http://matthewjamestaylor.com/blog/perfect-3-column.htm>
mais au lieu d'avoir; de gauche à droite; 25 %, 50 % et 25%, j'ai besoin
d'avoir 25 %, 25 % et 50%.
sauriez-vous adapter ce design ???
Ben, tu inverses les propriétés de col2 et col3, non ?
...Ou tu regardes le design juste à côté :
http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm
(en fait 50 / 25 / 25)
--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
j'aimerais avoir un design en 3 colonnes un peu comme sur la page : <http://matthewjamestaylor.com/blog/perfect-3-column.htm> mais au lieu d'avoir; de gauche à droite; 25 %, 50 % et 25%, j'ai besoin d'avoir 25 %, 25 % et 50%. sauriez-vous adapter ce design ???
Ben, tu inverses les propriétés de col2 et col3, non ?
...Ou tu regardes le design juste à côté : http://matthewjamestaylor.com/blog/perfect-3-column-blog-style.htm (en fait 50 / 25 / 25)
-- Serge http://leserged.online.fr/ Mon blog: http://cahierdesergio.free.fr/ Soutenez le libre: http://www.framasoft.org
unbewusst.sein
Sergio wrote:
..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 -- « C'est pas parce qu'on a rien à dire qu'il faut fermer sa gueule. » (Michel Audiard)
Sergio <serge.laposte@delbono.net.invalid> wrote:
..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
--
« 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
ah ouais, merci, ptet que ca m'aidera mieux à faire un 25 / 25 / 50 je regarde ca -- « C'est pas parce qu'on a rien à dire qu'il faut fermer sa gueule. » (Michel Audiard)
unbewusst.sein
Sergio wrote:
...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) */ }
-- « C'est pas parce qu'on a rien à dire qu'il faut fermer sa gueule. » (Michel Audiard)
Sergio <serge.laposte@delbono.net.invalid> wrote:
...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) */
}
--
« 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)
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) */ }
-- « C'est pas parce qu'on a rien à dire qu'il faut fermer sa gueule. » (Michel Audiard)
unbewusst.sein
Sergio wrote:
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 % :
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)
Sergio <serge.laposte@delbono.net.invalid> wrote:
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 % :
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 % :
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... -- « Les créanciers ont meilleure mémoire que les débiteurs. » (Benjamin Franklin)
Dominique Ottello
(Une Bévue) écrivait :
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
unbewusst.sein@fai.invalid (Une Bévue) écrivait :
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
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
unbewusst.sein
Dominique Ottello wrote:
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 ?
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)
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 ?
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)
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 ?
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)
SAM
Le 23/08/11 17:39, Une Bévue a écrit :
Sergio wrote:
...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>
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
Et ... ne pas me demander pourquoi ! Ces css sont trop tordues !
-- Stéphane Moriaux avec/with iMac-intel
Le 23/08/11 17:39, Une Bévue a écrit :
Sergio<serge.laposte@delbono.net.invalid> wrote:
...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>
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
...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>
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