Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2358 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Superposer des div

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Superposer des div

n°1921976
lisadu62
Posté le 07-09-2009 à 19:23:01  profilanswer
 

Bonjour à tous,
 
j'ai trouvé un layout qui correspond presque à ce que je veux. Je voudrais pouvoir superposer "left column", "content" et "right column" avec un autre div. En gros, ces 3 élements seront au dessus d'un grand rectangle de la même couleur que le header et le footer. Merci d'avance!
 
 
 
Le CSS :
 
 
* { padding: 0; margin: 0; }
 
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
#wrapper {
margin: 0 auto;
width: 922px;
}
#header {
color: #333;
width: 900px;
float: left;
padding: 10px;
border: 1px solid #ccc;
height: 100px;
margin: 10px 0px 5px 0px;
background: #BD9C8C;
}
#leftcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#content {
float: left;
color: #333;
border: 1px solid #ccc;
background: #F2F2E6;
margin: 0px 5px 5px 0px;
padding: 10px;
height: 350px;
width: 456px;
display: inline;
}
#rightcolumn {
color: #333;
border: 1px solid #ccc;
background: #E7DBD5;
margin: 0px 0px 5px 0px;
padding: 10px;
height: 350px;
width: 195px;
float: left;
}
#footer {
width: 900px;
clear: both;
color: #333;
border: 1px solid #ccc;
background: #BD9C8C;
margin: 0px 0px 10px 0px;
padding: 10px;
}
 
Et voici le code HTML :
 
<div id="wrapper">
 
<!-- Begin Header -->
<div id="header">
 
This is the Header
 
</div>
<!-- End Header -->
 
<!-- Begin Left Column -->
<div id="leftcolumn">
 
Left Column
 
</div></td>
<!-- End Left Column -->
 
<!-- Begin Content Column -->
 
<div id="content">
 
<a href="#">Download this CSS Layout</a>
 
</div>
 
<!-- End Content Column -->
 
<!-- Begin Right Column -->
<div id="rightcolumn">
 
Right Column
 
</div>
 
<!-- End Right Column -->
 
<!-- Begin Footer -->
<div id="footer">
 
This is the Footer
 
</div>
<!-- End Footer -->
 
</div>
<!-- End Wrapper -->

mood
Publicité
Posté le 07-09-2009 à 19:23:01  profilanswer
 

n°1921984
pataluc
Posté le 07-09-2009 à 19:57:19  profilanswer
 

Code :
  1. <div id="wrapper">        
  2.  <!-- Begin Header -->      
  3.  <div id="header"> This is the Header        
  4.  </div>      
  5.  <!-- End Header -->        
  6.  <!-- Begin Left Column -->      
  7.  <div id="header"> This is the Header      
  8.    <div id="leftcolumn"> Left Column        
  9.    </div>      
  10.    <!-- End Left Column -->        
  11.    <!-- Begin Content Column -->        
  12.    <div id="content">          
  13.      <a href="#">Download this CSS Layout</a>        
  14.    </div>        
  15.    <!-- End Content Column -->        
  16.    <!-- Begin Right Column -->      
  17.    <div id="rightcolumn"> Right Column        
  18.    </div>        
  19.  </div>      
  20.  <!-- End Right Column -->        
  21.  <!-- Begin Footer -->      
  22.  <div id="footer"> This is the Footer        
  23.  </div>      
  24.  <!-- End Footer -->      
  25. </div>    
  26. <!-- End Wrapper -->


Message édité par pataluc le 07-09-2009 à 19:57:41

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Superposer des div

 

Sujets relatifs
Superposer 2 images dans un boutonSuperposer diapo flash et photo
Décalage/saut de ligne avec des div - Superposer des imagesCss: superposer deux images dans un header
Superposer 2 Images SWT Javasuperposer des images
Superposer 2 images avec gestion de transparence ...Superposer des images
Comment superposer deux images sur un JButton?comment superposer des photos ????
Plus de sujets relatifs à : Superposer des div


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR