Titre: menu ul non cadré ; cadré si table !
Posté par: rjl le le 13-05-2008 a 23:57:20
Bonjour,
Une colonne gauche pour y loger différentes constantes dont le menu.
Ce menu en liste refuse de se cadre, reste à droite dans sa colonne dont elle n'ocupe pas toute la largeur !
Si j'ajoute, juste devant, une table contenant le même menu (même si je n'ai laissé que 2 éléments), la table occupe toute la largeur sans aucune difficulté !
La liste li reste cependant plus pratique et de plus, je n'aime pas des solutions que je ne comprends pas.
Je joins le code avec table et li
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type" />
<title>Base Aînés Ruraux 22</title>
<link href="../CSS-AR22.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<div class="bodystyl">
<div class="colgch">
<div><img src="../Images22/Logo%20AR.gif"
style="text-align: left; width: 100%;" alt="Logo Aînés Ruraux" /></div>
<!-- Fin image -->
<div class="centrage">
<div class="menu">Menu</div>
<!-- Fin class Menu -->
<div class="menucorps">
<table>
<tbody class="navigation">
<tr>
<td><a href="../Index.html">Retour Accueil</a></td>
</tr>
<tr>
<td><a href="AR22-Organisation.html">Retour
Organisation</a></td>
</tr>
<ul class="navigation">
<li><a href="../Index.html">Retour Accueil</a></li>
<li><a href="AR22-Organisation.html">Retour
Organisation</a></li>
<li><a href="AR22-ConseilAdministration.html">Conseil
d'Administration</a></li>
<li><a href="AR22-Commissions.html">C... |
|
, la css (pour partie)
Code:
.bodystyl { background-color: #ffffc0; color: blue; font-family: verdana, helvetica, arial,
sans-serif ; font-size: small; line-height: 200%; }
.colgch { width: 16%; color: blue;float: left;}
.centrage { text-align: center ;}
.menu {font-size: xx-large;}
.menucorps { font-size:normal; width:100%;}
.navigation li{ background: #ffff80 ; color: blue ; border: 1px solid #600 ; margin-bottom:
1px ; text-align: left ; text-decoration: none ; list-style-type:none;}
.navigation li a { display: block; font-size: 1.2em; margin-bottom: 1px; text-align:
center; line-height: 180%; }
.navigation a:link { color:#00f; }
.navigation a:visited { color:#c0c; }
.navigation a:hover { color:#0f0; }
.navigation a:active { color:#f00 ; }
.colreg { float:right; width:83.5%; background-color: #ffffc0; padding-top: 0.6em;}
.colreg2 { float:right; width:100%; background-color: #ffffc0; padding-top: 0.6em;}
.centered {padding-top: 1.5em; text-align: center; width:90%; padding-left: 4%;}
.titrepag { color: blue; text-align:center; font-size:3em; font-weight: bold;
padding-top:1.5em; }
.centered0; text-align:left; font-size:0.75em;}
table {height:100%; width:90%; text-align:center ; background-color:#ffffc0; color:#00F;}
caption { font-size:1.5em; color:blue; font-weight: bold; padding-bottom: 0.4em; }
thead {font-weight: bold; font-size: 1.25em; text-align: center;
border:1px solid #6495ed; background-color:#ffffc0;
}
tbody {
border:1px solid #6495ed; background-color:#ffffc0;font-size: 1.1em;
}
th {color:blue; font-size:1.0em; text-align:center;
}
td { font-weight: #600 }
table {
border-collapse:collapse;}
th, td {
border:1px solid black;} |
|
et l'image du résultat
[url=http://img179.imageshack.us/my.php?image=menuhk6.jpg]
Merci de vos indications, conseils, etc toujours précieux.
@ bientôt RJL20080513 |
Titre: Re:menu ul non cadré ; cadré si table !
Posté par: DJolhan le le 12-06-2008 a 12:08:26
Ton probleme a semble t'il un rapport avec le simple fait que les listes ont toujours un décalage, solution l'enlever via le css en créant des margin-left et padding-left a 0.
Néanmoins, vérifie bien sur IE et FF car les 2 sont loin d'avoir le meme comportement en ce qui concerne les CSS. |
Titre: Re:menu ul non cadré ; cadré si table !
Posté par: rjl le le 13-06-2008 a 15:10:57
Bonjour et merci, JokoZetla, de ta réponse
J'ai pris quelques temps car, j'ai essayé toutes les combinaisons cadrant avce ma situation (mais aussi issues d'une discussion voisine), en particulier en ajoutant force de margin-left: (et right:) auto; !
Procédure HTML :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<title>Aînés Ruraux 22 Plan du Site</title>
<link href="../CSS-AR22.css" type="text/css"
rel="stylesheet" />
</head>
<body class="divstyl">
<div class="colgch"><img class="logo"
src="../Images22/Logo%20AR.gif" alt="Logo Aînés Ruraux" />
<div class="centrage">
<div class="menu">Menu</div>
<div class="menucorps">
<ul class="navigation">
<li><a href="../Index.html">Retour Accueil</a></li>
<li><a href="AR22-Organisation.html">Retour
Organisation</a></li>
<li><a href="AR22-ConseilAdministration.html">Conseil
d'Administration</a></li>
<li><a href="AR22-Commissions.html">Commissions</a></li>
<li><a href="AR22-SecteursCantons.html">Secteurs:Cantons</a></li>
<li><a href="AR22-plansite.html"> </a></li>
<li><a href="http://blog.ifrance.com/ar22">Notre
Blog</a></li>
<li><a href="mailto:ar22@ifrance.com">Nous
contacter</a></li>
</ul>
<!-- Fin MenuCorps --></div>
<!-- Fin centrage --></div>
<img class="cotarm" src="../Images22/Cartes/100px-CA_22.gif"
alt="Logo Côtes d'Armor" />
<!-- Fin colgch --></div>
<div class="colreg"><!-- Ajouter ici les donnée recouvrant l'espace (hors menu) -->
<div class="titrepag">Plan du site</div>
<!-- Fin titrepag -->
<p> </p>
<div class="cadre5">A partir de la page d'accueil, il est
possible d'accéder de manière hiérarchique aux diverses pages du site.<br />
<br />
Du présent plan du site, on accède directement à l'essentiel des pages,
exception faite
des "pages club".<br />
<br />
Certaines pages ("Notre blog", "Nous contacter") sont à sens unique
donc le retour arrière s'impose à partir de
votre navigateur (cliquer la flèche gauche).<br />
<br />
<img src="../Images22/PlanSite.png" alt="Plan du site" />
<div class="acc-leger">
<!-- Fin acc-leger --></div>
<!-- Fin cadre5 --></div>
<!---->
<div class="coldrt"><!-- Ajouter ici les donnée recouvrant la colonne droite --></div>
-->
</div>
</body>
</html>
|
|
CSS correspondante :
Code:
.divstyl { background-color: #ffffc0 ;color: blue; font-family: verdana, helvetica, arial, sans-serif ; font-size: small; line-height: 200%}
.colgch { width: 16%; color: blue; float: left; background-color:#ffffc0;margin-left:auto;margin-right:auto; }
.logo {width:95%;height:95%;}
.symbole {width: 25%; text-align: center;}
.centrage { text-align: center ;}
.menu {font-size: xx-large;}
.menucorps { font-size:90%; width:84%;}
.navigation li{ border: 1px solid #600 ; margin-bottom: 1px ;margin:auto; text-decoration: none ; list-style-type:none;}
.navigation li a { display: block; font-size: 1.2em; margin-bottom: 1px; text-align: center; line-height: 180%; }
.navigation a:link { color:#00f; }
.navigation a:visited { color:#c0c; }
.navigation a:hover { color:#0f0; }
.navigation a:active { color:#f00 ; }
.cotarm { text-align: center; width: 60%;padding-left: 21%;}
.colreg { float:right; width:84%;background-color:#ffffc0;}
.colreg2 { float:right; font-size: 130%}
.centered {padding-top: 1.2em; text-align: center; width:90%; padding-left: 4%;}
.centered2 {text-align: center;color: blue;font-size:2em; font-weight: bold;}
.titrepag { color: blue; text-align:center; font-size:3em; font-weight: bold; padding-top:1.5em; }
.titrepagsect { color: blue; text-align:center; font-size:3em; font-weight: bold; }
.centered0 {text-align:left; font-size:0.75em;}
.center3 {text-align: center; color:#000;}
.stylcaption { font-size:60%em; color:blue; font-weight: bold; padding-bottom: 0.4em; }
thead {font-weight: bold; font-size: 1.0em; text-align: center;
border:1px solid #6495ed; background-color:#ffffc0;
}
tbody {
border:1px solid #6495ed; background-color:#ffffc0;font-size: 0.9em;font-weight: lihgter
}
th {color:blue; font-size:120%; text-align:center;
}
td { font-weight: lighter; font-size:100%; }
table {height:200%; width:100%; background-color:#ffffc0; color:#00F;
border-collapse:collapse;}
th, td {border:1px solid black;}
caption {font-weight: bold; font-size:150%;line-height: 200%}
.navigcant a { display: block; font-size: 1.0em;margin-bottom: 1px; text-align: center; line-height: 150%; }
.navigcant a:link {font-weight: bold; color:#00f; }
.navigcant a:visited {font-weight: bold; color:#c0c; }
.navigcant a:hover { color:#0f0; }
.navigcant a:active { color:#f00 ; }
.vertical { vertical-align:middle;}
.coldouble { width: 30%;}
.colsimple { width: 15%;}
.colpetit { width: 2.5%;}
.coldoubl4 { width: 44%;}
.colsimpl4 { width: 20%;}
.colcomplem { width: 38%;}
.colprenom { font-weight: bold;}
.colnom { font-weight: bold;}
.colbureau { text-align: right; font-weight: 200;font-size:0.7em;width: 8%}
.colfonction { font-weight: normal;}
.colcanton { font-weight: normal;}
.colmil { width: 50%; float: left; font-size: 1.5em ; text-align: left; padding-top: 1.9em; }
.colmil60 { width: 60%; float: left; font-size: 1.0em ; text-align: left; padding-top: 0.9em; }
#accueil { font-size: 1.6em; padding-left: 4%; color:blue; }
#accueil2 { display: block; font-size: 1.1em; color:blue; text-align: left; padding-top: 0%;}
.acc-leger { color: black; font-size: 100%; padding-left: 5%; padding-right: 5%;text-align: left; padding-top: 1.2em;font-weight:normal;}
.acc-simple { color: blue; font-size: 150%; padding-left: 5%; text-align: left; padding-top: 1.2em;font-weight:lighter;}
.bloc-adr { display: block; color: black ; font-size: 0.9em; padding-top: 1.3em; padding-left: 8%; text-align: left; }
#tel { font-size: 0.85em; text-align: center; padding-top: 1em; }
.rouge {color: red;}
.frmliste li {padding-top: 0.3em; padding-left: 2.5%; font-size: x-large; color: blue; font-weight: normal; }
.coldrt { width: 47%; float: right; font-size: 1.5em ; text-align: left; padding-left: 5px; padding-top: 1.75em;}
.coldrt60 { width: 37%; float: right; font-size: 1.0em ; text-align: left; padding-left: 5px; padding-top: 0.75em;}
.coldrt cadredrt p { text-align: left; font-size: 0.8em; color:#000080;font-weight: bold; }
.centre { text-align: center; }
.cadre3 { text-align: left; font-size: x-large; color: blue; padding-left: 5%}
.cadre4 { text-align: left; font-size: large; color: blue; }
.cadre5 { text-align: left; font-size: x-large; color: blue; }
|
|
Avec pour image écran
[url=http://img383.imageshack.us/my.php?image=menufj1.jpg]
Rien n'y fait et je reste avec un décalage gauche pour ma zone menu !
Inversement, j'ai pu supprimer un padding gauche qui a été remplacé par un cadrage central mais c'est un résultat équivalent et non une amélioration !
J'ai aussi du maintenir un padding gauche de 21% pour le logo des Côtes d'Armor sous le menu car il se collait à l'extême gauche même si je portais des margin:auto; ! Pour cette carte, seul ce padding semble être pris en compte comme le confirme la taille de l'image qui, si je la diminue, n'est plus centrée mais cadrée uniquement sur le padding 17%à gauche !
Tout cela pour dire que le css est bien mais pas pour autant évident, ni naturel à l'usage.
Encore merci et à l'écoute de toute nouvelle idée.
RJL20080613 |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|