Foros del Web » Creando para Internet » CSS »

alineacion de capas

Estas en el tema de alineacion de capas en el foro de CSS en Foros del Web. Quiero hacer un encabezado con una imagen como bacKground y despues alinear un buscador a la parte derecha dejnado 10 px , pero no hay ...
  #1 (permalink)  
Antiguo 04/03/2007, 15:45
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
alineacion de capas

Quiero hacer un encabezado con una imagen como bacKground y despues alinear un buscador a la parte derecha dejnado 10 px , pero no hay manera ¿que hago mal?
El buscador queda siempre a la izquierda tanto en firefox como en IE haga lo que haga

Código:
* { 
margin: 0px;
padding: 0px;
}



html, body { 
width: 100%;
height: 100%;
text-align: left;
background-color: #b2b2c3;
margin: 0px;
}


#web {
padding: 0px;
width: 750px;
height: 100%;
position: relative;
text-align: left;
background-color:#ffffff;
border-right: 2px solid #4c597f;
border-left: 2px solid #4c597f;
margin: 0px auto ;
}

#header  { 
width: 100%;
height: 80px;
text-align: left;
padding: 0px;
background-image: url('/top_rib/top_edirol.jpg'); 
z-index:0
}


#buscador { 
width: 50px;
height: 70px;
text-align: left;
z-index:1
margin:0 auto 200px 500px;



}

Código:
<body>
<div id="web">
<div id="header">
<div id="buscador"><!-- #include file='top3.asp' --></div>
</div></div>
  #2 (permalink)  
Antiguo 04/03/2007, 15:54
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alineacion de capas

¿El buscador después del header o dentro del header con la imagen de fondo?
¿a 10px de dónde?

Seguramente deberás poner float: right; a tu caja buscador, pero procura hacer las preguntas de forma más clara, más entendible, si quieres que alguiente eche un cable.

Mikel.
  #3 (permalink)  
Antiguo 04/03/2007, 17:53
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: alineacion de capas

el buscador dentro del header con al imagen de fondo y alineado a la derecha dejando un margen de 10px
  #4 (permalink)  
Antiguo 05/03/2007, 01:45
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alineacion de capas

#buscador { width: 50px;
height: 70px;
text-align: left;
float: right;
margin-right: 20px;
}

Mikel.
  #5 (permalink)  
Antiguo 18/03/2007, 17:53
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: alineacion de capas

ekl IE funciona OK, pero encambio en firefox me alinea el campo del formulario del buscador al tope a la derecha. ¿sabes pq?


Código:
* { 
margin: 0px;
padding: 0px;
}



html, body { 
width: 100%;
text-align: left;
background-color: #b2b2c3;
margin: 10px 0px 10px;

}


#web {
padding: 0px;
width: 750px;
position: relative;
text-align: left;
background-color:#ffffff;
border-top: 2px solid #666666;
border-right: 2px solid #666666;
border-left: 2px solid #666666;
border-bottom: 2px solid #666666;
margin: 0px auto ;
}


#header  { 
width: 100%;
height: 80px;
text-align: left;
padding: 0px;
background-image: url('/top_rib/top_edirol.jpg'); 
z-index:0
}


#buscador { width: 10px;
height: 50px;
text-align: left;
float: right;
margin-right: 10px;
}



#header2  { 
width: 100%;
height: 130px;
text-align: left;
padding: 0px;
}

#header3  { 
width: 100%;
height: 65px;
text-align: left;
padding: 0px;
background-color:#ffffff;
}

#header5  { 
width: 100%;
text-align: left;
padding: 0px;
background-color:#ffffff;
}

#footer {
text-align: left;
clear: both;
}




Código:
<div id="web">
<div id="header">
<div id="buscador"><!-- #include file='top69.asp' --></div>
</div>
<div id="header2"><!-- #include file='azar.asp' --></div>
<div id="header3"><!-- #include file='Barra_edirol.html' --></div>
<div id="header4"><img src="/img/barra_home.gif"></div>



