Tutoriels vidéo art graphique gratuits

 
Bienvenue, Invité. Merci de vous connecter ou de vous inscrire.
Pages: [1]   En bas

Auteur Sujet: Complément du message Colonne décalée dans DREAM CS5  (Lu 3675 fois)

soph

  • Wisi Addict
  • ***
  • Hors ligne Hors ligne
  • Messages: 129
  • Ama Dablam
    • Voir le profil
    • E-mail
Complément du message Colonne décalée dans DREAM CS5
« le: décembre 26, 2018, 14:15:59 pm »

Je joins donc le code source et la CSS car c'était pas possible dans le message précédent.
Si une bonne âme voit le problème,
je vous en remercie !



<!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" lang="en" xml:lang="en">
   <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <link rel="stylesheet" type="text/css" href="css/estils.css" media="screen" />
      <title>Tarragó 1500 créaciónes a medida en españa,Portugal, Pais Bascos, Canaria, Ibiza, Algemesi, Albacete, Andorra la Vella, Andorra Cortals, Begues, Canet, Espluga de Francoli, Madrid Reebok, Urban Monkey, Madrid tienda Rincón de la montaña, Olot, Pertugalete, Palencia, Peñiscola camping, Raspeig (St Vicent de), Valladolid</title>
   </head>
   <body>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-44137295-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
      <div id="wrapper">
         <div id="header">
            <div id="logo">
              <h1><a href="index.html"><img src="images/logo_tarrago.png" alt="logo" width="157" height="70" class="logo" /></a></h1>
              <h2><em>David TARRAGÓ, campeón mundial de escalada</em></h2>
<font  color="#EE3333">Fabricante, constructor experto de rocódromos desde 35 años<br />
        Creación artística especial, en hormigón<br />
        Embellecimiento del entorno publico y privado</font><a href="index.html"><br />
        </a></div>
           <div class="clr"></div>
         </div>
        <div class="content">
           <ul id="menu">
             <li>
               <table width="940" border="0" cellpadding="0" cellspacing="0">
                 <tr>
                   <th scope="col"><h5 align="center"><a href="rocodromo.html" title="rocodromo">ROCÓDROMO</a></h5></th>
                   <td scope="col"><h5><a href="boulder.html" title="bulder">BouLDER</a></h5></td>
                   <td scope="col"><h5 align="center"><a href="talud.html">TALUD</a></h5></td>
                   <td scope="col"><h5 align="center"><a href="mantenimiento.html">mantenimiento</a></h5></td>
                   <th nowrap="nowrap" scope="col"><h5 align="center"><a href="foto1.html">FOTO 1</a></h5></th>
                   <th nowrap="nowrap" scope="col"><h5 align="center"><a href="foto2.html">FOTO 2</a></h5></th>
                   <td scope="col"><h5><a href="nosotros.html">nosotros</a></h5></td>
                   <td scope="col"><h5 align="center"><a href="contacto.html" title="contacto tarrago">contacto</a></h5></td>
                  </tr>
                </table>
              </li>
             <li></li>
             <div align="left"></div>
             <li></li>
            </ul>
           <div id="pitch" style="background: url(images/fotos_entrada/texture.jpg)"></div>
           <h4>Esculpir el hormigón es un arte</h4>
        </div>
         <div id="main">
           <div class="col">
          <h3>Ejemplo de obras</h3>
               <div class="case">                  
                  <img src="images/foto_novedades/espluga.jpg" alt="Rocódromo Espluga de Francolí" id="espluga" />
                  <p class="short"><a href="fitxa_espluga.html">Espluga de Francolí</a><br />
                  Rocódromo de hormigón proyectado en el centro de actividades de aventura Drac Actiu
                 <a href="fitxa_espluga.html">&raquo;</a>           </p>
            </div>
               <div class="case">
                  <img src="images/foto_novedades/algemesi.jpg" alt="bulder Algemesi" id="algemesi" />
                  <p class="short"><a href="fitxa_algemesi.html"></a><a href="fitxa_algemesi.html">Búlder Algemesí</a><br />
                   60 m2 de superfície escalable con acabado simulando piedra. Se puede escalar sobre agarres naturales<a href="fitxa_algemesi.html"> &raquo;</a></p>
               </div>
               <div class="case">
                  <img src="images/foto_novedades/portugalete.jpg" alt="bulder portugalete" id="portugalete" />
                  <p class="short"><a href="fitxa_portugalete.html">Búlder Portugalete</a><br />
                  Nuevo búlder en un parque publico de Portugalete. Ideal para la iniciación en el deporte de la escalada
                  <a href="fitxa_portugalete.html">&raquo;</a></p>
               </div>   
               <div class="case">
                  <img src="images/foto_novedades/paiporta.jpg" alt="bulder begues" id="begues" /><a href="fitxa_paiporta.html">Rocódromo </a><a href="fitxa_paiporta.html">Paiporta </a> <br />
                 Centro deportivo publico, rocódromo y bulder para el entrenamiento y  la iniciación de los más jovenes
               <a href="fitxa_paiporta.html">&raquo;</a> </div>            
            </div>
            <div class="col">
               <h3>&nbsp;</h3>
               <div class="case">                  
                  <img src="images/foto_novedades/rubi.jpg" alt="bulder la Gomera" id="gomera" />
                  <p class="short"><a href="fitxa_rubi.html">Rubi</a><br />
                  Sala muy completa de 300 m2.<br />
                 Madera y resina. Una buena solución a un precio bien ajustado<a href="fitxa_rubi.html"> &raquo;</a></p>
              </div>
              <div class="case">
                <p><img src="images/foto_novedades/palencia.jpg" alt="palencia" id="palencia" /><a href="fitxa_palencia.html">&quot;Una montaña en la ciudad&quot; - Palencia</a><br />
               Centro deportivo de referencia en Europa <a href="fitxa_palencia.html">&raquo;</a></p>
