27214 sujets

CSS et mise en forme, CSS3

Je m'efforce de réaliser un site dont le graphisme ressemblerait à ça :

http://spheeris.free.fr/alsa/master.png

Pour se faire, j'ai découpé mon image en 3 morceaux :

Le haut :
http://spheeris.free.fr/alsa/haut.jpg

Le milieu, qui sera extensible :
http://spheeris.free.fr/alsa/milieu.jpg

Et le bas:
http://spheeris.free.fr/alsa/bas.jpg

Avec un peu de contenu, du code html et un zest de CSS j'obtiens grosso modo ceci : http://spheeris.free.fr/alsa/

Je dois vous avouer avoir pas mal cherché comment imbriquer mes balises DIV pour obtenir l'effet recherché.
Mes contraintes étaient en effet que le menu et le texte chevauchent la partie haute du design sur la surface translucide et que le bas soit recouvert lui aussi par le texte sur sa partie translucide (suis-je assez clair Smiley lol ? ).

Voici donc la partie CSS :
     body {
       text-align: center;
      }      
      

      #global {

       width: 643px;

       text-align: left;
       margin-left: auto; 

       margin-right: auto;
       background: transparent url(milieu.jpg) top left repeat-y;
      }
      
      #haut {
       background: transparent url(haut.jpg) top left no-repeat;
      }
      
      #bas {
       position: relative;
       background: transparent url(bas.jpg) bottom left no-repeat;
       padding-bottom: 70px;
      }
      
      #menu {
       float: left;
       margin: 100px 0px 0px 20px;
       width: 150px;
      }
      
      #main {
       margin: 0px 0px 0px 180px;
       width: 370px;
       padding-top: 100px;
      } 

Et la partie HTML, sans le contenu :
   <div id="global">

      <div id="haut">
        <div id="bas">
        
            <div id="menu">
               le menu
            </div>
      

            <div id="main"> 
                blablabla
            </div>
        
        </div> <!-- fin du bas -->
      </div>  <!-- fin du haut -->
    </div> <!-- fin du global -->
  


Sous Firefox, ça colle pas trop mal.
Mais sous IE, ça bugue (étonnant non?) !
Outre le pb en bas de page, mes marges sont différentes sous IE et sous FF.
De plus, le survol du menu sous IE occasionne parfois des petits flashouillages (hummm que j'aime décrire des bugs de IE Smiley murf ).

Ma question est la suivante : pensez-vous que j'ai codé ça de la meilleure façon qui soit (je n'aime pas trop ces div imbriquées) ? N'y a-t-il pas une autre technique peut-être plus simple, qui permettrait d'avoir le même résultat sous IE que sous FF ?

Merci à tous pour vos avis d'experts Smiley cligne
Modifié par EcliptuX (18 Oct 2006 - 23:01)
Hello,

Pour l'imbrication, à mon avis c'est bon (mais je suis loin d'etre un expert).
Pour le décallage :
#menu {display:inline;}

Modifié par Ralfman68 (18 Oct 2006 - 23:21)
Modérateur
bonjour,

3 , 2 , 1

<edit>
les images d'origines ne sont plus accessible , voici un
ajout d'image pour garder ce topic utilisable (assez ressemblantes aux originales)
upload/2857-haut.jpg upload/2857-milieu.jpg upload/2857-bas.jpg
et un article intitulé : 5,4,3,2,1,0 :
http://yidille.free.fr/plux/valign/index.php?6-5-4-3-2-1-0
pour aller un peu plus loins
</edit>
(3)
c'est un codage relativement simple , et sans aprofondir , voici comment je ferais (- 1 div pour les stats ) Smiley smile
<!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="fr" lang="fr"><head><title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
      body {
       text-align: center;
      }      
      
      #global {
       width: 643px;
       text-align: left;
       margin-left: auto; 
       margin-right: auto;
       background: transparent url(milieu.jpg) top left repeat-y;
      }
      
      #conteneur {
       background: transparent url(haut.jpg) top left no-repeat;
	
      }
      
      #main {
       position: relative;
       background: transparent url(bas.jpg) bottom left no-repeat;
       padding-bottom: 80px;
       min-height:390px;
       padding-top:120px;
      }
      
      #menu {
       float: left;
       margin: 100px 0px 0px 20px;
       width: 150px;
      }
      
      h1 , h2 , p {
       margin: 0px 0px 0px 180px;
       width: 370px;

      }  
  
  
    </style>