<div id="header5"><!-- #include file='top0.asp' --></div>
<div id="header5"><!-- #include file='top1.asp' --><BR><P></div>



<div id="footer"><!-- #include file='footer.html' --></div>
</div>
  #6 (permalink)  
Antiguo 18/03/2007, 18:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alineacion de capas

Pues no estoy seguro, pero me parece que es porque tú se lo estás pidiendo. Si #buscador está dentro de #header, que ocupa el cien por cien de ancho, y #buscador está flotado a la derecha, al 10px del margen derecho, según le dices es ahí donde debería estar. ¿No te sale ahí?

Lo que me extraña que has cambiado de lo que te comenté a lo que has hecho ahora es que #buscador mide 10px de ancho, poco espacio para cualquier cosa con texto, creo yo.

Mikel.
  #7 (permalink)  
Antiguo 19/03/2007, 03:09
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: alineacion de capas

lo de los 10px es debido a que tengo un include dentro con un campo de introduccion de texto de formaulario

* {
margin: 0px;
padding: 0px;
}



html, body {

text-align: left;
background-color: #b2b2c3;
margin: 10px 0px 20px;
}


#web {
padding: 0px;
width: 750px;
position: relative;
text-align: left;
background-color:#ffffff;
border-top: 2px solid #666666;
border-right: 2px solid #666666;
border-left: 2px solid #666666;
border-bottom: 2px solid #666666;
margin: 0px auto ;
}


#header {
width: 750px;
height: 80px;
text-align: left;
padding: 0px;
background-image: url('/top_rib/top_edirol.jpg');
z-index:0
}


#buscador {
width: 10px;
position: absolute;
height: 50px;
text-align: left;
float: right;
margin-left: 575px;
}
  #8 (permalink)  
Antiguo 19/03/2007, 03:13
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Sonrisa Re: alineacion de capas

lo de los 10px lo he solucionado poniendo un include con un campo de introduccion de texto de formulario que lo hace mas grande.
respecto al tema de la alineacion, lo he solucionado asi, y se ve bien en IE7 y en firefox. Es correcto ¿no?



Código:
* { 
margin: 0px;
padding: 0px;
}



html, body { 

text-align: left;
background-color: #b2b2c3;
margin: 10px 0px 20px;
}


#web {
padding: 0px;
width: 750px;
position: relative;
text-align: left;
background-color:#ffffff;
border-top: 2px solid #666666;
border-right: 2px solid #666666;
border-left: 2px solid #666666;
border-bottom: 2px solid #666666;
margin: 0px auto ;
}


#header  { 
width: 750px;
height: 80px;
text-align: left;
padding: 0px;
background-image: url('/top_rib/top_edirol.jpg'); 
z-index:0
}


#buscador { 
width: 10px;
position: absolute;
height: 50px;
text-align: left;
float: right;
margin-left: 575px;
}
  #9 (permalink)  
Antiguo 19/03/2007, 05:02
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: alineacion de capas

No, no es correcto.

#buscador {
width: 10px;
position: absolute;
height: 50px;
text-align: left;
float: right;
margin-left: 575px;
}

Si pones posición absoluta, el float right no sirve de nada; en realidad le estás dando la situación con el margin-left.
No creo que sea necesario que lo pongas en posición absoluta, pero tampoco pasa nada. Lo que sí es recomendable es que entonces pongas posicion relativa a su contenedor (header) y lo posiciones de forma absoluta dentro de éste.

No entiendo por qué has tenido que "solucionar" lo del width de 10px. ¿No puedes darle el width que necesita el include que metes dentro? La otra vez lo tenías en 50px.

Mikel.
  #10 (permalink)  
Antiguo 19/03/2007, 16:46
 
Fecha de Ingreso: julio-2003
Ubicación: Barcelona
Mensajes: 142
Antigüedad: 14 años, 4 meses
Puntos: 1
Re: alineacion de capas

no ha habido manera, de momento lo dejo asi porque funciona en ie7 y en firefox, pero igualmente seguire tus indicaciones a ver si consigo hacerlo sin la posicion absoluta.

muchas gracias de todas maneras.
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 01:28.