Membres
Mise en page CSS 3 colonnes fluide
Mise en page CSS 3 colonnes fluide
Mise en page CSS 3 colonnes fluide Posté le 12/07/2007 à 12:10
Je vient d'installer Dreamweaver CS3 pour voir ce que ça donne. Par exemple y'a des exemple de mise ne page CSS qui sont assès sympa.
Voici un exemple de mis ene page CSS XHTML 3 colonnes en pourcentage (fluide, ou qui s'adapte à l'écran)
Bien sur, ce code est de Dreamweaver et je suppose que tous les droits d'utilisation l'est aussi.
________________________
Graphiks : Cours PHP
=> à quoi sert internet explorer ?
=> à télécharger firefox
Voici un exemple de mis ene page CSS XHTML 3 colonnes en pourcentage (fluide, ou qui s'adapte à l'écran)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.thrColHybHdr #container {
width: 100%;
background: #FFFFFF;
text-align: left;
}
.thrColHybHdr #header {
background: #DDDDDD;
padding: 0 10px;
}
.thrColHybHdr #header h1 {
margin: 0;
padding: 10px 0;
}
.thrColHybHdr #sidebar1 {
float: left;
width: 11em;
background: #EBEBEB;
padding: 15px 0;
}
.thrColHybHdr #sidebar2 {
float: right;
width: 11em;
background: #EBEBEB;
padding: 15px 0;
}
.thrColHybHdr #sidebar1 h3, .thrColHybHdr #sidebar1 p, .thrColHybHdr #sidebar2 p, .thrColHybHdr #sidebar2 h3 {
margin-left: 10px;
margin-right: 10px;
}
.thrColHybHdr #mainContent {
margin: 0 12em 0 12em;
padding: 0 2em 0 2em;
}
.thrColHybHdr #footer {
padding: 0 10px;
background:#DDDDDD;
}
.thrColHybHdr #footer p {
margin: 0;
padding: 10px 0;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
</style><!--[if IE]>
<style type="text/css">
/* placer les corrections pour toutes les version d'IE dans ce commentaire conditionnel */
.thrColHybHdr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColHybHdr #mainContent { zoom: 1; padding-top: 15px; }
/* la propriété propriétaire zoom ci-dessus transmet à IE l'attribut hasLayout nécessaire pour éviter plusieurs bogues */
</style>
<![endif]--></head>
<body class="thrColHybHdr">
<div id="container">
<div id="header">
<h1>En-tête</h1>
<!-- fin de #header --></div>
<div id="sidebar1">
<h3>Contenu de sidebar1</h3>
<p>la couleur de l'arrière-plan de cet élément div est affichée sur la largeur du contenu uniquement. Si vous préférez une ligne de sé paration, placez une bordure sur le côté gauche de l'élément div #mainContent si vous savez qu'il possèdera toujours plus de contenu que l'élément div #sidebar1. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- fin de #sidebar1 --></div>
<div id="sidebar2">
<h3>Contenu de sidebar2</h3>
<p>la couleur de l'arrière-plan de cet élément div est affichée sur la largeur du contenu uniquement. Si vous préférez une ligne de sé paration, placez une bordure sur le côté droit de l'élément div #mainContent si vous savez qu'il possèdera toujours plus de contenu que l'élément div #sidebar2. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- fin de #sidebar2 --></div>
<div id="mainContent">
<h1> Contenu principal </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at non ummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. </p>
<p>Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venena tis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincid unt nec, suscipit id, libero. </p>
<h2>en-tête de niveau H2 </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at non ummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula.&nbs p;Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- fin de #mainContent --></div>
<!-- Cet élément de suppression doit suivre immédiatement l'élément div #mainContent afin de forcer l'élément div #container à contenir tous les&nb sp;éléments flottants enfants --><br class="clearfloat" />
<div id="footer">
<p>Pied de page
</p>
<!-- fin de #footer --></div>
<!-- fin de #container --></div>
</body>
</html>
Bien sur, ce code est de Dreamweaver et je suppose que tous les droits d'utilisation l'est aussi.
________________________
Graphiks : Cours PHP
=> à quoi sert internet explorer ?
=> à télécharger firefox
Réponse à : Mise en page CSS 3 colonnes fluide Posté le 25/08/2007 à 09:40
droits d'utilisation ne sont pas réservés
c'est du css pas du DOT net ;-)
_______________________
c'est du css pas du DOT net ;-)
_______________________
Vous n'est pas connecté en temps que membre, parceque j'en ai marre du spam, SEUL les membres peuvent poster des messages sur le forum.
Nous - Plan du site - Informations légale - Contact - © Graphiks.net