Formulario de gran tamaño y altura de Div

vertigo55 · #1 (**permalink**) 27/01/2013, 18:41

Hola como estan, acudo a ustedes para ver si es posible que me ayuden. Estoy haciendo una pagina web y todo iba de maravilla hasta que me topé con un formulario excesivamente largo pero necesario para la compañía que la estoy desarrollando y esto me ha causado problemas con la altura del contenedor. A continuación voy a publicar la imagen del esquema para que tengan una idea clara de lo que estoy haciendo y luego publicare el código.

[url=http://www.sicfl.com] [img]http://www.sicfl.com/estructura.gif[/img] [/url]

Este es el url de la pagina: http://www.sicfl.com/testform.html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<link rel="stylesheet" type="text/css" href="layersW3C.css"> 
<title>Superior Insurance Consultant</title>
<style type="text/css">


#Contenedor1 {
	position:relative;
	width:900px;
	height:286px;
	z-index:1;
	margin-right: auto;
	margin-left: auto;
}
#Logo {
	position:absolute;
	left:0px;
	top:0px;
	width:900px;
	height:62px;
	z-index:2;
	background-image: url(images/backlogo.png);
	background-repeat: repeat-x;
}
#Bargris {
	position:absolute;
	left:0px;
	top:62px;
	width:900px;
	height:12px;
	z-index:2;
	background-color: #4a4b50;
}
#Backfamily {
	position:absolute;
	left:0px;
	top:74px;
	width:900px;
	height:212px;
	z-index:2;
	background-image: url(images/backfamily.jpg);
}
#texfamily {
	position:absolute;
	left:27px;
	top:8px;
	width:445px;
	height:106px;
	z-index:2;
}
#Familyimage {
	position:absolute;
	left:458px;
	top:-60px;
	width:418px;
	height:272px;
	z-index:2;
}
#Contenedor2 {
	position:relative;
	width:900px;
	height:37px;
	z-index:2;
	margin-right: auto;
	margin-left: auto;
}
#Contenedor3 {
	position:relative;
	width:900px;
	z-index:3;
	margin-right: auto;
	margin-left: auto;
	background-color: #f1f0f0;
	height: 2100px;
}
.Estilo1 {color: #FF0000}
.fontmini {	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000;
}
.texnorm {	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #000;
	font-weight: normal;
	text-align: justify;
}
.titublank {	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 14px;
	color: #595958;
}
.titubold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #333;
	font-weight: bold;
}
#form {
	position:absolute;
	width:531px;
	height:auto;
	z-index:3;
}
#insuranceform {
	position:relative;
	left:30px;
	top:15px;
	width:573px;
	height:2411px;
	z-index:2;
}
#Barlat {
	position:absolute;
	left:630px;
	top:0px;
	width:270px;
	height:2103px;
	z-index:4;
	background-color: #d9d9d9;
}
#apDiv1 {
	position:absolute;
	left:308px;
	top:372px;
	width:497px;
	height:329px;
	z-index:4;
}
#Bigbot {
	position:absolute;
	left:6px;
	top:6px;
	width:622px;
	height:118px;
	z-index:4;
}
#Bardivpunt {
	position:absolute;
	left:6px;
	top:126px;
	width:622px;
	height:9px;
	z-index:4;
}
#Titucontactus {
	position:absolute;
	left:6px;
	top:137px;
	width:139px;
	height:40px;
	z-index:4;
}
#Bardivlat {
	position:absolute;
	left:168px;
	top:139px;
	width:8px;
	height:109px;
	z-index:4;
	background-image: url(images/bardivverpuntos.png);
	background-repeat: repeat-y;
}
#Texpincont {
	position:absolute;
	left:190px;
	top:137px;
	width:431px;
	height:112px;
	z-index:4;
	line-height: 21px;
}
#Bardivpunt2 {
	position:absolute;
	left:6px;
	top:258px;
	width:622px;
	height:9px;
	z-index:4;
}
#Pie {
	position:relative;
	width:900px;
	height:27px;
	z-index:4;
	margin-right: auto;
	margin-left: auto;
	background-color: #4C4D52;
}
#Linkpie {
	position:absolute;
	left:4px;
	top:6px;
	width:396px;
	height:17px;
	z-index:5;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
	font-weight: bold;
}
#Copyright {
	position:absolute;
	left:681px;
	top:6px;
	width:217px;
	height:17px;
	z-index:5;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFF;
}
#Getquotbot {
	position:absolute;
	left:11px;
	top:12px;
	width:248px;
	height:31px;
	z-index:5;
}
#Contactlat {
	position:absolute;
	left:0px;
	top:55px;
	width:270px;
	height:111px;
	z-index:5;
}
#Iconocontact {
	position:absolute;
	left:3px;
	top:6px;
	width:54px;
	height:54px;
	z-index:6;
}
#Textocontact {
	position:absolute;
	left:63px;
	top:6px;
	width:199px;
	height:103px;
	z-index:6;
}
#Umbrellat {
	position:absolute;
	left:0px;
	top:180px;
	width:270px;
	height:133px;
	z-index:5;
}
#Iconoumbrella {	position:absolute;
	left:3px;
	top:6px;
	width:54px;
	height:54px;
	z-index:6;
}
#Textoumbrella {
	position:absolute;
	left:63px;
	top:6px;
	width:199px;
	height:122px;
	z-index:6;
}
#quainsulat {
	position:absolute;
	left:0px;
	top:325px;
	width:270px;
	height:212px;
	z-index:5;
}
#icoquainsu {position:absolute;
	left:3px;
	top:6px;
	width:54px;
	height:54px;
	z-index:6;
}
#Textoquainsu {
	position:absolute;
	left:63px;
	top:6px;
	width:199px;
	height:198px;
	z-index:6;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#Formauto {
	position:absolute;
	left:38px;
	top:274px;
	width:557px;
	height:auto;
	z-index:5;
	background-color: #99CCFF;
	margin : 0 auto;
	/* [disabled]overflow: hidden; */
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<link href="footlink.css" rel="stylesheet" type="text/css" />
</head>

