No se donde encerrar el div

Dentro del div tengo el formulario de registro ¿pero dónde tengo que cerrar para que me separe y no me quede de este modo?:

Los códigos del (index.php)

<div id="general"><br></br><font color="white"><font face="Tahoma" size="6">Regístrate
<font color="white"><font face="Tahoma" size="4">En esta nueva comunidad<br></br>
<form role="form">
<div class="form-group">
<font color="white" size="3"><label for="ejemplo_email_1">Nombre</label>
<br></br>
<input type="email" class="form-control" id="ejemplo_email_1" size="30">
<br></br>
<font color="white" size="3"><label for="ejemplo_email_1">Apellido</label>
<br></br>
<input type="email" class="form-control" id="ejemplo_email_1" size="30" maxlength="30">
<br></br>
<font color="white" size="3"><label for="ejemplo_email_1">E-mail</label>
<br></br>
<input type="email" class="form-control" id="ejemplo_email_1" size="36" maxlength="30">
<br></br>
<font color="white" size="3"><label for="ejemplo_email_1">Contraseña</label>
<br></br>
<input type="password" class="form-control" id="ejemplo_password_1" size="27">
<br></br>
<font color="white" size="3"><label for="ejemplo_email_1">Repetir contraseña</label>
<br></br>
<input type="password" class="form-control" id="ejemplo_password_1" size="27">
<br></br>
<center><input type="checkbox"><font size="2">Aceptas las condiciones de uso y política de privacidad propuesta en nuestras cookies</center>
<br></br>
<style type="text/css">
a:link
{
text-decoration:none;
}
</style>
</body>
</html>

Y el código de (estilos.css)

div#general{
margin:auto;
float:right;
width:380px;
height:600px;
background-color:green;
}

1 respuesta

Respuesta
1

Como primer punto, debes explicar mejor ¿qué?, ¿Cómo?, ¿Dónde? Y ¿Cuándo? Quieres separar.

En segundo lugar, ¿qué idea quieres plantear en la web? Que defina las posiciones.

El código que locaste debería estar de esta forma...

<html>
    <head>
        <style type="text/css">
            div#general{
                margin:auto;
                float:right;
                width:380px;
                height:600px;
                background-color:green;
                }
            a:link{
                text-decoration:none;
            }
        </style>
    <body>
        <div id="general"><br></br>
            <font color="white" face="Tahoma" size="6">Regístrate
            <font color="white" face="Tahoma" size="4">En esta nueva comunidad<br></br>
            <form role="form">
                <div class="form-group">
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Nombre</label><br></br>
                        <input type="email" class="form-control" id="ejemplo_email_1" size="30"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Apellido</label><br></br>
                        <input type="email" class="form-control" id="ejemplo_email_1" size="30" maxlength="30"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">E-mail</label><br></br>
                        <input type="email" class="form-control" id="ejemplo_email_1" size="36" maxlength="30"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Contraseña</label><br></br>
                        <input type="password" class="form-control" id="ejemplo_password_1" size="27"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Repetir contraseña</label><br></br>
                        <input type="password" class="form-control" id="ejemplo_password_1" size="27"><br></br>
                    <center>
                        <input type="checkbox">
                            <font size="2">Aceptas las condiciones de uso y política de privacidad propuesta en nuestras cookies
                    </center><br></br>
                </div>
            </form>
        </div>
    </body>
</html>

Lo que quería hacer es separar el div del footer, mi web que estoy intentando crear es una red social...

Esta bien los códigos que me pasaste, pero no me separa del footer al final del cuadro, eso es lo que estoy tratando de aplicar:

