Foros del Web » Creando para Internet » CSS »

acomodar un div

Estas en el tema de acomodar un div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/12/2009, 23:59
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 8 años, 5 meses
Puntos: 641
acomodar un div

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
  1. <link rel="stylesheet" href="estilos.css" type="text/css" media="all">
  2. </head>
  3. <div id="header"></div>
  4. <div id="publi1"></div>
  5. <div id="menu">
  6.     <ul>
  7.         <li><a href="" class="current">Web</a></li>
  8.         <li><a href="">Foro</a></li>
  9.         <li><a href="">Portal</a></li>
  10.         <li><a href="">contacto</a></li>
  11.         <li><a href="">xxxxxxxx</a></li>                               
  12.     </ul>
  13. </div>
  14. <div id=video></div>
  15. <div id=publi2></div>
  16. <div id=chat></div>
  17. <div id=contador></div>
  18. </body>
  19. </html>


css

Código CSS:
Ver original
  1. body {
  2. text-align:center;
  3. background-color: white;
  4. background-image: url(images/back.jpg);
  5. background-repeat:repeat-x;
  6. }
  7. h1  {font-size:1em; color: white; margin-top:50px;}
  8. #header {
  9. background-image: url(images/head.png);
  10. background-repeat:no-repeat;
  11. background-position:top center;
  12. height:250px; width:65&#37;;
  13. float:left;
  14. }
  15. #publi1 {
  16. text-align:left;
  17. width:34%;height:250px;
  18. padding-bottom: 3px;
  19. float:right;
  20. }
  21. #menu{
  22.         width:100%;
  23.         height:50px;
  24.         background:url(images/menu_025_bg.png);
  25.         float:left;
  26.         margin:2px;
  27.         padding-bottom:5px;
  28.     }
  29.         #menu ul{
  30.             list-style:none;
  31.             text-align:center;
  32.         }
  33.             #menu li{
  34.                 list-style:none;
  35.                 display:inline;
  36.                 margin:0px 8px;
  37.             }
  38.                 #menu li a{
  39.                     color:#b19c93;
  40.                     text-transform:uppercase;
  41.                     font-size:11px;
  42.                     font-weight:bold;
  43.                     line-height:5px;
  44.                     text-decoration:none;
  45.                     padding:0 20px;
  46.                     background:url(images/menu_025_h.jpg) no-repeat;           
  47.                 }
  48.                     #menu li a:hover{
  49.                         color:#fff;
  50.                         background:url(images/menu_025_c.jpg) no-repeat;
  51.                     }
  52.                 #menu li a.current{
  53.                     background:url(images/menu_025_c.jpg) no-repeat;   
  54.                     color:#fff;
  55.                     text-transform:uppercase;
  56.                     font-size:11px;
  57.                     font-weight:bold;
  58.                     line-height:5px;
  59.                     text-decoration:none;
  60.                     padding:0 20px;
  61.                 }
  62.                     #menu li a:hover.current{
  63.                         color:#fff;
  64.                     }
  65.                    
  66. #video {
  67. background-color: orange;
  68. background-image: url();
  69. background-repeat:no-repeat;
  70. width:1021px;
  71. text-align:center;
  72. }
  73. #publi2{
  74. }
  75. #chat{
  76. }
  77. #contador{
  78. }


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.

Última edición por memoadian; 27/12/2009 a las 01:07
  #2 (permalink)  
Antiguo 27/12/2009, 05:14
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: acomodar un div

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¡¡
__________________
Revisa las FAQ's antes de disparar.
  #3 (permalink)  
Antiguo 27/12/2009, 11:11
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 8 años, 5 meses
Puntos: 641
Respuesta: acomodar un div

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
  #4 (permalink)  
Antiguo 27/12/2009, 13:50
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: acomodar un div

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)
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #5 (permalink)  
Antiguo 27/12/2009, 13:57
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 8 años, 5 meses
Puntos: 641
Respuesta: acomodar un div

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?
  #6 (permalink)  
Antiguo 27/12/2009, 14:13
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: acomodar un div

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.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 27/12/2009, 14:16
Avatar de memoadian
Colaborador
 
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 8 años, 5 meses
Puntos: 641
Respuesta: acomodar un div

gracias brother lo haré.
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 07:35.