acomodar un div

memoadian · #1 (**permalink**) 26/12/2009, 23:59

pues eso, saludoas a todos,
he estado tratando de acomodar un div dejo una imagen para que vean.

como verán eso naranja es un div que se va hasta arriba es el div video
pero quiero que aparezca abajo del div menú lo cafesito, y no lo logro, además de que aparezca centrado y tampoco
si sigo así lo haré en tablas jo...¡¡¡
debe aparecer así pues lleva una imagen de fondo saludos dejo los códigos por si les quieren hechar un vistazo

Código HTML:

Ver original<html>
<head>
<title></title>
<link rel="stylesheet" href="estilos.css" type="text/css" media="all">
</head>
<body>
<div id="header"></div>
<div id="publi1"></div>
<div id="menu">
    <ul>
        <li><a href="" class="current">Web</a></li>
        <li><a href="">Foro</a></li>
        <li><a href="">Portal</a></li>
        <li><a href="">contacto</a></li>
        <li><a href="">xxxxxxxx</a></li>                                
    </ul>
</div>
<div id=video></div>
<div id=publi2></div>
<div id=chat></div>
<div id=contador></div>
</body>
</html>

css

Código CSS:

Ver originalbody {
text-align:center;
background-color: white; 
background-image: url(images/back.jpg);
background-repeat:repeat-x;
}
h1  {font-size:1em; color: white; margin-top:50px;} 
#header {
background-image: url(images/head.png);
background-repeat:no-repeat;
background-position:top center;
height:250px; width:65&#37;;
float:left;
}
#publi1 {
text-align:left;
width:34%;height:250px;
padding-bottom: 3px;
float:right;
}
#menu{
        width:100%;
        height:50px;
        background:url(images/menu_025_bg.png);
        float:left;
        margin:2px;
        padding-bottom:5px;
    }
        #menu ul{
            list-style:none;
            text-align:center;
        }
            #menu li{
                list-style:none;
                display:inline;
                margin:0px 8px;
            }
                #menu li a{
                    color:#b19c93;
                    text-transform:uppercase;
                    font-size:11px;
                    font-weight:bold;
                    line-height:5px;
                    text-decoration:none;
                    padding:0 20px;
                    background:url(images/menu_025_h.jpg) no-repeat;            
                }
                    #menu li a:hover{
                        color:#fff;
                        background:url(images/menu_025_c.jpg) no-repeat;
                    }
                #menu li a.current{
                    background:url(images/menu_025_c.jpg) no-repeat;    
                    color:#fff;
                    text-transform:uppercase;
                    font-size:11px;
                    font-weight:bold;
                    line-height:5px;
                    text-decoration:none;
                    padding:0 20px; 
                }
                    #menu li a:hover.current{
                        color:#fff;
                    }
                    
#video {
background-color: orange;
background-image: url();
background-repeat:no-repeat;
width:1021px;
text-align:center;
}
#publi2{
}
#chat{
}
#contador{
}

Gracias de antemano por ayudarme

Edit: le he puesto, position absolute, pero me temo que asi las resoluciones de pantalla afectarian el diseño aparte de que no ce centra el contenido.

Impostor · #2 (**permalink**) 27/12/2009, 05:14

Buenas, prueba quitando el float:left; al #menu y cuidado con el ancho que le has dado al #video (width:1021px;).

Si sigue fallando pasa la URL de tu web.

Saludos¡¡

memoadian · #3 (**permalink**) 27/12/2009, 11:11

gracias, amigo, lo he solucionado de manera un tanto ortodoxa, jajaja pues he dejado que el div se extienda hasta arriba y he dejado que la imagen de fondo, mas bien obligado a que aparezca hasta abajo y en el centro, de este modo sale exactamente lo que quiero y bueno aun no puedo dejar urls por lo de la cantidad de mensajes y pues no quiero hacer spam.

Saludos y gracias

PD. por cierto si quito el float a menú se va hasta arriba, XD

C2am · #4 (**permalink**) 27/12/2009, 13:50

Hola memoadian

una posible solución es crear un corte entre el div menu y lo que tienes debajo.
Al tener flotados todos los div que tienes por encima de "video", esto hace que para "video" no haya nada encima suyo,

Bueno la solución más sencilla es:
en el css agrega esta clase:

.vacia{clear:both;}

y en el html debajo de menu, es decir encima de video agrega
<div class="vacia"></div>

Es decir:

Código HTML:

<div id="menu">
    <ul>
        <li><a href="" class="current">Web</a></li>
        <li><a href="">Foro</a></li>
        <li><a href="">Portal</a></li>
        <li><a href="">contacto</a></li>
        <li><a href="">xxxxxxxx</a></li>                                
    </ul>
</div>

<div class="vacia"></div>

<div id=video></div>

saludos y recuerda que los objetos flotados salen del curso normal del documento, y dicho espacio será ocupado por el elemento siguiente. (hasta parece que sé,

, y nada que ver, jajaja, es de tanto leer las respuestas de lo que sí saben en forosdelweb)

memoadian · #5 (**permalink**) 27/12/2009, 13:57

muchas gracias por tu ayuda amigo mira lo he solucionado de esta forma

lamento poner esta url una vez me ayuden la borraré

manganimemas.com/anime.php

con el http antes claro

pero con el dichoso IE se ve del nabo que horror, ¿que me aconsejan?

C2am · #6 (**permalink**) 27/12/2009, 14:13

Aplica lo que te dije más arriba.

En cuanto a como se ve en ie, solo debo decir que :
#header {width:65%;.. + #publi1 {width:35%; > 100%

Sí, lo sé, pero así es IE.

Busca sobre como trata los margenes y padding IE y los otros navegadores.

memoadian · #7 (**permalink**) 27/12/2009, 14:16

gracias brother lo haré.