Foros del Web » Creando para Internet » Diseño web »

Maquetar esto de HTML a CSS

Estas en el tema de Maquetar esto de HTML a CSS en el foro de Diseño web en Foros del Web. Hola trato de hacer esto en CSS, me ayudarina hacerlo con HTML5 y CSS , echo varios intentos pero no se que hago mal, para ...
  #1 (permalink)  
Antiguo 13/07/2017, 15:04
Avatar de emilio_viguri  
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 88
Antigüedad: 6 años, 5 meses
Puntos: 2
Información Maquetar esto de HTML a CSS

Hola trato de hacer esto en CSS, me ayudarina hacerlo con HTML5 y CSS , echo varios intentos pero no se que hago mal, para acomodar las cosas entoces pues para muchos es algo basico pero pues quiero ver como lo hace alguien que sabe maquetar bien.
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>SOS</title>
  5. </head>
  6.  
  7. <table width="90%" border="1" align="center">
  8.   <tr>
  9.     <td>Logotipo</td>
  10.     <td colspan="2">Menu como lo tines en http://www.falconmasters.com/</td>
  11.   </tr>
  12.   <tr>
  13.     <td colspan="3"><table width="100%" border="1">
  14.       <tr>
  15.         <td>Aqui me gustaria poner una imange e inofrmacion a un cotado </td>
  16.         <td><table width="200" border="0">
  17.           <tr>
  18.             <td><img src="http://www.falconmasters.com/wp-content/themes/falconmasters-v2/images/logo.jpg" width="50" height="50" /></td>
  19.             <td>Texto que va en la imagen </td>
  20.           </tr>
  21.         </table></td>
  22.         <td>Esto lo voy a poner en todo igual como una tabla las mediadas pues no las e establecido por que estoy aprendiedo</td>
  23.       </tr>
  24.       <tr>
  25.         <td>#4</td>
  26.         <td>#5</td>
  27.         <td>#6</td>
  28.       </tr>
  29.       <tr>
  30.         <td>#7</td>
  31.         <td>#8</td>
  32.         <td>etc...</td>
  33.       </tr>
  34.     </table></td>
  35.   </tr>
  36.   <tr>
  37.     <td colspan="3">Pie de paguina</td>
  38.   </tr>
  39. </body>
  40. </html>
__________________
Ing. Emilio Viguri de NEXCEN Visitamos en lo que podamos ayudarte.
  #2 (permalink)  
Antiguo 13/07/2017, 15:11
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.946
Antigüedad: 14 años, 8 meses
Puntos: 1801
Respuesta: Maquetar esto de HTML a CSS

La realidad es de que mejor contrata a alguien que te lo haga.

Si no, utiliza un servicio como Wordpress y genera un sitio nuevo.
  #3 (permalink)  
Antiguo 23/08/2017, 09:38
Avatar de emilio_viguri  
Fecha de Ingreso: junio-2011
Ubicación: Mexico
Mensajes: 88
Antigüedad: 6 años, 5 meses
Puntos: 2
Respuesta: Maquetar esto de HTML a CSS

Bueno si alguien le sirve lo comparto despues de mucho lo logre y aqui lo tengo

