Search Box Con google integrado no se coloca bien

[Dog_Dancer]

Hola a todos,

Estoy haciendo una pagina web, la cual tiene un search box que busca en google, bueno, todo bien, cuando escribes algo en el box y le das a buscar se reedirije y lo busca automaticamente en google.


Pero En el diseño hay un problema y no encuentro la solución.

La he diseñado en un ordenador y queda asi:


NOMBRE DE LA PAGINA

SEARCH BOX

CONTENIDO DE LA PAGINA

Esta Todo perfecto es exactamente como lo quiero, pero cuando pruebo la pagina en una tablet el search box no esta donde tiene que estar!

NOMBRE DE LA PAGINA
SEARCH BOX

CONTENIDO DE LA PAGINA


El Search box se mueve y se queda en la esquina o se queda en cualquier otro sitio menos centrado donde yo lo puse

Resumiendo el search box no se queda centrado en la posicion central donde yo
lo diseño en el ordenador el resto del contenido si se ve igual en todos los sistemas sin ningun problema.

PD: Tambien me he fijado que si voy miminizando la pagina en el mismo ordenador donde ha sido diseñada la pagina el search box se va moviendo hasta un punto que se va a la otra punta de la pagina al igual que la tablet.


Este es el codigo del Search box :

<form style="position:absolute;right:318;bottom:340; z-index:73" method="get" action="http://www.google.com/search">
<input type="text" name="q" size="91" maxlength="255" value="" />
<input type="submit" name="" value="Search" />
</form>




El problema es que no se queda fijo en la posición que le asigne se va moviendo
en relacion a la resolucion de la pagina. Sin embargo el resto del contenido de la pagina si se queda fijo.


UN SALUDO Y GRACIAS A TODOS LOS DE FOROS DEL WEB.

[angelAparicio]

Hola, ¿la idea es que el searchbox esté centrado? Si es eso el problema está en que estás tratando de centrarlo usando valores absolutos para "right" y "bottom". Eso solo va a funcionar en pantallas de una resolución similar a la que estés usando.

Deberías usar valores relativos, del tipo right: 45%. O mucho mejor aún, centrar con margin: 0 auto.

Aquí tienes una ayuda:
http://www.forosdelweb.com/wiki/CSS:...tenedor_en_CSS

Si necesitas más detalle:
http://ksesocss.blogspot.com/2012/05...6-maneras.html

[Dog_Dancer]

Hola Angel Aparicio, En primer lugar gracias por contestar a mi pregunta.

Si la idea es que se quede centrado en el lugar donde yo lo establezco a la hora de diseñarlo, es decir que no se mueva de donde yo lo he puesto a la hora de cambiar de resolucion.

Vale entonces el problema esta en que estoy utilizando el valor: position:absolute;right:318;bottom:340;

Y lo mejor sera modificar el codigo para centrarlo con margin: 0 auto.
Ahora bien, Mi pagina solo se compone de un documento HTML, ¿Para centrarlo con un margin 0 auto necesitare un documento css que acompañe al html ¿verdad?

[Dog_Dancer]

Iniciado por angelAparicio

Hola, ¿la idea es que el searchbox esté centrado? Si es eso el problema está en que estás tratando de centrarlo usando valores absolutos para "right" y "bottom". Eso solo va a funcionar en pantallas de una resolución similar a la que estés usando.

Deberías usar valores relativos, del tipo right: 45%. O mucho mejor aún, centrar con margin: 0 auto.

Aquí tienes una ayuda:
[url]http://www.forosdelweb.com/wiki/CSS:FAQ:C%C3%B3mo_centrar_un_elemento_contenedor_e n_CSS[/url]

Si necesitas más detalle:
[url]http://ksesocss.blogspot.com/2012/05/centrando-al-centro-con-css-16-maneras.html[/url]

Hola Angel Aparicio, En primer lugar gracias por contestar a mi pregunta.

Si la idea es que se quede centrado en el lugar donde yo lo establezco a la hora de diseñarlo, es decir que no se mueva de donde yo lo he puesto a la hora de cambiar de resolucion.

Vale entonces el problema esta en que estoy utilizando el valor: position:absolute;right:318;bottom:340;

Y lo mejor sera modificar el codigo para centrarlo con margin: 0 auto.
Ahora bien, Mi pagina solo se compone de un documento HTML, ¿Para centrarlo con un margin 0 auto necesitare un documento css que acompañe al html ¿verdad?

[angelAparicio]

Iniciado por Dog_Dancer

Y lo mejor sera modificar el codigo para centrarlo con margin: 0 auto.
Ahora bien, Mi pagina solo se compone de un documento HTML, ¿Para centrarlo con un margin 0 auto necesitare un documento css que acompañe al html ¿verdad?

Bueno, realmente si el css va dentro del propio html usando el atributo style o en un archivo aparte, da igual. El navegador lo va a interpretar igual. Aunque se recomienda que siempre vaya en un archivo aparte, por limpieza de código. Dicho esto, no te haría falta un css aparte para usar el "margin: 0 auto".

El problema de alienar con right:318px es que eso pone la caja de búsqueda a 318px, no en el centro. Si la pantalla del usuario tiene 1200px de ancho, la caja quedará a la derecha, no centrada.

Por eso mejor el margin: 0 auto. O poner right: 50%, que también funcionaría, aunque no quedaría totalmente centrado.