Page 1 sur 1
Mise en page gabarit
Posté : 21 nov. 2007, 10:57
par zan
Salut,
G un petit soucis qui est clairement expliqué par les deux images suivantes
http://zenithtopo.free.fr/test/bien0
...pour une grosse résolution d'écran
http://zenithtopo.free.fr/test/pasbien0
...pour une petite résolution
Comment vérouiller les menus et la mise en page de tout le site, afin qu'il soit adapté à toutes les résolutions??
Je transmets le code si nécessaire dans un prochain post...
Merci, a+
Posté : 21 nov. 2007, 11:01
par zeus
Il faut, en effet, commencer par poster le code de ton menu et ce qui l'encapsule
Posté : 21 nov. 2007, 11:13
par Berzemus
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.
Posté : 21 nov. 2007, 11:27
par Invité
salut,
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.
Comment on fait??
Voilà le code :
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>
Et le css...
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;
}
Tout conseil ou remarque est bienvenue, je crois que mon code est lourd, très, ...très lourd
Merci, A+
Posté : 21 nov. 2007, 14:30
par Berzemus
salut,
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.
Comment on fait??
En exprimant les mesures en pourcentages, et non en px/em/pt.
(et si il faut quand même des distances fixes, il faudra jouer avec du Javascript pour adapter les distances. Parce que height:100%-10px, ça marche pas en css 2.1.
Posté : 23 nov. 2007, 09:21
par zan
salut,
c possible de développer un peu plz...
Ca se passe dans le css, dans le code...
Java script ca s'intègre dans du html??
Comment ca marche...jammy
?
Merci
Posté : 23 nov. 2007, 11:23
par Berzemus
aïlle, va falloir se documenter je crois..
mais j'ai pas de tutoriaux sous la main, et que des sites anglophones..
Il y a des sites qui fourmillent d'exemples sur des layouts fluides.. faut juste les trouver
tuto tuto
Posté : 26 nov. 2007, 09:25
par zan
...faut que j cherche d tuto sur le "theme" layout fluid" c ca??
Si t'as quoi que ce soit d'anglophone sous la main, ca devrait aller j crois, suis pas mauvais. Pab'soin d'aller sur un forum en tt k pr comprendre skil y a marqué!?
Merci en tt k, A+
Posté : 26 nov. 2007, 10:52
par albat
Modération :
zan, nous sommes dans un forum francophone.
Tu as devant toi un clavier complet et tu disposes de la place que tu désires pour écrire.
Merci de rédiger tes messages dans un français intelligible pour tous.
Ce sera bénéfique pour ta demande d'aide.
Merci de prendre le temps de lire les règlements.
Posté : 30 nov. 2007, 18:10
par zan
...pfffffffffff!!
Ou est l'anglicisme dans mon post si ce n'est ce qui se trouve entre guillemets??
Allez salut,
Posté : 30 nov. 2007, 18:12
par Truc
Qui parle "d'anglicisme" ?
C'est le langage SMS qui a été pointé par ce message de modération.