Tema: Diseño en imagen, necesito cortar, css y html
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 17/01/2012, 15:34
Avatar de cristian_cena
cristian_cena
Colaborador
  
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 6 meses
Puntos: 269
Respuesta: Diseño en imagen, necesito cortar, css y html
Hola, te comparto el marcado y el maquetado básico,
Si no trabajas con html5 reemplazá los tags: section. header, article y footer por divs con clases ejemplo: para section podes hacer <div class="section"> y en los estilos reemplazar section{} por .section{}

Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         /*tu reset: eric meyer, html5doctor, boilerplate, etc.*/ *{margin:0 auto;}
  8.         body{
  9.             font-size:; 
  10.         }
  11.         section{ overflow: hidden;}
  12.             .imagen{
  13.                 float:left;
  14.                 width:;
  15.             }
  16.                 .imagen img{
  17.                     display:block;
  18.                     width:;
  19.                     height:;
  20.                 }
  21.                 .imagen .social{}
  22.             .post{
  23.                 float:left;
  24.                 width:;
  25.             }
  26.                 .post header{
  27.                     background: url("ruta/directorio/star.png") 0 0 no-repeat;
  28.                 }
  29.                 .post header h2{
  30.                     margin:0 0 0 ...px; /*left*/
  31.                 }
  32.                 .post article{
  33.                     padding:;
  34.                     border: 1px solid #707070;
  35.                     -webkit-border-radius:;
  36.                     -moz-border-radius:;
  37.                     border-radius:;
  38.                 }
  39.                 .post footer{}
  40.                     .post footer a{}
  41.                     .post footer span{}
  42.     </style>
  43. </head>
  44. <body>
  45.     <section> 
  46.         <div class="imagen">
  47.             <img src="" alt="">
  48.             <div class="social"></div>
  49.         </div>
  50.         <div class="post">
  51.             <header>
  52.                 <h2>{{primer postal}}</h2>
  53.             </header>
  54.             <article>
  55.                 {{contenido}}
  56.             </article>
  57.             <footer>
  58.                 <a href="#">{{categoría}}: </a>
  59.                 <a href="#">{{cat1}}</a> <span>,</span>
  60.                 <a href="#">{{cat2}}</a> <span>,</span>
  61.                 <a href="#">{{catn}}</a> <span>
  62.             </footer>
  63.         </div>
  64.     </section>
  65.     <!-- copias y pegas tantos section como necesites, en tu imagen son 2 -->
  66. </body>
  67. </html>

Fijate que solo tenés que rellenar las propiedades. ya más que eso sería hacerte todo el trabajo así que te invito a que lo termines con la ayuda de este manual, en concreto este capítulo o bien de algún otro compañero.

Suerte.