</div>
               <div class="case">
                  <img src="images/foto_novedades/urbanmonkey.jpg" alt="urban monkey" id="monkey" />
                 <p class="short"><a href="fitxa_urbanmonkey.html">Urban Monkey Madrid</a><br />
                  En  Madrid   "Urban Monkey". 450 m2 divididos en 5 salas: Rocódromo, sala mixta, sala de iniciación y sala granito
                  <a href="fitxa_urbanmonkey.html">&raquo;</a></p>
            </div>
               <div class="case">
                  <img src="images/foto_novedades/besalu.jpg" alt="búlder particular Barcelona" id="particular" />
                  <p class="short"><span class="case"><a href="fitxa_besalu.html">Rocódromo Besalu</a></span><br />
                  Rocódromo de hormigón proyectado, 12 m de altura, 170 m2 escalable, hecho con óptica de enseñar todas las técnicas de escalada paredes
                 <a href="fitxa_besalu.html">&raquo;</a></p>
               </div>      
           </div>
            <div class="col last">
               <h3>&nbsp;</h3>
               <div class="case">
                  <img src="images/foto_novedades/peniscola.jpg" alt="camping Peniscola" id="peniscola"/>
                  <p class="short"><a href="fitxa_peniscola.html">Camping Peñiscola</a><br />
                  Monolito escalable de hormigón con tirolina tiene 4 vías al lado de una piscina. Ideal para el recreo de los jovenes
                  <a href="fitxa_peniscola.html">&raquo;</a></p>
              </div>
               <div class="case">
                  <img src="images/foto_novedades/masmontana.jpg" alt="rincon montana" id="montana"/>
                 <p class="short"><a href="fitxa_masmontana.html">Rincón de montaña Madrid</a><br />
                 Rócodromo para que los clientes proban  el mate-rial, tambien pueden colocar fisureros de protección en las fisuras <a href="fitxa_masmontana.html">&raquo;</a></p>
             </div>
               <div class="case"> <img src="images/foto_novedades/valladolid.jpg" alt="valladolid" id="valladolid"/>
                  <p class="short"><a href="fitxa_valladolid.html">Valladolid</a><br />
                  En el parque de las Norias, sala muy grande construida en un depósito de agua. Varios rocódromo espectacular y un túnel<a href="fitxa_valladolid.html"> &raquo;</a></p>
            </div>
               <div class="case">
                  <img src="images/foto_novedades/portugal.jpg"/>
                 <p class="short"><a href="fitxa_portugal.html">Monolito</a><br />
                  Universidad Gualtar, Portugal. Autoestable  de 15 metros de altura. Acabado simulando piedra natural inmejorable
                  <a href="fitxa_portugal.html">&raquo;</a>            </p>
              </div>
            </div>
            <div class="clr"><a href="foto1.html">Foto 1</a> - <a href="foto2.html">Foto 2</a></div>
        </div>
         <div id="footer">
            <p id="links">
           Aviso Legal </p>
            <p>
               <a href="rocodromo.html">Rocódromo</a>
               <a href="boulder.html">Boulder</a>
               <a href="foto1.html">Foto</a>
               <a href="talud.html">Talud</a>
               <a href="nosotros.html">Nosotros</a>
               <a href="contacto.html">Contacto</a>               
         </p>
            <p>Copyright &copy; 2011</p>
         </div>
      </div>
   </body>
</html>
<!-- Localized -->
___________________________________________________________________
Je copie également CSS estils.css
/*
   template: Lawyer&Attorney
   author:   Luka Cvrk (www.solucija.com)
*/

