Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 3 de 3

Tema: Problemas con 3 divs

  1. #1
    Recien Llegado! Merodeador
    Fecha de Ingreso
    06 abr, 07
    Mensajes
    3
    Poder de Reputación
    0

    Problemas con 3 divs

    Buenas a todos y gracias de antemano.


    Mi problema es el siguiente, tengo hecha una web usando el código de 3 divs del curso de esta web (muchas gracias, muy instructivo el curso). La cuestión es que en firefox se ve perfectamente, pero en iexplorer los divs 'menu' y 'login' aparecen debajo de 'lateralGrande'.

    Los divs menu y login tienen tablas ya que no me he atrevido a hacerlo con divs (esta ha sido mi primera experiencia con divs).

    Os pego el código, primero el css:


    Código:
    body {background-image:url(../imagenes/fondo.jpg); background-color:#4a575d; background-repeat:no-repeat;}
    
    #global{width:661px; padding:10px; background-color:#FFFFFF;}
    
    #contenedor {margin:0px; padding:0px; width:663px;}
    
    #cabecera{ vertical-align:top; width:663px; height:82px; clear:both;}
    
    #separador{ width:auto; height:8px; clear:both;}
    
    #separadorPeque{ width:259px; height:8px;}
    
    #menu{ width:259px; height:164px;}
    
    #lateralGrande {width:404px; height:424px; vertical-align:top; background-image:url(../imagenes/imagen_portada.jpg); float:right;}
    
    #login {width:259px; height:252px; background-image:url(../imagenes/fondo_login.gif); background-repeat:repeat-x;}
    Y aqui va el html:

    Código:
    <body onload="MM_preloadImages('imagenes/btn_inicio2.gif','imagenes/btn_empresa2.gif','imagenes/btn_servicios2.gif','imagenes/btn_contacto2.gif','imagenes/btn_legal2.gif')">
    
    <div id="global">
    
    	<div id="cabecera">[img]imagenes/barra_cabecera.jpg[/img][img]imagenes/logo.jpg[/img][img]imagenes/slogan.gif[/img]</div>
    
    	<div id="separador" align="left"></div>
    	
    	<div id="contenedor">
    	
    		<div id="lateralGrande"></div>
    		
    		<div id="menu" align="left">
    		<table width="259" height="164" border="0" cellpadding="0" cellspacing="0">
    		<tr>
    		<td>[img]imagenes/barra_menu.gif[/img]</td>
    		<td>
    		[img]imagenes/btn_inicio1.gif[/img]
    
    		[img]imagenes/btn_empresa1.gif[/img]
    
    		[img]imagenes/btn_servicios1.gif[/img]
    
    		[img]imagenes/btn_contacto1.gif[/img]
    
    		[img]imagenes/btn_legal1.gif[/img]</td>
    		</tr>
    		</table>
    		</div>
    		<div id="separadorPeque"></div>
    		<div id="login">
    		<table width="259" border="0" cellpadding="0" cellspacing="0">
    		<tr>
    		<td>[img]imagenes/barra_login.gif[/img]</td>
    		<td width="27" height="252">[img]imagenes/pixel.gif[/img]</td>
    		<td valign="top">
    			<table width="209" border="0" cellpadding="0" cellspacing="0">
    			<tr>
    			<td width="209" height="20">[img]imagenes/pixel.gif[/img]</td>
    			</tr>
    			<tr>
    			<td width="209">[img]imagenes/acceso.gif[/img]</td>
    			</tr>
    			<tr>
    			<td width="209" height="13">[img]imagenes/pixel.gif[/img]</td>
    			</tr>
    			<tr>
    			<td width="209" height="18">[img]imagenes/usuario.gif[/img]</td>
    			</tr>
    			<tr>
    			<td width="209" height="12">[img]imagenes/pixel.gif[/img]</td>
    			</tr>
    			<tr>
    			<td width="209" height="18">[img]imagenes/password.gif[/img]</td>
    			</tr>
    			<tr>
    			<td width="209" height="12">[img]imagenes/pixel.gif[/img]</td>
    			</tr>
    			<tr>
    			<td></td>
    			</tr>
    			</table>
    		</td>
    		</tr>
    		</table>
    		</div>
    	
    	</div>
    
    </div>
    </body>
    Lo dicho, gracias de antemano por la ayuda y enhorabuena por la web, es la primera vez que veo explicado de una manera clarísima y sencilla el tema de los divs, espero con impaciencia más capítulos :)
    [/code]

  2. #2
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    30 nov, 05
    Mensajes
    884
    Poder de Reputación
    0
    Hola dooplanillo,

    Debes colocarle un float:left a los div menu, login, y miniseparador.

    yo en lugar de poner un miniseparador lo que haria es colocarle un margin-top:10px al div login, de esta forma, le colocas un margen de 10 píxeles arriba creando un espacio entre div y div.

    Como todos los div son flotantes, comprobarás que el div contenedor y global no llegan hasta abajo, colócale el div separador debajo de lateral, login y menu.


    Código:
    body {background-image:url(../imagenes/fondo.jpg); background-color:#4a575d; background-repeat:no-repeat; text-align:center;}
    
    #global{width:661px; padding:10px; background-color:#FFFFFF;}
    
    #contenedor {margin:0px; padding:0px; width:663px;}
    
    #cabecera{ vertical-align:top; width:663px; height:82px; clear:both; background-color:#CCCCCC;}
    
    #separador{ width:auto; height:8px; clear:both;}
    
    #menu{ width:259px; height:164px;  float:left; background-color:#FF0000;}
    
    #lateralGrande {width:404px; height:424px; vertical-align:top; background-image:url(../imagenes/imagen_portada.jpg); float:right; }
    
    #login {width:259px; height:252px; background-image:url(../imagenes/fondo_login.gif); background-repeat:repeat-x; margin-top:8px; float:left; background-color:#FF0000;}
    Código:
    <div id="global">
    
       <div id="cabecera">CABECERA</div>
    
       <div id="separador" align="left"></div>
       
       <div id="contenedor">
       
          <div id="lateralGrande">lateral</div>
          
          <div id="menu" align="left">
            
    
    menu </p>
            
    
    menu</p>
            
    
    menu</p>
          </div>
          <div id="login">
            
    
    login </p>
            
    
    login</p>
            
    
    login</p>
          </div>
       <div id="separador">
       </div>
    Te he quitado el contenido de los div para aclararme mejor y te los he pintado de color

  3. #3
    Recien Llegado! Merodeador
    Fecha de Ingreso
    06 abr, 07
    Mensajes
    3
    Poder de Reputación
    0

    Solucionado :)

    Muchas gracias solidaria!!!

    Ya funciona :)
    Hay diferencias de separación 'los divs separadores', en firefox sale perfect, y en iexplorer hay más separación de la debida, pero eso ya es un mal menor. Voy a probar a sustituir los separadores y ponerle directamente el padding a los divs de login y menu, a ver si se soluciona.

Temas Similares

  1. PROBLEMAS CON LOS DIVS
    Por bybmyl en el foro Webs con Capas o DIVS
    Respuestas: 18
    Último Mensaje: 02/03/2020, 16:55

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •