{"id":1232,"date":"2011-12-12T21:55:12","date_gmt":"2011-12-12T21:55:12","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=1232"},"modified":"2012-02-26T14:20:06","modified_gmt":"2012-02-26T14:20:06","slug":"estructura-css-web","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/","title":{"rendered":"Definir la estructura de tu Web"},"content":{"rendered":"<p>Cuando vamos a empezar a hacer una p\u00e1gina Web desde zero no tenemos claro que estructura va a tener, con 2 columnas, 1 columna izquierda y bloque central, con cabecera o no, con pie de p\u00e1gina o con columna derecha, etc. Hay varias posibilidades.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/12\/struct.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1245\" title=\"struct\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/12\/struct.png\" alt=\"\" width=\"832\" height=\"467\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/12\/struct.png 832w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2011\/12\/struct-300x168.png 300w\" sizes=\"auto, (max-width: 832px) 100vw, 832px\" \/><\/a><br \/>\nLa estructura que mostramos en la imagen anterior se puede conseguir de varias formas pero, una forma muy simple y claro de conseguir este efecto es utlizar div&#8217;s y c\u00f3digo CSS para posicionamiento de contenedores.<\/p>\n<p>El c\u00f3digo HTML de la estructura de la imagen queda muy simple:<\/p>\n<pre>&lt;div id=\"content\"&gt;\r\n\u00a0\u00a0 \u00a0&lt;div id=\"header\"&gt;Cabecera&lt;\/div&gt;\r\n\u00a0\u00a0 \u00a0&lt;div id=\"column-left\"&gt;Columna izquierda&lt;\/div&gt;\r\n\u00a0\u00a0 \u00a0&lt;div id=\"central\"&gt;Bloque central&lt;\/div&gt;\r\n\u00a0\u00a0 \u00a0&lt;div id=\"column-right\"&gt;Columna derecha&lt;\/div&gt;\r\n\u00a0\u00a0 \u00a0&lt;div id=\"footer\"&gt;Pie de p&amp;aacute;gina&lt;\/div&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>La complejidad del asunto recae en las hojas de estilo CSS. Cada bloque es representado por una clase que se representa por su id. Por ejemplo para la cabecera tendremos la siguiente clases CSS:<\/p>\n<pre>#header {\r\n\u00a0\u00a0 \u00a0background-color: #EBE9EA;\r\n\u00a0\u00a0\u00a0 border: 1px solid #D2D2D2;\r\n\u00a0\u00a0\u00a0 border-radius: 8px 8px 8px 8px;\r\n\u00a0\u00a0\u00a0 margin-bottom: 10px;\r\n\u00a0\u00a0\u00a0 text-align: center;\r\n\u00a0\u00a0\u00a0 width: 900px;\r\n\u00a0\u00a0\u00a0 min-height: 150px;\r\n}<\/pre>\n<p>En esta clase estamos diciendo que la cabecera de la p\u00e1gina debe tener un color gris suave de fondo con un borde s\u00f3lido de 1px y con bordes redondeados. El texto est\u00e1 alineado al centro, su ancho es de 900px y su alto m\u00ednimo es de 150px. Despu\u00e9s tambi\u00e9n marcamos un margen por debajo de 10px para separar la cabecera de la columna izquierda, central y derecha.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/structure\/1\/\" target=\"_blank\">Ver ejemplo en funcionamiento 1<\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/structure\/2\/\" target=\"_blank\">Ver ejemplo en funcionamiento 2<\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/structure\/3\/\" target=\"_blank\">Ver ejemplo en funcionamiento 3<\/a><\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/css\/structure\/4\/\" target=\"_blank\">Ver ejemplo en funcionamiento 4<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cuando vamos a empezar a hacer una p\u00e1gina Web desde zero no tenemos claro que estructura va a tener, con 2 columnas, 1 columna izquierda y bloque central, con cabecera o no, con pie de p\u00e1gina o con columna derecha, etc. Hay varias posibilidades. La estructura que mostramos en la imagen anterior se puede conseguir [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6469,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12],"tags":[74],"class_list":["post-1232","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","tag-contenedores"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Definir la estructura de tu Web - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Definir la estructura de tu Web - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Cuando vamos a empezar a hacer una p\u00e1gina Web desde zero no tenemos claro que estructura va a tener, con 2 columnas, 1 columna izquierda y bloque central, con cabecera o no, con pie de p\u00e1gina o con columna derecha, etc. Hay varias posibilidades. La estructura que mostramos en la imagen anterior se puede conseguir [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2011-12-12T21:55:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-02-26T14:20:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\" \/>\n\t<meta property=\"og:image:width\" content=\"282\" \/>\n\t<meta property=\"og:image:height\" content=\"300\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/\",\"name\":\"Definir la estructura de tu Web - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"datePublished\":\"2011-12-12T21:55:12+00:00\",\"dateModified\":\"2012-02-26T14:20:06+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png\",\"width\":282,\"height\":300},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Definir la estructura de tu Web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Definir la estructura de tu Web - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Definir la estructura de tu Web - Jose Aguilar Blog","og_description":"Cuando vamos a empezar a hacer una p\u00e1gina Web desde zero no tenemos claro que estructura va a tener, con 2 columnas, 1 columna izquierda y bloque central, con cabecera o no, con pie de p\u00e1gina o con columna derecha, etc. Hay varias posibilidades. La estructura que mostramos en la imagen anterior se puede conseguir [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2011-12-12T21:55:12+00:00","article_modified_time":"2012-02-26T14:20:06+00:00","og_image":[{"width":282,"height":300,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/","url":"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/","name":"Definir la estructura de tu Web - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","datePublished":"2011-12-12T21:55:12+00:00","dateModified":"2012-02-26T14:20:06+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2014\/10\/Imagen-no-disponible-282x300.png","width":282,"height":300},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/estructura-css-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Definir la estructura de tu Web"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=1232"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/1232\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/6469"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=1232"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=1232"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=1232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}