<!--[if lte IE 6]>
<style type="text/css">
      #main {
	height:390px;
      }
      #menu {
	display:inline;
      }	
</style>
<![endif]-->
</head>
<body>
    
<div id="global">
 <div id="conteneur">
   <div id="main"> 
	<div id="menu">
              <ul>
            		<li><a href="#">Accueil</a></li>
            		<li><a href="#">Nos produits</a>
          				<ul>
          				  <li><a href="#">Produit 1</a></li>
					  <li><a href="#">Produit 2</a></li>
                    			  <li><a href="#">Produit 3</a></li>
          				</ul>
                	</li>
                	<li><a href="#">Services</a></li>
            		<li><a href="#">Contact</a></li>
            		<li><a href="#">Liens</a></li>
              </ul>
            </div>
              <h1>Section numéro une</h1>
              <p>Elitr
fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at
velit aliquip denique cum. His ex altera definitionem, in sumo
eloquentiam pro, nec ut posse reformidans. Nonumy aliquando vim at, in
alterum torquatos consetetur vel. Viris habemus dolores nam ea, utinam
option eu per, cu duo vidit modus deterruisset. Cum te diam persecuti.
Iudico partiendo concludaturque pro ex, no quas natum volumus est, vis
et dicunt scripta. Te ius feugiat euripidis reprehendunt, vocent
aliquip nonummy per ea, te duis graeci conceptam nam. No nullam habemus
vel, te est autem verterem detraxit, eu minimum propriae ius. Mel diam
quidam te, at cum stet convenire expetenda, cum senserit democritum te.
Ad elit ancillae neglegentur his, et eam placerat conceptam, justo
quaerendum sed te. Vel tamquam nominavi torquatos ad, te option
phaedrum pro, elit aliquip corrumpit in ius. Eum volumus pericula cu.
Per lorem saepe timeam te, cum ludus inciderint ut. Mucius rationibus
eloquentiam nec eu, virtute accusata assueverit an pri, ei mea tempor
bonorum equidem. Qui idque molestiae mnesarchum ex.</p>
              <h1>Une autre grande section</h1>
              <p>Sit
voluptaria consequuntur interpretaris ea, salutatus comprehensam usu
ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius
minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur,
enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii. Te
est alia ubique. Mea in populo utamur assueverit, delenit oportere
explicari in sit, possim abhorreant deterruisset ea ius. Eam ei augue
possit minimum. Eam cu facete mollis, debitis patrioque quaerendum duo
eu. Pri probo error id. Tation volumus cu sea, id enim agam meis vim.
Cu mucius intellegebat delicatissimi eum, illum movet labore usu ei. At
ferri ubique vix, has eu omnesque evertitur, commodo nusquam deleniti
in sed. Euismod intellegat per cu. Cum et eros quaestio, enim populo
cum in.</p>
              <h2>Une sous-section</h2>
              <p>Lorem
ipsum no sit altera forensibus, vix ea veniam fierent molestie. Duo
iriure veritus ei, est no regione dolores. Vel et labore nemore
referrentur, aeterno convenire eu sed, cum porro zzril te. Et ius
labitur explicari, has no quis sententiae moderatius. Aliquip scaevola
apeirian vel eu, aliquip mentitum ut pri, rebum nihil te his. Eam malis
euismod ad. Aeterno corrumpit eu quo. Solet vocent voluptatibus at cum,
animal constituto definitiones sit ei. Qui et tale recteque, habeo
persecuti dissentias in his. Id eum mollis insolens maiestatis. Minim
noster corrumpit cu usu, eu ferri oportere consequuntur vel. Porro
salutandi assentior vis ad, no has assum sonet sapientem, usu doctus
euismod te. Sed vitae noster ei, no duo sumo facer. Ne sed imperdiet
voluptatum disputationi. Wisi aliquid in pro, ex ridens tritani docendi
nam, ius ut ocurreret persecuti. Ne quo eius falli eruditi, ius alia
oblique antiopam ut, ne nec impedit corpora eligendi. His puto menandri
ad, idque similique abhorreant et pri. Ad sint inermis eligendi mea, te
sit possit offendit. Ex clita fierent eum, an qui debitis nonummy
facilisis, in per moderatius definitiones. Nonummy repudiare eos ea.
Ius modo putant expetenda ad, ius nostrud eligendi te, vis partem
minimum cu. </p></div>



   </div>
  </div>
 </div>
