Sujet Précédent Sujet Suivant

Probleme d'encadrement menu page html

Fermé
neofoxy - 13 oct. 2009 à 10:20
TEMCA Messages postés 319 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 mars 2011 - 13 oct. 2009 à 11:08
Bonjour,


j'ai un gros problème avec un encadrement de menu, le cadre part completement a droite au lieu de rester collé au menu. QUi à une idée? je seche complétement.

code: (faites vous plaisir si vous le voulez)

<html>
<head>
<center><h1>TEST</h1></center>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body { /* défini le body (la page) */
background-color:white ; /* le fond de la page est blanc */
color:black} /* les textes sont noirs */

.menu1 { /* boite qui contient le menu (les onglets) */
border-bottom:solid 2px black ; /* crée le trait noir en-dessous des onglets */
padding-top:12px ; /* marge intérieure haute */
padding-bottom:7px} /* marge intérieure basse */


.onglet { /* style des onglets inactifs */
border:solid 1px black ; /* encadrement */
margin:5px 5px 0px 5px ; /* marge extérieure */
padding:7px 3px 7px 3px} /* marge intérieure */

a.onglet { /* style des liens se trouvant dans un onglet inactif */
background-color:#3366FF ; /* le fond de l'onglet est bleu foncé */
text-decoration:none} /* les liens ne sont pas soulignés */

.onglet-actif { /* style de l'onglet de la page active */
border:solid 2px black ; /* l'encadrement est porté à 2 pixels */
border-bottom:solid 3px white ; /* le trait inférieur est effacé */
margin:5px 5px 0px 5px ; /* marges intérieures */
padding:7px 3px 7px 3px ; /* marges extérieures */
background-color:white} /* le fond de l'onglet actif est blanc*/

.onglet1 { /* style des onglets inactifs */
border:solid 1px black ; /* encadrement */
margin:5px 5px 0px 5px ; /* marge extérieure */
padding:7px 3px 7px 3px} /* marge intérieure */


a.onglet1 { /* style des liens se trouvant dans un onglet inactif */
background-color:#66CCFF ; /* le fond de l'onglet est bleu foncé */
text-decoration:none} /* les liens ne sont pas soulignés */

.onglet2 { /* style des onglets inactifs */
border:solid 1px black ; /* encadrement */
margin:5px 5px 0px 5px ; /* marge extérieure */
padding:7px 3px 7px 3px} /* marge intérieure */

a.onglet2 { /* style des liens se trouvant dans un onglet inactif */
background-color:#66CC99; /* le fond de l'onglet est vert */
text-decoration:none} /* les liens ne sont pas soulignés */


.onglet3 { /* style des onglets inactifs */
border:solid 1px black ; /* encadrement */
margin:5px 5px 0px 5px ; /* marge extérieure */
padding:7px 3px 7px 3px} /* marge intérieure */

a.onglet3 { /* style des liens se trouvant dans un onglet inactif */
background-color:#FF3333 ; /* le fond de l'onglet est rouge*/
text-decoration:none} /* les liens ne sont pas soulignés */


.onglet4 { /* style des onglets inactifs */
border:solid 1px black ; /* encadrement */
margin:5px 5px 0px 5px ; /* marge extérieure */
padding:7px 3px 7px 3px} /* marge intérieure */

a.onglet4 { /* style des liens se trouvant dans un onglet inactif */
background-color:#FF9900 ; /* le fond de l'onglet est orange */
text-decoration:none} /* les liens ne sont pas soulignés */



</style>
</head>

<body>

<div class="menu1">
<a class="onglet" href="menu.htm" >Sommaire</a>
<span class="onglet-actif" >Onglet 1</span>
<a class="onglet2" href="onglet2.htm">Onglets 2</a>
<a class="onglet3" href="onglet3.htm">Onglets 3</a>
<a class="onglet4" href="onglet4.htm">Onglets 4</a>
</div>
</br>
<style type="text/css">
.cadre-inset {border: inset orange 7px} /* encadrement */

</style>
<div class="cadre-inset">

<div id="header">

<ul id="speedbarre">

<li id="sujet 1"><a href="sujet1.html" title="tout sur le sujet 1"><span>Sujet 1</span></a></li>
<li id="sujet 2"><a href="sujet2.html" title="tout sur le sujet 2"><span>Sujet 2</span></a></li>
<li id="sujet 3"><a href="sujet3.html" title="tout sur le sujet 3"><span>Sujet 3</span></a></li>
<li id="sujet 4"><a href="sujet4.html" title="tout sur le sujet 4"><span>Sujet 4</span></a></li>


</ul>
</div>

<div class="contenu">
<div id="menu">


<div class="box_menu" id="menu_cours">
<div class="corpsmenu">
<ul>


<li>

<strong class="menu_cours_section">Faire ca</strong><br />
<a href="methode 1.html">methode 1</a><br />
<a href="methode 2.html">methode 2</a><br />
<a href="methode 3.html">methode 3</a><br />

</span>
</li>
<br/>
<li>

<strong class="menu_cours_section">aide</strong><br />
<a href="y'a ca qui me bloque1.html">1 me bloque</a><br />
<a href="y'a ca qui me bloque2.html">2 me bloque</a><br />
<a href="y'a ca qui me bloque3.html">3 me bloque</a><br />
<a href="y'a ca qui me bloque4.html">4 me bloque</a><br />
</span>
</li>

</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
A voir également:

1 réponse

Réponse 1 / 1
TEMCA Messages postés 319 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 mars 2011 76
13 oct. 2009 à 11:08
Bonjour,

Si tu ne spécifies pas la taille, width:300px par exemple, ou en min-width, ça va effectivement prendre toute la largeur par défaut. Enfin, si j'ai bien compris ta question...
0

Discussions similaires

[PIX] Commencer chaque poème sur une nouvelle page
ETHAN -
Willzac -

19 réponses