Des débuts chaotiques en CSS

Des débuts chaotiques en CSS - HTML/CSS - Programmation

Marsh Posté le 02-02-2007 à 18:47:08    

Bonjour à tous,
 
Je découvre avec difficulté les CSS.
J'en suis à mes débuts, et je voudrai mettre 1 cadre principal gris, et ensuite 4 cadres réparties en carré au sein du premier cadre ! ça ne me parrait pas compliqué et pourtant ! :)
 
J'ai commencé en créant mon cadre principal puis 2 cadres cote à cote dans celui-ci.
J'ai pondu le code suivant :

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <HTML>
  3. <HEAD>
  4.    <TITLE>Avec CSS</TITLE>
  5.    <style type="text/css">
  6. <!--
  7. body {
  8. background-color : white;
  9. text-align: center;
  10. margin: auto;
  11. }
  12. #container {
  13.    margin: 0 auto;
  14.    border-style:solid;
  15.    border-width:2px;
  16.    border-color:silver;
  17.    width: 1000px;
  18.    height: 800px;
  19.    background-color: silver;
  20.    }
  22. #bandeaugauche {
  23.    margin-top:100px ;
  24.    margin-left:10px;
  25.    border-style:solid;
  26.    border-color:silver;
  27.    border-width:2px;
  28.    width:200px;
  29.    height: 650px;
  30.    background: url(images/bandegch.jpg) no-repeat;
  31. }
  33. #contenu {
  34.    margin-top:0px ;
  35.    margin-left:200px;
  36.    border-style:solid;
  37.    border-width:2px;
  38.    border-color:black;
  39.    width:700px;
  40.    height: 650px;
  41.    background-color: red;
  42. }
  43. -->
  45. </style>
  47. </HEAD>
  48. <BODY>
  49. <div id="container">
  50.    <div id="bandeaugauche">
  51.    <div id="contenu">
  52. </div>
  53. </div>
  54. </div>
  55. </BODY>
  56. </HTML>


 
2 trucs me chagrinent :
- Mes emboitages de DIV me semble bizzare, je préfèrerai ouvrir un div, le fermer, en rouvrir un et le refermer, hors si je fais ça, la mise en page par en couille ! ;)
- pourquoi suis-je obligé de mettre une bordure à mon id container, pour que ça marche. Si je décide de mettre

Code :
  1. #container {
  2.    margin: 0 auto;
  3.    border-style:solid;
  4.    border-width:0px;
  5.    border-color:silver;
  6.    width: 1000px;
  7.    height: 800px;
  8.    background-color: silver;
  9.    }


Alors le code est complètement différent avec mon cadre principal qui se décale vers le bas !
 
Si qq1 voulait bein me conseiller... ça serait cool !
 
Merci !

Reply

Marsh Posté le 02-02-2007 à 18:47:08   

Reply

Sujets relatifs:

Leave a Replay

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