</body></html>

en reutilisant tes images et ta base , l'imbrication "divite" est differente , un min-height est mis en place et le bug double marge sur le menu est pris en consideration.


(2) (-2 div pour les stat)
on peut aussi passer l'image milieu en arriere plan de body et se passer d'un div suplementaire .
<!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="fr" lang="fr"><head><title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
	* {margin:0;padding:0}

      body {
       text-align: center;
       background: transparent url(milieu.jpg) center center repeat-y;
      }      
      
      #global {
       width: 644px;
       text-align: left;
       margin-left: auto; 
       margin-right: auto;
              background: transparent url(haut.jpg) top left no-repeat;
	position:relative;
	left:1px;
      }
      

      
      #main {
       position: relative;
       background: transparent url(bas.jpg) bottom left no-repeat;
       padding-bottom: 80px;
       min-height:390px;
       padding-top:120px;
      }
      
      #menu {
       float: left;
       margin: 100px 0px 0px 20px;
       width: 150px;
      }
      
      h1 , h2 , p {
       margin: 0px 0px 0px 180px;
       width: 370px;

      }  
 	ul {padding-left:1em;margin-left:1em;}
  
    </style>
<!--[if lte IE 6]>
<style type="text/css">
      #main {
	height:390px;
      }
      #menu {
	display:inline;
      }	
</style>
<![endif]-->
</head>
<body>
    
<div id="global">

   <div id="main"> 
	<div id="menu">
              <ul>
            		<li><a href="#">Accueil</a></li>
            		<li><a href="#">Nos produits</a>
          				<ul>
          				  <li><a href="#">Produit 1</a></li>
					  <li><a href="#">Produit 2</a></li>
                    			  <li><a href="#">Produit 3</a></li>
          				</ul>
                	</li>
                	<li><a href="#">Services</a></li>
            		<li><a href="#">Contact</a></li>
            		<li><a href="#">Liens</a></li>
              </ul>
            </div>
              <h1>Section numéro une</h1>
              <p>Elitr
fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at
velit aliquip denique cum. His ex altera definitionem, in sumo
eloquentiam pro, nec ut posse reformidans. Nonumy aliquando vim at, in
alterum torquatos consetetur vel. Viris habemus dolores nam ea, utinam
option eu per, cu duo vidit modus deterruisset. Cum te diam persecuti.
Iudico partiendo concludaturque pro ex, no quas natum volumus est, vis
et dicunt scripta. Te ius feugiat euripidis reprehendunt, vocent
aliquip nonummy per ea, te duis graeci conceptam nam. No nullam habemus
vel, te est autem verterem detraxit, eu minimum propriae ius. Mel diam
quidam te, at cum stet convenire expetenda, cum senserit democritum te.
Ad elit ancillae neglegentur his, et eam placerat conceptam, justo
quaerendum sed te. Vel tamquam nominavi torquatos ad, te option
phaedrum pro, elit aliquip corrumpit in ius. Eum volumus pericula cu.
Per lorem saepe timeam te, cum ludus inciderint ut. Mucius rationibus
eloquentiam nec eu, virtute accusata assueverit an pri, ei mea tempor
bonorum equidem. Qui idque molestiae mnesarchum ex.</p>
              <h1>Une autre grande section</h1>
              <p>Sit