<style type="text/css">
div#general{
margin:auto;
float:right;
width:380px;
height:600px;
background-color:green;
}
a:link
{
text-decoration:none;
}
</style>
<div id="general"><br></br>
<center><font color="white" face="Tahoma" size="6">Regístrate
<font color="white" face="Tahoma" size="4">En esta nueva comunidad</center>
<form role="form"><br></br>
<div class="form-group">
<font color="white" size="3">
<label for="ejemplo_email_1">Nombre</label><br></br>
<input type="email" class="form-control" id="ejemplo_email_1" size="30"><br></br>
<font color="white" size="3">
<label for="ejemplo_email_1">Apellido</label><br></br>
<input type="email" class="form-control" id="ejemplo_email_1" size="30" maxlength="30"><br></br>
<font color="white" size="3">
<label for="ejemplo_email_1">E-mail</label><br></br>
<input type="email" class="form-control" id="ejemplo_email_1" size="36" maxlength="30"><br></br>
<font color="white" size="3">
<label for="ejemplo_email_1">Contraseña</label><br></br>
<input type="password" class="form-control" id="ejemplo_password_1" size="27"><br></br>
<font color="white" size="3">
<label for="ejemplo_email_1">Repetir contraseña</label><br></br>
<input type="password" class="form-control" id="ejemplo_password_1" size="27"><br></br>
<center>
<input type="checkbox">
<font size="2">Aceptas las condiciones de uso y política de privacidad propuesta en nuestras cookies
</center><br></br>
<center><footer><font color="white" size="1">¿Quiénes somos?</footer></center>
<br></br>
</div>
</form>
</div>
</body>
</html>

Y otra cosa, el tema de las alturas a los formularios como lo puedo dar, probé con maxleghrt pero no me funciono...

Disculpa la tardanza, te felicito por el proyecto, no cualquiera hace una red social y menos con poco conocimiento, no dejes que nadie te diga que no puedes...

1.- Altura de los formularios: Los formularios son contenedores que practicamente son invisibles y delimitan solo los controles que van a actuar, este se amoldará al contenedor externo inmediato. Dale un tamaño a la etiqueta que contiene al formulario y este se amoldará a ella.

2.- Si el div qwue contiene el footer esta dentro del div principal, lo que harás será agregar un espacio. Si deseas que esté separado totalmente debes sacarlo del DIV principal.

Prueba con algo así (utilizando clases CSS)

<html>
    <head>
        <style type="text/css">
            .general{
                margin:auto;
                float:right;
                width:380px;
                }
            .formulario{
                padding: 10;
                }
            .fondo-verde{
                background-color:green;
                }
            .footer{
                margin-top: 50px;
                }
            a:link{
                text-decoration:none;
            }
        </style>
    <body>
        <div class="general"><br></br>
            <font color="white" face="Tahoma" size="6">Regístrate
            <font color="white" face="Tahoma" size="4">En esta nueva comunidad<br></br>
            <form role="form">
                <div class="form-group fondo-verde formulario">
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Nombre</label><br></br>
                        <input type="email" class="form-control" id="ejemplo_email_1" size="30"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Apellido</label><br></br>
                        <input type="email" class="form-control" id="ejemplo_email_1" size="30" maxlength="30"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">E-mail</label><br></br>
                        <input type="email" class="form-control" id="ejemplo_email_1" size="36" maxlength="30"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Contraseña</label><br></br>
                        <input type="password" class="form-control" id="ejemplo_password_1" size="27"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Repetir contraseña</label><br></br>
                        <input type="password" class="form-control" id="ejemplo_password_1" size="27"><br></br>
                    <center>
                        <input type="checkbox">
                            <font size="2">Aceptas las condiciones de uso y política de privacidad propuesta en nuestras cookies
                    </center><br></br>
                </div>
                <div class="footer fondo-verde formulario">
                    <center>
                        <footer>
                            <font color="white" size="1">¿Quiénes somos?
                        </footer>
                    </center><br></br>
                </div>
            </form>
        </div>
    </body>
</html>

El footer si me lo visualiza pero el problema ahora es que me queda afuera el titulo (Regístrate en esta nueva comunidad) y no dentro del cuadro verde:

