presentation a 3 colonnes avec 2 encarts

Répondre

Consultez la formation au référencement naturel Google de WebRankInfo / Ranking Metrics

tanguy
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 168
Inscription: Jeu Mai 12, 2005 9:49

presentation a 3 colonnes avec 2 encarts

Message le Ven Oct 07, 2005 19:56

Bonsoir,

Je souhaite faire une présentation à 3 colonnes et je veux insérer dans la colonne de gauche et de droite un encart mais j'ai les problèmes suivant :

1.- Je n'arrive pas à centrer les titres dans les encarts;
2.- Les liens dans les encarts ne prennent pas les styles définis;
3.- Je n'arrive pas à placer l'encart de la colonne de droite (#encart2) au centre de la colonne de droite;
4.- Il y a une ligne blanche sur l'encart de la colonne de droite en l'image du haut et celle du bas;
5.- Le début du paragraphe du centre (#cadre4 p) est trop décalé sur la droite par rapport à l'encart de gauche.
Une fois l'encart dépassé le texte est aligné normalement sur la gauche.

Code: Tout sélectionner
body {  font-family: Verdana, Arial, "Times New Roman", Serif;
   background-color:white;
   color: white;
   font-size:xx-small;
   text-align:center;
   margin: 0;
   padding: 0;}

#cadre {margin:10px auto;
           padding:0;
      width:760px;
      background:black;
      text-align:left;
      }

#cadre1 { background-color: black;
}

#cadre1 h2 {text-align:center;
       padding-top:30px;}


#menuhaut {background-color: blue;
      margin:0;
      padding:5px 20px 10px 0;
}
    

#menuhaut li {display: inline;
            list-style-type: none;
}           

#menuhaut li a {float:right; 
          padding-left:20px;
          color:red;
}

#menuhaut li a:hover {color:black;
           display:block;
           background-color:white;
           border: 1px solid black;
}


#encart{
float: left;
width: 250px;
margin: 20px 5px 5px 5px;
padding-top: 30px;
background: url(images/posthaut.gif) left top no-repeat;}

#encart2{
width: 250px;
padding-top: 30px;
background: url(images/posthaut.gif) left top no-repeat;}

#encart h3 {
font-size: small;
text-align: center;}

#bloccadre {
background: url(images/postbas.gif) left bottom no-repeat;
padding: 0 0 25px 10px;}

#bloccadre ul {margin:0;
          padding:0;}

#bloccadre li {margin:0;
     padding:0px;
     text-align:left;
     font-size:x-small;
}

#bloccadre li a {color:red;
       text-decoration:none;}

#bloccadre li a:hover {font-weight:bold;
        border : 1px solid black;
        color:blue;
       }


#cadre2 { float:left;
     width:160px;
     margin-left: auto;
          margin-right: auto;
     padding-top:20px;
    }


#cadre3 { float:right;
     margin:0;
     padding-top:20px;
     width:160px;
     text-align: center;
     }

#cadre3 h3{padding:0;
      margin:0;
      text-align:center;
      background-color:#FFFFFF;}


#cadre4 { margin:0 160px 0 160px;    
        }

#cadre4 p {padding-top: 30px;
     line-height: 30px;}      }


#piedpage { margin:0;
       background-color: blue;
       height:30px;
       line-height:30px;
       color:white;
       text-align:center;}


Code: Tout sélectionner
<body>

<DIV id="cadre">

<DIV id="cadre1">
<h2>essai</h2>
</div>

<div id="menuhaut">
   <ul id="menuhaut">
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
         </ul>
            </div>

<div id="cadre2">

   <div id="encart">
      <h3>Titre</h3>
      <div id="bloccadre">
         <ul>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
         </ul>
            </div>
               </div>
                  </div>


<div id="cadre3">
   <div id="encart2">
      <h3>Titre</h3>
         <div id="bloccadre">
   <ul>
      <li>essai</li>
      <li>essai</li>
      <li>essai</li>
      <li>essai</li>
      <li>essai</li>
      <li>essai</li>
   </ul>
      </div>
         </div>
            </div>


