Mise en page CSS avec DIV
argecol
Messages postés
1
Statut
Membre
-
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention -
J'essaie de faire ma mise en page avec des divs mais ils ne se metten pas enface par exemple, moi je ne voudrais pas faire la mise en page avec des tableaux, je vais vous montrer mon code..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
#corp, #coursmenu, #autors, #tittle, #choix, #otionun, #optiondeux, #footer
{
padding:1px 0;
}
#corp
{
text-align:center;
max-with:100%;
margin:auto;
}
#coursmenu,
{
float:left;
width:50%;
}
#autors
{
float:right;
width:50%;
}
#tittle
{
text-align:center;
}
#choix
{
text-align:center;
}
#optionun
{
margin-left:50%;
height:200px;
}
#optiondeux
{
margin-right:50%;
height:200px;
}
#footer
{
text-align:center;
clear:both;
}
h1
{
color:blue;
font-size:120%;
}
h2
{
color:red;
text-align:left;
}
h3
{
color:green;
text-align:right;
font-style:italic;
}
h4
{
color:green;
text-align:center;
font-style:italic;
}
</style>
</head>
<body>
<div id="corp">
<div id="coursmenu">
<h2>Cours IFT1142<br />
Menu</h2>
</div>
<div class="autors">
<h3>Travail Pratique #1<br />
par vxcvxcvxcv<br />
et Gxvcvxvcxvc</h3>
</div>
<div id="tittle">
<h1>Restaurant Aux Délices du fgfdgdfg</h1>
</div>
<div id="choix">Votre choix:</div>
<!--FICHIER JAVASCRIPT EXTERNE -->
<script src="Tp1_JavaScript.js"></script></div>
<div id="optionun">
choisir
salade
escargot
</div>
<div id="optiondeux">
choisir
spaghetti
lasagne
</div>
<div id="tittle">
<div id="footer">
<hr />
<p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img alt="CSS Valide !"
src="http://jigsaw.w3.org/css-validator/images/vcss" style="border:0;width:88px;height:31px" /></a></p>
<p> <a href="http://validator.w3.org/check?uri=referer"><img width="88"
height="31" alt="Valid XHTML 1.0 Transitional" src="http://www.w3.org/Icons/valid-xhtml10" /></a>
</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
#corp, #coursmenu, #autors, #tittle, #choix, #otionun, #optiondeux, #footer
{
padding:1px 0;
}
#corp
{
text-align:center;
max-with:100%;
margin:auto;
}
#coursmenu,
{
float:left;
width:50%;
}
#autors
{
float:right;
width:50%;
}
#tittle
{
text-align:center;
}
#choix
{
text-align:center;
}
#optionun
{
margin-left:50%;
height:200px;
}
#optiondeux
{
margin-right:50%;
height:200px;
}
#footer
{
text-align:center;
clear:both;
}
h1
{
color:blue;
font-size:120%;
}
h2
{
color:red;
text-align:left;
}
h3
{
color:green;
text-align:right;
font-style:italic;
}
h4
{
color:green;
text-align:center;
font-style:italic;
}
</style>
</head>
<body>
<div id="corp">
<div id="coursmenu">
<h2>Cours IFT1142<br />
Menu</h2>
</div>
<div class="autors">
<h3>Travail Pratique #1<br />
par vxcvxcvxcv<br />
et Gxvcvxvcxvc</h3>
</div>
<div id="tittle">
<h1>Restaurant Aux Délices du fgfdgdfg</h1>
</div>
<div id="choix">Votre choix:</div>
<!--FICHIER JAVASCRIPT EXTERNE -->
<script src="Tp1_JavaScript.js"></script></div>
<div id="optionun">
choisir
salade
escargot
</div>
<div id="optiondeux">
choisir
spaghetti
lasagne
</div>
<div id="tittle">
<div id="footer">
<hr />
<p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img alt="CSS Valide !"
src="http://jigsaw.w3.org/css-validator/images/vcss" style="border:0;width:88px;height:31px" /></a></p>
<p> <a href="http://validator.w3.org/check?uri=referer"><img width="88"
height="31" alt="Valid XHTML 1.0 Transitional" src="http://www.w3.org/Icons/valid-xhtml10" /></a>
</p>
</div>
</div>
</body>
</html>
1 réponse
-
Salut
deja plusieurs erreurs
#coursmenu, virgule après coursmenu donc pas pris en charge
#autors dans le css mais dans le html div class="autors" ce devrait être une ID
les optionun et optiondeux pas bien margées (css)
dans le html le div corps est fermé au milieu de la page et pas à la fin
bon comme je suis gentil et que ca m'a pris 5 mn a corriger et que tu as déjà essayé de faire le truc et que tu n'étais pas loin de réussir voici le code complet qui te met en 2 colonnes etc
essaie de comprendre le pourquoi de tes erreurs en comparant
le code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style>
#corp, #coursmenu, #autors, #tittle, #choix, #otionun, #optiondeux, #footer
{
padding:1px 0;
}
#corp
{
text-align:center;
with:100%;
margin:0;
}
#coursmenu
{
float:left;
width:50%;
}
#autors
{
float:right;
width:50%;
}
#tittle
{
text-align:center;
clear:both;
}
#choix
{
text-align:center;
}
#optionun
{
width:50%;
height:200px;
float:left;
}
#optiondeux
{
margin-left:50%;
height:200px;
}
#footer
{
text-align:center;
}
#footer ul {
list-style-type:none;
margin:0;
padding:0;
}
#footer li {
display:inline;
margin : 10px;
text-align:center;
}
h1
{
color:blue;
font-size:120%;
}
h2
{
color:red;
text-align:left;
}
h3
{
color:green;
text-align:right;
font-style:italic;
}
h4
{
color:green;
text-align:center;
font-style:italic;
}
</style>
</head>
<body>
<div id="corp">
<div id="coursmenu">
<h2>Cours IFT1142<br />
Menu</h2>
</div>
<div id="autors">
<h3>Travail Pratique #1<br />
par vxcvxcvxcv<br />
et Gxvcvxvcxvc</h3>
</div>
<div id="tittle">
<h1>Restaurant Aux Délices du fgfdgdfg</h1>
</div>
<div id="choix">Votre choix:</div>
<!--FICHIER JAVASCRIPT EXTERNE -->
<script src="Tp1_JavaScript.js"></script>
<div id="optionun">
choisir
salade
escargot
</div>
<div id="optiondeux">
choisir
spaghetti
lasagne
</div>
<div id="tittle">
<div id="footer">
<ul>
<li>
<a href="http://jigsaw.w3.org/css-validator/check/referer"> <img alt="CSS Valide !"
src="http://jigsaw.w3.org/css-validator/images/vcss" style="border:0;width:88px;height:31px" /></a>
</li>
<li>
<a href="http://validator.w3.org/check?uri=referer"><img width="88"
height="31" alt="Valid XHTML 1.0 Transitional" src="http://www.w3.org/Icons/valid-xhtml10" /></a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.-
il y a une erreur non corrigée a toi de la trouver : un indice on ne mets pas 2 fois un div avec la meme ID dans une meme page.
et une autre : tout texte doit être dans des balises de texte du genre <p> <h1> <h2> et toute liste dans une balise de liste du genre <ul> <li>, la balise <div> n'est pas une balise de texte ! -
-