O lo mismo cuando cierro el (div) entre estos códigos:

<div class="general"><br></br>
<font color="white" face="Tahoma" size="6">Regístrate
<font color="white" face="Tahoma" size="4">En esta nueva comunidad<br></br></div>

Se amplia el cuadro y no se mantiene en su tamaño original pero si el titulo dentro de el:

No entiendo muy bien esa parte de Darle un tamaño a la etiqueta que contiene al formulario y este se amoldará a ella, seria más fácil si me pasas un ejemplo del código de como darle el tamaño...

Un print de la pantalla

El código es el siguiente:

<!DOCTYPE html>
<html lang="es">
    <head>
        <style type="text/css">
            .general{
                margin:auto;
                float:right;
                width:380px;
                }
            .formulario{
                padding: 10;
                }
            .fondo-verde{
                background-color:green;
                }
            .footer{
                margin-top: 50px;
                }
            a:link{
                text-decoration:none;
            }
        </style>
    <body>
        <div class="general"><br></br>
            <div class="fondo-verde formulario">
                <font color="white" face="Tahoma" size="6">Regístrate
                <font color="white" face="Tahoma" size="4">En esta nueva comunidad<br></br>
            </div>
            <form role="form">
                <div class="form-group fondo-verde formulario">
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Nombre</label><br></br>
                        <input type="email" class="form-control" id="ejemplo_email_1" size="30"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Apellido</label><br></br>
                        <input type="email" class="form-control" id="ejemplo_email_1" size="30" maxlength="30"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">E-mail</label><br></br>
                        <input type="email" class="form-control" id="ejemplo_email_1" size="36" maxlength="30"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Contraseña</label><br></br>
                        <input type="password" class="form-control" id="ejemplo_password_1" size="27"><br></br>
                    <font color="white" size="3">
                        <label for="ejemplo_email_1">Repetir contraseña</label><br></br>
                        <input type="password" class="form-control" id="ejemplo_password_1" size="27"><br></br>
                    <center>
                        <input type="checkbox">
                            <font size="2">Aceptas las condiciones de uso y política de privacidad propuesta en nuestras cookies
                    </center><br></br>
                </div>
                <div class="footer fondo-verde formulario">
                    <center>
                        <footer>
                            <font color="white" size="1">¿Quiénes somos?
                        </footer>
                    </center><br></br>
                </div>
            </form>
        </div>
    </body>
</html>

Todo es problema de organización y estilos.

Si necesitas más ayuda para tu desarrollo no dudes en consultar por este medio o en el correo [email protected]

Ve este código y dame tu opinión si queda mejor de esta forma:

<html>
    <head>
        <style type="text/css">
            .general{
                margin:auto;
                float:right;
                width:380px;
                }
            .formulario{
                padding: 10;
                }
            .fondo-verde{
                background-color:green;
                }
            .footer{
                margin-top: 50px;
                }
            a:link{
                text-decoration:none;
            }
            .control{
                width: 300px;
                height: 35px;
                margin-left: 20px;
                font-size: 16;
                font-family: Tahoma;
            }
        </style>
    <body>
        <div class="general"><br></br>
            <div class="fondo-verde formulario">
                <font color="white" face="Tahoma" size="6">Regístrate
                <font color="white" face="Tahoma" size="4">En esta nueva comunidad<br></br>
            </div>
            <form role="form">
                <div class="form-group fondo-verde formulario">
                    <font color="white" size="3">
                        <input type="email" placeholder="Nombre" class="form-control control" id="ejemplo_email_1" size="30"><br></br>
                    <font color="white" size="3">
                        <input type="email" placeholder="Apellido" class="form-control control" id="ejemplo_email_1" size="30" maxlength="30"><br></br>
                    <font color="white" size="3">
                        <input type="email" placeholder="E-Mail" class="form-control control" id="ejemplo_email_1" size="36" maxlength="30"><br></br>
                    <font color="white" size="3">
                        <input type="password" placeholder="Contraseña" class="form-control control" id="ejemplo_password_1" size="27"><br></br>
                    <font color="white" size="3">
                        <input type="password" placeholder="Repetir contraseña" class="form-control control" id="ejemplo_password_1" size="27"><br></br>
                    <center>
                        <input type="checkbox">
                            <font size="2">Aceptas las condiciones de uso y política de privacidad propuesta en nuestras cookies
                    </center><br></br>
                </div>
                <div class="footer fondo-verde formulario">
                    <center>
                        <footer>
                            <font color="white" size="1">¿Quiénes somos?
                        </footer>
                    </center><br></br>
                </div>
            </form>
        </div>
    </body>
