Estoy armando una web y tengo un problema de css
No encuentro la forma de que el div, se acomode al alto. Me estube quemando la cabeza todo el dia...
Código HTML:
<!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" />
<title>Dglabs</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
<style type="text/css">
#container2 {
width: 1000px;
overflow: hidden;
position: relative;
height:700px;
}
#all_pages {
position: absolute;
left: 0;
top: 0;
width: 4000px;
}
.page {
width: 963px;
height: 500px;;
float: left;
text-align: left;
margin-left: 20px;
}
.page2 {
width: 963px;
height: 600px;
float: left;
text-align: left;
margin-left:37px;
}
.page3 {
width: 963px;
height: 600px;
float: left;
text-align: left;
margin-left: 37px;
}
.page4 {
width: 963px;
height: 600px;
float: left;
text-align: left;
margin-left: 37px;
}
.contenedortxt {
margin-left: auto;
margin-right:auto;
}
.opcioneservicios li {
list-style:none;
cursor:pointer;
display:inline;
padding-right:50px;
font-family:Verdana, Geneva, sans-serif;
color: #222;
text-shadow: 1px 1px 0 #FFF;
}
.opcioneservicios li:hover {
color: #0069d5;
text-shadow: 1px 1px 0 #FFF;
}
.colorpueba {
background-color:#F00;
width:500px;
height:500px;
}
</style>
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
/* ----------------------------------------------------------------------------
* Parallax
------------------------------------------------------------------------------ */
$(".link").click(function(){
var page = $(this).attr("id");
$('#all_pages').animate({left: (page-1)*(-1000) });
$("#menu ul li").removeClass('active');
$(this).addClass('active');
});
/* ----------------------------------------------------------------------------
* Parallax
------------------------------------------------------------------------------ */
});
</script>
<script type="text/javascript">
//<![CDATA[
*
/* ---------------------------- */
/* Cambiar propiedad* * Multiples * * * */
/* ---------------------------- */
*
function m_oCapas() {
*var i,a,v,elemento,cond=m_oCapas.arguments;
*for (i=0; i<(cond.length-2); i+=3)
*with (document) if (getElementById && ((elemento=getElementById(cond[i]))!=null)) { v=cond[i+2];
* *if (elemento.style) { elemento=elemento.style; v=(v=='normal')?'#222':(v=='azul')?'#0069d5':v; }
* *elemento.color=v; }
}
*
//]]>
</script>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="container">
<!------------ Servicios -------------->
<div id="servicios1" class="divisores3"> </div>
<div id="menu" class="opcioneservicios">
<ul id="menuserivicos">
<li class="link active" id="1" onclick="m_oCapas('1','','azul','2','','normal','3','','normal','4','','normal')">Diseño web</li>
<li class="link" id="2" onclick="m_oCapas('1','','normal','2','','azul','3','','normal','4','','normal')">Diseño grafico</li>
<li class="link" id="3" onclick="m_oCapas('1','','normal','2','','normal','3','','azul','4','','normal')">Posicionamiento web</li>
<li class="link" id="4" onclick="m_oCapas('1','','normal','2','','normal','3','','normal','4','','azul')">Administradcion</li>
</ul>
</div>
<div class="sombra4"> </div>
<div id="container2">
<div id="all_pages">
<!-- inicio1 -->
<div class="idea">
<div class="page">
<div class="contenedortxt"> <img style="padding-right:50px;" src="images/dw.png" width="349" height="264" align="left" />
<div class="opcionesv">
<ul id="opcionesul">
<li><a class="opcioneswt" href="#">1.Diseño y Programación Web a medida</a><br />
<br />
</li>
<span class="infodiseño">Si lo que necesitas es una web a medida estaremos encantados de asesorarte y presentarte un presupuesto sin compromiso en menos de 48 horas. Hemos desarrollado webs de gestión de cursos online, inscripción a eventos deportivos, intranets, etc.</span><br />
<br />
<li><a class="opcioneswt" href="#">2.Webs Corporativas</a><br />
<br />
</li>
<span class="infodiseño"> Si lo que necesitas es tener tu propio espacio en Internet para que tus clientes puedan conocer tus trabajos, ubicación, instalaciones, datos de contacto, etc. sin necesidad de hacer una grán inversión, este tipo de web es la solución ideal. Te ofrecemos tu propia web con dominio y diseño exclusivo.</span><br />
<br />
<li><a class="opcioneswt" href="#">3.Tiendas Online<br />
<br />
</a></li>
<span class="infodiseño"> Proyecta tu negocio mas allá de las puertas de tu local abriendo una tienda online las 24 horas al día. Con una inversión mínima podrás abrir tu tienda en Internet donde publicar y vender de forma cómoda todos tus productos. Si estás interesado contacta con nosotros y te informaremos de las distintas soluciones de comercio electrónico sin compromiso.</span><br />
<br />
<li><a class="opcioneswt" href="#">4.Catálogos Virtuales</a><br />
<br />
</li>
<span class="infodiseño"> Si quieres mostrar tu catálogo de productos a clientes o visitantes, te ofrecemos la posibilidad de crear un catálogo virtual donde podrás crear fácilmente toda tu oferta comercial. Catálogos con perfiles de acceso donde podrás exponer tus productos según el perfil de tus clientes (potenciales, afianzados o simples visitantes). Tu oferta accesible para todo el mundo!</span><br />
<br />
<li><a class="opcioneswt" href="#">5.Gestores de contenido (CMS)</a><br />
<br />
</li>
<span class="infodiseño">Trabajamos con los principales gestores de contenido (Wordpress, Joomla, Drupal, etc.) creando y maquetando diseños exclusivos o programando módulos personalizados. También ofrecemos alojamiento web por 120 € al año para tu CMS.</span><br />
<br />
<li><a class="opcioneswt" href="#">6.Blogs y portafolios</a><br />
<br />
</li>
<span class="infodiseño">Creamos la imagen de tu blog adaptando cualquier diseño a tu gestor de contenidos o blog. Si necesitas presentar tus trabajos online creamos tu portafolios.</span>
</ul>
</div>
</div>
</div>
<!-- fin1-->
<!-- inicio2 -->
<div class="page2">
<div class="contenedortxt">
<div class="prueba"><img style="padding-right:50px; " src="images/dg.png" width="321" height="222" align="left" /></div>
<div class="opcionesv">
<ul id="opcionesul">
<li><a class="opcioneswtverde" href="#">1.Diseño de páginas web</a><br />
<br />
</li>
<span class="infodiseño">Si quieres destacar entre el resto y distinguirte cualitativamente de tu competencia, diseñamos de forma exclusiva la imagen de tu web. También podemos maquetarla por ti, garantizamos la validación XHTML y CSS de todo nuestro código.</span><br />
<br />
<li><a class="opcioneswtverde" href="#">2.Diseño de logotipos</a><br />
<br />
</li>
<span class="infodiseño"> Nuestro logotipo representa la imagen de nuestra empresa en la mínima expresión, ha de captar el concepto de nuestro proyecto y distinguirse entre los demás. Diseñamos tu logotipo, déjanos sorprenderte!</span><br />
<br />
<li><a class="opcioneswtverde" href="#">3.Diseño de tarjetas<br />
<br />
</a></li>
<span class="infodiseño"> Si quieres que tus tarjetas se diferencien de entre las demás y no caigan en el olvido te ofrecemos soluciones de diseño e impresión de tarjetas de visita</span><br />
<br />
<li><a class="opcioneswtverde" href="#">4.Diseño de material corporativo</a><br />
<br />
</li>
<span class="infodiseño"> Creamos la imagen de tu empresa, desde el diseño de tu portal hasta el material impreso. Solicitanos presupuesto sin compromiso.</span><br />
<br />
<li><a class="opcioneswtverde" href="#">Diseño de folletos</a><br />
<br />
</li>
<span class="infodiseño">Realizamos trabajos de diseño de material para ferias, folletos (trípticos, dípticos, etc.).</span><br />
<br />
</ul>
</div>
</div>
</div>
<!-- fin2 -->
</div>
<!-- #all_pages -->
</div>
<!-- #container -->
</div>
<!------------ Servicios Fin -------------->
<div class="colorpueba"> </div>
</div>
</body>
</html>