voluptaria consequuntur interpretaris ea, salutatus comprehensam usu
ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius
minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur,
enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii. Te
est alia ubique. Mea in populo utamur assueverit, delenit oportere
explicari in sit, possim abhorreant deterruisset ea ius. Eam ei augue
possit minimum. Eam cu facete mollis, debitis patrioque quaerendum duo
eu. Pri probo error id. Tation volumus cu sea, id enim agam meis vim.
Cu mucius intellegebat delicatissimi eum, illum movet labore usu ei. At
ferri ubique vix, has eu omnesque evertitur, commodo nusquam deleniti
in sed. Euismod intellegat per cu. Cum et eros quaestio, enim populo
cum in.</p>
              <h2>Une sous-section</h2>
              <p>Lorem
ipsum no sit altera forensibus, vix ea veniam fierent molestie. Duo
iriure veritus ei, est no regione dolores. Vel et labore nemore
referrentur, aeterno convenire eu sed, cum porro zzril te. Et ius
labitur explicari, has no quis sententiae moderatius. Aliquip scaevola
apeirian vel eu, aliquip mentitum ut pri, rebum nihil te his. Eam malis
euismod ad. Aeterno corrumpit eu quo. Solet vocent voluptatibus at cum,
animal constituto definitiones sit ei. Qui et tale recteque, habeo
persecuti dissentias in his. Id eum mollis insolens maiestatis. Minim
noster corrumpit cu usu, eu ferri oportere consequuntur vel. Porro
salutandi assentior vis ad, no has assum sonet sapientem, usu doctus
euismod te. Sed vitae noster ei, no duo sumo facer. Ne sed imperdiet
voluptatum disputationi. Wisi aliquid in pro, ex ridens tritani docendi
nam, ius ut ocurreret persecuti. Ne quo eius falli eruditi, ius alia
oblique antiopam ut, ne nec impedit corpora eligendi. His puto menandri
ad, idque similique abhorreant et pri. Ad sint inermis eligendi mea, te
sit possit offendit. Ex clita fierent eum, an qui debitis nonummy
facilisis, in per moderatius definitiones. Nonummy repudiare eos ea.
Ius modo putant expetenda ad, ius nostrud eligendi te, vis partem
minimum cu. </p></div>



   </div>

 </div>
</body></html>

(1)
Avec les navigateurs recents , il est possible de mettre milieu dans html , haut dans body et bas dans global avec un min-height. marge a zero pour le depart et un doctype valide.
<!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="fr" lang="fr"><head><title>Test</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
	* {margin:0;padding:0}
      html {
       text-align: center;
       background: transparent url(milieu.jpg) center center repeat-y;
      } 

      body {
       text-align: center;
              background: transparent url(haut.jpg) top center no-repeat;
      }      
      
      #global {
       width: 644px;
       text-align: left;
       margin-left: auto; 
       margin-right: auto;
             /* background: transparent url(haut.jpg) top left no-repeat;*/
	position:relative;
	left:1px;
       position: relative;
       background: transparent url(bas.jpg) bottom left no-repeat;
       padding-bottom: 80px;
       min-height:390px;
       padding-top:120px;
      }
      


      
      #menu {
       float: left;
       margin: 100px 0px 0px 20px;
       width: 150px;
      }
      
      h1 , h2 , p {
       margin: 0px 0px 0px 180px;
       width: 370px;

      }  
 	ul {padding-left:1em;margin-left:1em;}
  
    </style>
<!--[if lte IE 6]>
<style type="text/css">
      #main {
	height:390px;
      }
      #menu {
	display:inline;
      }	
</style>
<![endif]-->
</head>
<body>
    
<div id="global">

	<div id="menu">
              <ul>
            		<li><a href="#">Accueil</a></li>
            		<li><a href="#">Nos produits</a>
          				<ul>
          				  <li><a href="#">Produit 1</a></li>
					  <li><a href="#">Produit 2</a></li>
                    			  <li><a href="#">Produit 3</a></li>
          				</ul>
                	</li>
                	<li><a href="#">Services</a></li>
            		<li><a href="#">Contact</a></li>
            		<li><a href="#">Liens</a></li>
              </ul>
            </div>
              <h1>Section numéro une</h1>
              <p>Elitr
