Cuando minimizo la web el buscador se mueve de posicion, tengo algo mal en css?

Inicio Foros WordPress Themes y Diseño Cuando minimizo la web el buscador se mueve de posicion, tengo algo mal en css?

Este debate contiene 7 respuestas, tiene 3 mensajes y lo actualizó  RGT hace 6 años, 5 meses.

  • Autor
    Publicaciones
  • #60045

    RGT
    Participante

    Hola, estoy haciendo una web y agregue el buscador en el header, justo arriba del menu pero, cuando minimizo la web, el buscador se mueve mas a la izquierda.
    No se porque pasa esto, a ver si pueden ayudarme, aqui unas fotos:

    Normal:
    http://oi44.tinypic.com/ruz0xu.jpg

    Minimizado:
    http://oi42.tinypic.com/2e1r7m9.jpg


    .search2{
    position:absolute;
    top:30px;
    right:351px;
    }
    .buscador-icon{
    background:url("images/buscador.png") no-repeat;
    width:48px;
    height:48px;
    float:left;
    }
    .search2 ul{
    list-style:none;
    width:238px;
    height:32px;
    padding:4px 4px 0 4px;
    background:url("images/search.png") no-repeat;
    float:right;
    margin-top:6px;
    margin-left:5px;
    }
    .search2 ul li{
    float:left;
    }
    .search2 ul li input.txtfield{
    float:left;
    width:180px;
    height:28px;
    line-height:28px;
    padding:0px 10px 0px 10px;
    font-size:12px;
    color:#798e94;
    background:transparent;
    border:none;
    }
    .search2 ul li input.go{
    float:right;
    width:32px;
    height:28px;
    border:#FFF solid 1px;
    border-radius:0px 2px 2px 0px;
    background-image:url("images/mag.png");
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer;
    background-color:#4C4948;
    }

    Espero que me ayuden!.

  • #60048

    LGrusin
    Miembro

    Supongo que al tener
    .search2 {
    position:absolute;
    top:30px;
    right:351px;
    }

    el cuadro de búsqueda siempre se alinea desde la derecha da igual el tamaño de la ventana. Calcula por la izquierda o mejor utiliza float:right en su lugar.

    Un saludo

  • #60050

    RGT
    Participante

    Hola,
    puse esto:

    .search2{
    position:relative;
    top:30px;
    float:right;
    }

    Pero ahora esta muy a la izquierda, aqui una foto:
    http://oi41.tinypic.com/29e0j88.jpg

    Alguna idea?

  • #60051

    RGT
    Participante

    Ah por cierto intente:
    margin-left:
    y margin-right:-
    y no se mueve mas a la derecha, alguna idea de que podria hacer?

  • #60054

    LGrusin
    Miembro

    A ver, asi sin ver los demás estilos del theme es complicado decirte.

    La caja .search2 supongo que será la contenedora de todos los elementos siguientes.

    También es posible que tengas una caja a la derecha y no tengas espacio lo que te impide que entre .search2.

    Otra opción sería que uses porcentajes en vez de px.
    .search2 {
    position:absolute;
    top:30px;
    right:40%;
    }

    Pero si tienes algo a la derecha te va a ocurrir lo mismo.

    Es mucho suponer sin ver el código.

    Un saludo

  • #60055

    RGT
    Participante

    Tienes razon perdoname, debi poner todo lo que tengo, aqui te lo pongo en una foto.
    (cuando pego codigo html y php, no se ve nada, hay que reportar eso)

    http://i42.tinypic.com/apa1q1.jpg

    el css del menu es:

    #mainmenu {
    position:relative;
    top:97px;
    margin-right:11px;
    }

  • #60058

    23r9i0
    Participante

    No veo el codigo completo pero un absolute tiene que estar dentro de un relative
    y veo por la imagen que tienes el mainmenu en relative y el search en absolute pero el que rodea los dos en que position esta, podrias poner la web o el codigo.

  • #60078

    RGT
    Participante

    Aqui les pongo todo el codigo del header:
    http://oi44.tinypic.com/1zlahpu.jpg

    Aqui el css:

    .wrapper {
    width: 980px;
    margin: 0 auto;
    }

    /* LOGO */

    #top-header{
    background-image: url("dark/header.jpg");
    background-repeat: no-repeat;
    }
    #logo {
    padding-left:0;
    width:auto;
    background-image: url("dark/logo.png");
    background-repeat: no-repeat;
    background-position: left center;
    display:block;
    float:left;
    margin-top:20px;
    height:91px;
    }

    #logo a{
    width:284px;
    display:block;
    line-height:100px;
    text-indent:-5000px;
    }

    /* MENU */

    #mainmenu {
    position:relative;
    top:97px;
    margin-right:11px;
    }

    #mainmenu ul li {
    float: right;
    width:auto;
    margin: 0;
    background:url("dark/bg_menu_tab_right.gif") no-repeat right top;
    margin-right:-1px;
    }

    #mainmenu ul li a{
    display: block;
    background: url("dark/bg_menu_tab_left.gif") no-repeat left top;
    font-weight:bold;
    width:auto;
    color:#fff;
    padding: 9px 15px;
    }

    #mainmenu ul li.current_page_item, #mainmenu ul li.current-cat {
    text-decoration: none;
    background: #fff url("dark/bg_menu_tab_right_current.gif") no-repeat right top;
    }

    #mainmenu ul li.current_page_item a, #mainmenu ul li.current-cat a{
    text-decoration: none;
    background: url("dark/bg_menu_tab_left_current.gif") no-repeat;
    color:#333;
    }

    /* BUSCADOR */

    .search2{
    position:relative;
    top:30px;
    float:right;
    }
    .buscador-icon{
    background:url("images/buscador.png") no-repeat;
    width:48px;
    height:48px;
    float:left;
    }
    .search2 ul{
    list-style:none;
    width:238px;
    height:32px;
    padding:4px 4px 0 4px;
    background:url("images/search.png") no-repeat;
    float:right;
    margin-top:6px;
    margin-left:5px;
    }
    .search2 ul li{
    float:left;
    }
    .search2 ul li input.txtfield{
    float:left;
    width:180px;
    height:28px;
    line-height:28px;
    padding:0px 10px 0px 10px;
    font-size:12px;
    color:#798e94;
    background:transparent;
    border:none;
    }
    .search2 ul li input.go{
    float:right;
    width:32px;
    height:28px;
    border:#FFF solid 1px;
    border-radius:0px 2px 2px 0px;
    background-image:url("images/mag.png");
    background-repeat:no-repeat;
    background-position:center center;
    cursor:pointer;
    background-color:#4C4948;
    }

    Hay esta todo, espero que me ayuden amigos!.

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest