Bordes y z-index
Hola!
Tengo una consulta sobre bordes y también sobre el comando z-index.
Hice un buscador en PHP con una caja de texto y un botón "buscar". Le agregue un autocompletar, a medida que el usuario va escribiendo se despliega un menu con las posibles busquedas. El problema es que el borde superior de el menu desplegable siempre permanece visibe y no encuentro al forma de ocultarlo.
El otro problema es que cuando se despliega el menu, en vez superponerse al div que se encuentra debajo, lo que hace es moverme toda la pagina hacia abajo. Intente usar el comando z-index pero no obtuve ningun resultado.
Si alguien me puede dar una mano, se lo agradezco.
Saludos
Tengo una consulta sobre bordes y también sobre el comando z-index.
Hice un buscador en PHP con una caja de texto y un botón "buscar". Le agregue un autocompletar, a medida que el usuario va escribiendo se despliega un menu con las posibles busquedas. El problema es que el borde superior de el menu desplegable siempre permanece visibe y no encuentro al forma de ocultarlo.
El otro problema es que cuando se despliega el menu, en vez superponerse al div que se encuentra debajo, lo que hace es moverme toda la pagina hacia abajo. Intente usar el comando z-index pero no obtuve ningun resultado.
Si alguien me puede dar una mano, se lo agradezco.
Saludos
1 Respuesta
Respuesta de Marcelo Origoni
1
Hola maop84, gracias por responder.
El tema del z-index ya lo resolvi, tenia "position:relative" y lo cambie a "absolute".
El autocompletar lo cargo desde un JS y esta dentro de una div.
El borde sigue ahi, visible todo el tiempo.
Saludos
El tema del z-index ya lo resolvi, tenia "position:relative" y lo cambie a "absolute".
El autocompletar lo cargo desde un JS y esta dentro de una div.
El borde sigue ahi, visible todo el tiempo.
Saludos
Fiajte si no está heredando del contendor el borde. Para asegurarte, poné en el CSS
div#autocompletar{
border-top: none;
}
div#autocompletar{
border-top: none;
}
¡Hola de nuevo!
El problema es que el borde que permanece visible es el borde inferior del menu que sse desplega cuando se empiezan a introducir letras en el textfield.
Si lo pongo en "none" desparece pero cuando se extiende el menu, este queda sin el borde inferior.
¿No se puede utilizar algun tipo de "if"?
Saludos y gracias de nuevo.
El problema es que el borde que permanece visible es el borde inferior del menu que sse desplega cuando se empiezan a introducir letras en el textfield.
Si lo pongo en "none" desparece pero cuando se extiende el menu, este queda sin el borde inferior.
¿No se puede utilizar algun tipo de "if"?
Saludos y gracias de nuevo.
PAsame tu codigo actual, por que no termino de entender.
Aca te dejo el código.
<script type="text/javascript" SRC="marquesina.js">
</script>
<style type="text/css">
body {overflow:hidden;}
<!--
.style1 {
font-size: xx-small;
font-family: Verdana;
}
.style2 {font-size: x-small; font-family: Verdana; }
.style4 {font-size: xx-small; font-family: Verdana; font-weight: bold; }
-->
</style>
</head>
<div>
<style type="text/css" media="screen">
body {
font-size:10;
font-family:verdana;
}
.suggest_link {
background-color: #FFFFFF;
border: 0px solid #000000;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #FF7F00;
color: white;
border: 0px solid #000000;
padding: 2px 6px 2px 6px;
border-bottom: none;
}
#search_suggest {
position: absolute; z-index:1;
right: 577px;
cursor: pointer;
width:195px;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
border-style: hidden solid solid solid;
}
</style>
</div>
<script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
<body onLoad="document.getElementById('txtSearch').focus()" >
<table width="100%" border="0">
<tr>
<td>
<div align="center"><a href="index.php"><img src="imagenes/logo_hormiga_erg.png" width="446" height="143" border="0"></a></div>
</td>
</tr>
</table>
<table width="100%" border="0">
<td><form id="frmSearch" action="consulta.php" method="post">
<div align="center"> <input name="txtSearch" type="text" id="txtSearch" size="28"
onKeyUp="searchSuggest();" autocomplete="off"/>
<input name="cmdSearch" id="cmdSearch" value="Buscar" type="submit"><br />
<div id="search_suggest">
</div>
<script type="text/javascript" SRC="marquesina.js">
</script>
<style type="text/css">
body {overflow:hidden;}
<!--
.style1 {
font-size: xx-small;
font-family: Verdana;
}
.style2 {font-size: x-small; font-family: Verdana; }
.style4 {font-size: xx-small; font-family: Verdana; font-weight: bold; }
-->
</style>
</head>
<div>
<style type="text/css" media="screen">
body {
font-size:10;
font-family:verdana;
}
.suggest_link {
background-color: #FFFFFF;
border: 0px solid #000000;
padding: 2px 6px 2px 6px;
}
.suggest_link_over {
background-color: #FF7F00;
color: white;
border: 0px solid #000000;
padding: 2px 6px 2px 6px;
border-bottom: none;
}
#search_suggest {
position: absolute; z-index:1;
right: 577px;
cursor: pointer;
width:195px;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
border-style: hidden solid solid solid;
}
</style>
</div>
<script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
<body onLoad="document.getElementById('txtSearch').focus()" >
<table width="100%" border="0">
<tr>
<td>
<div align="center"><a href="index.php"><img src="imagenes/logo_hormiga_erg.png" width="446" height="143" border="0"></a></div>
</td>
</tr>
</table>
<table width="100%" border="0">
<td><form id="frmSearch" action="consulta.php" method="post">
<div align="center"> <input name="txtSearch" type="text" id="txtSearch" size="28"
onKeyUp="searchSuggest();" autocomplete="off"/>
<input name="cmdSearch" id="cmdSearch" value="Buscar" type="submit"><br />
<div id="search_suggest">
</div>
Al input, ponele una accion on keyup, que le saque el border inferior.
Hace mucho que no uso javascript puro (me achanché, y empecé a usar mootools :P)creo que era algo así
this.style.borderBottom = '0px',
y onblur le das el border de nuevo
this.style.borderBottom = '1px'
quedaría algo así:
<input name="txtSearch" type="text" id="txtSearch" size="28"
onKeyUp="this.style.borderBottom = '0px';searchSuggest();" onblur="this.style.borderBottom = '1px';" autocomplete="off"/>
Hace mucho que no uso javascript puro (me achanché, y empecé a usar mootools :P)creo que era algo así
this.style.borderBottom = '0px',
y onblur le das el border de nuevo
this.style.borderBottom = '1px'
quedaría algo así:
<input name="txtSearch" type="text" id="txtSearch" size="28"
onKeyUp="this.style.borderBottom = '0px';searchSuggest();" onblur="this.style.borderBottom = '1px';" autocomplete="off"/>
No hay caso. Lo intente como me dijiste pero el borde sigue ahi, firme como rulo de estatua.
¿No hay forma de sacarlo con CSS?
Saludos
¿No hay forma de sacarlo con CSS?
Saludos
Sabía que estaba mal (y oxidado) mi codigo, así que busque en google, y encontré esto:
http://codepunk.hardwar.org.uk/css2js.htm
Tenes que darle borderBottomWidth, en lugar de borderBottom ;)
http://codepunk.hardwar.org.uk/css2js.htm
Tenes que darle borderBottomWidth, en lugar de borderBottom ;)
¡Hola!
Sigue igual, pero me parece que encontre la razón. Al poner esta linea:
<input name="txtSearch" type="text" id="txtSearch" size="28"
onKeyUp="this.style.borderBottomWidth = '0px';searchSuggest();" onblur="this.style.borderBottomWidth = '1px';" autocomplete="off"/>
estamos modificando al textfield y no al menu que se depliega. ¿Cómo puedo hacer para introducir el "onkeyup=...." para que afecte el menu que se despliega y no al textfield?
Saludos y gracias
Sigue igual, pero me parece que encontre la razón. Al poner esta linea:
<input name="txtSearch" type="text" id="txtSearch" size="28"
onKeyUp="this.style.borderBottomWidth = '0px';searchSuggest();" onblur="this.style.borderBottomWidth = '1px';" autocomplete="off"/>
estamos modificando al textfield y no al menu que se depliega. ¿Cómo puedo hacer para introducir el "onkeyup=...." para que afecte el menu que se despliega y no al textfield?
Saludos y gracias
tiene alguna id? podes reemplzar el this, por document.getElementById('[id]') (las mayusculas cuentan)
No hay caso, sigue igual. Ya me di por vencido. Se quedara así y ya esta.
Gracias de todos modos por tu tiempo.
Saludos
Gracias de todos modos por tu tiempo.
Saludos
Lo tenes online en algun servidor, ¿cómo para que pueda verlo? ¿Estas usando alguna librería de js para hacer la llamada ajax?
Marcelo
Marcelo
