Foros del Web » Creando para Internet » HTML »

tablas convertidas a bloques

Estas en el tema de tablas convertidas a bloques en el foro de HTML en Foros del Web. Probad este código: Código: <HTML> <HEAD> <TITLE> Bloques con CSS </TITLE> <style type="text/css"> body {color:#000000; background-color:#000000; margin-top:5px; margin-left:5px} #cabecera { background-color:#cccccc; height:60px; width:710px; } #separacion ...
  #1 (permalink)  
Antiguo 24/05/2002, 20:05
Avatar de mrgubu  
Fecha de Ingreso: febrero-2002
Ubicación: Granada
Mensajes: 431
Antigüedad: 22 años, 2 meses
Puntos: 2
tablas convertidas a bloques

Probad este código:
Código:
 
<HTML>
<HEAD>
<TITLE> Bloques con CSS </TITLE>
<style type="text/css">
body {color:#000000; background-color:#000000; margin-top:5px;  margin-left:5px} 

#cabecera {
           background-color:#cccccc;
           height:60px;
           width:710px;
		   }

#separacion {
             background-color:#000000;
              width:710px;
		      height:1px;
		      
		     }

#anchocuerpoprincipal { 
                       width:710px;
					   }

#cuerpoprincipal {
           position:relative;
           background-color:#000000;
           height:100px
            		   }

#menuizq {
            position: absolute;
            background-color:#FF3366;
            width:152px;
			height:60px;
		  }

#celdaprincipal {
            position:absolute;
            background-color:#66CC66;
            height:100px;
			left:157px;
			width:408px;
            
			}

#menudch {
            position: absolute;
            background-color:#0033CC;
            height:40px;
           right:0px;
          width:140px;
		   }

#piedepagina {
               width:710px;
               height:60 px;
               background-color:#FFCC00;
               }

</style>
</HEAD>

<BODY>

<div id="cabecera">
Cabecera
</div>

<div id="separacion">
</div>

<div id="anchocuerpoprincipal">
<div id="cuerpoprincipal">

<div id="menuizq">
Menu izquierdo
</div>


<div id="celdaprincipal"> 
Celda principal
</div>

<div id="menudch">
Menu derecha
</div>

</div>
</div>

<div id="separacion">
</div>


<div id="piedepagina">
Piedepágina
</div>

</BODY>
</HTML>
Todo funciona bien menos los bloques de separación entre la cabecera y el cuerpo principal y éste y el pie de página. No se queda una separación de 1px, como "ordena" en el código. ¿Por qué? ¿se puede arreglar? Asiasssssssssss por adelantado.

<a href="http://www27.brinkster.com/granadalinks/"><img border="0" src="http://www27.brinkster.com/granadalinks/ban468.gif" width="468" height="60"></a>
  #2 (permalink)  
Antiguo 26/05/2002, 08:30
 
Fecha de Ingreso: febrero-2002
Mensajes: 127
Antigüedad: 22 años, 3 meses
Puntos: 0
Re: tablas convertidas a bloques

Hola, Después de hacer varias pruebas he visto que no conseguía menos altura de la q has podido ver utilizando los divs. Experimentando me di cuenta de que la única manera q yo conozco para conseguir esa separacion es utilizando margin o padding. Eso no te dará ningún problema, por ejemplo elimina el elemento #separacion y ponle a la cabecera un margin-bottom:1px
Eso te funcionará.
Un saludo
  #3 (permalink)  
Antiguo 26/05/2002, 11:45
Avatar de mrgubu  
Fecha de Ingreso: febrero-2002
Ubicación: Granada
Mensajes: 431
Antigüedad: 22 años, 2 meses
Puntos: 2
Re: tablas convertidas a bloques

Sí señor/señora? Love_Uca, esa es la solución. Por fin he redondeado la composición de mi página en bloques CSS. :) :) ¡Mira que le he dado vueltas al tema! , empezando por el tema del width del cuerpo principal (que como veis, para que funcione hay que hacerle un div específico), y terminando con el tema de la separación horizontal entre los bloques que ha solucionado Love_uca. :cantar: :cantar:

Ahí abajo (en el siguiente mensaje, porque en este no cabe) va el código completo corregido, creo que puede ser de utilidad a quien quiera librarse de las dichosas tablas de HTML para componer su página. ;)

La pregunta que me hago ahora es: ¿Qué versiones de navegadores admiten esta formulación de la estructura de la página? .
Si tenéis oportunidad de probarlo en versiones más o menos antiguas de navegadores (sobre todo versiones 4 y 5 de ie y netscape), podíais intentarlo a ver qué tal.
Tal y como está ahora funciona en ie6 y opera6 (para que funcionase en opera he tenido que poner la separación de 5px entre la cabecera y el cuerpo principal como margin-top en #anchocuerpoprincipal).


<html><a href="http://www27.brinkster.com/granadalinks/"><img border="0" src="http://www27.brinkster.com/granadalinks/ban468.gif" width="468" height="60"></a></html>
  #4 (permalink)  
Antiguo 26/05/2002, 11:47
Avatar de mrgubu  
Fecha de Ingreso: febrero-2002
Ubicación: Granada
Mensajes: 431
Antigüedad: 22 años, 2 meses
Puntos: 2
Re: tablas convertidas a bloques

Lo dicho:

Código:
 
&lt;HTML&gt;
&lt;HEAD&gt;
&lt;TITLE&gt; Bloques con CSS &lt;/TITLE&gt;
&lt;style type=&quot;text/css&quot;&gt;
body {color:#000000; background-color:#000000; margin-top:5px;  margin-left:5px} 

#cabecera {
           background-color:#cccccc;
           height:60px;
           width:710px;
		   }

#anchocuerpoprincipal { margin-top:5px;
                       width:710px;
					   margin-bottom:5px; }

#cuerpoprincipal {
           position:relative;
           background-color:#000000;
           height:100px;
           }

#menuizq {
            position: absolute;
            background-color:#FF3366;
            width:152px;
			height:60px;
		  }

#celdaprincipal {
            position:absolute;
            background-color:#66CC66;
            height:100px;
			left:157px;
			width:408px;
            
			}

#menudch {
            position: absolute;
            background-color:#0033CC;
            height:40px;
           right:0px;
          width:140px;
		   }

#piedepagina {
               width:710px;
               height:60 px;
               background-color:#FFCC00;
               }

&lt;/style&gt;
&lt;/HEAD&gt;

&lt;BODY&gt;

&lt;div id=&quot;cabecera&quot;&gt;
Cabecera
&lt;/div&gt;

&lt;div id=&quot;anchocuerpoprincipal&quot;&gt;
&lt;div id=&quot;cuerpoprincipal&quot;&gt;

&lt;div id=&quot;menuizq&quot;&gt;
Menu izquierdo
&lt;!--menuizq--&gt;
&lt;/div&gt;


&lt;div id=&quot;celdaprincipal&quot;&gt; 
Celda principal
&lt;!--celda principal--&gt;
&lt;/div&gt;

&lt;div id=&quot;menudch&quot;&gt;
Menu derecha
&lt;!--menudch--&gt;
&lt;/div&gt;

&lt;/div&gt;
&lt;/div&gt;

&lt;div id=&quot;piedepagina&quot;&gt;
Piedepágina
&lt;/div&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:45.