Aquí dejo un link con el código en un doc txt: http://www.sicfl.com/code.txt

[url=http://www.sicfl.com] [img]http://www.sicfl.com/problem.gif[/img] [/url]

El problema que necesito resolver es la altura extra que genera el contenedor 3.

De antemano les agradezco muchísimo si pueden ayudarme, llevo un mes haciendo y desaciendo, inclusive probe distintas estructuras y procedimientos, dentro de mis pocos conocimientos, pero no tuve éxito.

C2am · #2 (**permalink**) 28/01/2013, 00:17

El problema es la position:absolute que usas para el div-form y para barlat.

El div que contiene el form y barlat podrían estar flotadas (float) para que queden una al lado de la otra, o aplicar display:inline-block, etc.
Con esto digo que replantees tu maquetado.

Saludos

vertigo55 · #3 (**permalink**) 28/01/2013, 09:56

Primero que nada un millón de gracias por contestarme. Soy novato en esto de las capas, voy a seguir tus indicaciones. Por lo general siempre uso div pa con posición relative como contenedor y adentro coloco los div pa con posición absoluta, obviamene por mi falta de experiencia. Trabajo siempre con Dreamweaver.

C2am · #4 (**permalink**) 28/01/2013, 15:43

Es evidente que trabajas con dreamweaver por lo de "div pa" que en realidad sólo se aplica a los div posicionados en forma absoluta (p: position - a: aboslute).

Te dejo un link a un manual muy bueno que seguro te aclarará mucho el panorama: www.librosweb.es

En cuanto a Dream trata de usarlo en la vista código, al menos hasta que comprendas que es lo que hace y luego sí pasarte a la vista diseño, aunque en realidad una vez que comiences a codificar por tu cuenta te darás que es mucho mejor que esta última, ya que te libera de lo preestablecido por Adobe.

Saludos

vertigo55 · #5 (**permalink**) 28/01/2013, 17:17

No sabes cuanto te lo agradezco. Para mi tiene muchísimo valor poder entender bien como va todo esto. Ademas llevaba 9 años diseñando con tablas y esta metodología de las capas es lo máximo.

C2am · #6 (**permalink**) 28/01/2013, 18:09

Si trabajas (maquetas) aún con tablas puedes pegarte una vuelta por el foro de css donde encontrarás unos post muy bueno sobre como migrar de esa técnica obsoleta (maquetar con tablas) a maquetar con div+css.
http://www.forosdelweb.com/f53/
http://www.forosdelweb.com/f53/aport...ml-css-648073/
O directamente a la página del genio que creó dicho post:
http://www.forosdelweb.com/f53/aport...ml-css-648073/

recuerda, las tablas son para datos tabulados, no para maquetar una web.

Saludos

vertigo55 · #7 (**permalink**) 28/01/2013, 21:34

Excelente, del primer link que me distes ya estoy viendo para empezar como puedo hacer el formulario de una manera mas eficiente . Acto seguido voy a chequear estos últimos links que me recomendastes. Me toca aplicarme para ponerme al dia, una vez solucione esto me toca hacer 9 paginas con formularios como la primerita que te enseñe, pero lo mas importante es que todo luzca igual en todos los navegadores y por su puesto dormir tranquilo sabiendo que estoy haciendo un buen trabajo.

vertigo55 · #8 (**permalink**) 29/01/2013, 16:16

Disculpa que te moleste nuevamente. Queria pregutarte, en tu opinión y solo para tener una idea como harias la estructura de esta pagina, no se si pudistes ver en este link http://www.sicfl.com/estructura.gif como la estructure. Anteriormente había hecho un contenedor y había metido todo adentro. Ahora si te fijas hice varios contenedores por separado. Pero quisiera saber en tu opinión que tipo de capas utilizarías para la estructura, obviamente las capa que contiene el form y barlat serian flotantes. Estoy investigando ahora como meter capas dentro de las capas flotantes.

C2am · #9 (**permalink**) 29/01/2013, 18:02

Una forma, considerando columnas equilibradas en la parte central de la web (altura contendor 3 = altura barlat) podría ser:
http://jsfiddle.net/c2am/B38GR/embedded/result/

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Maqueta html5</title>
 
</head>
 
<body>
    <div id="contenedor">
        <header>
            <h1>titulo y logo pagina</h1>
        </header>
        <nav id="menu">
            <ul>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
                <li><a href="#">Enlace</a></li>
            </ul>
            
        </nav>
        
        <div id="central">
            <section id="contenido">
                <article>
                    primer articulo<br/>
                    uso display:table-cell para lograr que la altura de esta seccion sea igual al lateral
                </article>
                <article>primer articulo<br/></article>
                <article>2 articulo<br/></article>
                <article>3 articulo<br/></article>
                <article>4 articulo<br/></article>
                <article>5 articulo<br/></article>
                <article>6 articulo<br/></article>
                <article>7 articulo<br/></article>
                <article>8 articulo<br/></article>
                <article>9 articulo<br/></article>
                <article>10 articulo<br/></article>
                <article>11 articulo<br/></article>
                <article>... articulo<br/></article>
                <article>... articulo<br/></article>
                <article>... articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <article> articulo<br/></article>
                <h2>display:table-cell no es soportado por IE7 y anteriores</h2>
 
        
    
            </section>
            <aside id="lateral">
                lateral<br/>
                uso display:table-cell para lograr que la altura de este lateral sea igual a la seccion contenido
            </aside>
        </div>
        
        <footer>
            pie de página
            <br/>
            Maquetado con etiquetas HTML5
            
        </footer>
        
    </div>
</body>
</html>

siendo el css básico:

Código CSS:

Ver original* {margin:0; padding:0;  outline: 0;}
a {outline:none; text-decoration:none;}
 
a img{border:0;}
ul {list-style:none}
 
#contenedor{
    margin:0 auto;
    width:960px;
    }
