Foros del Web » Creando para Internet » CSS »

error con div float

Estas en el tema de error con div float en el foro de CSS en Foros del Web. hola a todos mi problema es el siguiente estoy maquetando mi web con div con float left y y creado un contenedor principal adentro e ...
  #1 (permalink)  
Antiguo 20/05/2011, 15:15
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 12 años, 10 meses
Puntos: 11
Pregunta error con div float

hola a todos mi problema es el siguiente estoy maquetando mi web con div con float left y y creado un contenedor principal adentro e puesto la cabecera que no contiene float y los div de contenido y meu que son tres con float left y en le pie de pagina quiero poner 2 div y al primero le e puesto clear left y al segundo no se como hacer para que se situé junto al otro pero debajo de los div centrales en realidad e intentado y buscado en internet pero no lo encuentro

gracias de ante mano XD
  #2 (permalink)  
Antiguo 20/05/2011, 15:24
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: error con div float

poca ayuda puedes recibir si no muestras el código (css y html resumido)
  #3 (permalink)  
Antiguo 20/05/2011, 15:41
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 12 años, 10 meses
Puntos: 11
Respuesta: error con div float

aqui esta el css no creo que sea nesesario poner el html creo que si lees el css entenderas la posision de cada capa:
Cita:
@charset "utf-8";
body{
background-color:#036;
margin-bottom:5px;
margin-left:3px;
margin-right:3px;
margin-top:0px;
text-align:center;
}
#pagina{
text-align:left;
width:1024px;
height:auto;
margin:auto;
background-color:#CCC;
}
#barra_sup {
height: 100px;
width: 1024px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000;
background-image:url(img_pag/cabecera.png);
}
#box_derecho{
color:#CCCCCC;
float:left;
width:145px;
height:500px;
background-color:#0066FF;
margin-right:5px;
margin-top:7px;
margin-bottom:7px;
display:table;
}
#box_derecho a{
color:#FFFFFF;
text-align:left;
text-decoration:underline;
font-size:18px;
}
#box_derecho a:hover{
color:#FFFFFF;
text-align:center;
text-decoration:none;
font-size:18px;
}
#datos{
float:left;
width:500px;
height:500px;
margin-top:7px;
background-color:#FF9900;
margin-bottom:7px;
display:table;
}
#box_izquierdo{
color:#FFFFFF;
float:left;
width:370px;
height:500px;
background-color:#0066FF;
margin-left:4px;
margin-top:7px;
margin-bottom:7px;
display:table;
}
#box_inferior_1{
width:512px;
height:200px;
background-color:#6633FF;
display:table;
padding-left:4px;
clear:left;
}
#box_inferior_2{
width:490px;
height:100px;
background-color:#00CC00;
text-align:center;
clear:left;
}
#box_inferior_2 a{
color:#000000;
font-size:18px;
text-decoration:underline;
}
#box_inferior_2 a:hover{
color:#0033FF;
font-size:16px;
text-decoration:none;
}
  #4 (permalink)  
Antiguo 20/05/2011, 15:55
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: error con div float

Cita:
Iniciado por xlos_mas_pro Ver Mensaje
aqui esta el css no creo que sea nesesario poner el html creo que si lees el css entenderas la posision de cada capa:
aunque usted crea que no es necesario el html créame que si lo es para entender bien el flujo de cada elemento ya que aunque el css diga una cosa si el html esta mal estructurado aunque las reglas css esten bien no funcionara.
  #5 (permalink)  
Antiguo 20/05/2011, 16:02
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 12 años, 10 meses
Puntos: 11
Respuesta: error con div float

aqui esta el html
Cita:
<!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>Mundosic(Perfil)</title>
<link href="estilo2.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
<!--
#pag_hr
{
position:relative;
left:2px;
top:-795px;
width:1024px;
height:2px;
color:#900;
}
#form1{
width:480px;
height:auto;
background:#0000FF;
color:#FFFFFF;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
text-align:center;
}
-->
</style>
<body>
<!-- pagina --><div id="pagina">
<!-- Encabezado --><div id="barra_sup">

</div><!-- encabezado -->
<!-- box derecho --><div id="box_derecho">
<a href="publica/sisturl.php">--&gt;Publicar Link</a><br />
<a href="sistemadenoticias/sistnoticias.php">--&gt;Crear Post</a><br />
<a href="usuarios/bususuarios.php">--&gt;Buscar Usuario</a><br />
<a href="sisgrupos/mgrupos.php">--&gt; Grupos </a><br />
<a href="usuarios/modifica.php">--&gt;Modificar Datos</a><br />
<a href="publica/url.php">--&gt;Ver link</a><br />
<a href="sistemadenoticias/mipagina.php">--&gt;Ver Post</a><br />
<a href="salir.php">--&gt;Salir</a><br />
<hr />
Este contenido es solo para usuarios registrados y que esten con su session activa.<br/>
"No revele sus datos personales" y mantenga su contenido en forma privada.
</div>
<!-- box derecho -->
<!-- datos --><div id="datos">


aqui contenido php muy extenso


