28172 sujets

CSS et mise en forme, CSS3

Besoin d'idées pour intégration graphique...[résolu? en test]

Bonjour à tous en ce dimanche d'octobre...

J'ai un élément que je voudrais intégrer dans une page et j'ai besoin de quelques idées pour le faire. Je voudrais surtout éviter une trop grande abondance de div et je voudrais avoir une intégration le plus propre possible.

Voici une image de ce que je voudrais faire:
upload/17103-page-test.jpg

Les drôles de formes de toutes les couleurs (oui, je sais, j'étais plutôt inspirée ce matin...) ne sont là que pour vous illustrer ce que je veux faire. Ce seront plutôt des images de vieilles photographies. J'ai déjà un infographiste qui travaille là-dessus.

Voici la structure simplifiée de mon code actuel:

<body>

<div id="page">

<ul id="menurapide">
  <li>blabla</li>
  <li>blabla</li>
  <li>blabla</li>
</ul>

<div id="entete">
           <h1>Titre du site Web</h1>
           <h2>Sous-titre du site Web</h2>
</div>

<ul id="menu">
  <li>blabla</li>
  <li>blabla</li>
  <li>blabla</li>
</ul>
 
<div id="gauche">blablabla</div> 

<div id="babillard">blablabal</div> 

<div id="contenu">
blablabla
</div>

<div id="pied">blablabla</div>   

</div> <!-- fin de la page-->
</body>
</html>

Et le css:

* {                     
   margin: 0;
   padding: 0;
}
html, body {
   height: 100%;	
}
body {
   background: url(images/bg-page.jpg);
   color: #000;
   font: 0.85em Verdana, sans-serif;
}
#page {
	position: relative;
	min-height: 100%;   
}
p {
  line-height: 1.5em;
}
/*************  Entête de la page  *****************/
#entete {
   background: url(images/entete.jpg) no-repeat top center;
   height: 175px;
   text-align: center;
   margin: 0.5em;   
}	
#entete h1 {
   text-indent: -5000px;
   margin: 0.5em;
   line-height: 1em;
}
#entete h2 {
   text-indent: -5000px;
   margin: 0.5em;
   line-height: 1em;
}
/************* Menu de navigation rapide ****************/
#menurapide {
   font: 0.75em verdana, sans-serif;
   margin: 0 0.5em 0.5em 0.5em;  
   text-align: right;
}
#menurapide li {
   display: inline;
}
#menurapide a {
   color: #000;
   margin-right: 0.5em;
}   
/******************** Menu de navigation principale *********************/
#menu {
   background: #9b2b3a;
   text-align: center;
   height: 2em;
   line-height: 2em;
   list-style: none;
   color: #fff; 
   border: 1px solid #000;
}
#menu li {
   display: inline;	
}
#menu a {
   color: #fff;
   margin-right: 0.6em;
   font: bold 0.9em verdana, serif;
   text-decoration: none;
}
#menu a:hover {
   text-decoration: underline;
} 
/**************** Colonne de gauche ******************/
#gauche { 
   float: left;
   width: 275px;	
   color: #000;	 
   padding: 0 0 0 1em;
}  
/****************** Bloc du contenu principal ********************/
#contenu {
   background: url(images/bg-contenu.jpg) center top no-repeat;
   font-size: 0.9em;
   margin: 1em 300px 0 300px; 
   padding: 0 0 7em 1em;    
   height: 100%;  
}  
#contenu p {
   text-indent: 1em;
   margin: 0 0 1em 0; 
}
/******************* Babillard de droite *********************/
#babillard {
   float: right;
   background: url(images/parmilieu.jpg) center;
   width: 275px;
   font: bold 0.9em "times new roman", serif;
   color: #000;
   margin: 0 1em;
   padding: 0;
} 
/* ---------- Pied de page ---------- */
#pied {
   position: absolute;
   bottom: 0; 
   left: 0;
   width: 100%;
   height: 6em;
   text-align: center;
   padding: 0;
   font: 0.75em verdana, sans-serif;
}


Ma page est conçue pour une résolution minimale de 1024x768, plus bas il y aura un scroll. J'aurai aussi sûrement une largeur max. Donc, je voudrais que ces fameuses photos s'affichent en background mais je sais pas trop comment faire pour garder la fluidité de ma page. Bon, j'espère que mes explications sont assez claires...

Merci à l'avance Smiley smile
Modifié par Mabelle (28 Oct 2008 - 13:35)
Bon alors je partirais plutôt d'un code HTML comme ceci:
<div id="header1"><div id="header2">
	<div id="header3">
		...
	</div>
</div></div><!-- #header1 -->

<div id="navigation">
	...
</div><!-- #navigation -->

<div id="main">
	<div id="left">...</div>
	<div id="right">...</div>
	<div id="content">
		...
	</div><!-- #content -->
</div><!-- #main -->


Pour la mise en page en colonnes, si ça n'est pas clair, il y a un tutoriel à ce sujet dans la section Tutoriels. Pour la largeur fluide, il y a aussi un tutoriel à ce sujet. Ça va surtout te demander de gérer deux images de fond séparées pour ton en-ête (d'où les deux conteneurs #header1 et #header2), en jouant bien entendu sur background-position. Il faudra bien sûr utiliser min-width et max-width si on souhaite réguler la largeur. Ce qui demandera peut-être de placer tous les contenus dans un div#wrapper, vu que ce genre de propriétés ne s'applique pas toujours facilement à l'élément BODY.

(En passant, le pied de page -- qui n'apparait pas sur ton schéma... -- positionné en absolu, c'est vraiment indispensable? Ça me semble un peu excessif. Mais bon, ça dépendra du design.)
Bonjour Florent et merci pour tes idées.

Je suis partie d'une des tes mise en page de colonne factice avec pied de page toujours en bas...J'ai déjà un div#wrapper...
Et ce pied de page, je ne l'ai pas mis sur mon schémas. Il ne me cause pas de soucis pour le moment.
Je vais étudier la structure que tu me proposes et voir si j'en viens à bout...
Ça va me faire travailler les background-position. Smiley langue
Ce qui n'est pas très sorcier, tu en conviendras. Je n'avais pas pensé à structuré mon entête de cette façon. C'est vrai que ça pourrait aller.

La suite donc dans quelques jours... Smiley smile
Sujet clos
Aller à