menu ul non cadré ; cadré si table ! - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  menu ul non cadré ; cadré si table !

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: menu ul non cadré ; cadré si table ! (Lu 911 fois)

menu ul non cadré ; cadré si table !
« sur: le 13-05-2008 a 23:57:20 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

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>

<div class="centrage">
<div class="menu">Menu</div>

<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

Merci de vos indications, conseils, etc toujours précieux.
@ bientôt RJL20080513

Rapporter au modérateur

Re:menu ul non cadré ; cadré si table !
« Répondre #1 sur: le 12-06-2008 a 12:08:26 »

DJolhan
Superactif

Hors-Ligne

Sexe: Male

Messages: 777

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.

Rapporter au modérateur

Agence web H.D.Clic : creation site internet - création site web

Re:menu ul non cadré ; cadré si table !
« Répondre #2 sur: le 13-06-2008 a 15:10:57 »

rjl
Membre récent

Hors-Ligne

Sexe: Male

Messages: 24

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>
</div>
</div>
<img class="cotarm" src="../Images22/Cartes/100px-CA_22.gif"
alt="Logo Côtes d'Armor" />
</div>
<div class="colreg">
<div class="titrepag">Plan du site</div>

<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"> 
</div>
</div>

<div class="coldrt"></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

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 [img][/img]