Bonjour,
Merci à Gothor de cette proposition, malheureusement ma situation empire !
J'ai beaucoup retravaillé sur mon problème pour corriger les signalements W3C mais le résultat n'est pas probant :
J'avais un site qui devait évoluer mais fonctionnait pour partie en HTML4. J'ai cru bon de le passer, dans le même temps en HTML5 dont j'entendais parler partout !
Depuis, très progressivement, tout s'est dégradé et non seulement, plus grand-chose fonctionne mais, pire, je ne parviens pas à le restaurer avec les normes HTML5 !
Ainsi, j'usais de la balise <center> maintenant proscrite et la corrige mais c'est la galère !
Mes déboires se régleront par série car ces problèmes sont répétitifs.
Pour simplement régler le début, je pose le problème de ma colonne gauche (colonne Menu).
Je l'ai torturée dans tous les sens, reproduisant "fidèlement" les exemples des tutos mais tout se passe comme si la classe déclarée n'était pas prise en compte ! Dernier avatar, j'avais perdu l'image de mon bandeau regroupant mes 2 colonnes de droite et je l'ai enfin recadré grâce à un artifice m'imposant de réduire sa largeur !!
Vous l'avez compris après 2 jours sur ces dégradations je suis assez écœuré sans pour autant imaginer renoncer.
Si quelqu'un voyait comment je peux recadrer mes éléments de la colonne gauche (lignes 12 à 40 du HTML) avec rassurez-vous des lignes sans impact (10 lignes de <li> et 6 lignes en <p> séparées de passage à la ligne <br />) je saurai analyser les propositions et corriger ma vue probablement déformée de mes modifs qui ont pu se contrarier entre éléments blocs et/ou inline !
Code HTML5 concerné :
<!DOCTYPE html>
<html lang="fr"><head>
<meta charset="utf-8">
<title>Inscriptions</title>
<meta name="DESCRIPTION" content="Actions culturelles ; Université du Temps Libre">
<meta name="KEYWORDS" content="UTL, Cotes d'Armor, Sud-Goëlo">
<meta name="ROBOTS" content="Index">
<meta name="AUTHOR" content="RJL">
<link rel="stylesheet" type="text/css" href="../index_fichiers/CSS-UTL.css"></head><body>
<div id="bloc-page">
<header><!-- Pas de fronton unique --> </header>
<div class="colgch">
<div class="logUTL"><img style="margin-top:12%;width:80%;text-align:center;" alt="Logo UTL base" src="../index_fichiers/LogoUTL2.png"/>
</div>
<h1 class="menu"><span style:"text-align:center;">Menu</span></h1><!-- Fin Menu -->
<nav class="menucorps"></nav>
<div class="ctrg"><ul class="navigation larger-gras">
<li><a href="../index.html" title="Accueil UTL"><span>Accueil</span></a></li>
<li><a href="Histo2012-2013.html" title="Programme de l'année">Programme 2012-2013</a></li>
<li><a href="HistoConferences.html" title="Historique des conférences / années">Historique</a></li>
<li><a href="pgUTL/HistoConferences.html" title="Historique des conférences / années">Historique</a></li>
<li><a href="Page22/UTL-CABureau.html" title="Organisation">Bureau CA</a></li>
<li><a href="file:///E:/Docum/DocumRJL/Associations/UTL/www/Page22/UTL-Agenda.html" title="Planning Conf.Sorties">Prochains Rendez-vous</a></li>
<li><a href="file:///E:/Docum/DocumRJL/Associations/UTL/www/Page22/UTL-Agenda.html" title="Planning réunions">Agenda UTL</a></li>
<li><a href="file:///E:/Docum/DocumRJL/Associations/UTL/www/Page22/UTL-Partenaires.html" title="Liens vers leurs sites">Partenaires</a></li>
<li><a href="file:///E:/Docum/DocumRJL/Associations/UTL/www/Page22/AR22-PlanSite.html" title="Accès directs entre pages">Plan du Site</a></li>
<li><a href="mailto:webmaster@utl-sud-goelo.org" title="Nous adresser un mail">Nous contacter</a></li>
<!--Fin menucorps --></ul>
<div style="text-align: center; color: rgb(102, 51, 0);">
<p class="xsmall">Mis à jour le
06/06/2012 <br />
par RJL<br />
_____________<br />
Site optimisé<br />
768x1024 pixels
</p>
</div>
<div>
<div class="h-align-image"><img style="width: 70%;" src="../index_fichiers/100px-CA_22.gif" alt="Logo Côtes d'Armor" class="cotarm"/></div>
</div>
</div><!-- Fin class ctrg -->
</div><!-- Fin colgch -->
<div class="colreg">
<div style="margin-left:10%;"><img style="text-align: center; width: 78%; height: 30%;" alt="Image UTL StQuay" src="../index_fichiers/ImageStQuay2.jpg">
<h1 style="color: rgb(153, 0, 0);"><center>Inscriptions : Informations & Formulaire</h1>
CSS3 :
/* éléments principaux de la page */
body {
background-color : #ffffc0;
color : blue;
font-family : verdana, helvetica, arial, sans-serif;
font-size : medium;
line-height : 200%;
margin:auto;
}
.bloc-page {
width : 99%;
}
p {
font-size : medium;
}
.v-align-image {
vertical-align : middle;
display : inline-block;
}
.h-align-image {
horizontal-align : middle;
display : inline-block;
}
.pos-form {
position: absolute;
left: 10%;
top: 80%; }
.clear {
clear : both;
display : block;
height : 0;
font-size : 1px;
line-height : 0;
}
.colgch {
float : left;
width : 9.5%;
margin:0;
}
.ctrg {
text-align : center;
width : 99%;
margin : auto;
}
.logUTL {
width-max : 7%; /*70*/
margin-top : 10%;
}
.logUTLinit {
width : 84%;
margin-top : 0%;
margin-left : 0%;
}
.logo {
width : 90%;
margin : auto;
height : 90%;
}
.font500 {
font-weight : 500;
}
.font600 {
font-weight : 600;
}
.font700 {
font-weight : 700;
}
.font800 {
font-weight : 800;
}
.xxlarge {
font-size : xx-large;
}
.xlarge {
font-size : x-large;
}
.larger-gras {
font-size : larger;
}
.larger {
font-size : larger;
}
.large {
font-size : large;
}
.medium {
font-size : medium;
}
.small {
font-size : small;
}
.smaller {
font-size : smaller;
}
.xsmall {
font-size : x-small;
}
.menu {
/*width : 80%;*/
text-align:center;
color : rgb(153, 0, 0);
font-size : 180%;
line-height : 180%;
}
.menucorps {
margin : 0;
color : brown;
font-size : 85%;
width : 99%;
line-height : 160%;
display : block;
}
.navigation {
width : 96%;
text-align:center;
}
.navigation li {
text-decoration : none;
color : rgb(102, 51, 0);
width : 99%;
border : #600 solid 1px;
list-style-type : none;
} .navigation li a {
display : block;
margin : auto;
font-size : 1.1em;
margin-bottom : 1px;
line-height : 160%;
}
a:link {
text-decoration : none;
color : #0080ff;
font-style : italic;
}
a:hover {
text-decoration : underline;
color : green;
}
a:visited {
color : #000080;
}
a:focus {
color : red;
}
a:active {
olor : orange;
}
.cotarm {
text-align : center;
}
.accueil {
font-size : 1.6em;
padding-left : 1%;
}
.colreg {
position : absolute;
margin-left : 11%;
width : 99%;
}
.colregsm {
position : absolute;
margin-left : 0%;
width : 99%;
}
.colmil {
max-width : 41%;
margin-left : 10%;
font-size : 1.5em;
text-align : left;
padding-left : 0%;
margin-top : 0%;
}
.colmil-insc {
max-width : 36%;
margin-left : 0%;
font-size : 1.5em;
text-align : left;
}
.colmil-abs {
position : absolute;
width : 81%;
left : 10%;
font-size : 1.5em;
text-align : left;
top : 40%;
}
.colmilsm {
max-width : 41%;
margin-left : 0%;
font-size : 1.5em;
text-align : left;
padding-left : 1%;
margin-top : 0%;
}
.coldrt {
float : right;
width : 46%;
font-size : 1.5em;
text-align : left;
argin-top : 2.4%;
}
.coldrt-insc {
float : right;
margin-right : 11%;
font-size : 1.5em;
text-align : left;
margin-left : 39%;
margin-top : 2.4%;
}
.bloc-adr {
display : block;
float : left;
color : navy;
font-size : 1.0em;
padding-top : 1.3em;
margin-left : 10%;
text-align : left;
}
.pied {
width : 99%;
margin-top : 10%;
}
D'avance
un très grand merci à qui trouvera un peu de temps pour me débloquer de ce puits sans fond !
Bien cordialement RJL2606
