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 :
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <HTML>
- <HEAD>
- <TITLE>Avec CSS</TITLE>
- <style type="text/css">
- <!--
- body {
- background-color : white;
- text-align: center;
- margin: auto;
- }
- #container {
- margin: 0 auto;
- border-style:solid;
- border-width:2px;
- border-color:silver;
- width: 1000px;
- height: 800px;
- background-color: silver;
- }
- #bandeaugauche {
- margin-top:100px ;
- margin-left:10px;
- border-style:solid;
- border-color:silver;
- border-width:2px;
- width:200px;
- height: 650px;
- background: url(images/bandegch.jpg) no-repeat;
- }
- #contenu {
- margin-top:0px ;
- margin-left:200px;
- border-style:solid;
- border-width:2px;
- border-color:black;
- width:700px;
- height: 650px;
- background-color: red;
- }
- -->
- </style>
- </HEAD>
- <BODY>
- <div id="container">
- <div id="bandeaugauche">
- <div id="contenu">
- </div>
- </div>
- </div>
- </BODY>
- </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 :
- #container {
- margin: 0 auto;
- border-style:solid;
- border-width:0px;
- border-color:silver;
- width: 1000px;
- height: 800px;
- background-color: silver;
- }
|
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 !