Foros del Web » Creando para Internet » CSS »

Problema con DIVS+CSS

Estas en el tema de Problema con DIVS+CSS en el foro de CSS en Foros del Web. Hola gente, soy nuevo en el foro aunque hace bastante vengo leyendolo. Hace algunas semanas estoy intentando resolver un problema con el diseño de mis ...
  #1 (permalink)  
Antiguo 10/06/2009, 22:41
 
Fecha de Ingreso: junio-2009
Mensajes: 5
Antigüedad: 8 años, 6 meses
Puntos: 0
Problema con DIVS+CSS

Hola gente, soy nuevo en el foro aunque hace bastante vengo leyendolo.
Hace algunas semanas estoy intentando resolver un problema con el diseño de mis sitios web. Hará 2-3 meses migré del diseño con tablas a usar divs.

El problema es que vengo usando DIVs flotantes para diseñar la web en 2 columnas. El Div izquierdo es el del menú y el derecho el del contenido de la web. El problema está en que el div derecho se me va para abajo...¿Como? No lo se, simplemente se baja =(

El codigo CSS que estoy usando es:

Código:
.main {
font-weight: normal;
margin:0 auto 0 auto;
padding:3px;
padding-left:5px;
white-space:normal;
border-width:0px;
width: 937px;
font-family: "Arial", Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #CCCCCC;
text-align: left;
background-color: #F2F4F3;
display:table;
min-height: 700px;
position:relative;

}

.divmenu{
float:left;
font-weight: normal;
margin-left:5px;
padding:3px;
white-space:normal;
border-width:0px;
width: 198px;
font-family: "Arial", Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
background-color: #F2F4F3;
margin-bottom: 15px;
}

.divcont {
margin-right:5px;
float:right;
font-weight: normal;
padding:4px;
white-space:normal;
border-width:0px;
width: 670px;
font-family: "Arial", Verdana, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
background-color: #F2F4F3;
margin-bottom: 15px;
position:static;
}

Y el codigo HTML seria..

Código HTML:
<div class=main>
 <div class=divmenu>Menu</div>
 <div class=divcont>Contenido</div>
</div> 
Estoy quemandome la cabeza, lei ya varios tutoriales acerca de posicionamiento de DIVs y no pude solucionarlo.
Me podrán dar una mano?

Mil gracias!
  #2 (permalink)  
Antiguo 11/06/2009, 00:18
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Problema con DIVS+CSS

Saludos!!

Primero, antes que nada, agregale "" a los divs, porque no creo que funcionen sin ellos... y para tu problema, intenta cambiando de lugar los divs.. suena algo tonto pero aveces eso ha solucionado mi problema, quedaria algo asi:

<div class="main">
<div class="divcont">Contenido</div>
<div class="divmenu">Menu</div>
</div>

Intentalo, y si funciona me dices, sino seguimos probando si?

Hasta Luego!!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #3 (permalink)  
Antiguo 11/06/2009, 02:56
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
Respuesta: Problema con DIVS+CSS

hazz lo q caliiz (de indiana JOnes?? jeje) te ha comentado.

NO entiendo esto:

margin: 0 auto 0 auto; ??

Creo que hay problemas con los width y padding..habria q ver eso..

saludos.
  #4 (permalink)  
Antiguo 11/06/2009, 05:08
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Problema con DIVS+CSS

No deberías tener problemas, la suma de tus cajas divmenu y divcont no supera la de la caja contenedora main y los floats son correctos. Tu problema puede estar en otra parte del código. Lo que sía tenías es mucha linea de código redundante, te interesaría investigar la herencia.

Código HTML:
       .main {
                font-weight: normal;
                margin: 0 auto;
                padding: 3px 3px 3px 5px;
                width: 937px;
                font-family: "Arial", Verdana, Helvetica, sans-serif;
                font-size: 11px;
                color: #CCCCCC;
                text-align: left;
                background-color: #F2F4F3;
                display: table;
                min-height: 700px;
                position: relative;
            } 
			
	.divmenu {
                float: left;
                margin-left: 5px;
                padding: 3px;
                width: 198px;
                color: #333333;
                background-color: #F2F4F3;
                margin-bottom: 15px;
            } 
			
	.divcont {
		float: right;
                margin-right: 5px;
                padding: 4px;
                width: 670px;
                color: #333333;
                margin-bottom: 15px;
            }
Salud!
  #5 (permalink)  
Antiguo 11/06/2009, 09:28
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: Problema con DIVS+CSS

Hola:

No sé que navegador estás usando ni que resolución, pero en FF tu código me ha funcionado perfectamente. Tienes que tener en cuenta que los anchos de los div's divmenu y divcont más el margin más el padding más el borde no pueden superar el ancho del div main.

Saludos.

  #6 (permalink)  
Antiguo 11/06/2009, 09:32
 
Fecha de Ingreso: junio-2009
Mensajes: 5
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problema con DIVS+CSS

Ahi me pongo a probar lo que dijron mas arriba.

Por las dudas dejo screenshots de como se ve...
Normalmente se ve asi:
zgamerz.com.ar/noticias/bien.jpg


Algunas veces se ve asi:
zgamerz.com.ar/noticias/problema.jpg



El tema es que solo se ve como la 2da screenshot en contadas ocasiones aunque claro, no por eso voy a dejar que siga haciendolo. En las imagenes les cambie el background-color por uno que contraste para que se vea, el div grande blanco es main , el de la izquierda divmenu y el de la derecha divcont

Puede ser que en algun momento esté cargandose mal la hoja de estilos y por eso hace eso?
  #7 (permalink)  
Antiguo 11/06/2009, 09:37
 
Fecha de Ingreso: junio-2009
Mensajes: 5
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problema con DIVS+CSS

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

No sé que navegador estás usando ni que resolución, pero en FF tu código me ha funcionado perfectamente. Tienes que tener en cuenta que los anchos de los div's divmenu y divcont más el margin más el padding más el borde no pueden superar el ancho del div main.

Saludos.


Estoy usando Firefox en este momento con 1280x1024 pero lo probé tambien con 1024x768 (La web la creé en esa resolucion por obvias razones) y pasa lo mismo. El tema no es el ancho de los divs ya que como se ve en las imagenes de arriba no se superponen enningun momento. Lo raro es que cuando pasa eso tarda unos segundos mas en cargar la web.

Ah, y ya que me olvidé, lo hace con cualquier cosa que le mande en el divcont , actualmente estoy usando Includes de PHP para meterle ahi diferentes archivos, pero independientemente del que sea hace eso.
  #8 (permalink)  
Antiguo 11/06/2009, 22:40
 
Fecha de Ingreso: junio-2009
Mensajes: 5
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Problema con DIVS+CSS

Acabo de probar con IE 6 y Chrome y funciona perfectamente. Por lo que lei en otros threads de este foro el tema puede ser un bug del firefox que hace que el div se vaya para abajo como muestran las siguientes imagenes:

zgamerz.com.ar/noticias/bien.jpg
zgamerz.com.ar/noticias/problema.jpg

Ahora bien, el bug apareceria cuando la hoja de estilos no se carga rapidamente. Alguien tuvo algun problema similar? Es una solucion pausible escribir el estilo mediante una etiqueta style para que se cargue mas rapidamente o estoy tirando cualquiera?
  #9 (permalink)  
Antiguo 12/06/2009, 04:42
 
Fecha de Ingreso: mayo-2009
Ubicación: Fuerteventura
Mensajes: 324
Antigüedad: 8 años, 7 meses
Puntos: 19
Respuesta: Problema con DIVS+CSS

Nunca había tenido ese problema, ni cargando tres hojas diferentes. ¿cuánto pesa tu hoja de estilos? el máximo recomendable son 25kb. También es muy importante eliminar declaraciones redundantes como te dije en el post anterior. Aquí tienes varias herramientas online para optimizar tu css.

Salud!
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 03:26.