* { margin: 0; padding: 0; }
body {
   background: url(../images/body3.gif) repeat;
   color: #888;
   font-family: Tahoma, Verdana, Sans-Serif, Arial;
   font-size: 13px;
}
h1 { font: normal 3.4em "Trebuchet MS", Helvetica, Arial; }
h2 { font: normal 1.8em "Trebuchet MS", Helvetica, Arial; color: #dfdfdf; margin: 0 0 15px; }
h3 {
   font: normal 1.3em "Trebuchet MS", Helvetica, Arial;
   margin: 0 0 20px;
   font-weight: bold;
}
h4 { font: normal 1.2em "Trebuchet MS", Helvetica, Arial; color: #dfdfdf; margin: 0 0 4px; }
p {
   margin: 0 0 20px;
   line-height: 1.6em;
   color: #7f7f7f;
   font-size: 13px;
   font-family: Tahoma, Verdana, Sans-Serif, Arial;
}
a {
   outline: 0;
   color: #09F;
   text-decoration: none;
}
li { list-style: none; }
li a, img { display: block; }
img {
   outline: 0;
   border: 0;
   color: #E3E3E3;
}
.fitxa{display:inline; margin: 0 20px 20px 0; }
#wrapper {
   width: 940px;
   margin: auto;
}
.clr {
   clear: both;
   font-size: 12px;
}
#logo { float: left; padding: 30px 15px; }
   #logo h1 a { color: #fff; }
      #logo h1 a span { color: #808080; }
#menu {
   height: 44px;
   padding: 0px;
}
   #menu li { float: left; font-size: 1.2em; text-transform: uppercase; }
      #menu li a { color: #888; margin: 0 50px 0 0; }
         #menu li a.current, #menu li a:hover { color: #fff; }         
   #pitch { clear: both; background: url(../images/pitch.jpg) no-repeat; height: 228px; margin: 0 0 30px; padding: 60px 360px 0 30px; }
      #pitch h1 { font-size: 2.4em; color: #2d2d29; margin: 0 0 20px; }
      #pitch em { font-size: 1.3em;color: #2d2d29; font-weight: bold; line-height: 1.6em; }
.content { background: url(../images/content2.gif) repeat; padding: 20px; }
.link {  color: #fff; padding: 5px 10px; font-size: .9em; }
   .link:hover{ color: #de0711;}
#main { padding: 22px; }
.col { float: left; width: 290px; margin: 0 30px 15px 0; }
   .col.last { float: right; margin-right: 0; }
.case img { float: left; clear: left; margin: 0 20px 20px 0; padding: 3px; }
   .short { padding: 0 0 15px 0; background: url(../images/line.gif) repeat-x left bottom; }
.case a, .article a { color: #ddd; font-weight: bold; }
         .article a:hover{outline: 0; color: #304D6F; text-decoration: none;color: #de0711;}
.case a:hover{outline: 0;  text-decoration: none;color: #de0711;}
   .date { font-size: .84em; margin: 0 0 3px; }
.case { height: 160px; }

.colcontacto { float: left; width: 292px; margin: 0 30px 15px 0; }
   .colcontacto.last { float: right; margin-right: 0; width:598px; }
   
#footer {
   clear: both;
   background: url(../images/line.gif) repeat-x;
   padding: 20px 20px 20px;
   font-size: 0.9em;
}
   #footer a { color: #ccc; margin: 0 10px 0 0; border-bottom: 1px dotted #444; padding: 0 0 1px; }
   #links { float: right; }
      #links a { margin: 0 0 0 10px; }
   #footer p {
   margin: 0 0 8px 4;
}

.campstexte {
   color: #333333;
   text-decoration: none;
   background-color: #fff;
   padding-right: 3px;
   padding-left: 3px;
   padding-top: 3px;
   padding-bottom: 3px;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
   height: 20px;
   margin-left:10px;
   margin-right:10px;
}
.campstextearea {  font-size: 1.6em; color: #333333; text-decoration: none; background-color: #fff; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; height: 150px}

.botonformulari {
   color: #ffffff;
   text-decoration: none;
   background-color: #de0711;
   padding-right: 10px;
   padding-left: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
   border-top-width: 0px;
   border-right-width: 0px;
   border-bottom-width: 0px;
   border-left-width: 0px;
   height: 20px;
   margin-right:20px;
.ongletpet {
   font: normal small/normal Verdana, Geneva, sans-serif;
   text-transform: lowercase;
}
#wrapper .content .content #menu li div a .ongletpet {
   font: bold normal x-small/normal Verdana, Geneva, sans-serif;
   text-transform: uppercase;
   color: #FFF;
}
#wrapper .content .content #menu li div a .ongletpet {
   color: #C00;
}
#wrapper .content .content #menu li div a .ongletpet {
   color: #FFF;
}
rougesponsor {
   color: #C00;
}
#wrapper #main table caption div strong {
   color: #F03;
}
.orange {
   color: #ff9900;
}
.orange2 {
   color: #F90;
}

IP archivée
Si vous ne pouvez pas déplacer les montagnes contournez-les
 



Wisibility est un sité dédié à la formation aux métiers l’image. Vous y trouverez différentes ressources vous aidant à maîtriser les logiciels graphiques tels que Photoshop, Lightroom, Illustrator, InDesign, Flash… Aujourd’hui, Wisibility réunie plus d'une vingtaine d’experts, intervenant en Entreprise pour former graphistes, webdesigners, développeurs web, photographes, monteurs, trucistes…
Depuis 2006 nous nous sommes spécialisés dans les tutoriels vidéos permettant de se former à distance. Notre forum très actif, géré par une équipe de bénévoles répondra à vos demandes. Vous pourrez également profiter de nos émissions et reportages sur la Wisi TV.
Contact - Wisibility est une marque déposée

Blog - Tutoriels - Wisi TV - Forum