<div id="cadre4">
   <p>Et duis, qui illum elit. Diam qui ipsum nulla molestie diam iusto nostrud sed ullamcorper esse erat. Hendrerit delenit nulla nibh eu, delenit eum consequat tincidunt tincidunt blandit suscipit, vulputate. Duis illum, enim, minim nisl consequat molestie at vel in eum dolore magna ullamcorper luptatum. Nulla ea, nulla et exerci, ea vel dolore accumsan. Eros quis ad volutpat feugiat, ut dolore nisl feugait erat odio qui feugait in, ex minim vero ullamcorper. Euismod at vero duis nulla ex ipsum wisi in, luptatum wisi adipiscing consequat exerci. Hendrerit ut suscipit accumsan vel.

Facilisis lobortis feugait, enim volutpat ut velit eros iriure dignissim, dolor facilisis. Eum exerci vulputate blandit eum dolore ipsum adipiscing ad. Sed nisl in. Dolore luptatum iusto et molestie at. Ut wisi illum vulputate, nisl consequat nulla ex iusto, nulla. Nulla minim vero duis et luptatum tincidunt illum elit at in esse suscipit vulputate feugait, ullamcorper luptatum ex. Dolor blandit dolore minim in iusto consequat, tincidunt feugait in eum lorem. Consectetuer vel, odio qui minim, wisi in eu feugiat erat molestie, dolor tation nulla, dolore nisl minim duis, nulla ut. Tation ut facilisis qui, diam esse sit eu vel nonummy nostrud dolor ea quis suscipit dolore qui iusto. Facilisis, accumsan, vel et ex molestie ea vel consequat duis qui consequat et exerci wisi nulla odio.
   </p>
      </div>

<div id="piedpage">
   <p>essai</p>
      </div>
         </div>
</body>


Par avance merci de votre aide
Haut

dixenet
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 163
Inscription: Mar Déc 07, 2004 21:50

Message le Ven Oct 07, 2005 21:49

Dit moi juste une chose tu conais le concept somme tout extrement abstrait du tableau ?

Non mais serieusement. tout simplement utilise des tableaux.
au lieu de faire n'importe quoi avec tes balises div. tu aura un resultat nikel et tu pourras faire des trucs beaucoup mieux.

Amitiés,
nicolas
Haut
tanguy
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 168
Inscription: Jeu Mai 12, 2005 9:49

Message le Sam Oct 08, 2005 6:25

Si je viens sur un forum c'est pour demander de l'aide, ce n'est pas pour que mon dise que je n'y connais rien en tableaux ou autres choses.

Si je connaissais tout, je ne postera de message !!!

Je pense que vous aussi un jour vous avez débutez !!
Haut

serval2a
WRInaute accro
WRInaute accro
 
Messages: 3453
Inscription: Lun Mar 21, 2005 18:17

Message le Sam Oct 08, 2005 8:10

Bonjour,

Voilà le code que j'utilise sur un de mes sites (en version simplifiée sans style police et autres joyeusetés) ;) :
- Code CSS =
Code: Tout sélectionner
#contenu {
margin-right: 160px;
margin-left: 160px;
}
#gauche {
float:left;
width: 150px;
}
#droite {
float:right;
width: 150px;
}


- Code html =
Code: Tout sélectionner
<div id="gauche"></div>
<div id="contenu"></div>
<div id="droite"></div>


Pour le positionnement de la police utilise :
Code: Tout sélectionner
div#contenu X
{
   text-align: justify ;
}


En remplaçant la valeur X par le nom de ton style (ex : h1) et justify par ce que tu veux. Ensuite pour la mise en page HTML ça donne :
Code: Tout sélectionner
<h1></h1>
Haut
tanguy
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 168
Inscription: Jeu Mai 12, 2005 9:49

Message le Sam Oct 08, 2005 8:41

Salut et merci beaucoup de ton aide mais ça ne résoud pas mon problème.

Tu vois pour le titre dans les encarts j'ai fait ça et pourtant il sont décalés sur la droite ?

Code: Tout sélectionner
#encart h3 {
font-size: small;
text-align: center;}


D'autre part, effectivement je pense que je vais essayer d'utiliser des tableaux pour placer mes encarts dans mes colonnes de gauche et de droite mais il faut que je fasse seulement ?

Code: Tout sélectionner
<table style="align:center">


