Formulario Complejo

[S-Virus]

Hola amigos que tal estan.

Les explico un problemita que me ha surgido a ver si me pueden ayudar.

Se trata de un formulario que diseñé previamente en photoshop y ahora estoy maquetando con XHTML y CSS, os pongo una imagen del esquema de diseño del cada elemento del formulario.



Bien, como comentaba la idea es tener varios bloques de este tipo y me está resultando algo complicado maquetar ese diseño, en principio, para cada elemento lo estoy haciendo así.

Código:

<label for="bloque1">Bloque Informativo 1</label><div id="img_bloque1"><a href="#">Insertar Imagen</a></div><textarea id="descripcion_bloque1" name="descripcion_bloque1" ></textarea><label for="activar_bloque1">Activado</label><input id="activar_bloque1" name="activar_bloque1" type="checkbox"  />

Pero claro, no consigo sacar esa estructura.

Qué me dicen?

[caricatos]

Hola:

Yo veo una capa con tamaño fijo (aunque puede ser proporcionado), y una imagen flotada a la izquierda, y el resto a la derecha... se parece a esta galería: Ajax: Galería de imágenes paginada... échale un vistazo al código fuente...

Saludos

[S-Virus]

Gracias caricatos, creo que lo voy consiguiendo, ahora tengo un pequeño problemilla a solucionar, me explico.

He conseguido la estructura que hay en la imagen sin problemas, como decía, son 4 bloques exactamente iguales a ese, el primero ya lo tengo, coloco el segundo y todo correcto salvo una cosita, el titulo Bloque Informativo 2 (en este caso) la etiqueta Activado y el Checkbox se me quedan dentro del primer bloque, justamente debado de la etiqueta activado y el checkbox del primer bloque, no me salta de línea como es mi intención.

Igual esto ya es un problema más de CSS que me dicen?

Este es el XHTML

Código:

            <label for="titulo">Título</label><br  /><br /><input id="titulo" name="titulo" type="text" /><br  /><br />
            <label for="descripcion">Descripción</label><br /><br /><textarea id="descripcion" name="descripcion"></textarea><br /><br />
            <label for="bloque1">Bloque Informativo 1</label><br /><br />
                <div id="img_bloque1"><a href="#">Insertar Imagen</a><img src="#"  /></div><textarea id="descripcion_bloque1" name="descripcion_bloque1"></textarea><label for="activar_bloque1">Activado <input id="activado1" name="activado1" type="checkbox" /></label>
            <label for="bloque2">Bloque Informativo 2</label><br /><br />
                <div id="img_bloque2"><a href="#">Insertar Imagen</a><img src="#"  /></div><textarea id="descripcion_bloque2" name="descripcion_bloque2"></textarea><label for="activar_bloque2">Activado <input id="activado2" name="activado2" type="checkbox" /></label>
        </fieldset>

y este el CSS

Código:

/* ESTILOS PARA EL BLOQUE INFORMATIVO 1 */
div#bloque1 {
    width:900px;
    height:105px;
}
textarea#descripcion_bloque1 {
    margin-right:5px;
    float:left;
}

div#img_bloque1 {
    border:1px #CCC solid;
    width:115px;
    height:105px;
    text-align:center;
    position:relative;
    padding-top:52;
    float:left;
    margin-right:5px;
    
}

div#img_bloque1 a {
    position:absolute;
    top:45px;
    right:12px;
    
}
/* ESTILOS PARA EL BLOQUE INFORMATIVO 1 */


/* ESTILOS PARA EL BLOQUE INFORMATIVO 2 */
textarea#descripcion_bloque2 {
    margin-right:5px;
    float:left;
}

div#img_bloque2 {
    border:1px #CCC solid;
    width:115px;
    height:105px;
    text-align:center;
    position:relative;
    padding-top:52;
    float:left;
    margin-right:5px;
    
}

div#img_bloque2 a {
    position:absolute;
    top:45px;
    right:12px;
    
}
/* ESTILOS PARA EL BLOQUE INFORMATIVO 2 */

el div#bloque1 ya no existe :)

[S-Virus]

:S imposible