Se ve mal el lateral

elkpo15 · #1 (**permalink**) 18/02/2010, 13:31

Tengo un problema, estoy haciendo el segundo lateral de una pagina y me esta pegando un salto de linea cosa que se me esta viendo asi

Me parece raro por que las medidas me estan dando todas justas aca dejo los codigos html y css:

Código HTML:

Ver original<!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" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="muchas cosas"/>
<meta http-equiv="Refresh" content="60;URL=">  
<link href="Estilos.css" type="text/css" rel="stylesheet"/>
<title>Bienvenidos a mi pagina</title>
</head>
<body>
<div id="contenedor">
    <div id="cabezera">
    <img src="imagenes/Cabezera.jpg" alt="Cabezera-web" width:="800" height="70"/></div>
        <ul id="menuh">
 
        <li><a href="#" class="estilo-menuh">Nada</a></li>
        <li><a href="#" class="estilo-menuh">Nada</a></li>
        <li><a href="#" class="estilo-menuh">Nada</a></li>
        <li><a href="#" class="estilo-menuh">Nada</a></li>
        </ul>
<div id="cuerpo">
    <div id="lateral">
 
        <h1 class="menuv-title"></h1>
            <div id="menuv">
            <p><a href="#">Nada</a></p>
            <p><a href="#">Nada</a></p>
            <p><a href="#">Nada</a></p>
            <p><a href="#">Nada</a></p>
            </div>
 
    </div>
    <!-- el medio -->
    <div id="centro">
    </div>
    <!-- lateral2 -->
    <div id="lateral2">
    </div>
</div>
</div>

Código CSS:

Ver original*
{
margin:0px auto;
padding:0px;
}
 
body
{
background-image:url(imagenes/fondo.gif);
text-align:center;
background-color:#000000;
font-family:Arial, Helvetica, sans-serif;
margin:1em 0em 1em 0;
}
 
#contenedor
{
text-align:left;
width:800px;
background-color:#FFFFFF;
margin:auto;
}
 
#cabezera
{
width:800px;
height:70px;
}
 
#menuh
{
list-style-type:none;
}
 
/*border*/
 
#menuh a:link, #menuh a:visited
{
float:left;
width:200px;
height:20px;
background-image:url(imagenes/Fondo-menuh-boton.jpg);
text-decoration:none;
text-align:center;
}
 
#menuh a:hover
{
background-image:url(imagenes/Fondo-menuh-boton-2.jpg);
color:#339900;
}
 
#menu li
{
display:inline
}
 
.estilo-menuh
{
font-weight:bold;
color:#FF3300;
}
 
#cuerpo
{
background-color:#000000;
width:50em;
height:20em;
float:right;
}
 
#lateral
{
background-color:#000099;
width:10em;
height:20em;
float:left;
}
 
/*Title*/
 
.menuv-title
{
background-image:url(imagenes/Menuv-lateral.jpg);
height:45px;
}
 
/*Menu*/
 
#menuv
{
text-align:center;
}
 
#menuv p
{
margin:0px;
padding:0px;
height:25px;
background-image:url(imagenes/Menuv-boton.jpg)
}
 
#menuv a:link, #menuv a:visited
{
text-decoration:none;
font-weight:bold;
}
 
/*2� imagen boton*/
 
#menuv a:hover
{
}
 
#centro
{
width:30em;
height:20em;
background-color:#FF0000;
}
 
#lateral2
{
float:right;
width:10em;
height:20em;
background-color:#006666;
}

Joseph · #2 (**permalink**) 19/02/2010, 13:16

debes agregar al div centro ("float:left;" en el archivo css) en

Joseph · #3 (**permalink**) 19/02/2010, 13:17

#centro
{
width:30em;
height:20em;
background-color:#FF0000;
float:left; // Agregarle esta línea
}

elkpo15 · #4 (**permalink**) 19/02/2010, 19:37

Uuuu mil gracias joseph por la soluciòn; Otra pregunta tengo, por que si no le pongo "float:left" el segundo lateral pega un salto de linea a que se debe esto es mi duda

Joseph · #5 (**permalink**) 19/02/2010, 19:42

Ok, lo que te queda es ajustar los tamaños para que queden acoplados, porque queda un espacio entre el div del centro y el lateral 2. Eso lo ajustas modificando el ancho de los div (Me imagino que le colocarás mas al del centro.

no se cuanto le debes aumenta, no recuerdo la medida em; yo uso píxeles, pero intenta colocándole 40em;

#centro
{
width:40em;
height:20em;
background-color:#FF0000;
float:left; // Agregarle esta línea
}

Joseph · #6 (**permalink**) 19/02/2010, 19:47

[Otra pregunta tengo, por que si no le pongo "float:left" el segundo lateral pega un salto de linea a que se debe esto es mi duda[/QUOTE]

No sabría darte una respuesta muy certera, pero a mi parecer (Como los div no estan unidos como las tablas, debes decirte tamaño y donde van a estar (porque como su nombre lo dice float, estan como flotando en la pág. y hay que ubicarlas configurando su ubicación, tamaño, etc..) al no colocarle nada el va a tratar de ubicarse donde cree que va (creo que por defecto busca el centro).

elkpo15 · #7 (**permalink**) 19/02/2010, 20:48

Claro por que yo lo veia de una forma que por ejemplo si bueno sabemos que el primer lateral flota para la izquierda, el segundo lateral para la derecha, entonces el centro no deberia flotar ya que no esta ni de izquierda y ni de derecha; Entonces estaba bastante confundido por que primero pensaba ponerle float:center cosa que no funciono.
Gracias por la solucion

Joseph · #8 (**permalink**) 19/02/2010, 20:53

Si logicamente debería funcionar así, pero al del centro hay que pegarlo a algunos de los lados (Creo que si lo colocas hacia la derecha también funciona). bueno cualquier cosa postea a ver si te podemos ayudar.

elkpo15 · #9 (**permalink**) 20/02/2010, 09:15

Despues otro problema que tengo es cuando abro la pagina con el internet explorer, el menu horizontal se ve muy mal y despues el cuerpo de la pagina tambien eso tampoco se que puede ser

Joseph · #10 (**permalink**) 20/02/2010, 13:05

Debes especificar con detalles el problema

elkpo15 · #11 (**permalink**) 21/02/2010, 04:33

Claro a lo que yo me refiero que con el "browser" firefox la pagina se visualiza correctamente pero ahora si utilizo "Internet explorer" se visualiza mal el menu horizontal y el cuerpo de la pagina como el segundo lateral y entre otras entidades; Lo que decia, es a que se debe este error de que se visualize mal en internet explorer

Joseph · #12 (**permalink**) 21/02/2010, 04:50

la verdad es que deberías volver a envíar el código con las moficaciones para chequear, porque cuando ví el error del float... se veía bien en IE