Ou peut-être avec margin:auto ?

Par avance merci.
Haut

serval2a
WRInaute accro
WRInaute accro
 
Messages: 3453
Inscription: Lun Mar 21, 2005 18:17

Message le Sam Oct 08, 2005 9:20

Je viens d'essayer en complétant le code plus haut avec des instructions de mise en forme.

Code html =
Code: Tout sélectionner
<div id="gauche">
<h1></h1>
<p></p>
</div>


Avec comme code CSS =
Code: Tout sélectionner
#gauche {
float:left;
width: 150px;
background-color: #CCCCCC;
}
div#gauche h1
{
text-align: center ;
}
div#gauche p
{
text-align: justify ;
}


Fonctionne bien.
Haut

serval2a
WRInaute accro
WRInaute accro
 
Messages: 3453
Inscription: Lun Mar 21, 2005 18:17

Message le Sam Oct 08, 2005 9:30

tanguy a écrit:
Code: Tout sélectionner
#encart h3 {
font-size: small;
text-align: center;}


Je crois que j'ai compris essaie ça à la place:
Code: Tout sélectionner
div#encart h3 {
font-size: small;
text-align: center;}


En mettant #encart h3 il me semble (pas sur) que l'instruction vise une hypothétique balise appelée par l'instruction <div class="encart"> et non <div id="encart">.

Comme tu appeles bien <div id="encart"> l'instruction ne peu être que propre à "encart" donc pour définir le style d'"encart" tu dois utiliser div#encart h3 qui signifie pour le navigateur : "applique l'instruction <h3> de la balise div nommée encart."
Haut
spidetra
WRInaute accro
WRInaute accro
 
Messages: 1500
Inscription: Lun Juil 07, 2003 13:06

Message le Sam Oct 08, 2005 9:46

pour tout ce qui est mise en page, css, standard du web, je te conseille les forums d'alsacreations :
http://forum.alsacreations.com/forum.php

et en plus sur le forum d'alsacreations tu éviteras des réflexions du style : "utilise des tableaux pour faire ta mise en page" :wink:
tu as raisons de t'emm..... avec les div et d'essayer de progresser.
Les tableaux ne servent pas à la mise en page mais à la présentation des données tabulaires.
regarde la page d'accueil de WRI : pas de tableau (sauf pour les adsense).
Je suis incapable de t'aider en css, je ne peux que t'encourager à perseverer dans l'utilisation des div.
Haut
tanguy
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 168
Inscription: Jeu Mai 12, 2005 9:49

Message le Sam Oct 08, 2005 9:57

Merci les gars c'est sympa de m'aider.

Serval2a je n'ai pas de soucis avec mes colonnes de gauche et de droite, le problème c'est le positionnement des encarts dans ces 2 colonnnes ainsi que le positionnement du titre dans ces encarts.

Je ne crois pas que ça a de l'importance de mettre #encart ou div#encart.

Si je dois utiliser l'attribut "class" alors j'ecrirais .encart.

Il faut donc que je garde le mise en page à l'aide de DIV par contre, je peux peut-être faire mes encarts à l'aide de tableaux ?
Haut
spidetra
WRInaute accro
WRInaute accro
 
Messages: 1500
Inscription: Lun Juil 07, 2003 13:06

Message le Sam Oct 08, 2005 10:10

tanguy a écrit:Il faut donc que je garde le mise en page à l'aide de DIV par contre, je peux peut-être faire mes encarts à l'aide de tableaux ?


il faut surtout que tu fasses ce qui est le plus simple pour toi, et que tu progresses à ton rythme.
Mais il est vrai que ta progression devrait aller dans le sens des div ( c plus dur que les tableaux )
Haut

serval2a
WRInaute accro
WRInaute accro
 
Messages: 3453
Inscription: Lun Mar 21, 2005 18:17

Message le Sam Oct 08, 2005 10:23

Je viens de visualiser ta page sur mon ordi avec les instructions que tu as indiqué dans ton 1er message.
Par curiosité : pourquoi t'embêtes-tu a inclure "encart" dans "cadre2" ?

Tu devrais faire simplement une div "conteneur" qui englobe un div header, un div menu haut tes 3 div de colonnes et ton div bas de page.
La mise en page de chaque partie étant appelée par l'instruction CSS correspondante.

