Foros del Web » Creando para Internet » CSS »

capa con input salido

Estas en el tema de capa con input salido en el foro de CSS en Foros del Web. eso es lo que queiro hacer.. tengo un div de color rojo, y quiero ponerle un formulario... los culaes queden alineados a la derecha, y ...
  #1 (permalink)  
Antiguo 21/01/2005, 07:33
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
capa con input salido

eso es lo que queiro hacer.. tengo un div de color rojo, y quiero ponerle un formulario... los culaes queden alineados a la derecha, y salgan del div la mitad y la otra mitad se queden dentro del div... este es el codigo que utilize... pero me funciona muy bien en mozila y mal en el explorer:

CSS
Código:
div.capa{
overflow: visible;
padding: 0px 0px 0px 0px;
margin-top: 15px;
margin-right: 0;
margin-bottom: 0;
margin-left: 15px;
border-style: none;
width: 150px;
height: 135px;
background-color: #B90000;
}
input.user{
float: left;
padding: 0 0 0 0;
margin: 0 0 0 100px;
border: 0 0 0 0;
background-color: red;
width: 80;

}
Html
Código:
<html>
<head>
<link rel="stylesheet" href="estilo.css" media="screen" type="text/css" title="estilo">
<title>
luis
</title>
</head>
<body>
<div class="capa">
<form action="index.html" method="post">
<input type="text" name="user" class="user">
<input type="text" name="pass" class="user">
<input type="submit" class="enviar">
</form>
</div>
</body>
que puedo hacer... :(
__________________
SEO en Medellin

Última edición por mafima; 21/01/2005 a las 07:35
  #2 (permalink)  
Antiguo 21/01/2005, 11:04
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
gente espero sus respuestas

Vamos amigos, alguna idea....
ayudenme por favor...

de antemano muchas gracias
__________________
SEO en Medellin
  #3 (permalink)  
Antiguo 21/01/2005, 12:06
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
COmo solucionar este problema, no se

simplemente en el mozila.... la capa roja de abajo no s eensancha al darle margen a los input, pero ene l explorer... la capa roja de abajo se ensancha para acaparar la mergen de los input, es decir no permite quee estos se salgan de su esfera... aun teniendo la opcion overflow:visible;


espero ayuda des ustedes
__________________
SEO en Medellin
  #4 (permalink)  
Antiguo 21/01/2005, 12:49
Avatar de julio2k  
Fecha de Ingreso: abril-2004
Ubicación: Colombia
Mensajes: 22
Antigüedad: 13 años, 7 meses
Puntos: 0
Por lo que entiendo internet explorer siempre amplia el tamaño de la capa cuando la propiedad overflow es visible.

Te sugeriria que ubicaras los input dentro de otra capa o dependiendo del diseño usa una imagen de fondo que no abarque toda la capa para dar la impresión que el ancho solo llega hasta donde tu quieres.
__________________
julio2k

La herencia que dejas en este mundo son tus obras

:pensando:

Última edición por julio2k; 21/01/2005 a las 12:51
  #5 (permalink)  
Antiguo 21/01/2005, 13:08
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
estan segguros

buscos mas respuestas... se me hace imposible... de que el explorer no pueda dejar salir el input como lo hace el mozila
:( ayuda por favor
__________________
SEO en Medellin
  #6 (permalink)  
Antiguo 21/01/2005, 13:18
Avatar de julio2k  
Fecha de Ingreso: abril-2004
Ubicación: Colombia
Mensajes: 22
Antigüedad: 13 años, 7 meses
Puntos: 0

bueno ya que no te gusto la respuesta, aquí va otra espero que te sirva

dejale el margen derecho de los input negativo (pej. -50px), y además dale posición relativa.

así

Código:
input.user{
 float: left;
 padding: 0 0 0 0; 
 margin: 0 -50px 0 100px;
 border: 1px inset silver;
 position:relative;
 background-color: red;
 width: 80px;
}
__________________
julio2k

La herencia que dejas en este mundo son tus obras

:pensando:

Última edición por julio2k; 21/01/2005 a las 13:21
  #7 (permalink)  
Antiguo 21/01/2005, 13:35
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
asa si es la que buscaba

jeje gracias julio, esa era la respuesta que buscaba, pero ahora quizas si no es mucha molestia, me laquieres explicar?

es decir veo que colocas la margen izquierda negativa
pero la derecha le pones 100 por que
se hace asi... es decir que pasa cuando a un objeto se le pone la margen negativa?... y por que debes de poner la otra en 100.
muchas gracias por tus respuestas
__________________
SEO en Medellin
  #8 (permalink)  
Antiguo 21/01/2005, 14:04
Avatar de julio2k  
Fecha de Ingreso: abril-2004
Ubicación: Colombia
Mensajes: 22
Antigüedad: 13 años, 7 meses
Puntos: 0
bueno solo trate de dejar el codigo que tu tenias, y modifiqué la margen derecha para que pudieran superponerse. la margen izquierda quedó tal y como estaba.

creo que el codigo quedaría mas claro si pones a flotar el elemento a la derecha así:
Código:
input.user{
  float: right; 
  margin-right:-50px;
  border: 1px outset silver;
  position:relative;
  background-color: red;
}
al flotar el elemento se va a colocar hacia la derecha hasta donde se lo permita el margen del contenedor, en este caso como el margen es negativo, puede avanzar mas hacia la derecha que el limite del elemento.

espero que este claro

y me alegro que te sirva.
__________________
julio2k

La herencia que dejas en este mundo son tus obras

:pensando:
  #9 (permalink)  
Antiguo 21/01/2005, 14:17
Avatar de mafima  
Fecha de Ingreso: abril-2003
Ubicación: Medellin-Colombia
Mensajes: 1.109
Antigüedad: 14 años, 8 meses
Puntos: 24
si todo lo esta ya

ok muchisimas gracias
__________________
SEO en Medellin
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 14:18.