Foros del Web » Creando para Internet » CSS »

Ayuda con Div

Estas en el tema de Ayuda con Div en el foro de CSS en Foros del Web. Saludos. En mi proceso de aprendizaje de Css me he topado con este problemilla que le he dado mil veces y no logro solucionar. Aqui ...
  #1 (permalink)  
Antiguo 15/07/2010, 15:39
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 15 años, 4 meses
Puntos: 3
Ayuda con Div

Saludos. En mi proceso de aprendizaje de Css me he topado con este problemilla que le he dado mil veces y no logro solucionar. Aqui en asunto:

Tengo un DIV (#header) donde he colocado una imagen:
<div id="header"><img src="header.png"></div>
y dentro de ese DIV quiero meter otro DIV (#buscador) en el cual quiero colocar un buscador y que este ubicado en la parte superior derecha del DIV header.

<div id="header"><div id="buscador"></div></div>

el asunto es que no logro cuadrarlo usando Float y position. Esta es la parte que mas me cuesta de CSS.

Mi Css esta asi:

#header {
width:100%;
height:115px;
padding:0px;
margin:0px;
position: absolute;}

#buscador {position:absolute; float:right;}

No se colo lograr que el #buscador se posicione en la parte superior derecha de #header.

He cambiado las posiciones una y otra vez y nada....

Gracias por la ayuda que puedan brindar..

Nota: Usando en #header la propiedad background-image si logro colocarlo. Pero me interesa invocarlo como imagen y no como fondo para poder usar: #header img {width: 100%;height: 115px;} de modo que la imagen se estire en caso de que algunos usuarios usen una resolucion mayor a 1024*768, como por ejemplo 1360*768
  #2 (permalink)  
Antiguo 15/07/2010, 16:38
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.049
Antigüedad: 8 años, 7 meses
Puntos: 1484
Respuesta: Ayuda con Div

no puedes usar float y posición absoluta a la misma vez ya que este último tiene mayor prioridad. puedes hacerlo de dos formas: utiliza solo float:right; o posición absoluta con coordenadas top y right.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 15/07/2010, 16:58
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 15 años, 4 meses
Puntos: 3
Respuesta: Ayuda con Div

Saludos, he puesto asi:

#header2 { width:100%; height:100%; padding:0px; margin:0px; position: absolute;}

#buscador { position:relative; float: right;}

y se ve como quiero, ahora pasa que el contenido se me ha subido y me solapa el div header...
  #4 (permalink)  
Antiguo 15/07/2010, 17:00
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 15 años, 4 meses
Puntos: 3
Respuesta: Ayuda con Div

Saludos he cerrado el div header asi:

<div id="header"><div id="buscador"></div></div>
y el css:
#header { width:100%; height:100%; padding:0px; margin:0px; position: absolute;}
#buscador { position:relative; float: right;}

y se ve bien, ahora el asunto es que el contenido se ha subido y me solapa al div header..

Ostias!!!! A ver com le hago..

Gracias por responder
  #5 (permalink)  
Antiguo 15/07/2010, 17:03
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Ayuda con Div

Quita la posición absoluta, no la necesitas.

Saludos
__________________
Grupo Telegram Docker en Español
  #6 (permalink)  
Antiguo 15/07/2010, 20:55
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: Ayuda con Div

Cita:
Iniciado por LinkLooker
<div id="header"><div id="buscador"></div></div>
es "header2" no?????

buscador esta dentro de header, por que no los individualizas y les das CSS invidualmente a cada uno.
Código HTML:
Ver original
  1. <div id="header"></div><div id="buscador"></div>
  #7 (permalink)  
Antiguo 16/07/2010, 14:17
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 15 años, 4 meses
Puntos: 3
Respuesta: Ayuda con Div

Gracias por responder!!!

Ok. Al quitarle la posición absoluta a #header2 se baja #buscador. Y queda header2 arriba y BUscador debajo de este. Al ponerle la posición absoluta se sube #buscador ubicandose donde quiero, pero a su vez se sube el contenido que esta en debajo de este y se descuadra el diseño.

Seguiré intentando.....Gracias por las respuestas..


Y si los tengo individualizados.
  #8 (permalink)  
Antiguo 16/07/2010, 14:20
 
Fecha de Ingreso: julio-2010
Mensajes: 2
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Ayuda con Div

mejor comprate una plantilla nueva en www.goodadyy.com y te compras un hosting o bien en www.1and-1.info y ahi te dan lo mismo y aparte de dan 50 dolares en vauchers para que promociones tu web en google adwords
  #9 (permalink)  
Antiguo 16/07/2010, 14:27
Avatar de minkweb  
Fecha de Ingreso: septiembre-2005
Mensajes: 443
Antigüedad: 12 años, 3 meses
Puntos: 14
Respuesta: Ayuda con Div

Colocales a ambos posicion absolute y cuadralos mediante margin-top y margin-left, no te compliques, asi te funcionara, saludos!
__________________
Juegos
Juegos iphone
  #10 (permalink)  
Antiguo 16/07/2010, 15:26
 
Fecha de Ingreso: noviembre-2009
Ubicación: Barcelona
Mensajes: 214
Antigüedad: 8 años
Puntos: 6
Respuesta: Ayuda con Div

ya te respondi y al parecer no corregiste.
al quitare propiedades como position absoluta, se la estas quitando a ambos ya que buscador es hijo de header2, por que este ID esta dentro del ID header2, ya que te dije como las indiviluarizadas y acomodaras la posicion de ambas independientemente.

saludos!!

edito: puedes ver lo que te digo con unos ejemplos super sencillisimos que te dejo aqui.
http://www.html09.freeiz.com/divs

saludos!!

Última edición por XxflezhaxX; 16/07/2010 a las 15:36
  #11 (permalink)  
Antiguo 16/07/2010, 15:33
 
Fecha de Ingreso: julio-2010
Mensajes: 15
Antigüedad: 7 años, 4 meses
Puntos: 0
Respuesta: Ayuda con Div

Hola

No utilices posiciones absolutas si no las necesitas y por la imagen como fondo de la cabecera:

#header {
background:url(header.png);
width:100%;
height:115px;
padding:0px;
margin:0px;
}

#buscador{
float:right;
}

Si acaso no pones la imagen como fondo:

#buscador{
position:absolute;
right:0;
z-index:999;
}

Etiquetas: Ninguno
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 18:47.