alineacion de capas

tocalasam · #1 (**permalink**) 04/03/2007, 15:45

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>

Mikmoro · #2 (**permalink**) 04/03/2007, 15:54

¿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.

tocalasam · #3 (**permalink**) 04/03/2007, 17:53

el buscador dentro del header con al imagen de fondo y alineado a la derecha dejando un margen de 10px

Mikmoro · #4 (**permalink**) 05/03/2007, 01:45

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

Mikel.

tocalasam · #5 (**permalink**) 18/03/2007, 16:53

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>

Mikmoro · #6 (**permalink**) 18/03/2007, 17:09

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.

tocalasam · #7 (**permalink**) 19/03/2007, 02:09

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;
}

tocalasam · #8 (**permalink**) 19/03/2007, 02:13

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;
}

Mikmoro · #9 (**permalink**) 19/03/2007, 04:02

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.

tocalasam · #10 (**permalink**) 19/03/2007, 15:46

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.