Je me replonge dans des tests d'affichage 3 colonnes...
J'aimerais arriver à :
- Une colonne à gauche de 150px de large
- 2 autres colonnes à droite qui se partagent l'espace restant à 50 %
chacune.
J'arrive à ce que je veux avec IE 5.0 Win mais pas avec Firefox.
Vous n'auriez pas un code dans votre sac, ou un exemple ?
Merci.
--
A'tchao
Le Fou
http://www.ffessm-cd84.com/
http://ehiller.club.fr/
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
Dominique Ottello
Je me replonge dans des tests d'affichage 3 colonnes... J'aimerais arriver à : - Une colonne à gauche de 150px de large - 2 autres colonnes à droite qui se partagent l'espace restant à 50 % chacune.
Un (petit) exemple : http://aviatechno.free.fr/biblio.php La colonne à gauche fait, coïncidence, 150px de large. Fonctionne sous Firefox, Mozilla, Opera et IE6
Le CSS :
/* MENU gauche en position absolute */ div.menu_pri_left, {position:absolute; top:0;left:0;width:150px;height:auto;background-color:#f1ead8; margin:0;padding:0;overflow:visible; z-index:2;} /* Partie droite avec menu principal en partie gauche */ div.menu_pri_right, {position:absolute; top:0;left:152px;height:auto;background-color:#f1ead8; margin:0;padding:0;overflow:visible; z-index:1;}
/* A 49.3% au lieu de 50% pour IE */ div.fl50pc {float:left;display:inline; width:49.3%;margin-left:0;padding:0; overflow:auto;}
/* Mise à 100 % de la largeur conteneur */ /* par rapport au conteneur supérieur */ div.l100pc {margin-left:0;padding:0; overflow:visible;} /* Correction de bug IE sauf pour IE-Mac */ *html .l100pc {height:1%;} /* Fin de correction */
une partie du code HTML (je fais grâce des entêtes)
<body> <div class='menu_pri_left'> Colonne de gauche 150px </div> <div class="menu_pri_right"> Partie droite <div class="l100pc"> Conteneur 100% partie droite <div class="fl50pc"> 50% de la partie droite </div> <div class="fl50pc"> 50% de la partie droite </div> </div> </body>
On peut sans doute faire mieux. -- Aujourd'hui, l'idéal du progrès est remplacé par l'idéal de l'innovation : il ne s'agit pas que ce soit mieux, il s'agit seulement que ce soit nouveau, même si c'est pire qu'avant et cela de toute évidence. Montherlant Technologie aéronautique : http://aviatechno.free.fr
Je me replonge dans des tests d'affichage 3 colonnes...
J'aimerais arriver à :
- Une colonne à gauche de 150px de large
- 2 autres colonnes à droite qui se partagent l'espace restant à 50 %
chacune.
Un (petit) exemple : http://aviatechno.free.fr/biblio.php
La colonne à gauche fait, coïncidence, 150px de large.
Fonctionne sous Firefox, Mozilla, Opera et IE6
Le CSS :
/* MENU gauche en position absolute */
div.menu_pri_left, {position:absolute;
top:0;left:0;width:150px;height:auto;background-color:#f1ead8;
margin:0;padding:0;overflow:visible;
z-index:2;}
/* Partie droite avec menu principal en partie gauche */
div.menu_pri_right, {position:absolute;
top:0;left:152px;height:auto;background-color:#f1ead8;
margin:0;padding:0;overflow:visible;
z-index:1;}
/* A 49.3% au lieu de 50% pour IE */
div.fl50pc {float:left;display:inline;
width:49.3%;margin-left:0;padding:0;
overflow:auto;}
/* Mise à 100 % de la largeur conteneur */
/* par rapport au conteneur supérieur */
div.l100pc {margin-left:0;padding:0;
overflow:visible;}
/* Correction de bug IE sauf pour IE-Mac */
*html .l100pc {height:1%;}
/* Fin de correction */
une partie du code HTML (je fais grâce des entêtes)
<body>
<div class='menu_pri_left'>
Colonne de gauche 150px
</div>
<div class="menu_pri_right">
Partie droite
<div class="l100pc">
Conteneur 100% partie droite
<div class="fl50pc">
50% de la partie droite
</div>
<div class="fl50pc">
50% de la partie droite
</div>
</div>
</body>
On peut sans doute faire mieux.
--
Aujourd'hui, l'idéal du progrès est remplacé par l'idéal de l'innovation :
il ne s'agit pas que ce soit mieux, il s'agit seulement que ce soit nouveau,
même si c'est pire qu'avant et cela de toute évidence. Montherlant
Technologie aéronautique : http://aviatechno.free.fr
Je me replonge dans des tests d'affichage 3 colonnes... J'aimerais arriver à : - Une colonne à gauche de 150px de large - 2 autres colonnes à droite qui se partagent l'espace restant à 50 % chacune.
Un (petit) exemple : http://aviatechno.free.fr/biblio.php La colonne à gauche fait, coïncidence, 150px de large. Fonctionne sous Firefox, Mozilla, Opera et IE6
Le CSS :
/* MENU gauche en position absolute */ div.menu_pri_left, {position:absolute; top:0;left:0;width:150px;height:auto;background-color:#f1ead8; margin:0;padding:0;overflow:visible; z-index:2;} /* Partie droite avec menu principal en partie gauche */ div.menu_pri_right, {position:absolute; top:0;left:152px;height:auto;background-color:#f1ead8; margin:0;padding:0;overflow:visible; z-index:1;}
/* A 49.3% au lieu de 50% pour IE */ div.fl50pc {float:left;display:inline; width:49.3%;margin-left:0;padding:0; overflow:auto;}
/* Mise à 100 % de la largeur conteneur */ /* par rapport au conteneur supérieur */ div.l100pc {margin-left:0;padding:0; overflow:visible;} /* Correction de bug IE sauf pour IE-Mac */ *html .l100pc {height:1%;} /* Fin de correction */
une partie du code HTML (je fais grâce des entêtes)
<body> <div class='menu_pri_left'> Colonne de gauche 150px </div> <div class="menu_pri_right"> Partie droite <div class="l100pc"> Conteneur 100% partie droite <div class="fl50pc"> 50% de la partie droite </div> <div class="fl50pc"> 50% de la partie droite </div> </div> </body>
On peut sans doute faire mieux. -- Aujourd'hui, l'idéal du progrès est remplacé par l'idéal de l'innovation : il ne s'agit pas que ce soit mieux, il s'agit seulement que ce soit nouveau, même si c'est pire qu'avant et cela de toute évidence. Montherlant Technologie aéronautique : http://aviatechno.free.fr
ASM
Le Fou a écrit :
Vous n'auriez pas un code dans votre sac, ou un exemple ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd"> <html> <head> <title>test</title> <style type="text/css"> #gauche { position: absolute; width: 150px; border: 1px solid black} #droite { margin-left: 160px; border: 1px solid blue } #un, #deux { float: left; width: 48%; border: 1px solid red } #deux { margin-left: 2% } </style> </head> <body> <div id="gauche"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> </div> <div id="droite"> <div id="un"> <p> Sed condimentum interdum ipsum. </p> </div> <div id="deux"> <p> Mauris nunc. Pellentesque lorem. </p> </div> </div> </body> </html>
-- Stephane Moriaux et son [moins] vieux Mac
Le Fou a écrit :
Vous n'auriez pas un code dans votre sac, ou un exemple ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
#gauche { position: absolute; width: 150px; border: 1px solid black}
#droite { margin-left: 160px; border: 1px solid blue }
#un, #deux { float: left; width: 48%; border: 1px solid red }
#deux { margin-left: 2% }
</style>
</head>
<body>
<div id="gauche">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</p>
</div>
<div id="droite">
<div id="un">
<p>
Sed condimentum interdum ipsum.
</p>
</div>
<div id="deux">
<p>
Mauris nunc. Pellentesque lorem.
</p>
</div>
</div>
</body>
</html>
Vous n'auriez pas un code dans votre sac, ou un exemple ?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd"> <html> <head> <title>test</title> <style type="text/css"> #gauche { position: absolute; width: 150px; border: 1px solid black} #droite { margin-left: 160px; border: 1px solid blue } #un, #deux { float: left; width: 48%; border: 1px solid red } #deux { margin-left: 2% } </style> </head> <body> <div id="gauche"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> </div> <div id="droite"> <div id="un"> <p> Sed condimentum interdum ipsum. </p> </div> <div id="deux"> <p> Mauris nunc. Pellentesque lorem. </p> </div> </div> </body> </html>
-- Stephane Moriaux et son [moins] vieux Mac
Le Fou
Dominique Ottello a écrit
> Le Fou : > Je me replonge dans des tests d'affichage 3 colonnes... > J'aimerais arriver à : > - Une colonne à gauche de 150px de large > - 2 autres colonnes à droite qui se partagent l'espace restant à 50 % > chacune.
Un (petit) exemple : http://aviatechno.free.fr/biblio.php La colonne à gauche fait, coïncidence, 150px de large. Fonctionne sous Firefox, Mozilla, Opera et IE6
Damned !... C'est exactement ce que je cherche. Je pars de ce pas étudier le code ;-) Merci.
-- A'tchao
Le Fou http://www.ffessm-cd84.com/ http://ehiller.club.fr/
Dominique Ottello <air.intakes@fra.fr.invalid> a écrit
> Le Fou :
> Je me replonge dans des tests d'affichage 3 colonnes...
> J'aimerais arriver à :
> - Une colonne à gauche de 150px de large
> - 2 autres colonnes à droite qui se partagent l'espace restant à 50 %
> chacune.
Un (petit) exemple : http://aviatechno.free.fr/biblio.php
La colonne à gauche fait, coïncidence, 150px de large.
Fonctionne sous Firefox, Mozilla, Opera et IE6
Damned !... C'est exactement ce que je cherche.
Je pars de ce pas étudier le code ;-)
Merci.
--
A'tchao
Le Fou
http://www.ffessm-cd84.com/
http://ehiller.club.fr/
> Le Fou : > Je me replonge dans des tests d'affichage 3 colonnes... > J'aimerais arriver à : > - Une colonne à gauche de 150px de large > - 2 autres colonnes à droite qui se partagent l'espace restant à 50 % > chacune.
Un (petit) exemple : http://aviatechno.free.fr/biblio.php La colonne à gauche fait, coïncidence, 150px de large. Fonctionne sous Firefox, Mozilla, Opera et IE6
Damned !... C'est exactement ce que je cherche. Je pars de ce pas étudier le code ;-) Merci.
-- A'tchao
Le Fou http://www.ffessm-cd84.com/ http://ehiller.club.fr/
Le Fou
ASM a écrit
Le Fou a écrit : > Vous n'auriez pas un code dans votre sac, ou un exemple ?
[Réponse de ASM]
Ca fonctionne impec avec Firefox mais pas avec IE 5.0 Win. C'est l'inverse de ce que je sais faire... Je vais faire un mix des 2 ;-) Merci quand-même, je le retiens.
-- A'tchao
Le Fou http://www.ffessm-cd84.com/ http://ehiller.club.fr/
ASM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> a écrit
Le Fou a écrit :
> Vous n'auriez pas un code dans votre sac, ou un exemple ?
[Réponse de ASM]
Ca fonctionne impec avec Firefox mais pas avec IE 5.0 Win.
C'est l'inverse de ce que je sais faire... Je vais faire un mix des 2 ;-)
Merci quand-même, je le retiens.
--
A'tchao
Le Fou
http://www.ffessm-cd84.com/
http://ehiller.club.fr/
Le Fou a écrit : > Vous n'auriez pas un code dans votre sac, ou un exemple ?
[Réponse de ASM]
Ca fonctionne impec avec Firefox mais pas avec IE 5.0 Win. C'est l'inverse de ce que je sais faire... Je vais faire un mix des 2 ;-) Merci quand-même, je le retiens.
-- A'tchao
Le Fou http://www.ffessm-cd84.com/ http://ehiller.club.fr/
christophe C
Le Fou a écrit :
Salut,
Je me replonge dans des tests d'affichage 3 colonnes... J'aimerais arriver à : - Une colonne à gauche de 150px de large - 2 autres colonnes à droite qui se partagent l'espace restant à 50 % chacune.
J'arrive à ce que je veux avec IE 5.0 Win mais pas avec Firefox. Vous n'auriez pas un code dans votre sac, ou un exemple ? Merci.
-- A'tchao
Le Fou http://www.ffessm-cd84.com/ http://ehiller.club.fr/
-- -> http://batraciens.net/ - "BATRACIENS" : Articles et photos sur l'élevage et la maintenance des batraciens, aquatiques ou terrestres. Petites annonces. -> http://css-astuces.batraciens.net/ - "CSS-ASTUCES" : Trucs et astuces de codage CSS pour enrichir vos pages Web. -> http://www.priceminister.com/boutique/batra3 - Je vend mes livres SF d'occasion.
Le Fou a écrit :
Salut,
Je me replonge dans des tests d'affichage 3 colonnes...
J'aimerais arriver à :
- Une colonne à gauche de 150px de large
- 2 autres colonnes à droite qui se partagent l'espace restant à 50 %
chacune.
J'arrive à ce que je veux avec IE 5.0 Win mais pas avec Firefox.
Vous n'auriez pas un code dans votre sac, ou un exemple ?
Merci.
--
A'tchao
Le Fou
http://www.ffessm-cd84.com/
http://ehiller.club.fr/
--
-> http://batraciens.net/ - "BATRACIENS" : Articles et photos sur
l'élevage et la maintenance des batraciens, aquatiques ou terrestres.
Petites annonces.
-> http://css-astuces.batraciens.net/ - "CSS-ASTUCES" : Trucs et astuces
de codage CSS pour enrichir vos pages Web.
-> http://www.priceminister.com/boutique/batra3 - Je vend mes livres SF
d'occasion.
Je me replonge dans des tests d'affichage 3 colonnes... J'aimerais arriver à : - Une colonne à gauche de 150px de large - 2 autres colonnes à droite qui se partagent l'espace restant à 50 % chacune.
J'arrive à ce que je veux avec IE 5.0 Win mais pas avec Firefox. Vous n'auriez pas un code dans votre sac, ou un exemple ? Merci.
-- A'tchao
Le Fou http://www.ffessm-cd84.com/ http://ehiller.club.fr/
-- -> http://batraciens.net/ - "BATRACIENS" : Articles et photos sur l'élevage et la maintenance des batraciens, aquatiques ou terrestres. Petites annonces. -> http://css-astuces.batraciens.net/ - "CSS-ASTUCES" : Trucs et astuces de codage CSS pour enrichir vos pages Web. -> http://www.priceminister.com/boutique/batra3 - Je vend mes livres SF d'occasion.
Le Fou
christophe C a écrit
Le Fou a écrit : > - Une colonne à gauche de 150px de large > - 2 autres colonnes à droite qui se partagent l'espace restant à 50 % > chacune.
Je connais, j'ai ton site dans mon bookmark ;-) Comme tu dis, c'est pas le top avec IE 5.0... Merci quand-même, je vais m'en inspirer.
en fait, quand on ne connait pas quelle colonne est la plus grande, ou qu'on veut des effets de mise en page particuliers, le tableau reste la meilleur solution pour le pb des 3 colonnes. C'est un truc que les CSS gèrent de façon trop complexe, avec trop de pb d'implémentation.
-- -> http://batraciens.net/ - "BATRACIENS" : Articles et photos sur l'élevage et la maintenance des batraciens, aquatiques ou terrestres. Petites annonces. -> http://css-astuces.batraciens.net/ - "CSS-ASTUCES" : Trucs et astuces de codage CSS pour enrichir vos pages Web. -> http://www.priceminister.com/boutique/batra3 - Je vend mes livres SF d'occasion.
Le Fou a écrit :
christophe C <nospamm@christophe.invalide> a écrit
Le Fou a écrit :
- Une colonne à gauche de 150px de large - 2 autres colonnes à
droite qui se partagent l'espace restant à 50 % chacune.
Je connais, j'ai ton site dans mon bookmark ;-) Comme tu dis, c'est
pas le top avec IE 5.0... Merci quand-même, je vais m'en inspirer.
en fait, quand on ne connait pas quelle colonne est la plus grande, ou
qu'on veut des effets de mise en page particuliers, le tableau reste la
meilleur solution pour le pb des 3 colonnes. C'est un truc que les CSS
gèrent de façon trop complexe, avec trop de pb d'implémentation.
--
-> http://batraciens.net/ - "BATRACIENS" : Articles et photos sur
l'élevage et la maintenance des batraciens, aquatiques ou terrestres.
Petites annonces.
-> http://css-astuces.batraciens.net/ - "CSS-ASTUCES" : Trucs et astuces
de codage CSS pour enrichir vos pages Web.
-> http://www.priceminister.com/boutique/batra3 - Je vend mes livres SF
d'occasion.
Je connais, j'ai ton site dans mon bookmark ;-) Comme tu dis, c'est pas le top avec IE 5.0... Merci quand-même, je vais m'en inspirer.
en fait, quand on ne connait pas quelle colonne est la plus grande, ou qu'on veut des effets de mise en page particuliers, le tableau reste la meilleur solution pour le pb des 3 colonnes. C'est un truc que les CSS gèrent de façon trop complexe, avec trop de pb d'implémentation.
-- -> http://batraciens.net/ - "BATRACIENS" : Articles et photos sur l'élevage et la maintenance des batraciens, aquatiques ou terrestres. Petites annonces. -> http://css-astuces.batraciens.net/ - "CSS-ASTUCES" : Trucs et astuces de codage CSS pour enrichir vos pages Web. -> http://www.priceminister.com/boutique/batra3 - Je vend mes livres SF d'occasion.
Le Fou
Jean-Marie a écrit
Cela te sera peut être utile: http://thenoodleincident.com/tutorials/box_lesson/boxes.html
Oui mais non. Rien qui ne corresponde à ce que je veux faire. Merci quand-même.
-- A'tchao
Le Fou http://www.ffessm-cd84.com/ http://ehiller.club.fr/
Jean-Marie <plum-news@club-internet.fr> a écrit
Cela te sera peut être utile:
http://thenoodleincident.com/tutorials/box_lesson/boxes.html
Oui mais non. Rien qui ne corresponde à ce que je veux faire.
Merci quand-même.
--
A'tchao
Le Fou
http://www.ffessm-cd84.com/
http://ehiller.club.fr/