</div><!-- datos -->
<!-- box izq --><div id="box_izquierdo">
<strong>-¿Como crear un post?</strong><br />
Entra al link crear un post en la parte izquierda de la pantalla en el menu y escribe un titulo.<br />
<br />
<strong>-¿como publico un link?</strong><br />
Muy facil lo unico que tienes que hacer es entrar en el menu publica un link y escribe una url descripcion y titulo de el link a publicar.<br />
<br />
<strong>-¿como crear o unirce a un grupo?</strong><br />
Entra a la opcion de grupo --&gt;&gt; crear grupo --&gt; escribe los datos seleciconados y publica tu grupo. Para unirce a un grupo aun mas facil solo tienes que selecionar el grupo y pinchar o clikiar en el boton unirce al grupo.<br />
<br />
<strong>-¿como creo una duda o pregunta?</strong><br />
Entra a las opcion del menu &quot;Crea una pregunta&quot; y realiza los mismos pasos que en crear un posteo.
</div><!-- box izq -->
<!-- box inf --><div id="box_inferior_1">
<p><b style="color:#FC0; font-size:19px;">Infomacion</b><br />
En los links que ves a tu derecha encontraras informacion solo para usuarios registrados y privada se a añadido una nueva seccion en la cual se permiten dejar mensajes privados a los usuarios.<br />
¿Como hacer esto? Muy sencillo solo selecciona el link del menu superior izquierdo buscar usuarios y selecciona el usuario al cual le quieres dejar el mensaje privado y en la parte inferior se encuentra un formulario el cual debes rellenar para dejar un mensaje privado. tambien se pueden dejar auto mensajes por si tu quieres guardar algun contenido de informacion.</p>
</div>
<!-- box inf -->
<!-- box inf2 --><div id="box_inferior_2">
<a href="pagina1/comentarios_perfil.php">Ver comentarios publicos</a><br/>
<a href="pagina1/subir_img.php">Subir imagen</a><br/>
<a href="pagina1/ver_img_usu.php">Ver imagenes del usuario</a><br/>
<a href="mensajes/mensajes_p.php">Mis mensajes privados</a>
</div>
<!-- box inf2 -->
</div>
</body>
</html>
  #6 (permalink)  
Antiguo 20/05/2011, 16:21
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: error con div float

prueba con este css
Cita:
#footer {
clear:left;
}


#box_inferior_1{
width:512px;
height:200px;
background-color:#6633FF;
display:table;
padding-left:4px;
display: inline-block;
}
#box_inferior_2{
width:490px;
height:100px;
background-color:#00CC00;
text-align:center;
display: inline-block;
vertical-align: top;

}
el html
Cita:
<div id="footer">

<!-- box inf --><div id="box_inferior_1">
<p><b style="color:#FC0; font-size:19px;">Infomacion</b><br />
En los links que ves a tu derecha encontraras informacion solo para usuarios registrados y privada se a añadido una nueva seccion en la cual se permiten dejar mensajes privados a los usuarios.<br />
¿Como hacer esto? Muy sencillo solo selecciona el link del menu superior izquierdo buscar usuarios y selecciona el usuario al cual le quieres dejar el mensaje privado y en la parte inferior se encuentra un formulario el cual debes rellenar para dejar un mensaje privado. tambien se pueden dejar auto mensajes por si tu quieres guardar algun contenido de informacion.</p>
</div>
<!-- box inf -->
<!-- box inf2 --><div id="box_inferior_2">
<a href="pagina1/comentarios_perfil.php">Ver comentarios publicos</a><br/>
<a href="pagina1/subir_img.php">Subir imagen</a><br/>
<a href="pagina1/ver_img_usu.php">Ver imagenes del usuario</a><br/>
<a href="mensajes/mensajes_p.php">Mis mensajes privados</a>
</div>
<!-- box inf2 -->
</div>

</div>
  #7 (permalink)  
Antiguo 20/05/2011, 17:03
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 12 años, 10 meses
Puntos: 11
Respuesta: error con div float

muchas gracias me a sido de gran ayuda
  #8 (permalink)  
Antiguo 20/05/2011, 17:56
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 12 años, 10 meses
Puntos: 11
Respuesta: error con div float

sigo teniendo el problema me funciona al visualisarlo en dreamweaver pero no me funciona al vusualisarlo en un navegador sigo sin poder hacerlo que que otra solucion puedo tener
  #9 (permalink)  
Antiguo 20/05/2011, 20:40
 
Fecha de Ingreso: diciembre-2008
Ubicación: Cordoba
Mensajes: 127
Antigüedad: 15 años, 3 meses
Puntos: 17
Respuesta: error con div float

Hola, estuve leyendo tu problema y hice un layout parecido que se ve igual en ie6+ y en losd emas navegadores no se si te sirva pero compara los codigos y te puedes dar una idea.

http://pastebin.com/sBYKGNHk

chau mucha suerte
  #10 (permalink)  
Antiguo 21/05/2011, 05:23
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: error con div float

Cita:
Iniciado por xlos_mas_pro Ver Mensaje
sigo teniendo el problema me funciona al visualisarlo en dreamweaver pero no me funciona al vusualisarlo en un navegador sigo sin poder hacerlo que que otra solucion puedo tener
acabo de probarlo en ie8, ff, chrome, opera y safari y en todos funciona
por decir algo, a ver si se te ha olvido este selector, por que no lo resalté en negrita
Cita:
#footer {
clear:left;
}
  #11 (permalink)  
Antiguo 21/05/2011, 10:16
Avatar de xlos_mas_pro  
Fecha de Ingreso: mayo-2011
Ubicación: Santiago
Mensajes: 359
Antigüedad: 12 años, 10 meses
Puntos: 11
Respuesta: error con div float

gracias ya lo e solucionado estuve revisando el codigo que me dejo McPinkY18 y leido atentamente lo de IsaBelM y encontre la solucion se lo agrades

Les doy Karma XD
gracias
  #12 (permalink)  
Antiguo 22/05/2011, 02:33
 
Fecha de Ingreso: diciembre-2008
Ubicación: Cordoba
Mensajes: 127
Antigüedad: 15 años, 3 meses
Puntos: 17
Respuesta: error con div float

mayormente estos problemas es por que nunca toman en cuenta los pixeles anchos paddings y bordes jeje suerte amigo

Etiquetas: capas, float, posision
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 05:11.