Foros del Web » Creando para Internet » CSS »

Contenedor que se mueve

Estas en el tema de Contenedor que se mueve en el foro de CSS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 30/01/2009, 03:57
 
Fecha de Ingreso: noviembre-2008
Mensajes: 24
Antigüedad: 9 años
Puntos: 0
Pregunta Contenedor que se mueve

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">
<!--
.style1 {
color: #ffffff;
font-size: 16px;
font-weight: bold;
font-family:Georgia, "Times New Roman", Times, serif;
}
.style2 {font-size: 12px}
.style3 {font-size: 12}
.style6 {font-size: 16px}
.style7 {
color: #790000 ;
font-weight: bold;
}
.style9 {color: #B30000; font-weight: bold; font-size: 14px; }
.style10 {
font-size: 13px;
font-weight: bold;
color: #790000;
}
.style11 {
font-size: 18px;
color: #790000;
}
-->
</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!

Última edición por Kirari; 30/01/2009 a las 05:21
  #2 (permalink)  
Antiguo 30/01/2009, 04:32
(Desactivado)
 
Fecha de Ingreso: noviembre-2007
Mensajes: 54
Antigüedad: 10 años
Puntos: 0
Respuesta: Contenedor que se mueve

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.
  #3 (permalink)  
Antiguo 30/01/2009, 05:03
 
Fecha de Ingreso: noviembre-2008
Mensajes: 24
Antigüedad: 9 años
Puntos: 0
Respuesta: Contenedor que se mueve

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?
  #4 (permalink)  
Antiguo 30/01/2009, 05:26
 
Fecha de Ingreso: julio-2008
Mensajes: 210
Antigüedad: 9 años, 4 meses
Puntos: 19
Respuesta: Contenedor que se mueve

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;
  #5 (permalink)  
Antiguo 30/01/2009, 05:34
 
Fecha de Ingreso: noviembre-2008
Mensajes: 24
Antigüedad: 9 años
Puntos: 0
Respuesta: Contenedor que se mueve

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.
  #6 (permalink)  
Antiguo 30/01/2009, 16:44
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Contenedor que se mueve

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.

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 08:55.