Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage PHP design 3 colonnes

design 3 colonnes

25 réponses
Avatar
unbewusst.sein
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)
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3
Avatar
SAM
Le 23/08/11 19:53, Une Bévue a écrit :
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 ?

j'en suis là, côté css :
body {
margin: 0;
}
div#header {



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
Avatar
unbewusst.sein
SAM wrote:

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)
Avatar
unbewusst.sein
SAM wrote:

> 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)
Avatar
SAM
Le 24/08/11 08:21, Une Bévue a écrit :
http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/blog-style-3-column-li
quid-layout-percentage/stephane_moriaux.html




Firefox ne peut établir de connexion avec le serveur à l'adresse
[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9].

--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
Le 24/08/11 08:21, Une Bévue a écrit :
SAM wrote:

yapa un fichier qque part ?



si, il est accessible en IPV6 :
http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/sqlite3/landp.html



Je sais pas faire (accès IPv6)

--
Stéphane Moriaux avec/with iMac-intel
Avatar
yamo'
Salut,

SAM a tapoté, le 24/08/2011 10:14:
Le 24/08/11 08:21, Une Bévue a écrit :
SAM wrote:

yapa un fichier qque part ?



si, il est accessible en IPV6 :
http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/sqlite3/landp.html



Je sais pas faire (accès IPv6)



Pas mieux, et c'est comme ça que les liens doivent se donner en ipv6?

Si c'est ça, ça déconne un peu avec Seamonkey 2.3.1!

Copie et suivi vers fr.comp.usenet.lecteurs-de-news


--
Stéphane

<http://pasdenom.info/fortune/>

La science ne se soucie ni de plaire, ni de déplaire, elle est
inhumaine.
-+- Jacques Anatole François Thibault dit Anatole France
(1844-1924) -+-
Avatar
SAM
Le 24/08/11 08:21, Une Bévue a écrit :

encore mieux qu'alsacréations, bravo !!!

mais bon; ca se chevauche :



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

--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
Le 24/08/11 10:24, yamo' a écrit :
Salut,

SAM a tapoté, le 24/08/2011 10:14:

accessible en IPV6 :
http://[2a01:0e35:8a4f:d5d0:0230:65ff:fe02:75b9]/sqlite3/landp.html



Je sais pas faire (accès IPv6)



Pas mieux, et c'est comme ça que les liens doivent se donner en ipv6?

Si c'est ça, ça déconne un peu avec Seamonkey 2.3.1!



« 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)

--
Stéphane Moriaux avec/with iMac-intel
Avatar
unbewusst.sein
SAM wrote:

« 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)
Avatar
SAM
Le 24/08/11 11:14, Une Bévue a écrit :
SAM wrote:

« actuellement pratiquement aucun fournisseur d'accès ne propose d'accès
IPv6 »



free...
en tk



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

--
Stéphane Moriaux avec/with iMac-intel
1 2 3