Sujet Précédent Sujet Suivant

Mise en page CSS avec DIV

Fermé
argecol Messages postés 1 Date d'inscription jeudi 6 février 2014 Statut Membre Dernière intervention 6 février 2014 - 6 févr. 2014 à 21:29
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 8 févr. 2014 à 12:45
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 7/02/2014 à 01:16
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
Modifié par animostab le 7/02/2014 à 01:38
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 jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 737
8 févr. 2014 à 12:45
fantastique, meme pas une réponse ou un merci !
0