Contenedor que se mueve

Kirari · #1 (**permalink**) 30/01/2009, 03:57

Buenas,puse una duda en el foro de html porque una web que tenia maquetada en tablas se me movia al agrandar el contenido. es decir, dentro de una celda teia una tabla que contenida texto,si ponia mas texto la tabla se movia. cabe decir q estaban con un align center.
El caso es que se me recomendo migrar eso a css usando en vez de tablas divs, y asi lo hice, y me sigue pasando igual. Os pego el codigo de la hoja de estilos:

@charset "windows-1251";
a{text-decoration:none;}
a:hover{ text-decoration: underline;}

body{margin: 0px; padding: 0px; background:url(imag/136.gif)}
div,td{font-family: Tahoma; font-size: 9px; color: #808080;}
form{margin: 0px}

.verde { background-image:url(imag/bar.gif) }

#content {

width:100%px;
tex-align:center;

}

#contenedor {width: 800px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
position:relative;
top:20px;
}

#banner {
width:784px;
height:250px;
background-image:url(imag/bannerup.jpg);
position:relative;
top:0px;
left:0px;
}

#links {
width:784px;
height:35px;
background-image:url(imag/bar.gif);
position:relative;
top:15px;
left:8px;
}

#text {
width:689px;
position:relative;
top:20px;
left:40px;
}

y aki el de la web:

<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<style type="text/css">

</style>
</head>

<body>
<div id="content">
<div id="contenedor">
<div id="banner"></div>
<div id="links"><table width="784" height="35" border="0" class="verde" align="center">
<tr>
<td><div align="center"><a href="index.html" class="style1">Home</a></div></td>
<td><div align="center"><a href="arbeitgeber2.html" class="style1">Arbeitgeber</a></div></td>
<td><div align="center"><a href="bewerber.html" class="style1">Bewerber</a></div></td>
<td><div align="center"><a href="karierre.html" class="style1">Karierre</a></div></td>
<td><div align="center"><a href="wir-ueber-uns.html" class="style1">Wir über uns</a></div></td>
<td><div align="center"><a href="kontakt.php" class="style1">Kontakt</a></div></td>
</tr>
</table>
</div>
<div id="text">

<span class="style6">texto <span class="style7">texto</span> bei den <span class="style11">texto</span></span>

<p><span class="style9">texto:</span> <span class="style2"><span class="style3">textotextotextotextotextotextotexto textotextotextotextotextotextotexto</span></span></p>
<p class="style3"><strong class="style9">texto:</strong><span class="style2"> textotextotextotextotextotextotextotextotextotexto texto</span></p>
<p class="style2"><strong class="style9">texto:</strong> textotextotextotextotextotextotextotextotextotexto texto<span class="style10">textotextotextotextotextotextotext otexto!</span></p>
<p class="style2"><strong class="style9">texto:</strong> textotextotextotextotextotextotextotextotextotexto textotextotexto.</p>
<p class="style2"><strong class="style9">texto:</strong> textotextotextotextotextotextotextotextotextotexto textotextotexto. </p>
<p class="style3"><br />
<br />
</p>
<p class="style2">texto </p>
<p class="style2">texto</p>
<p><br />
</p>

</div>

</div>
</div>
</body>
</html>

Lo unico que cambia de una pagina a otra es que en la aprte sombrada de rojo hay mas o menos texto, si hay mas, se desplaza "contenedor" hacia la izq y no entiendo porque.

Si alguien pudiera ayudarme estaria muy agradecida. Saludos!

conmenta1965 · #2 (**permalink**) 30/01/2009, 04:32

Hola. En principio si migras a CSS para suprimir las tablas por bloques <div> no deberias añadir en tu hoja de estilos propiedades para el elemento <tb>, ya que no quieres añadir bloques de contenido junto con tablas, sino lo mencionado al principio.

Saludos.

Kirari · #3 (**permalink**) 30/01/2009, 05:03

Gracias pero eso es lo de menos,esta ahi xq es la hoja de estilos q usaba para lo de las tablas y olvide quitarlo,aun asi gracias.

Alguien sabe xq puede pasar?

chrishxc · #4 (**permalink**) 30/01/2009, 05:26

No me queda claro si dices que se mueve la tabla donde tienes el menú, o donde tienes todo el texto.

Si es lo primero: Por más que pongas una tabla dentro de un div, sigue siendo una tabla y se te va a mover si el texto supera el espacio que le has dado.
Creo que la mejor opción que tienes es crear tantos divs como links quieras y alinearlos según te parezca.
Y borra esa tabla ;)

Si es lo segundo y no quieres que se agrande más este div de lo que está diseñado, sea cual sea el número de palabras que contenga, prueba con un overflow.

Código:

	
overflow-x: hidden;
overflow-y: scroll;

Kirari · #5 (**permalink**) 30/01/2009, 05:34

lo que se mueve es el div de nombre contenedor dependiendo de cuando texto escriba en el div de nombre text. el div contenedor como leeis tiene un fonto blanco, si pongo menos texto esta en una posicion, al poner mas texto ese bloque blanco se me acerca hacia la izq. no quiero que ese div mantenga un height fijo, quiere que se agrande hacia abajo segun cuanto texto ponga, pero es que se me mueve hacia la izquierda, y no lo entiendo.

jomaruro · #6 (**permalink**) 30/01/2009, 16:44

Hola:

Antes de tocar tu código, ya que quieres maquetar con CSS deberías leerte esta guía, entenderás muchas cosas.

Después deberías leerte la segunda parte, en la que Mikmoro explica paso a paso el paso de una página hecha con tablas a la misma hecha con CSS.

Saludos.