fabulas mel ex. Sed admodum detracto an. In vel diam quas exerci, at
velit aliquip denique cum. His ex altera definitionem, in sumo
eloquentiam pro, nec ut posse reformidans. Nonumy aliquando vim at, in
alterum torquatos consetetur vel. Viris habemus dolores nam ea, utinam
option eu per, cu duo vidit modus deterruisset. Cum te diam persecuti.
Iudico partiendo concludaturque pro ex, no quas natum volumus est, vis
et dicunt scripta. Te ius feugiat euripidis reprehendunt, vocent
aliquip nonummy per ea, te duis graeci conceptam nam. No nullam habemus
vel, te est autem verterem detraxit, eu minimum propriae ius. Mel diam
quidam te, at cum stet convenire expetenda, cum senserit democritum te.
Ad elit ancillae neglegentur his, et eam placerat conceptam, justo
quaerendum sed te. Vel tamquam nominavi torquatos ad, te option
phaedrum pro, elit aliquip corrumpit in ius. Eum volumus pericula cu.
Per lorem saepe timeam te, cum ludus inciderint ut. Mucius rationibus
eloquentiam nec eu, virtute accusata assueverit an pri, ei mea tempor
bonorum equidem. Qui idque molestiae mnesarchum ex.</p>
              <h1>Une autre grande section</h1>
              <p>Sit
voluptaria consequuntur interpretaris ea, salutatus comprehensam usu
ea. Qui te summo electram iracundia, ex mel scripta tritani. Eos eius
minim laoreet ne, labitur pertinax est ne. Nam et tamquam appellantur,
enim mediocrem cu cum. Everti verear cu has, ad quo facete fastidii. Te
est alia ubique. Mea in populo utamur assueverit, delenit oportere
explicari in sit, possim abhorreant deterruisset ea ius. Eam ei augue
possit minimum. Eam cu facete mollis, debitis patrioque quaerendum duo
eu. Pri probo error id. Tation volumus cu sea, id enim agam meis vim.
Cu mucius intellegebat delicatissimi eum, illum movet labore usu ei. At
ferri ubique vix, has eu omnesque evertitur, commodo nusquam deleniti
in sed. Euismod intellegat per cu. Cum et eros quaestio, enim populo
cum in.</p>
              <h2>Une sous-section</h2>
              <p>Lorem
ipsum no sit altera forensibus, vix ea veniam fierent molestie. Duo
iriure veritus ei, est no regione dolores. Vel et labore nemore
referrentur, aeterno convenire eu sed, cum porro zzril te. Et ius
labitur explicari, has no quis sententiae moderatius. Aliquip scaevola
apeirian vel eu, aliquip mentitum ut pri, rebum nihil te his. Eam malis
euismod ad. Aeterno corrumpit eu quo. Solet vocent voluptatibus at cum,
animal constituto definitiones sit ei. Qui et tale recteque, habeo
persecuti dissentias in his. Id eum mollis insolens maiestatis. Minim
noster corrumpit cu usu, eu ferri oportere consequuntur vel. Porro
salutandi assentior vis ad, no has assum sonet sapientem, usu doctus
euismod te. Sed vitae noster ei, no duo sumo facer. Ne sed imperdiet
voluptatum disputationi. Wisi aliquid in pro, ex ridens tritani docendi
nam, ius ut ocurreret persecuti. Ne quo eius falli eruditi, ius alia
oblique antiopam ut, ne nec impedit corpora eligendi. His puto menandri
ad, idque similique abhorreant et pri. Ad sint inermis eligendi mea, te
sit possit offendit. Ex clita fierent eum, an qui debitis nonummy
facilisis, in per moderatius definitiones. Nonummy repudiare eos ea.
Ius modo putant expetenda ad, ius nostrud eligendi te, vis partem
minimum cu. </p></div>




 </div>
</body></html>


l'histoire peut se terminer sur un seul div !


++ Smiley smile
Modifié par gcyrillus (20 Oct 2008 - 03:25)
Modérateur
merci,
en fait j'essai de demontré qu'il ne faut pas plié le (x)html au css , mais apprehender le truc l'opposé, et que cela est souvent possible .
Smiley cligne
Merci bcp gcyrillus pour la rapidité et la qualité de ta réponse Smiley smile
Elle réponds parfaitement à ma demande et je pense qu'elle en aidera plus d'un ici Smiley smile