</html>

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

¿Como puedo crear una ventana modal desde un boton en html?

Quiero aplicarle esa función para un formulario de registro que se deslize pero nose como hacerlo, este es el código que tengo (<input type="submit" name="Submit" value="Iniciar sesion" style="color:black; height:34px; width:100px"...
1 respuesta

¿Por que no me funciona el javascript en firefox?

Estoy haciendo una pagina web y he hecho un menu con javascript, pero no consigo que funcione en FIREFOX, en IE, en safari, chrome me funciona. Pero me tiene que funcionar en firefox ya que es uno de los que mas se usan. ¿Veis algun fallo o me falta...
1 respuesta

Como puedo hacer que mi pagina web salga centrada en el explorador

Tengo una Pagina web en la que introduzco todo dentro de un div y lo centro. Yo en mi ordenador lo veo centrado, pero un amigo que tiene una pantalla de 27 pulgadas me dice que lo ve hacia la izquierda. El código que utilizo es el siguiente: <div...
2 respuestas

Fijar un div o tabla para q no se cambie el ancho

Te escribo nuevamente por lo siguiente, estoy haciendo un blog, entonces la parte de los post, es decir de los registros del blog estaran del lado izquierdo, para poner otras cosas del lado derecho, la pregunta es: cuando hago un contenido muy largo...
1 respuesta

Visualización

Hice una página para un una universidad que me pidieron tero tengo problemas con la visualización esta es la dirección http://163.10.0.155/webproyecto2006/folder10/ Tengo problemas con los <div></div> y con las imágenes degrade si a la pantalla le...
1 respuesta

Tengo un hoja de estilos externa pero en la parte de lo vinculos no me funciona

Tengo un hoja de estilos con el siguiente codigo . Acierto { font-family:Arial; font-size: 16px; color:green; background-color:yellow; /* sacado de la paleta http://jscolor.com/ */ text-align:center; } .no_acierto { font-family:Arial; font-size:...
2 respuestas

¿Cómo hago un caja con css?

Estoy haciendo una web de divulgación, el dissenño es sencillo una foto de fondo i un box de margenes redondos al centro. Ahí va mi problema, ¿No se como hacer el box ni como ponerlo centrado ni como puedo poner que el menu se adapte al tamaño del...
1 respuesta

El css y yo no nos llevamos bien

Cola de nuevo kike el caso es que estoy por desisitir me es complicadísimo ubicar todos los divs sin que alguno de ellos haga algo raro. Te comento el div con fondo azul, no me permite escribir en su interior no se porque es curiosisimo! Por otro...
1 respuesta

Sobre el diseño del encabezado

Miquelcala. Me podrías ayudar sobre el código del diseño del encabezado en css3, es decir el logotipo de mi página me gustaría que estuviera a la izquierda y el menú que estuviera debajo del logotipo, el cual en este momento se encuentra a la...
1 respuesta

Tablas Especiales

Quisiera crear en mi Website una tabla como la que hay en la siguiente web: - www.economist.com. La tabla con etiquetas que dicen "Most Commented", "Most Recommended"... El tipo de etiquetas en las que una ya sale pulsada y no redirigen a otras...
2 respuestas