Mise en page CSS avec DIV

argecol Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 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>
A voir également:

1 réponse

Réponse 1 / 1
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
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.
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
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 !
0
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
fantastique, meme pas une réponse ou un merci !
0