Si j'étais toi, je fusionnerai les div cadre avec les div encart correspondantes. Je doute que tu puisses avoir un code CSS qui fonctionne sinon.
Haut
tanguy
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 168
Inscription: Jeu Mai 12, 2005 9:49

Message le Sam Oct 08, 2005 10:45

Ok, c'est bien ce que j'aimerais faire mais je ne trouve pas la solution pour insérer simplement ces encarts dans mes colonnes de gauche et de droite sans utiliser de div car en dessous de mes encart il va peut-être aussi y avoir du texte.
Haut

serval2a
WRInaute accro
WRInaute accro
 
Messages: 3453
Inscription: Lun Mar 21, 2005 18:17

Message le Sam Oct 08, 2005 11:09

Tes encarts contiennent des balises h3 et ul :
Code: Tout sélectionner
<div id="cadre2">
   <div id="encart">
      <h3>Titre</h3>
      <div id="bloccadre">
         <ul>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
         </ul>
            </div>
               </div>
                  </div>


Si tu fusionnes en "cadre 2" par exemple tu pourras appeler la mise en page par :
div#cadre2 h1
div#cadre2 h2
div#cadre2 h3
div#cadre2 p
div#cadre2 li
div#cadre2 a
div#cadre2 a:hover
div#cadre2 a:visited

Pareil pour cadre1, cadre3, menu, head...
Code: Tout sélectionner
<div id="cadre2">
      <h3>Titre</h3>
         <ul>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
            <li>essai</li>
            <p>texte</p>
         </ul>
            </div>
Haut

lg
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 129
Inscription: Lun Juil 12, 2004 19:07

Message le Sam Oct 08, 2005 12:10

bonjour !
teste !
<html>
<!-- Date de création: 07/10/2005 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="">
<meta name="Generator" content="WebExpert 2000">
<link type="text/css" href="texte1.css" rel="stylesheet">
</head>
<body>

<DIV id="cadre">

<DIV id="cadre1">
<h2>essai</h2>
</div>

<div id="menuhaut">
<ul id="menuhaut">
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
<li><a href="#">lien</a></li>
</ul>
</div>

<div id="cadre2">

<div id="encart">
<h3>Titre</h3>
<div class="bloccadre">
<ul>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
</ul>
</div>
</div>
</div>


<div id="cadre3">
<div id="encart2">
<h4>Titre</h4>
<div class="bloccadre">
<ul>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
<li>essai</li>
</ul>
</div>
</div>
</div>


<div id="cadre4">
<p>Et duis, qui illum elit. Diam qui ipsum nulla molestie diam iusto nostrud sed ullamcorper esse erat. Hendrerit delenit nulla nibh eu, delenit eum consequat tincidunt tincidunt blandit suscipit, vulputate. Duis illum, enim, minim nisl consequat molestie at vel in eum dolore magna ullamcorper luptatum. Nulla ea, nulla et exerci, ea vel dolore accumsan. Eros quis ad volutpat feugiat, ut dolore nisl feugait erat odio qui feugait in, ex minim vero ullamcorper. Euismod at vero duis nulla ex ipsum wisi in, luptatum wisi adipiscing consequat exerci. Hendrerit ut suscipit accumsan vel.

Facilisis lobortis feugait, enim volutpat ut velit eros iriure dignissim, dolor facilisis. Eum exerci vulputate blandit eum dolore ipsum adipiscing ad. Sed nisl in. Dolore luptatum iusto et molestie at. Ut wisi illum vulputate, nisl consequat nulla ex iusto, nulla. Nulla minim vero duis et luptatum tincidunt illum elit at in esse suscipit vulputate feugait, ullamcorper luptatum ex. Dolor blandit dolore minim in iusto consequat, tincidunt feugait in eum lorem. Consectetuer vel, odio qui minim, wisi in eu feugiat erat molestie, dolor tation nulla, dolore nisl minim duis, nulla ut. Tation ut facilisis qui, diam esse sit eu vel nonummy nostrud dolor ea quis suscipit dolore qui iusto. Facilisis, accumsan, vel et ex molestie ea vel consequat duis qui consequat et exerci wisi nulla odio.
</p>
</div>

