Foros del Web » Creando para Internet » CSS »

Aver expertos, una duda con input

Estas en el tema de Aver expertos, una duda con input en el foro de CSS en Foros del Web. resulta que este input es absoluto @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original input {   position : absolute ; bottom : 10px ; left : ...
  #1 (permalink)  
Antiguo 08/03/2010, 09:44
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Pregunta Aver expertos, una duda con input

resulta que este input es absoluto

Código CSS:
Ver original
  1. input {
  2.  
  3. position: absolute;
  4. bottom: 10px;
  5. left: 10px;
  6. right; 10px;
  7.  
  8. width: auto;
  9.  
  10. display: block;
  11.  
  12. }

con ese codigo lo tengo, pero resulta que solo se ve asi con webkit, los demas navegadores lo alinean a las izquierda y con n width fijo y no relativo como yo quisiera

¿por que pasa esto?, ¿como puedo solucionarlo?

gracias de antemano...
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #2 (permalink)  
Antiguo 08/03/2010, 10:49
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Aver expertos, una duda con input

position: absolute;? ok...

left: 10px;
right; 10px;

o izquierda o derecha, si es por el valor relativo del ancho con uno te vale, y cambiar auto por % con margin, u otras maneras (ya que no veo el resto de codigo implicado).

Cita:
los demas navegadores lo alinean a las izquierda y con n width fijo
y por que no lo alineas a la izquierda y con width fijo?...

viendo los pocos px en que posicionas el absolute, supongo que lo tienes hasta abajo y que se vaya estirando segun la resolucion... me gustaria ver el resto del codigo HTML/CSS o ver la url mejor.... ya que no soy experto y me gusta ver jeje...

PD: ok hay expertos, pero adivinos nuse... huy si hay... bueno homer (kseso?) anda de vacaciones.
  #3 (permalink)  
Antiguo 08/03/2010, 10:55
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Aver expertos, una duda con input

jaja

uy mi experto que me ha librado de varias

jaja

mira este link

http://e-music-de.webcindario.com/chat/index.php //el que contiene todo

http://e-music-de.webcindario.com/chat/chat.php //el frame de los mensajes

http://e-music-de.webcindario.com/chat/style.css // el estilo de los dos anteriores

y si el input cambia conforme la resolucion, mas bien el tamaño de la ventana

y quiero que este algo asi como ahora esta (ie no esta optimizado aun),

solo que no me gusta como se ve ahora, checa el codigo html y el css
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]

Última edición por danneg; 08/03/2010 a las 14:07
  #4 (permalink)  
Antiguo 08/03/2010, 11:38
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Aver expertos, una duda con input

bueno a los input text por ejemplo
Código:
#comment {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #EEEEEE;
bottom:39px;
left:10px;
overflow:hidden;
padding:0 1px;
position:absolute;
right:10px;
}
y al input que lleva dentro

Código:
#comment input {
background:none repeat scroll 0 0 #FFFFFF;
border:medium none;
display:block;
font-size:16px;
height:20px;
padding:2px 0;
width:100%;
}
bueno si es que entendi... pero vamos... los input no les tienes puesto posicion... sino a los divs que los envuelven no?...
otra cosa hay un <table> puedes usar un li mejor...
me gustaria que me digas que quieres hacer jajaja que no entiendo mucho chao!
  #5 (permalink)  
Antiguo 08/03/2010, 13:10
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Aver expertos, una duda con input

jaja

bueno, los imput al principio tenian el id del div que los contiene, pero como no se expandian decidi colocarlos como ahora

la tabla la puse asi solo por que se me antojo, casi nunca trabajo con tablas y desidi usarla esta ocacion, no lo se se ve igual que con la ul y sus hijitos

ya intente lo del 100% pero este se expande 20px mas de lo deseable, lo que quiero es quitar de mi codigo a los div y solo dejar los puros input

mira ahora entra ve como se ve en firefox y luego en safari u otro webkit y veras de lo que hablo

asi se ve en chrome que tiene webkti como motor, y quiero que asi se vea en todos lo navegadores

__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]

Última edición por danneg; 08/03/2010 a las 13:20
  #6 (permalink)  
Antiguo 08/03/2010, 14:34
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Aver expertos, una duda con input

