RGT
|
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!.
|
LGrusin
|
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
|
RGT
|
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?
|
RGT
|
Ah por cierto intente:
margin-left:
y margin-right:-
y no se mueve mas a la derecha, alguna idea de que podria hacer?
|
LGrusin
|
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
|
RGT
|
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;
}
-
This reply was modified 104 días ago by
 RGT.
|
23r9i0
|
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.
|
RGT
|
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!.
-
This reply was modified 103 días ago by RGT.
-
This reply was modified 103 días ago by RGT.
-
This reply was modified 103 días ago by RGT.
|
Inicio