<div id="piedpage">
<p>essai</p>
</div>
</div>
</body>
</html>

harset "iso-8859-1";
/* Date de création: 07/10/2005 */
body { font-family: Verdana, Arial, "Times New Roman", Serif;
background-color:white;
color: white;
font-size:xx-small;
text-align:center;
}

#cadre {
width:100%;
margin-top:0;
margin-left:0;
margin-right:0;
background:black;
}
#menuhaut {background-color: #CCFFFF;
width:100%;
}
#cadre1 {
background-color: #ffffff;
width:100%;
}
#cadre2 { float:left;
margin-top: 0;
width:160px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#cadre3 { float:right;
margin-top: 0;
width:160px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#cadre4 {
margin-left:161px;
margin-right: 161px;
}
#piedpage {
margin:0;
background-color: blue;
height:30px;
line-height:30px;
color:white;
text-align:center;
}
#cadre1 h2 {
text-align:center;
color: #000000;
padding-top:30px;
}
#cadre3 h3{
padding:0;
margin:0;
text-align:center;
background-color:#FFFFFF;
}
#menuhaut li {display: inline;
list-style-type: none;
}

#menuhaut li a {float:right;
padding-left:20px;
color:red;
}
#menuhaut li a:hover {color:black;
display:block;
background-color:white;
border: 1px solid black;
}
#encart{
float: left;
width: 250px;
padding-top: 30px;
background: #6600FF;
}
#encart2{
width: 250px;
padding-top: 30px;
background: #6600FF;
}
#encart2 h4 {
font-size: small;
text-align: center;}
#encart h3 {
font-size: small;
text-align: center;}
.bloccadre {
background: #6600FF;
}
.bloccadre ul {margin:70px;
padding:0;}
.bloccadre li {margin:0;
padding:0px;
text-align:left;
font-size:x-small;
}
.bloccadre li a {color:red;
text-decoration:none;}
.bloccadre li a:hover {font-weight:bold;
border : 1px solid black;
color:blue;
}
#cadre4 p {padding-top: 30px;
line-height: 30px;}
Haut
tanguy
WRInaute occasionnel
WRInaute occasionnel
 
Messages: 168
Inscription: Jeu Mai 12, 2005 9:49

Message le Sam Oct 08, 2005 13:06

Merci à tous mais j'ai trouvé la solution mais peut-être encore améliorée.

Code: Tout sélectionner
<!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>
<title>encart</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
@import url("encart.css");
-->
</style>

<body>

<DIV id="cadre">

<DIV id="cadre1">
</div>

<div id="menuhaut">
   <ul id="menuhaut">
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
      <li><a href="#">lien</a></li>
         </ul>
            </div>

<div id="cadre2">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="50" style="background-image: url(images/posthaut.gif);">
</td>
</tr>
<tr>
<td width="150" style="background-image: url(images/postbas.gif);">
         <ul id="menu">
            <li><a href="lien.htm">lien1</a></li>
            <li><a href="lien.htm">lien2</a></li>
            <li><a href="lien.htm">lien3</a></li>
            <li><a href="lien.htm">lien4</a></li>
            <li><a href="lien.htm">lien5</a></li>
            <li><a href="lien.htm">lien6</a></li>
         </ul>
            </td>
               </tr>
                  </table>
                     </div>


<div id="cadre3">
<table cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="50" style="background-image: url(images/posthaut.gif);">
<h5>Nouveautés</h5></td>
</tr>
<tr>
<td width="150" style="background-image: url(images/postbas.gif);">
      <ul id="menu2">
         <li><a href="lien.htm">septembre 2005</a></li>
         <li><a href="lien.htm">octobre 2005</a></li>
         <li><a href="lien.htm">novembre 2005</a></li>
            </ul>
               </tr>
               </table>
   
         </div>
         

<div id="cadre4">

   <p>Et duis, qui illum elit. Diam qui ipsum nulla molestie diam iusto nostrud sed ullamcorper esse erat. Hendrerit delenit nulla nibh eu, delenit eum consequat tincidunt tincidunt blandit suscipit, vulputate. Duis illum, enim, minim nisl consequat molestie at vel in eum dolore magna ullamcorper luptatum. Nulla ea, nulla et exerci, ea vel dolore accumsan. Eros quis ad volutpat feugiat, ut dolore nisl feugait erat odio qui feugait in, ex minim vero ullamcorper. Euismod at vero duis nulla ex ipsum wisi in, luptatum wisi adipiscing consequat exerci. Hendrerit ut suscipit accumsan vel.

Facilisis lobortis feugait, enim volutpat ut velit eros iriure dignissim, dolor facilisis. Eum exerci vulputate blandit eum dolore ipsum adipiscing ad. Sed nisl in. Dolore luptatum iusto et molestie at. Ut wisi illum vulputate, nisl consequat nulla ex iusto, nulla. Nulla minim vero duis et luptatum tincidunt illum elit at in esse suscipit vulputate feugait, ullamcorper luptatum ex. Dolor blandit dolore minim in iusto consequat, tincidunt feugait in eum lorem. Consectetuer vel, odio qui minim, wisi in eu feugiat erat molestie, dolor tation nulla, dolore nisl minim duis, nulla ut. Tation ut facilisis qui, diam esse sit eu vel nonummy nostrud dolor ea quis suscipit dolore qui iusto. Facilisis, accumsan, vel et ex molestie ea vel consequat duis qui consequat et exerci wisi nulla odio.
   </p>
         </div>

<div id="piedpage">
   <p>Pied de page</p>
      </div>
         </div>
</body>

</html>


Code: Tout sélectionner
body {  font-family: Verdana, Arial, "Times New Roman", Serif;
   background-color:white;
   color: white;
   font-size:xx-small;
   text-align:center;
   margin: 0;
   padding: 0;}

/* encart de gauche */
#menu ul {margin: 0;
     padding: 0;}

#menu li{list-style-type: none;}

#menu a {text-decoration: none;
    color: white;}

#menu a:hover {color:black;}


/* encart de droite */
#menu2 ul {margin: 0;
      padding: 0;}

#menu2 li{list-style-type: none;
     }

#menu2 a {text-decoration: none;
     color: white;
     font-size: x-small;
     margin-left:-30px;
   }

#menu2 a:hover {color:black;}

#cadre {margin:10px auto;
           padding:0;
      width:760px;
      background:black;
      text-align:left;
      }

#cadre1 {height:200px;
    background: url(images/imageshaut.jpg) no-repeat;
}

#cadre1 h2 {text-align:center;
       padding-top:30px;}

/* menu horizontal */
#menuhaut {background-color: rgb(157,98,151);
      margin:0;
      padding:5px 20px 10px 0;
}
    

#menuhaut li {display: inline;
            list-style-type: none;
}           

#menuhaut li a {float:right; 
          padding-left:20px;
          color:white;
}

#menuhaut li a:hover {color:black;
           display:block;
           background-color:white;
           border: 1px solid black;
}


#cadre2 { float:left;
     width:170px;
     margin-left: auto;
          margin-right: auto;
     padding-top:20px;
    }

#cadre2 table {margin-left:10px;
          margin-right:20px;
          margin-top:100px;}

#cadre3 { float:right;
     margin:0;
     padding-top:20px;
     width:160px;
     text-align: center;
     }

#cadre3 table {margin-right:20px;
          margin-top:100px;}

#cadre3 h5 {text-align:center;
       text-decoration:underline;}


#cadre4 { margin:0 170px 0 160px;    
        }

#cadre4 p {padding-left: 10px;
      padding-top: 30px;
      line-height: 30px;}    

#piedpage { margin:0;
       background-color: rgb(157,98,151);
       height:30px;
       line-height:30px;
       color:white;
       text-align:center;
Haut
presentation a 3 colonnes avec 2 encarts
Répondre

Formation recommandée sur ce thème :

Formation Référencement naturel Google : apprenez une méthode efficace pour optimiser à fond le référencement naturel dans Google de façon durable... Formation animée par Olivier Duffez et Fabien Facériès, experts en référencement naturel.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :



Qui est en ligne

Utilisateurs parcourant ce forum: UsagiYojimbo et 0 invités

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group , traduction par phpBB-fr.com, mod SEO par phpbb-seo.com