Código HTML:
Ver original
  1. <!doctype html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <meta name="MobileOptimized" content="width" />
  4. <meta name="HandheldFriendly" content="true" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>Documento sin título</title>
  7. <link href="archivos/estilo/cuerpo.css" rel="stylesheet" type="text/css">
  8. <link href="archivos/estilo/index.css" rel="stylesheet" type="text/css">
  9. </head>
  10.  
  11. <div class="header">
  12.     <div class="encabezado">
  13.     <div class="logotipo"><img src="archivos/imagenes/xlogonexcen.png" width="45" /></div>
  14.     <div class="nav">
  15.     <ul>
  16.         <li><a href="#" class="aqui">Inicio</a></li>
  17.         <li><a href="#">Servicio</a></li>
  18.         <li><a href="#">Saber mas</a></li>
  19.         <li><a href="#">Contactanos</a></li>
  20.         <li>
  21.         <form>
  22.             <input name="search" type="text" class="buscar" placeholder=" B u s c a r. . .">
  23.         </form></li>
  24.     </ul>
  25.     </div>
  26. </div>
  27. </div>
  28.  
  29. <section style="clear:both;">
  30. <div class="todo">
  31.         <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  32.         <div>PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  33. </div>
  34. <div class="mitad">
  35.     <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  36.     <div style="overflow:auto; height:130px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  37. </div>
  38. <div class="mitad">
  39.     <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  40.     <div style="overflow:auto; height:130px; ">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  41. </div>
  42.  
  43. <div class="cuarto">
  44.     <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  45.     <div style="overflow:auto; height:100px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  46. </div>
  47. <div class="cuarto">
  48.     <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  49.     <div style="overflow:auto; height:100px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  50. </div>
  51. <div class="cuarto">
  52.     <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  53.     <div style="overflow:auto; height:100px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  54. </div>
  55. <div class="cuarto">
  56.     <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  57.     <div style="overflow:auto; height:100px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  58. </div>
  59.  
  60.  
  61. <div class="cuarto">
  62.     <div style="float:left; padding:10px; width:100 px; height:100 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  63.     <div style="overflow:auto; height:100px;">PHP CSS. Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG. CSS describe como debe ser renderizado el elemento estructurado en pantalla, en papel, hablado o en otros medios.16 ago. 20</div>
  64. </div>
  65. <div class="cuarto">
  66.     <div style="float:left; padding:10px; width:100 px; height:100 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
  67.     <div style="overflow:auto; height:100px;">contenido corto sdf sdf </div>
  68. </div>
  69.  
  70.  
  71.  
  72.     <div class="footer">footer</div>
  73.  
  74. </body>
  75. </html>
Código CSS:
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. *{
  4.     margin:0px;
  5.     padding:0px;
  6. }
  7. body{
  8.     background-color: #CCCCCC;
  9. }
  10. .header{
  11.     width:100%;
  12.     height:50px;   
  13.     background:#333333;
  14. }
  15. .encabezado{
  16.     margin:auto;
  17.     width:90%;
  18.     max-width:900px;
  19.     position:relative;
  20. }
  21. .logotipo{
  22.     position: absolute;
  23.     width: 50px;
  24.     height: 50px;
  25.     top: 0px;
  26.     left: 0px;
  27.     padding:1px;
  28. }
  29. .nav{
  30.     position: absolute;
  31.     left: 70px;
  32.     height: 50px;
  33.     width: auto;
  34.     top: 0px;
  35. }
  36. .nav ul{
  37.     list-style:none;
  38. }
  39. .nav ul li{
  40.     float:left;
  41.     background:#333333;
  42. }
  43. .nav ul li a{
  44.     padding: 15px; 10px;
  45.     display: block;
  46.     color: #FFF;
  47.     text-decoration: none;
  48.     border-radius:10px 0px 10px 0px;
  49. }
  50. .nav ul li a:hover{
  51.     color: #2d2d2d;
  52.     background-color: #D8D8D8;
  53. }
  54. .nav ul li a:active{
  55.     color: #2d2d2d;
  56.     background-color: #C1C1C1;
  57. }
  58. .nav ul li .aqui{
  59.     color: #2d2d2d;
  60.     background-color: #CCCCCC;
  61.     border-radius:0px 10px 0px 0px;
  62. }
  63. section{
  64.     margin: auto;
  65.     width: 90%;
  66.     max-width: 900px;
  67. }
  68. footer{
  69.     background-color: #BBBBBB;
  70.     height:auto;
  71.     min-height:100px;
  72. }
  73. .footer{
  74.     margin: auto;
  75.     width: 90%;
  76.     max-width: 900px;  
  77. }
  78. .buscar{
  79.     margin:10px;
  80.     width: 60px;
  81.     box-sizing: border-box;
  82.     border-radius: 3px;
  83.     font-size: 11px;
  84.     background-color: white;
  85.     background-image: url(buscar.png);
  86.     background-position: 1px 1px;
  87.     background-repeat: no-repeat;
  88.     background-size:contain;
  89.     padding: 6px 10px 6px 30px;
  90.     -webkit-transition: width 0.4s ease-in-out;
  91.     transition: width 0.4s ease-in-out;
  92. }
  93. .buscar:focus {
  94.     width: 200px;
  95.     border: 2px solid #09C;
  96.     box-shadow: 0 0 10px #069;
  97.     background-color: white;
  98.     background-image: url(buscar.png);
  99.     background-position: 1px 1px;
  100.     background-repeat: no-repeat;
  101.     background-size: contain;
  102. }
  103. @charset "utf-8";
  104. /* CSS Document */
  105. .todo{
  106.     display: inline-block;
  107.     width: 98%;
  108.     height: 150px;
  109.     background: #FFF;
  110.     border-radius: 10px;
  111.     padding: 2px;
  112.     margin: 2px;
  113.     min-width:200px;
  114. }
  115. .todo .todohover:hover{
  116.     display: inline-block;
  117.     width: 98%;
  118.     height: 150px;
  119.     min-width: 200px;
  120.     background-color: #CCC;
  121. }
  122. .mitad{
  123.     display: inline-block;
  124.     width: 48.5%;
  125.     height: 150px;
  126.     background: #FFF;
  127.     border-radius: 10px;
  128.     padding: 2px;
  129.     margin: 2px;
  130.     min-width:100px;
  131. }
  132. .cuarto{
  133.     display: inline-block;
  134.     width: 23.9%;
  135.     height: 150px;
  136.     background: #FFF;
  137.     border-radius: 10px;
  138.     padding: 2px;
  139.     margin: .5px;
  140. }
  141. section .cuatro:hover{
  142.     box-shadow: 10px 10px 5px #888888;
  143. }
