Bonjour,
Je crée un site WEB pour une association en bénévolat.
J'ai ramé pas mal mais lu beaucoup sur les tutos.
J'avais une page avec 3 colonnes (le menu en flottant gauche et une colonne flottante à droite).
La colonne centrale (dans le flux) et la flottante de droite sont regroupées en tête de page et se partagent après affichage d'une image et d'une ligne titre).
Problème : ma page marchait encore tôt ce matin mais, une manipulation malencontreuse me l'a détruite et mes sauvegarde n'ont permis qu'une réparation très partielle !
J'ai passé toute la journée dessus restaurant les 3 colonnes mais la flottante de droite n'est plus conne prévu au niveau de la colonne centrale !
Qu'ai-je modifié ou dans le HTML ou dans le CSS qui déraille maintenant ?
Merci de votre soutien et de votre indulgence mais je suis bien secoué de ces problèmes.
Je joins le HTML :
et le CSS :
Merci beaucoup à ceux qui pourront m'épauler.
RJL2605
Modifié par rjl (07 Jun 2012 - 23:41)
Je crée un site WEB pour une association en bénévolat.
J'ai ramé pas mal mais lu beaucoup sur les tutos.
J'avais une page avec 3 colonnes (le menu en flottant gauche et une colonne flottante à droite).
La colonne centrale (dans le flux) et la flottante de droite sont regroupées en tête de page et se partagent après affichage d'une image et d'une ligne titre).
Problème : ma page marchait encore tôt ce matin mais, une manipulation malencontreuse me l'a détruite et mes sauvegarde n'ont permis qu'une réparation très partielle !
J'ai passé toute la journée dessus restaurant les 3 colonnes mais la flottante de droite n'est plus conne prévu au niveau de la colonne centrale !
Qu'ai-je modifié ou dans le HTML ou dans le CSS qui déraille maintenant ?
Merci de votre soutien et de votre indulgence mais je suis bien secoué de ces problèmes.
Je joins le HTML :
<!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">
<center id="logUTL"><img style="width: 84%;" alt="Logo UTL base" src="../index_fichiers/LogoUTL2.png">
</center>
<h1 class="menu">
<center>Menu</center>
</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>
<center><img style="width: 70%;" src="../index_fichiers/100px-CA_22.gif" alt="Logo Côtes d'Armor" class="cotarm"></center>
</div>
</div><!-- Fin class ctrg -->
</div><!-- Fin colgch -->
<div class="colreg">
<div style="text-align: left;"><img style="margin: 0; width: 89%; height: 30%;" alt="Image UTL StQuay" src="../index_fichiers/ImageStQuay2.jpg">
<h1 style="color: rgb(153, 0, 0);"><center>Inscriptions : Informations & Formulaire</h1>
</div>
<div class="coldrt-insc">
<center class="xxlarge" style="color: rgb(153, 0, 0);">Aspects pratiques</center><br />
<div style="color: rgb(153, 0, 0);">
<div style="text-align: justify;">Pour l'année universitaire 2012-2013,
l'inscription est de 40 € (septembre à mai-juin).<br />
Pour des inscriptions en cours d'année le
coût est limité à 28 € à partir du 2ème
trimestre scolaire (janvier à mars) et de 18
€ pour le 3ème (avril à mai-juin.<br />
Un complément peut cependant être demandé en
cours d'année pour des activités autres ;<br />
Les sommes versées restent acquises à l'UTL.<br /><br />
Lorsque <span style="font-weight: bold;">vous étiez déjà inscrit</span>, la
réinscription est présumée renouvellée pour l'année suivante.<br />
<span style="font-weight: bold;">Les nouveaux</span> peuvent s'inscrire de diverses manières :
</div>
<ol>
<li style="text-align: justify;">Préinscription sur
Internet en remplissant le bulletin en ligne <small>(informations
identiques au bulletin papier),</small>
</li>
<li>
<div style="text-align: justify;">Inscription sur
les bulletins disponibles en Mairie ou Office de
Tourisme à retourner à :
</div>
</li>
<div class="bloc-adr">
Mme Antoinette Trémel<br />
Secrétariat UTL<br />
65bis, rue des 3 Frères Salaün<br />
22410 ST QUAY PORTRIEUX
</div><br /><br /><br /><br /><br /><br />
<li style="text-align: justify;">Enregistrement lors
de Forums des Associations (Septembre)
</li>
<li>Lors des premières conférences.
</li>
</ol>
<div style="text-align: justify;">Les
personnes ayant versé leur cotisation,
avant la première conférence, mais ne disposant pas de leur carte annuelle auront simplement à la retirer avant une conférence.<br />
Celles qui se sont préinscrites (Forum ou
Internet) seront simplement enregistrées mais lors
de leur première venue auront à faire établir leur carte.<br />
</div>
<div style="text-align: center; font-weight: bold;"><br />
Le formulaire d'inscription <br />
est accessible directement ci-dessous
</div>
</div>
</div><!-- Fin col droite -->
<div class="colmil-insc"><br />
<div class="xxlarge"><!-- RJL2606 -->
<center style="color: rgb(153, 0, 0);">Programme annuel</center><br />
</div>
<div style="color: rgb(153, 0, 0);">Il comporte actuellement 2 grands volets
<ul style="text-align: justify;">
<li>15 ou 16 conférences par des intervenants reconnus ; elles
ont lieu un mardi sur deux (hors congés scolaires)
de 14h 30 à 16h 45 au cinéma "Le Korrigan" à Étables sur Mer.<br />
Le choix des sujets est très large sur des dominantes
culturelles, humaines voire d'actualité. Il fait l'objet d'une
attention particulière chaque année.
</li>
<li>un "atelier" Voyages & Loisirs complètent le programme par
des sorties <small>(demi-journée ou journée)</small>
complétant parfois une conférence ou destinées à faire connaître
des richesses, parfois méconnues, de notre région.
</li>
</ul>
<div style="text-align: justify;">Le programme annuel est disponible
via différents vecteurs :
</div>
<ul style="text-align: justify;">
<li>Au 1er juillet sur notre site Internet :<br />
<div style="text-align: center; color: rgb(0, 0, 153);">http://www.<span
style="font-weight: bold;">utl-sud-goelo.org/</span>
</div>
actualisé au fil de l'année en cas d'indisponibilité d'un conférencier, par
exemple).
</li>
<li>Au 1er août, il est transmis aux Mairies et Offices de Tourisme pour publication
dans les vecteurs habituels de chaque organisme du Sud Goëlo ;</li>
<li>Parallèlement, la presse locale
est aussi informée au fil de l'année.</li>
<li>Adressé, comme les comptes-rendus et autres, aux membres qui ont communiqué leur e-mail.
</ul>
</div>
</div><!-- Fin colmil-insc -->
</div><!-- Fin colreg -->
</div><!--fin "Block-page" -->
</body>
</html>et le CSS :
/* éléments principaux de la page */
body
{
background-color:#ffffc0;
fixed;
color:blue;
font-family: verdana, helvetica, arial, sans-serif ;
font-size: medium;
line-height: 200%
}
.bloc-page
{width:99%;
/*margin-right:10%*/
}
p
{
font-size: medium;
}
.align_image
{
vertical-align: middle;
display: inline-block;
vmargin:auto;
display: inline-block;
}
.clear
{
clear:both;
display:block;
height: 0;
font-size: 1px;
line-height: 0px;
}
.colgch
{
float:left;
width:9.5%;
margin-left:0%;
margin-right:0%;
}
.ctrg /* RJL2526 */
{
text-align: center ;
/* auto; */
width: 99%;
margin: auto;
}
.logUTL /* RJL2526 */
{
width:84%;
margin-top: 5%;/*rjl2604*/
margin-left: 0%;
}
.logUTLinit /* RJL2604 */
{
width:84%;
margin-top: 0%;/*rjl2604*/
margin-left: 0%;
}
.logo
{
width:90%;
margin: auto;
height:90%; /* rj2526 */
}
.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 ;
font-style: bold;
}
.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:99%;
margin:0;
color: rgb(153, 0, 0);
font-size: 180%;
line-height:180%;
}
.menucorps /* RJL2526 */
{
margin:0;
color:brown;
font-size:85%;
width:99%; /* rjl2526 */
line-height:160%;
display:block;
}
.navigation /* RJL2526 */
{
width:96%;
margin:auto;
padding-left:0;
}
.navigation li
{
text-decoration: none;
color: rgb(102, 51, 0);
width:99%; /* width:160px; */
border: 1px solid #600 ;
margin: 0,0,0,1 ;
list-style-type:none;
}
.navigation li a
{
display: block;
margin:auto;
padding-left:10;
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
{color: orange;}
.cotarm
{
text-align: center;
width-max: 8%;
}
.accueil
{
font-size: 1.6em;
padding-left: 1%;
margin =auto;
}
.colreg
{
position :absolute;
margin-left: 11%; /* rjl2601 */
width: 99%; /* rjl2527 ex 84 */
}
.colregsm
{
position :absolute;
margin-left: 0%; /* rjl2601 */
width: 99%; /* rjl2527 ex 84 */
}
.colmil
{
/* position :fixed; rjl2601 */
max-width: 41%;
margin-left: 10% ; /* rjl2601 */
font-size: 1.5em ;
text-align: left;
padding-left:0%;
margin-top:0%;
}
.colmil-insc
{
max-width: 36%;
margin-left:0%; /*10%*/
font-size: 1.5em ;
text-align: left;
}
.colmil-abs
{
position :absolute
width: 81%;
left: 10% ; /* rjl2601 */
font-size: 1.5em ;
text-align: left;
top:40%;
}
.colmilsm
{
max-width: 41%;
margin-left: 0% ; /* rjl2601 */
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;
marge-left: 56%; /* rjl2601 */
margin-top:2.4%;
}
.coldrt-insc
{
float: right;
width-max: 50%;
margin-right:11%;
font-size: 1.5em ;
text-align: left;
margin-left:39%; /* rjl2606 */
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
{
position: clear;
width: 99%;
Margin-top:10%;
} /* rjl2601 */Merci beaucoup à ceux qui pourront m'épauler.
RJL2605
Modifié par rjl (07 Jun 2012 - 23:41)
Bonjour à tous,