capa con input salido

mafima · #1 (**permalink**) 21/01/2005, 07:33

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... :(

mafima · #2 (**permalink**) 21/01/2005, 11:04

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

de antemano muchas gracias

mafima · #3 (**permalink**) 21/01/2005, 12:06

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

julio2k · #4 (**permalink**) 21/01/2005, 12:49

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.

mafima · #5 (**permalink**) 21/01/2005, 13:08

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

julio2k · #6 (**permalink**) 21/01/2005, 13:18

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;
}

mafima · #7 (**permalink**) 21/01/2005, 13:35

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

julio2k · #8 (**permalink**) 21/01/2005, 14:04

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.

mafima · #9 (**permalink**) 21/01/2005, 14:17

ok muchisimas gracias