Creer un DIV prenant la totalité de l'ecran avec une marge

Creer un DIV prenant la totalité de l'ecran avec une marge - HTML/CSS - Programmation

Marsh Posté le 02-06-2005 à 10:44:31    

Bonjour
 
j'aimerais créer un cadre calée de chaque coté a 20 pixles du bord seulement je n'ai trouvé aucun moyen de le faire.
si je mets seulement  

Code :
  1. left: 20px;
  2. right:20px;


le cadre prends seulement la partie utilisée par le texte.
j'ai aussi essayé avec

Code :
  1. margin: 20px;
  2. width:100%;


et ca ne marche pas ...
il existe une solution qui marche ?


---------------
Tweekers : Tweeks 4 Geeks
Reply

Marsh Posté le 02-06-2005 à 10:44:31   

Reply

Marsh Posté le 02-06-2005 à 10:45:49    

padding sur body ?
 

Code :
  1. body { padding-left: 20px; }

Reply

Marsh Posté le 02-06-2005 à 10:58:43    

ca ne marche pas ...
 
j'ai l'impression qu'il doit y avoir une largueur toujours plus ou moins fixée pour les cadres.  
si je met width:100%; le cadre dépasse de la fenetre.  
si je ne renseigne pas la largueur le cadre fait quelques pixels de large  :(


---------------
Tweekers : Tweeks 4 Geeks
Reply

Marsh Posté le 02-06-2005 à 11:05:13    

strycore a écrit :

Bonjour
 
j'aimerais créer un cadre calée de chaque coté a 20 pixles du bord seulement je n'ai trouvé aucun moyen de le faire.
si je mets seulement  

Code :
  1. left: 20px;
  2. right:20px;


le cadre prends seulement la partie utilisée par le texte.
j'ai aussi essayé avec

Code :
  1. margin: 20px;
  2. width:100%;


et ca ne marche pas ...
il existe une solution qui marche ?


 [:mlc]  

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>SICLID Cetelem</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            div {
                background-color: red;
                margin: 0 20px;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div>
            test
        </div>
    </body>
</html>


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 02-06-2005 à 11:55:49    

ok dans ce cas ca marche  
mais des qu'on rajoute un position: absolute; ca ne marche plus
 
voila le code CSS que j'utilise en integralité : 2 cadres de tailles differentes sont superposés.
 

Code :
  1. .titrebg{
  2. font-family: Arial, Helvetica, sans-serif;
  3. background-color: #003366;
  4. position:absolute;
  5. display: table;
  6.     height:150px;
  7. top: 20px;
  8. left: 20px;
  9. right:20px;
  10. z-index:2;
  11. border: solid 1px;
  12. background-color: #003366;
  13. }
  14. .titre {
  15. font-family: Arial, Helvetica, sans-serif;
  16. background-color: #FFFFFF;
  17. font-size: x-large;
  18. display: table;
  19. position: absolute;
  20. margin:25px;
  21. height:140px;
  22. z-index:3;
  23. }


---------------
Tweekers : Tweeks 4 Geeks
Reply

Marsh Posté le 02-06-2005 à 11:59:56    

C'est quoi cette superposition à la con? :sweat:


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 02-06-2005 à 18:24:15    

ah oui C une belle superposition à la con.
 
ca sert à quoi ??
 
on peut avoir le code HTML correspondant à ta magnifique superposition ??

Reply

Marsh Posté le 02-06-2005 à 23:28:49    

oui en effet c une superposition a la con, ca date d'il ya quelques semaines qunad j'exprimentais avec le CSS ....
demain je vire ca et je remplace par une bordure.
 
Toujours est il que ca ne resouds pas mon probleme
mais je pense que je vais abandonner l'idée ...  
la plupart des sites non pas une mise en page dynamique avec la taille des fenetres. (bon je prends pas le forum HFR comme exemple ;) ni la quasi totalité des forums...)
Je vais faire une mise en page fixe ce sera bien mieux
 
(mais je suis toujours preneur pour des solutions si elles existent)


---------------
Tweekers : Tweeks 4 Geeks
Reply

Marsh Posté le 03-06-2005 à 00:51:50    

bah vi, ça existe, la preuve :  
 
http://www.simplebits.com/
 
(clique sur la flèche verte en haut à droite, ça permet de passer d'un design fluide a un design fixe)
 
http://pompage.net/articles


---------------
my flick r - Just Tab it !
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed