Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1524 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Site deux colonnes

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[CSS] Site deux colonnes

n°492289
Haacheron
For Russ
Posté le 20-08-2003 à 12:23:01  profilanswer
 

Je souhaiterais developper un site en deux parties: un menu de 150 pixel de large et un contenu à sa droite qui prennent le reste de la page.
 
- est-il possible de le faire en 'float' (sachant que le positionnement me convient, mais je n'arrive pas à faire que le 'content' prenne toute la place restante)
 
- j'obtiens le resultat escompté avec l'aperçu de Dreamweaver en me servant des propriétés margin-left/right, mais elles sont ignorées sous IE et Mozilla, une raison à ça?

Code :
  1. <div class="column_left">
  2.  Coming Soon<br><br>
  3.  News<br><br>
  4.  Workshop<br><br>
  5.  Mail<br><br>
  6. </div>
  8. <div class="content">
  9. test<br>
  10. blabla<br>
  11. bidule
  12. </div>


 

Code :
  1. body {
  2. background-color : #FFFFFF;
  3.     font-family : Verdana;
  4. font-size : 8pt;
  5. color : black;
  6. text-align: center;}
  8. .column_left {
  9. float: left;
  10. width: 150px;
  11. border-right: #000000 1px solid;
  12. border-top: #000000 1px solid;
  13. border-left: #000000 1px solid;
  14. border-bottom: #000000 1px solid;
  15. margin: 1px;
  16. padding : 1px;
  17. text-align: left;}
  19. .content {
  20. margin-left:155px;
  21. margin-right:0px;
  22. border-right: #000000 1px solid;
  23. border-top: #000000 1px solid;
  24. border-left: #000000 1px solid;
  25. border-bottom: #000000 1px solid;
  26. margin: 1px;
  27. padding : 1px;}


---------------
"Follow me Sons of Russ, this night our enemies shall feel the fangs of the Wolf"
mood
Publicité
Posté le 20-08-2003 à 12:23:01  profilanswer
 

n°492301
urd-sama
waste of space
Posté le 20-08-2003 à 12:38:49  profilanswer
 

je crois qu'il faut que tu fasse un div conteneur des deux de ton site, d'appliquer un largeur de 100%. ensuite tu mets la div content en width:auto
tout ceci est à confirmer, mais c'est ce que j'ai utilisé pour mon site.

n°492309
gizmo
Posté le 20-08-2003 à 12:46:58  profilanswer
 

pas besoin du conteneur dans son cas. Par contre, les underscores, c'est pas spécialement bien supporté dans les CSS.

n°492312
Haacheron
For Russ
Posté le 20-08-2003 à 12:52:54  profilanswer
 

Urd-sama -> je viens d'essayer le width auto (avec ou sans Div conteneur) mais mon div 'content' s'adapte uniquement à son contenu et ne prend toujours pas toute la place libre.
 
Gizmo -> ok, je modifie ça (mais je n'ai pas encore eu de problèmes à cause de ça par le passé)


---------------
"Follow me Sons of Russ, this night our enemies shall feel the fangs of the Wolf"
n°492323
urd-sama
waste of space
Posté le 20-08-2003 à 13:03:30  profilanswer
 

Haacheron a écrit :

Urd-sama -> je viens d'essayer le width auto (avec ou sans Div conteneur) mais mon div 'content' s'adapte uniquement à son contenu et ne prend toujours pas toute la place libre.


hum... [:urd]
voici un extrait de mes CSS, je te laisse jeter un oeil:

Code :
  1. div#main {
  2.   margin-top: 15px;
  3.   margin-bottom: 15px;
  4. }
  5. div#left {
  6.   float: left;
  7.   background-color: #EFAAE7;
  8.   border-right: 3px solid #DE82D6;
  9.   border-top: 3px solid #DE82D6;
  10.   border-bottom: 3px solid #DE82D6;
  11.   width: 150px;
  12.   padding-top: 10px;
  13.   padding-bottom: 10px;
  14.   margin-bottom: 20px;
  15.   margin-right: 10px;
  16. }
  17. div#middle {
  18.   padding-left: 10px;
  19.   padding-bottom: 30px;
  20.   width: 95%;
  21. }
  22. div#main > div#middle {
  23.    padding-left: 160px;
  24.    width: auto;
  25. }

n°492336
Haacheron
For Russ
Posté le 20-08-2003 à 13:20:08  profilanswer
 

Merci beaucoup, c'est bon maintenant  :jap:  
Je m'etais melangé les pinceaux avec le width=auto


---------------
"Follow me Sons of Russ, this night our enemies shall feel the fangs of the Wolf"
n°492349
Haacheron
For Russ
Posté le 20-08-2003 à 13:41:18  profilanswer
 

Arf, j'avais tester le code sous IE, mais sous Mozilla ça deborde  :cry: Comment peut-on forcer a ce que ce dernier ne le fasse pas (je me suis servi du css d'Urd-sama)  
 
Sous IE
http://adsweb.free.fr/ie.jpg
 
Sous Mozilla
http://adsweb.free.fr/moz.jpg


---------------
"Follow me Sons of Russ, this night our enemies shall feel the fangs of the Wolf"
n°492353
gizmo
Posté le 20-08-2003 à 13:49:25  profilanswer
 

mets un margin-left pour le second

n°492354
urd-sama
waste of space
Posté le 20-08-2003 à 13:49:45  profilanswer
 

c'est ce css là qui empêche ton problème:

Code :
  1. div#main > div#middle {
  2.        padding-left: 160px;
  3.        width: auto;
  4.    }


il ne sera interprété que par moz normalement

n°495214
gm_superst​ar
Appelez-moi Super
Posté le 23-08-2003 à 12:44:36  profilanswer
 

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [CSS] Site deux colonnes

 

Sujets relatifs
[XHTML + CSS] Utilisation de la property css background[XHTML CSS] Passer site de table en div
Prix d'un site comme ca..(voir le topic)[CSS] chevauchement de divs
vérifier qu'un site est accessiblerecherche site interpolation
Menu pour site webCSS et passage de parametres
Tutoriels et exercices CSS 
Plus de sujets relatifs à : [CSS] Site deux colonnes

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.055 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR