Bonjour
Il y'a une dizaine de jours, on m'a largement conseillé d'abandonner ma mise en page en tableau et de passer (fissa !) au CSS.
Ce que j'ai fait ... j'ai acheté le bouquin de Raphael
... et voici ma première page pour mon intranet. Elle doit me servir de modèle pour la suite. Il manque juste les images (en haut et à gauche) mais peu importe ...l'essentiel est là !
J'ai 2 questions ...
1. au vu de ce code (qui normalement est dans 2 fichiers distincts) ai je fait d'énormes bourdes ? ou est ce que je suis sur la bonne voie du CSS ?
2. Je ne me sors pas du comportement de la page lorsque je passe mon navigateur en mode fenétré et que je réduis sa taille en largeur. Notamment la boite bleue qui vient se superposer avec tout le reste. j'ai essayer le "float" mais le comportement est pire !!!!
Y'a t'il un moyen pour faire en sorte que si je réduis en largeur des 3/4 mon navigateurs, le cadre central se redimensionne "proprement" sans que la boite bleue vienne tout écraser ? ou alors qu'il n'y ait pas de redimensionnement du tout du cadre central (ce sera moins pire !)
Espérant avoir été clair ...
Modifié par rspir (08 Jul 2005 - 22:07)
Il y'a une dizaine de jours, on m'a largement conseillé d'abandonner ma mise en page en tableau et de passer (fissa !) au CSS.
Ce que j'ai fait ... j'ai acheté le bouquin de Raphael
... et voici ma première page pour mon intranet. Elle doit me servir de modèle pour la suite. Il manque juste les images (en haut et à gauche) mais peu importe ...l'essentiel est là !
J'ai 2 questions ...
1. au vu de ce code (qui normalement est dans 2 fichiers distincts) ai je fait d'énormes bourdes ? ou est ce que je suis sur la bonne voie du CSS ?
2. Je ne me sors pas du comportement de la page lorsque je passe mon navigateur en mode fenétré et que je réduis sa taille en largeur. Notamment la boite bleue qui vient se superposer avec tout le reste. j'ai essayer le "float" mais le comportement est pire !!!!
Y'a t'il un moyen pour faire en sorte que si je réduis en largeur des 3/4 mon navigateurs, le cadre central se redimensionne "proprement" sans que la boite bleue vienne tout écraser ? ou alors qu'il n'y ait pas de redimensionnement du tout du cadre central (ce sera moins pire !)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<title><--Procédure--></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
<style>
body {
font-family:'Trebuchet MS', arial;
background: #FFFFFF ;
margin:0;
padding:0;
}
p,a,ol ,ul { font-size: 13px;}
p,ul,li,h6 { margin-top:0; margin-bottom:0; text-align: justify;}
ol,h1,h2 { margin-top:0.5em; margin-bottom:0.5em;}
h4,h5 { margin-top:0.8em; margin-bottom:0.4em;}
h1 { font-size: 21px;}
h2 { color: #336699; font-size: 18px; line-height:1.8em;}
a { color: #336699; text-decoration: none; line-height: 1.8em; text-align:left}
a:hover { color: #CC3300;}
/*header*/
#header { height:120px ; position:absolute; top:0px; left:170px; width:83%; background: white url(../image/rae.gif) top left no-repeat;}
#copyright { position:absolute; right:5px; top:5px; }
#copyright p { font-size: 11px; text-align:right;}
#bandeau { position:absolute; top:85px; width:500px;}
/*menu gauche*/
#menu{
position:relative;
height:500px;
width:170px;
background: url(../image/menu.jpg) top left no-repeat;
}
#menu ul { list-style:none; padding:0; margin-left:0.5em; position:absolute; top:150px; width:135px;}
#menu li a { font-size:11px; text-indent:0.5em; display:block; height:1.9em; line-height:1.9em;}
#menu li a:hover { color:#FFFFFF; background:#336699;}
/*Content*/
#content { position:absolute; top:120px; left:170px; background:white; width: 83%; }
#link { font-size:1em; text-align:right; width:80%}
#link a { font-size:11px;}
#top { border-bottom: 1px solid #98AAB1; width: 80%;}
#top a { text-align:left; display:inline; font-size:13px;}
#top h1 { margin-top: 0;}
#top h2 { border-bottom: 1px solid #98AAB1;}
#proc { border-bottom: 1px solid #98AAB1; width: 80%; position:relative}
#proc h2 { margin-top: 0.4em; margin-bottom: 0em;}
#proc h3 { color:#336633; margin-top:0em; margin-bottom:0; font-size: 14px; font-weight:bold;line-height:1em;}
#proc h4,h5 { font-weight: bold; font-size: 13px; color: #336699;}
#proc h5 { color: #FF8000;}
#proc blockquote {
font-size: 11px;
color: #444444;
background-color: #E5E5E5;
border: #98AAB1;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
padding:3px;
margin-right: 60px;
margin-left: 20px;
margin-top: 10px;
margin-bottom: 10px;
}
#headproc { border-bottom: 1px solid #98AAB1; height:3.3em;}
#prop { position: absolute; right:1%; top:10px;}
#prop a { font-size : 11px; text-align: left; margin-top :.3em; margin-bottom:.3em; display:inline;}
#prop p { font-size : 11px; margin-top :.3em; margin-bottom:.3em;}
#txtproc { border-right: 1px solid #98AAB1; width: 75%;}
#extras { position: absolute; left:76%; top:60px;}
#extras h6 { border-bottom: 1px solid #98AAB1; width:150px; font-size: 12px; font-weight:bold;}
#profil ul { margin-top:.6em; margin-bottom :.6em; font-size : 11px; color: #336699; list-style: none; margin-left:0.3em; padding:0; line-height:1.6em;}
#restrict ul { margin-top:.6em; font-size : 11px; color: #CB4B1C; list-style: none; margin-left:0.3em; padding:0; line-height:1.6em;}
/*menu contextuel*/
#famil {
position:absolute;
top:160px;
/*right:.5em; */
left:85%;
/*float:right;
padding-top:10px;*/
width: 140px;
border: #98AAB1;
border-style: solid;
border-left-width: 1px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
background-color: #B5D3E7; }
#famil h6 { border-bottom: 1px solid #98AAB1; width:140px; font-size: 11px; font-weight:bold; text-align:center}
#famil p { font-size: 11px; margin-top:.3em; margin-bottom:.3em;margin-left:.3em; }
#famil ul { margin-top:.6em; margin-bottom:.6em; font-size: 11px; color: #336699; list-style: none; margin-left:0.5em; padding:0;}
#famil li a { font-size : 11px; text-align: left; margin-top:.3em; margin-bottom:.3em;}
#famil li a:hover { color: #FF8000;}
</style>
</head>
<body id="haut">
<div id="menu">
<ul>
<li><a href=#>Menu 1</a></li>
<li><a href=#>Menu 2</a></li>
<li><a href=#>Menu 3</a></li>
<li><a href=#>Menu 4</a></li>
<li><a href=#>Menu 5</a></li>
<li><a href=#>Menu 6</a></li>
<li><a href=#>Menu 7</a></li>
<li><a href=#>Menu 8</a></li>
<li><a href=#>Menu 9</a></li>
</ul>
</div>
<div id="header">
<div id="copyright">
<p><%=mydate%> (Semaine <%=DatePart("ww", date() )-1 %>)</p>
<p>Conception : MOA | 2005</p>
<p>Dernière mise à jour le <%=majdate%></p>
</div>
<div id="bandeau">
<marquee onmouseover=this.stop() onmouseout=this.start() BEHAVIOR="scroll" scrollamount=5 scrollDelay=50 Truespeed direction=left width="100%">
<p>Crèmes glacées, chouchou, boissons fraîches</p>
</marquee>
</div>
</div>
<div id="content">
<div id="top">
<h1>titre</h1>
<h2>Contexte</h2>
<p>blabla</p>
<ol id="licontexte">
<li><a href="?page=1">Contexte 1</a></li>
<li><a href="?page=2">Contexte 2</a></li>
</ol>
</div>
<div id="proc">
<div id="headproc">
<h2>Procédure : blabla </h2>
</div>
<div id="prop">
<h3>Minimium Requis : XXXX</h3>
<p>Points de vigilance :<a href="#pv"> Oui</a></p>
</div>
<div id="txtproc">
<h4>CHEMINEMENT </h4>
<p>blablabla </p>
<h4>REALISATION DE L'OPERATION</h4>
<p>. bla bla</p>
<blockquote> citation !</blockquote>
<p>. blablabla et blabla</p>
<p>. blablabla et blabla</p>
<h4>RECAPITULATIF</h4>
<p>bla bla :
<ul>
<li>blable</li>
<li>blabla</li>
</ul>
<h5>POINTS DE VIGILANCE</h5>
<p>Néant</p>
</div>
<div id="extras">
<div id="profil">
<h6>Profil appelants</h6>
<ul>
<li>Profil 1</li>
<li>Profil 2</li>
<li>Profil 3</li>
<li>Profil 4</li>
<li>Profil 5</li>
<li>Profil 6</li>
</ul>
</div>
<div id="restrict">
<h6>Restrictions</h6>
<ul>
<li>Restric 0</li>
<li>Restric 1</li>
<li>Restric 2</li>
<li>Restric 3</li>
<li>Restric 4</li>
<li>Restric 5</li>
<li>Restric 6 </li>
<li>Restric 7</li>
</ul>
</div>
</div>
</div>
<p id="link"><a href="#haut">retour haut de page</a> </p>
</div>
<div id="famil">
<h6>Procédures de la famille</h6>
<p>bla bla</p>
<ul>
<li><a href="#">proc 1</a></li>
<li><a href="#">proc 2</a></li>
<li><a href="#">proc 3</a></li>
<li><a href="#">proc 4</a></li>
<li><a href="#">proc 5</a></li>
</ul>
</div>
</body>
</html>
Espérant avoir été clair ...
Modifié par rspir (08 Jul 2005 - 22:07)
) mais un exemple en ligne serait mieux !