wow pues ni idea... la verda... pero se ve interesante aver si miro como hacerlo pero de otro modo...
---------------------------------------------------------
pues solo encontre la manera de hacerlo con divs... aver si te sirve chao!...
PD: solo cogi el codigo que me sirvio asi que le falta el css de las tablas y el :focus etc...

Código CSS:
Ver original
  1. *{margin:0;padding:0;}
  2. body{background:#000;color:#DDD;font: 16px/18px helvetica, arial, sans-serif bold;overflow:hidden;padding:10px;}
  3. #frame{position:absolute;top:10px;bottom:120px;left:10px;right:10px;border:2px solid #555;overflow:hidden;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
  4. .contenido{bottom:10px;left:10px;overflow:hidden;position:absolute;right:10px;}
  5. .coment_txt{margin:10px 10px 10px 0;}
  6. #comment{border:1px solid #EEE;background:#FFF;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;height:20px;display:block;padding:2px 4px;font-size:16px;width:100&#37;;}
  7. .inp_btn{float:right;width:100px;}
  8. .inp_txt{margin-right:100px;padding-right:10px;}
  9. #nickname{border:1px solid #777;background:#FFF;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:2px 0;width:100%;}
  10. #submit{border: 2px solid #777;font-weight:bold;background:#888;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:100px;}
Código HTML:
Ver original
  1. <div id="frame"><iframe src="http://e-music-de.webcindario.com/chat/chat.php" frameborder="no" width="100%" height="100%"></iframe></div>
  2. <div class="contenido">
  3.     <table>
  4.         <tbody>
  5.             <tr>
  6.                 <td><a class="width_auto" href="javascript:zumbido(3);" title="Zumbido" style="font-weight:bold;">((zumbido))</a></td>
  7.                 <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e1.gif" alt="" onclick="javascript:emoticon('(H)');" /></td>
  8.                 <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e2.gif" alt="" onclick="javascript:emoticon(':S');" /></td>
  9.                 <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e3.gif" alt="" onclick="javascript:emoticon(':\'(');" /></td>
  10.                 <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e4.gif" alt="" onclick="javascript:emoticon(':|');" /></td>
  11.                 <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e5.gif" alt="" onclick="javascript:emoticon(':(');" /></td>
  12.                 <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e6.gif" alt="" onclick="javascript:emoticon(':)');" /></td>
  13.                 <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e7.gif" alt="" onclick="javascript:emoticon(':D');" /></td>
  14.                 <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e8.gif" alt="" onclick="javascript:emoticon(':O');" /></td>
  15.                 <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e9.gif" alt="" onclick="javascript:emoticon(':P');" /></td>
  16.                 <td><img src="http://e-music-de.webcindario.com/chat/emoticons/e10.gif" alt="" onclick="javascript:emoticon(';)');" /></td>
  17.             </tr>
  18.         </tbody>
  19.     </table>
  20.     <form name="form_chat" active="#" method="post">
  21.         <div class="coment_txt"><input id="comment" type="text" name="msj" value="" /></div>
  22.         <div class="inp_btn">
  23.             <input id="submit" type="submit" value="Enviar" />
  24.         </div>
  25.         <div class="inp_txt">
  26.             <input id="nickname" type="text" name="name" value="[email protected]" onclick="javascript:document.form_chat.name.focus();document.form_chat.name.select();" />
  27.         </div>
  28.     </form>
  29. </div>

Última edición por alexk; 08/03/2010 a las 16:31
  #7 (permalink)  
Antiguo 09/03/2010, 09:50
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Aver expertos, una duda con input

jaja ok muchas gracias

el codigo priemro qeu viste era similar, echo con divs, pero se veia mal

intentare este aver como queda

gracias!!!
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #8 (permalink)  
Antiguo 09/03/2010, 10:31
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Aver expertos, una duda con input

pues ojala te sirva... que eh aprendido otro bug de ff...
que solo como mencionas el webkit interpreta bien...
si esta un pelin raro.. ojala se pasen lo que saben mas... que me gustaria ver como un buen reto danneg
  #9 (permalink)  
Antiguo 09/03/2010, 10:34
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Aver expertos, una duda con input

bueno eso si, no me imagine que en ff ocurriera eso, pero pues no se yo acostumbor usar mejor webkit para maquear y de ahi a los demas y al final dejo ie, obvio este se e mucho peor, jaja

y gracias por tu ayuda
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]

Etiquetas: input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:02.