header, nav, aside{
    display:block;
    }
header{
    background:#a2a2f7;
    padding:10px;
    }
nav{
    background:#A2E4F7;
    padding:10px;
    }
    
    
#central{
    display:table;
    background:#FF9;
    padding:10px;
    width:100%;
    }   
    
#contenido{
    background:#FDEC76;
    display:table-cell;
    padding:10px;
    width:79%;
    }
#lateral{
    background:#B1B1B4;
    display:table-cell;
    padding:10px;
    width:19%;
    }
footer{
    background:#666;
    padding:10px;
    }
    
    
#menu ul{
    list-style-type: none;
    width:100%;
    }
#menu ul li{
    display:inline-block;
    width:150px;
    }

Considera que lo de las columnas equilibradas lo puedes lograr de otras formas, solo es ponerse a investigar un poco y optar por la que consideres mejor.
La que utilizo tiene la desventaja que no es compatible con IE7 - IE6, aunque estos navegadores ya no tienen el uso masivo de tiempo atrás.

Saludos

vertigo55 · #10 (**permalink**) 29/01/2013, 18:27

Muchisimas gracias, por su puesto que voy a investigar un poco mas, pero esto me da una buena idea de como diseñar la web de una manera mas correcta y amigable para los navegadores. Realmente me preocupo del ie 8 en adelante y los otros navegadores actuales. Pero por lo menos esto que publicastes me da una buena pista de cual es el camino que debo seguir.