html y CSS juntos pero separados

xurxinho · #1 (**permalink**) 10/04/2009, 03:53

ya me dejaron claro y convencido en este foro que html está para estructurar los datos y css para diseño.

Si quiero lograr un centrado de página de todas maneras suelo conjugar ambos elementos, es decir

Código HTML:

<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
	body{margin:0;paddding:0px;}
	#contenedor{margin:0 auto;border:1px solid  #000;width:600px;height:100%}
	#contenedor tfoot td{text-align:center;}
</style>
</head>
<body>
<table id="contenedor" border="0" cellpadding="0" cellspacing="0">
	<thead>
               <tr>
			<td>
			</td>
		</tr>
	</thead>
	<tbody>
                <tr>
			<td>
			</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td valign="bottom">
				pie
			</td>
		</tr>
	</tfoot>
</table>
</body>
</html>

¿Sería una buena solución de acuerdo con los estándares??.
No pregunto por otra solución (sólo en caso de que ésta no sea correcta).

Otras preguntas:
- ¿cómo solucionar el problema del valign?
- margin:0 auto (el valor de auto cuál es por defecto???)

jomaruro · #2 (**permalink**) 10/04/2009, 04:06

Cita:

Iniciado por xurxinho

¿Sería una buena solución de acuerdo con los estándares??.

El maquetar una web con tablas no es nada, pero nada estándar, vamos no te validaría el código ni de broma.

Saludos.

jomaruro · #3 (**permalink**) 10/04/2009, 04:12

Hola:

Cita:

Iniciado por xurxinho

- ¿cómo solucionar el problema del valign?

Si te das una vuelta por la página de Mikmoro,en la sección estructurales verás la forma de centrar una página.

Cita:

Iniciado por xurxinho

- margin:0 auto (el valor de auto cuál es por defecto???)

El valor del margin (y del padding) auto ya lo dice la propia palabra automático.

Saludos.

xurxinho · #4 (**permalink**) 11/04/2009, 01:31

Obviamente os sigo haciendo caso, que para eso tenéis muxas estrellas ;).
En serio ya estoy mirando a partir de ya la página de Mikmoro, sólo algunas aclaraciones.

-auto ya se que quiere decir automáticamente, pero auto en overflow por lo que veo no es lo mismo que en margin es por ende por lo qué pregunté, imagino x lo que ahora investigué que margin:0 auto ,es posición con respecto al eje y superior, automatico, o sea que según los navegadores esta propieda es una u otra cosa????, al menos comprobé que se comporta diferente según utilices explores o mozilla.

-Eso de que sea estándar está claro que es mucho más conveniente siempre y cuando repercuta ventajas, por ejmplo que sea portable a cualquier navegador (cosa que en el ejemplo que expuse arriba con una tabla se cumple). Por lo tanto que imagino que lo de estandaridad irá por otro lado (en el caso expuesto), como que hará un código mas legible para los buscadores y por lo tanto google te buscará mejor o algo así.

Estos parámetros son los que necesito que me aclaréis, porque yo ya sé que tenéis muxas más tablas que yo y obviamente no voy a ponerlos en duda, sólo quiero y busco aclaracines y correcciones superando las aportaciones de este foro casi siempre mis expectativas.

Por ello os doy las gracias.

xurxinho · #5 (**permalink**) 11/04/2009, 03:01

Ahora he probado

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin: 0px;
	padding: 0px; 
	outline: 0;
}
html, body { 
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}
#contenedor { 
	margin: 0px auto;
	background: #000;
	height: 100%;
	width: 890px;
	border-bottom: 1px solid #fff;
}
</style>
</head>
<body>

<table id="contenedor" border="0">
	<thead>
		<tr>
			<th>
			</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>
			</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>
			</td>
		</tr>
	</tbody>	
</table>		

<p>
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss"
            alt="¡CSS Válido!" />
    </a>
</p>
</body>
</html>

y como veis referendado por los enlaces si cumplía este código los estándares XHTML y los de CSS y ha superado el test.
Como veis las dudas son muchas, puesto que para estructurar un sistema de navegación banner superior, menú izquierdo,contenido y pie o banner inferior para mi es más fácil estructurarlo en una tabla que poner elemento flotantes, por eso es lo que doy tanto el coñazo y busco contra-argumentos.