__________________
Ing. Emilio Viguri de NEXCEN Visitamos en lo que podamos ayudarte.
  #4 (permalink)  
Antiguo 23/08/2017, 15:11
Avatar de KATHYU  
Fecha de Ingreso: julio-2013
Mensajes: 508
Antigüedad: 4 años, 4 meses
Puntos: 41
Respuesta: Maquetar esto de HTML a CSS

En dispositivos pequeños no se ve nada bien
__________________
Al contrario de lo que muchos podrían afirmar, ayudar no te hace pobre, sino más rico.
  #5 (permalink)  
Antiguo 26/08/2017, 04:30
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.946
Antigüedad: 14 años, 8 meses
Puntos: 1801
Respuesta: Maquetar esto de HTML a CSS

Felicidades primero que nada por haberte esforzado.

Voy a elaborar un par de posts con recomendaciones de tu código.

1. Casi nunca hay que usar el position absolute.

Es una mala práctica que se introdujo con el nefasto concepto de "capas" de dreamweaver hace como 15 años.

Una página web debe de fluir, conforme a las circunstancias del lado del cliente.

2. No pongas estilos dentro del HTML, es casi igual de malo que usar tablas.

Lo correcto es utilizar un class, pero para mí lo correcto es usar un class en el contenedor y decirle a lo de adentro cómo comportarse dentro de ese contenedor.
  #6 (permalink)  
Antiguo 26/08/2017, 04:39
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.946
Antigüedad: 14 años, 8 meses
Puntos: 1801
Respuesta: Maquetar esto de HTML a CSS

Acá está cómo se vé tu código:

https://jsfiddle.net/uLqjjem7/1/

Como puedes ver el acomodo se descuadra bastante cuando el tamaño dispnible es imitado.

La premisa es semejante al concepto TR de una tabla.

Prepara lo que va en una fila, en una sección, y luego el comportamiento de los hijos que viven en esa sección.

Una vez que defines este comportamiento, lo aplicas a varias secciones:

Código HTML:
Ver original
  1. <section class="Columnas">
  2.  <div></div>
  3.  <div></div>

Explora la propiedad flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/



La zona horaria es GMT -6. Ahora son las 11:27.