Maquetar esto de HTML a CSS

emilio_viguri · #1 (**permalink**) 13/07/2017, 14:04

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<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SOS</title>
</head>
 
<body>
<table width="90%" border="1" align="center">
  <tr>
    <td>Logotipo</td>
    <td colspan="2">Menu como lo tines en http://www.falconmasters.com/</td>
  </tr>
  <tr>
    <td colspan="3"><table width="100%" border="1">
      <tr>
        <td>Aqui me gustaria poner una imange e inofrmacion a un cotado </td>
        <td><table width="200" border="0">
          <tr>
            <td><img src="http://www.falconmasters.com/wp-content/themes/falconmasters-v2/images/logo.jpg" width="50" height="50" /></td>
            <td>Texto que va en la imagen </td>
          </tr>
        </table></td>
        <td>Esto lo voy a poner en todo igual como una tabla las mediadas pues no las e establecido por que estoy aprendiedo</td>
      </tr>
      <tr>
        <td>#4</td>
        <td>#5</td>
        <td>#6</td>
      </tr>
      <tr>
        <td>#7</td>
        <td>#8</td>
        <td>etc...</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td colspan="3">Pie de paguina</td>
  </tr>
</table>
</body>
</html>

Rafael · #2 (**permalink**) 13/07/2017, 14:11

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.

emilio_viguri · #3 (**permalink**) 23/08/2017, 08:38

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

Código HTML:

Ver original<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="MobileOptimized" content="width" /> 
<meta name="HandheldFriendly" content="true" /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Documento sin título</title>
<link href="archivos/estilo/cuerpo.css" rel="stylesheet" type="text/css">
<link href="archivos/estilo/index.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div class="header">
    <div class="encabezado">
    <div class="logotipo"><img src="archivos/imagenes/xlogonexcen.png" width="45" /></div>
    <div class="nav">
    <ul>
        <li><a href="#" class="aqui">Inicio</a></li>
        <li><a href="#">Servicio</a></li>
        <li><a href="#">Saber mas</a></li>
        <li><a href="#">Contactanos</a></li>
        <li>
        <form>
            <input name="search" type="text" class="buscar" placeholder=" B u s c a r. . .">
        </form></li>
    </ul>
    </div>
</div>
</div>
 
<section style="clear:both;">
<div class="todo">
        <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
        <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>
</div>
<div class="mitad">
    <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
    <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>
</div>
<div class="mitad">
    <div style="float:left; padding:10px; min-height:500px;   width:200 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
    <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>
</div>
 
<div class="cuarto">
    <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
    <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>
</div>
<div class="cuarto">
    <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
    <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>
</div>
<div class="cuarto">
    <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
    <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>
</div>
<div class="cuarto">
    <div style="float:left; padding:10px; width:150 px; height:140 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
    <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>
</div>
 
 
<div class="cuarto">
    <div style="float:left; padding:10px; width:100 px; height:100 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
    <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>
</div>
<div class="cuarto">
    <div style="float:left; padding:10px; width:100 px; height:100 px;"><img src="archivos/imagenes/ALGARFmod1.jpg" height="135"></div>
    <div style="overflow:auto; height:100px;">contenido corto sdf sdf </div>
</div>
 
 
</section>
 
<footer>
    <div class="footer">footer</div>
</footer>
 
</body>
</html>

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
*{
    margin:0px;
    padding:0px;
}
body{
    background-color: #CCCCCC;
}
.header{
    width:100%;
    height:50px;    
    background:#333333;
}
.encabezado{
    margin:auto;
    width:90%;
    max-width:900px;
    position:relative;
}
.logotipo{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 0px;
    padding:1px;
}
.nav{
    position: absolute;
    left: 70px;
    height: 50px;
    width: auto;
    top: 0px;
}
.nav ul{
    list-style:none;
}
.nav ul li{
    float:left;
    background:#333333;
}
.nav ul li a{
    padding: 15px; 10px;
    display: block;
    color: #FFF;
    text-decoration: none;
    border-radius:10px 0px 10px 0px;
}
.nav ul li a:hover{
    color: #2d2d2d;
    background-color: #D8D8D8;
}
.nav ul li a:active{
    color: #2d2d2d;
    background-color: #C1C1C1;
}
.nav ul li .aqui{
    color: #2d2d2d;
    background-color: #CCCCCC;
    border-radius:0px 10px 0px 0px;
}
section{
    margin: auto;
    width: 90%;
    max-width: 900px;
}
footer{
    background-color: #BBBBBB;
    height:auto;
    min-height:100px;
}
.footer{
    margin: auto;
    width: 90%;
    max-width: 900px;   
}
.buscar{
    margin:10px;
    width: 60px;
    box-sizing: border-box;
    border-radius: 3px;
    font-size: 11px;
    background-color: white;
    background-image: url(buscar.png);
    background-position: 1px 1px; 
    background-repeat: no-repeat;
    background-size:contain;
    padding: 6px 10px 6px 30px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
.buscar:focus {
    width: 200px;
    border: 2px solid #09C;
    box-shadow: 0 0 10px #069;
    background-color: white;
    background-image: url(buscar.png);
    background-position: 1px 1px;
    background-repeat: no-repeat;
    background-size: contain;
}
@charset "utf-8";
/* CSS Document */
.todo{
    display: inline-block;
    width: 98%;
    height: 150px;
    background: #FFF;
    border-radius: 10px;
    padding: 2px;
    margin: 2px;
    min-width:200px;
}
.todo .todohover:hover{
    display: inline-block;
    width: 98%;
    height: 150px;
    min-width: 200px;
    background-color: #CCC;
}
.mitad{
    display: inline-block;
    width: 48.5%;
    height: 150px;
    background: #FFF;
    border-radius: 10px;
    padding: 2px;
    margin: 2px;
    min-width:100px;
}
.cuarto{
    display: inline-block;
    width: 23.9%;
    height: 150px;
    background: #FFF;
    border-radius: 10px;
    padding: 2px;
    margin: .5px;
}
section .cuatro:hover{
    box-shadow: 10px 10px 5px #888888;
}

KATHYU · #4 (**permalink**) 23/08/2017, 14:11

En dispositivos pequeños no se ve nada bien

Rafael · #5 (**permalink**) 26/08/2017, 03:30

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.

Rafael · #6 (**permalink**) 26/08/2017, 03:39

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<section class="Columnas">
 <div></div>
 <div></div>
</section>

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