Comment on fait??et le nec plus ultra n'est pas de verouiller la taille, mais de rendre l'affichage fluide pour qu'il puisse s'adapter à toutes les résolutions et tailles de fenêtre.
Code : Tout sélectionner
<!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" xml:lang="en" lang="en-AU">
<!--
_________________________________________________________
| |
| DESIGN + http://fullahead.org |
| DATE + 2005.05.12 |
| COPYRIGHT + free use if this notice is kept in place |
|_________________________________________________________|
-->
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta name="author" content="fullahead.org" />
<meta name="keywords" content="reflection, fullahead, pat, OSWD, more, keywords, separated, with, commas" />
<meta name="description" content="OSWD reflection XHTML template by fullahead.org" />
<title>zenith|topo</title>
<link rel="stylesheet" type="text/css"
href="css/ztopo.css" media="screen, tv, projection" />
</head>
<body>
<!-- Main site container -->
<div id="siteBox">
<!-- Main site header : holds the img, title and top tabbed menu -->
<div id="header">
<!-- top rounded corner -->
<img src="images/corner_tl.gif" alt="corner" style="float:left;" />
<!-- Site title and subTitle -->
<span class="title">
<span class="white">Z e n i th</span>Topo
<span class="subTitle">
Vos projets, Nos competences
</span>
</span>
<!-- Menu is displayed in reverse order from how you define it (caused by float: right) -->
<a href="index.html" title="Contact" class="lastMenuItem">Contact<span class="desc">Effectifs</span></a>
<a href="ouvrage.html" title="Références">Références<span class="desc">Réalisations</span></a>
<a href="index.html" title="Materiels">Matériels<span class="desc">Véhicules Instruments</span></a>
<a href="index.html" title="Metiers">Métiers<span class="desc">compétences</span></a>
<a href="index.html" title="Accueil">Accueil<span class="desc">Bienvenue</span></a>
</div>
<!-- Content begins -->
<div id="content">
<!-- Left side menu : side bar links/news/search/etc. -->
<div id="contentLeft">
<p>
<span class="header">La société</span>
</p>
<p>
<a href="index.html" title="different colour scheme" class="menuItem">Zénith Topo</a> <img src="images/media/resize/ztopo.png" alt="ztopo" class="imgItem" /></a>
<a href="zetudes.html" title="whole wack of art" class="menuItem">Zénith Etudes</a><img src="images/media/resize/zetudes.png" alt="zetude" /></a>
<a href="index.html" title="design work" class="menuItem">Zénith Scan</a><img src="images/media/resize/zscan.png" alt="zscan" /></a>
</p>
<p>
<span class="header">Actualités</span>
<DIV align="center"> <EMBED TYPE="audio/x-pn-realaudio-plugin" SRC="images/media/elne_la_nuit.rv"
WIDTH="240" HEIGHT="180" LOOP= "true" AUTOSTART="true" CONTROLS="imagewindow" CONSOLE="<b style="color:black;background-color:#ffff66"></b>
</div>
</p>
<center>
<a href="images/media/elne.exe">La maternité d'Elne _ Simulations d'éclairage</a>
</center>
<!-- Creates the rounded corner on the bottom of the left menu -->
<div class="bottomCorner" style="height: 15px;">
<img src="images/corner_sub_bl.gif" alt="bottom corner" class="vBottom" title="corner_sub_bl" width="9" height="15px" border="0" />
</div>
</div>
<!-- Right side main content -->
<div id="contentRight" STYLE="text-align:justify;">
<p>
<span class="header">La société</span>
<strong>Zenith topographie </strong>doit son nom à son activité première, la topographie, base de sa création en 1992.
Depuis, comme vous pourrez le voir en visitant ce site, nous avons évolué :
sur cette base même vers des prestations plus ciblées comme la bathymétrie
ou sur des activités dérivées comme les études et enfin la maîtrise d’œuvre.
Nos dernières innovations sont la scannerisation et modélisation 3D, qui me paraissent être l’avenir de notre métier, et le lien indispensable entre le levé topographique classique et les projets d’études, afin de présenter dans l’avenir des simulations à échelle réelle des projets que l’on nous confiera.
Nous ne quitterons pas pour autant la base de notre métier, et le suivi topographique du tunnel du Perthus en est la preuve. Là aussi, la scannerisation nous a permis d’obtenir l’avance technologique nécessaire pour faire face à une concurrence de plus en plus difficile.
Cette avance nous avait permis déjà de conquérir des marchés jusque dans les Caraïbes, où, en 2001, notre équipement robotisé et l’utilisation du DGPS nous avaient permis de faire la différence sur un chantier de 3000 ha.
Aujourd’hui, nous avons acquis de l’expérience, du matériel, et persévérons dans la formation.
<p> P.PHILIPPE, Dirigeant.
</p>
</p>
<p>
<span class="header">Dernières réalisations</span>
<center>
<a href="images/media/musee.exe"> <img src="images/media/musee.JPG" alt="musée_subdo" /></a>
<a href="images/media/Contrôle de la stabilité du terrain par Lasergrammétrie.ppt"> <img src="images/media/Paillat.bmp" alt="M.N.T. site du Pallat" /></a>
<a href="images/media/assemblage gifi.rv"> <img src="images/media/gifi_gris.jpg" alt="Réaménagement local commercial" /></a>
<a href="index.html"> <img src="images/media/Pollestres.JPG" alt="Local municipal"/></a>
<a href="images/media/Vidéo_clairfont.rv"> <img src="images/media/clairfont_resize_03.jpg" alt="Réaménagement local municipal" /></a>
<a href="images/media/asf.rv"> <img src="images/media/resize/asf.bmp" alt="musée_subdo" /></a>
<a href="index.html"> <img src="images/media/resize/paillat_s3d.PNG" /></a>
</center>
</p>
<div class="bottomCorner" style="height: 15px;">
<img src="images/corner_sub_bl.gif" alt="bottom corner" class="vBottom" title="corner_sub_bl" width="9" height="15px" border="0" />
</div>
<!-- Footer begins -->
<div id="footer">
<div id="footerLeft">
design <a href="http://oswd.org/userinfo.phtml?user=snop" title="OSWD design work">snop</a> <span class="grey">+</span> photo <a href="http://www.sxc.hu/browse.phtml?f=profile&l=plasticboy&p=1" title="stock.xchng">plasticboy</a> <span class="grey">=</span> valid <a href="http://validator.w3.org/check?uri=referer" title="validate XHTML">XHTML</a> & <a href="http://jigsaw.w3.org/css-validator" title="validate CSS">CSS</a>
</div>
<div id="footerRight">
</div>
</div>
</div>
</body>
</html>
Code : Tout sélectionner
/*
_________________________________________________________
| |
| DESIGN + http://fullahead.org |
| DATE + 2005.05.12 |
| COPYRIGHT + free use if this notice is kept in place |
|_________________________________________________________|
/* -- Main layout styles -- */
body {
margin: 1em 1em 1em 1em;
padding: 0px;
font-family: Helvetica, sans-serif;
font-size: 1.0em;
background-color: #333;
}
#siteBox {
float: left;
width: 100%;
color: #FFF;
}
/* -- Header layout/display styles -- */
#header {
float: left;
width: 100%;
height: 4em;
background: #25509F url(../images/media/bandeau_zenith.jpg) no-repeat bottom left;
}
#header a {
float: right;
width: 8em;
padding: 5px 147px 5px 10px;
font-size: 0.6em;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: #FFF;
background-color: #666;
border-bottom: 2px solid #333;
border-right: 1px solid #333;
border-left: 1px solid #333;
}
#header a:hover, #header a.active {
padding-top: 10px;
background-color: #333;
}
#header a.lastMenuItem {
background-position: top right;
border-right: 0px;
}
a .desc {
display: none;
text-transform: lowercase;
color: #FC0;
}
a:hover .desc, .active:hover .desc {
display: block;
}
/* -- Header title and subTitle layout/display styles -- */
.title {
float: right;
padding: 1em 30px 0 2em;
font-size: 1.4em;
font-weight: bold;
text-transform: uppercase;
text-align: center;
line-height: 0.75em;
letter-spacing: -0.15em;
color: #FC0;
}
.subTitle {
display: block;
font-size: 0.4em;
text-transform: lowercase;
line-height: 1.2em;
letter-spacing: 0.01em;
}
/* -- Content layout/display styles -- */
#content {
float: left;
width: 100%;
padding: 1em 0 1em 0;
background-color: #666;
}
#contentLeft {
float: left;
width: 23.3%;
margin-bottom: 1em;
background: #777 url(../images/corner_sub_tr.gif) no-repeat top right;
}
#contentRight {
float: right;
width: 75%;
background: #777 url(../images/corner_sub_tl.gif) no-repeat top left;
}
#content p {
margin: 1.2em 1.2em 2em 1.2em;
font-size: 0.8em;
line-height: 1.8em;
}
#content a {
text-decoration: none;
color: #FC0;
border-bottom: 1px solid #AAA;
}
#content a:hover {
color: #DDD;
background-color: #888;
border-bottom: 1px solid #EEEEEE;
}
.header, .subHeader {
display: block;
clear: both;
font-weight: bold;
font-size: 0.8em;
text-transform: lowercase;
color: #FC0;
border-bottom: 1px solid #AAA;
}
.subHeader {
border: 0px;
}
/* -- Content left site links (large plus icon) -- */
#content a.menuItem {
display: block;
padding: 5px 0 5px 54px;
background: url(../images/icn_plus.gif) no-repeat center left;
border: 0px;
}
#content a:hover.menuItem {
color: #DDD;
background: #888 url(../images/icn_plus_on.gif) no-repeat center left;
border: 0px;
}
/* -- Footer layout/display styles -- */
#footer {
float: left;
width: 100%;
height: 3em;
font-size: 0.6em;
text-transform: lowercase;
line-height: 2.6em;
color: #0AD;
background: #25509F url(../images/media/bandeau_zenith.jpg) repeat-y top left;
}
#footerLeft {
float: left;
width: 60%;
height: 3em;
text-align: left;
background: url(../images/corner_bl.gif) no-repeat bottom left;
}
#footerRight {
float: right;
width: 35%;
height: 3em;
text-align: right;
background: url(../images/corner_br.gif) no-repeat bottom right;
}
#footer a {
color: #0AD;
}
#footer a:hover {
color: #666666;
}
/* -- Display formatting styles -- */
.grey {
font-size: 0.9em;
color: #AAA;
}
.white {
color: #FFF;
}
acronym {
cursor: help;
border-bottom: 1px dotted #AAA;
}
/* -- <ul> tag styles -- */
ul{
font-size: 0.8em;
padding-top: 5px;
padding-bottom: 5px;
list-style-image: url(../images/li_bullet.gif);
}
li {
margin-left: 50px;
}
/* -- Image alignment classes -- */
.imgLeft, .imgRight {
margin: 30px;
}
.imgLeft {
float: left;
margin-left: 150px;
}
.imgRight {
float: right;
margin-right: 150px;
}
.imgCenter {
float: left;
margin-left: 250px;
/* -- Utility classes to create the bottom rounded corners -- */
.bottomCorner {
text-align: right;
}
.vBottom {
vertical-align: bottom;
}
En exprimant les mesures en pourcentages, et non en px/em/pt.salut,
Comment on fait??et le nec plus ultra n'est pas de verouiller la taille, mais de rendre l'affichage fluide pour qu'il puisse s'adapter à toutes les résolutions et tailles de fenêtre.
?
