28172 sujets

CSS et mise en forme, CSS3

Min-width, max-width, header et colonnes fixed

Bonjour,

j'avais réussi à faire une structure de site simulant des frames et des parties fixes en utilisant un design fluide.
www.cahue.net/dvpt_fluide/

Je voudrai le modifier pour que ce site soit centré et avec des largeurs maximales.
Une fois que cela fonctionnera correctement, je rajouterai les scripts nécessaires pour les anciennes versions de I.E.

Voilà le résultat:
www.cahue.net/dvpt_fixe/

Pas terrible!!!

la structure de la page:

<body>
	<div id="entete">
		<div id="banniere">
		      ZONE FIGEE EN HAUT DE L'ECRAN hauteur fixe: 150px
		</div>
		<div id="enteteliens">
		</div>
	</div>
 	
	<div id="gauche">
		<h2>ZONE FIGEE A GAUCHE DE L'ECRAN</h2>
		<p>Menu gauche de largeur fixe : 200px</p>
	</div>
	
	<div id="droite">
	       <h2>ZONE FIGEE à DROITE DE L'ECRAN</h2>
              <p>Encart droit de largeur fixe : 200px</p>
	</div>

	<div id="contenu">
		<!-- début de l'apparition à l'écran du texte -->
		<h3>partie "frame" scrollable </h3>		
	</div> 
	
</body>


et la css


/*=======================*/
/* Mise en forme du body */
/*=======================*/

body  {
  width: 100%;
  max-width: 1000px;
  min-width: 700 px;
  padding:0;
  }


/*============================================*/
/* ID(#) - Mise en forme de la page en DIV -  */
/*============================================*/
#contenu  {
  height: 100%;
   }

  
#entete   {
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 160px;
  background-color:#AFB7D3;
  border-bottom: solid black 1px ;
  text-align:center
  }
  
 #banniere {
	height: 132px;
	width: 110%:
	float: left;
	margin-left: 3px;
	border: 0;
	background-repeat: no-repeat;
}

#enteteliens {
    background-color: #FED019;
} 
  
#gauche   {
  position: absolute;
  top: 160px;
  left: 0;
  margin-left: 0px;
  width: 200px;
  height: 100%;
  background-color:#FFF7D3;
  border-right: solid black 1px}
  
 #droite   {
  position: absolute;
  top: 160px;
  right: 0;
  margin-left: 0px;
  width: 200px;
  height: 100%;
  background-color:#AFf7D4;
  border-right: solid black 1px}


Je suis preneur de tout aide..
merci

Cordialement
aïe... Tout d'abord, tu devrais revoir les bases de mise en page web, le fameux système de "boîtes qui s'emboîtent"
http://www.alsacreations.com/tuto/lire/588-trois-colonnes-float.html
Des tuto comme celui-ci, tu en trouveras des tonnes...

Pour ton code, il faut tout d'abord que tu crées un div "conteneur" qui englobera ton div "entête", "droite", "gauche" etc... et que tu lui appliques le css que tu as mis sur le body.
C'est sur ce div "conteneur" que tu donneras une largeur à ta page, etc..

Courage
merci de m'avoir répondu
le conteneur global j'y avais pensé, mais c'est après pour "fixer" mon header que cela ne marcherait plus.
Alors j'avais pensé qu'on pouvait directement "jouer" sur le body
Merci aussi pour le lien....je vais en tenir compte pour déjà une première correction et je verrai ensuite pour simuler des frames

Bon après-midi
Bonjour

le lien pour voir où j'en suis :
www.cahue.net/test-3/

Ce que je souhaiterai maintenant c'est :

soit au minimum utiliser une largeur maxi et mini pour le texte du contenu ( mais min-width et max-width ne fonctionnement pas)

soit dans l'idéal toute la largeur du site en fluide mais avec une largeur maxi et mini, mais dans ce cas la simulation de la frame ne fonctionne plus.




 body {
			width: 90%;
			margin-right: auto;
			margin-left: auto;
            height: 100%;
        }
        #header {
            position: fixed !important;
            position: absolute; /* IE6 reads this */
            height: 100px;
            width: 100%;
            top: 0;
            left: 0;
            background: blue;
            z-index: 2;
        }
        #col-gauche {
            position: fixed !important;
            position: absolute; /* IE6 reads this */
            height: 100%;
            width: 200px;
            top: 0;
            left: 0;
            padding-top: 100px;
            background: yellow;
            z-index: 1;
		}
		
		#col-droite {
            position: fixed !important;
            position: absolute; /* IE6 reads this */
            height: 100%;
            width: 200px;
            top: 0;
            right: 0;
            padding-top: 100px;
            background: red;
            z-index: 1;
		}
		
        #contenu {
            margin-top: 100px;
            margin-left: 200px;
			margin-right: 200px;
        }


Cordialement
Sujet clos
Aller à