No consigo el height de mi div se adapte

javy7v · #1 (**permalink**) 06/05/2015, 05:37

Buenas gente , a ver si alguno me puede ayudar con esta chorrada porque tengo que estar haciendo algo muy estupido pero no doy con ello...

Vereis tengo la pagina home con los requires paral llamar a las otras partes de la web , lo estaba haciendo asi porque tenía que hacerla en 2 idiomas , esto concretamente :

Código:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="../css/estilo.css">
		<link rel="stylesheet" type="text/css" href="../css/style2.css">
	   <meta charset='utf-8'>
	   <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
	   <meta http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1">
	   <link rel="stylesheet" href="../css/styles.css">
	   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	   <script src="../script/script.js"></script>
	   <link rel="stylesheet" type="text/css" href="../css/default.css" />
		<link rel="stylesheet" type="text/css" href="../css/component.css" />
		<script src="../script/modernizr.custom.js"></script>
	</head>
	<body>
		<div id="contenedor">
			<?php require_once('menu.php'); ?>
			
			<?php require_once('slide.php'); ?>
			
			<?php require_once('textos.php'); ?>
			
			<?php require_once('pie.php'); ?>
		</div>
	</body>
</html>

Y va todo bien al introducir el menu , el pie de pagina y el slide , de hecho al meter este ultimo el contenedor que tiene height auto , se adapta a su tamaño pero con los textos que simplemente son divs con texto dentro no se me adapta la altura y se descoloca.

Este es el archivo de textos :

Código:

<div id="libro">
	<div id="texto1">
		<h3>Isolators</h3>
		<p>An antivibration support is any support product that allows a computer on a supporting element attenuating and isolating both sides to time refer to mechanical vibration . Generally allow to absorb vibration and shock involving mechanical components and the structure on which it is supported .</p>
	</div>
	<div id="texto1">
		<h3>Metal Suspension</h3>
		<p>The metallic slurry is a type of antivibration support contain only metal parts ( without presence of elastomers ) . Generally allow to absorb vibration and shock involving mechanical components and the structure on which it is supported .</p>
	</div>
</div>

Y bueno os pongo también el css del contenedor pero no tiene nada es que no se porque no me lo hace bien...

Código:

#contenedor{
position:relative;
margin:auto;
width:60%;
height:auto;
background-color:white;
}

Asi queda , se me meten los textos en el pie en vez de en el contenedor donde deberían estar... he probado metiendo otro div contenido y metiendo el require de texto ahi pero nada de nada...

http://i.imgur.com/kUAOyaz.png

baldaweb · #2 (**permalink**) 06/05/2015, 08:29

¿#libros como está definido en la hoja de estilos?

javy7v · #3 (**permalink**) 07/05/2015, 01:56

Buenas he conseguido de alguna manera solucionar el caso de los textos pero sigo teniendo el mismo problema en otra parte de la web.

En cuanto cambio el height del div contenedor de 80% o 100% etc a auto , se desmorona todo ya que no detecta los otros divs para adaptarse...

Os enseño el codigo :(

Código:

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="../css/estilo.css">
		<link rel="stylesheet" type="text/css" href="../css/estiloFormulario.css">
		<link rel="stylesheet" type="text/css" href="../css/style2.css">
	   <meta charset='utf-8'>
	   <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
	   <meta http-equiv="X-UA-Compatible" content="IE=edge">
	   <meta name="viewport" content="width=device-width, initial-scale=1">
	   <link rel="stylesheet" href="../css/styles.css">
	   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
	   <script src="../script/script.js"></script>
	   <link rel="stylesheet" type="text/css" href="../css/default.css" />
		<link rel="stylesheet" type="text/css" href="../css/component.css" />
		<script src="../script/modernizr.custom.js"></script>
	</head>
	<body>
		<div id="contenedor">
			<?php require_once('../ES/menu.php'); ?>
		<div id="contenido2">
			<div id="contactform">
				<!– bloque confirmacion de envio oculto –>
				<div id="c_information" class="hide">
				<p></p>
				</div>
				<!– fin bloque confirmacion de envio –>

				<!– inicio formulario –>
				<form id="c_form" name="contact">
				<label>
				<p>Nombre*</p>
				<input name="nombre" id="c_name" type="text" class="c_input" placeholder="Requerido"/>
				</label>
				<br/>
				<label>
				<p>Email*</p>
				<input name="email" id="c_mail" type="text" class="c_input" placeholder="Requerido"/>
				</label>
				<br/>
				<label>
				<p>Telefono*</p>
				<input name="telefono" id="c_telefono" type="text" class="c_input" placeholder="Requerido"/>
				</label>
				<br/>
				<label>
				<p>Equipo*</p>
				<input name="equipo" id="c_equipo" type="text" class="c_input" placeholder="Breve descripción,Requerido"/>
				</label>
				<br/>
				<label>
				<p>Peso*</p>
				<input name="peso" id="c_peso" type="text" class="c_input" placeholder="En Kg, Requerido"/>
				</label>
				<br/>
				<label>
				<p>Numero de Apoyos*</p>
				<input name="apoyos" id="c_apoyos" type="text" class="c_input" placeholder="Requerido"/>
				</label>
				<label>
				<p>Frecuencia:</p>
				<input name="frecuencia" id="c_frecuencia" type="text" class="c_input" placeholder="Indicar en Hz"/>
				</label>
				</br>
				<label>
				<p>Mensaje:</p>
				<textarea name="mensaje" id="c_msg" placeholder="Describa el problema"></textarea>
				</label>
				<!– boton enviar –>
				<div id="c_btns">
				<input name="send" onclick="cargaSendMail()" type="button" value="Enviar" class="btn-b" id="c_enviar"></input>
				</div>
				</form>
				<!– fin formulario –>
			</div>
			<div id="mapa">
				<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11596.613036249017!2d-3.8135!3d43.394726!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe65253b4e1cb8bcd!2sSilentflex%C2%AE!5e0!3m2!1ses!2ses!4v1430901755619" width="600" height="450" frameborder="0" style="border:0"></iframe>
			</div>
			<div id="direc">
				<label>
				&nbsp&nbsp&nbsp&nbsp<br><strong>Tejasa TC S.L.</strong>
				<br>Calle de la Industria,Nº 77 - Parque Industrial Tirso González, Naves 21 y 22-6 
				<br>C.P. 39610
				<br>El Astillero (Cantabria)
				<br>Teléfono: <strong>942 54 42 23</strong> - Fax: <strong>942 54 42 24</strong>
				<br>E-mail: <strong><a href="mailto:[email protected]">[email protected]</a></strong>
				<br>
				</label>
			</div>
		</div>
	</div>
	</body>
	<!– Importamos libreria jQuery y nuestro script para validacion y envio–>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../script/scriptForm2.js"></script>
	<div id="pie">
		<p>Tejasa TC S.L. Calle de la Industria, N77. Parque Industrial Tirso González. Nave 21 y 22-6. C.P. 39610-El Astillero (Cantabria) Tfno: +34 942 544 223 E-mail: [email protected]</p>
	</div>
</html>

Eso es todo lo que tengo en la seccion de contacto y luego si en el div le intento dar altura auto o quitar el height , se desmorona todo... os paso el CSS.

Es mucho codigo igual para ponerlo aqui pero por si acaso alguno ve algo o me sabe decir lo pongo todo.

Este es el CSS para la seccion de contacto :

Código:

body{
font-family: ‘Alegreya Sans SC’, sans-serif;
}
p{
margin: 0;
padding: 0;
border: 0;
font-size:100%;
vertical-align: baseline;
}
label p{
color: #333;
text-decoration: none;
display:block;
margin:5px 0;
font-size:1.25em;
}
label h2{
color: #333;
padding-bottom:10px;
text-align:justify;
text-decoration: none;
display:block;
margin:5px 0;
font-size:1.25em;
}
#cabecera{
position:relative;
}
#titulo{
position:relative;
margin-top:2%;
padding:5px;
float:left;
font-family: 'Open Sans', sans-serif;
border:1px solid;
border-color:#37a0f3;
background-color:#fafafa;
}
#contactform{
position:relative;
float:left;
margin-left:1%;
margin-top:2%;
width: 500px;
background: #fafafa;
overflow: hidden;
border:1px solid;
border-bottom:1px solid;
border-color: #39b1cc;
  border-color: -moz-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
  border-color: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #51bbd2), color-stop(100%, #2d97af));
  border-color: -webkit-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
  border-color: -o-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
  border-color: -ms-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
  border-color: linear-gradient(to bottom, #51bbd2 0%, #2d97af 100%);
}
#mapa{
position:relative;
overflow:hidden;
float:left;
left:1%;
top:3%;
}
@media screen and (max-width: 1900px) {
#direc{
display:none;
}
#mapa{
display:none;
}
}
#direc{
position:relative;
float:right;
font-family: 'Open Sans', sans-serif;
color:black;
font-size:15px;
margin-top:-27%;
margin-right:5%;
padding-top: 10px;
padding-right: 24px;
padding-bottom: 10px;
padding-left: 22px;
}

#direc a{
color:#0378ad;
text-decoration:none;
}

.c_input{
padding: 3px;
width: 250px;
outline:1px solid white;
}

#c_form{
margin: 25px;
width: 90%;
}

#c_form textarea {
outline:1px solid white;
}

.c_input, #c_form textarea{
margin-bottom: 10px;
border: 1px solid #ddd;
padding: 4px;
}

input:focus, textarea:focus{
outline: none;
}

::-webkit-input-placeholder { font-style:italic; }
::-moz-placeholder { font-style:italic; } /* firefox 19+ */
:-ms-input-placeholder { font-style:italic; } /* ie */
input:-moz-placeholder { font-style:italic; }

#c_form textarea{
min-height: 150px;
resize: none;
width: 100%;
}

#c_enviar{
padding: 4px;
font-size: 13px;
font-family: helvetica, arial;
}

#bottom_container{
overflow: hidden;
}

#c_information{
width: 100%;
border: solid 1px #ccc;
background: #25A25A;
padding: 4px 0 4px 0;
text-align: center;
font-size: 14px;
color: #fff;
}

.c_error{
color: #D64242;
font-size: 10px;
margin-left: 5px;
}
.hide{
display:none;
}

/*————————Boton enviar————————*/

.btn-b {
width:100%;
padding: 5px;
color: #111111;
text-decoration: none;
border-radius: 3px;
border-color: #2A73A6 #165899 #07428F;
border-style: solid;
border-width: 1px;
color: #ffffff;
text-shadow: 0 -1px 1px #3275BC;
background: #52a8e8;
padding: 5px;
background: #39b1cc;
  background: -moz-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #51bbd2), color-stop(100%, #2d97af));
  background: -webkit-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
  background: -o-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
  background: -ms-linear-gradient(top, #51bbd2 0%, #2d97af 100%);
  background: linear-gradient(to bottom, #51bbd2 0%, #2d97af 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#52a8e8′, endColorstr=’#377ad0′,GradientType=0 );
cursor: pointer;
}

.btn-b:hover {
border-radius: 3px;
border-color: #2A73A6 #165899 #07428F;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 0 #62B1E9 inset;
text-shadow: 0 -1px 1px #1D62AB;
background: #3e9ee5;
background: -moz-linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e9ee5), color-stop(100%,#206bcb));
background: -webkit-linear-gradient(top, #3e9ee5 0%,#206bcb 100%);
background: -o-linear-gradient(top, #3e9ee5 0%,#206bcb 100%);
background: -ms-linear-gradient(top, #3e9ee5 0%,#206bcb 100%);
background: linear-gradient(top, #3e9ee5 0%,#206bcb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#3e9ee5′, endColorstr=’#206bcb’,GradientType=0 );

}

.btn-b:hover {
text-decoration: none;
}

.btn-b:active {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #3282D3;
border-color: #154C8C #154C8C #0E408E;
border-style: solid;
border-width: 1px;
box-shadow: 0 0 6px 3px #1657B5 inset, 0 1px 0 0 #FFFFFF;
text-shadow: 0 -1px 1px #2361A4;
}

Gracias a ver si alguien me sabe decir algo debe ser basica la cagada supongo...

javy7v · #4 (**permalink**) 07/05/2015, 02:11

Se me olvido poner las capturas de como se ve sin un height determinado aunque creo que ya se entiende a que me refiero lo pongo:

Ordenado , con height a 80% : http://i.imgur.com/VoNgO4Q.png

Con heigh auto , desordenado: http://i.imgur.com/12rqQhG.png

fede5426 · #5 (**permalink**) 07/05/2015, 06:09

Primero que nada, tu etiqueta <body> no tiene cierre.

Nos pasaste el css de tu formulario, no el de la pagina completa que seria el de interés para acomodar los elementos

Pero te diría que pruebes de ponerle overflow:hidden a tu contenedor si es que tenes elementos flotados dentro de el.

javy7v · #6 (**permalink**) 11/05/2015, 03:07

Cita:

Iniciado por fede5426

Primero que nada, tu etiqueta <body> no tiene cierre.

Nos pasaste el css de tu formulario, no el de la pagina completa que seria el de interés para acomodar los elementos

Pero te diría que pruebes de ponerle overflow:hidden a tu contenedor si es que tenes elementos flotados dentro de el.

Te debo la vida!!

Lo del body simplemente debio de ser en el momento que os copie el codigo pero he puesto el overflos:hidden; y en efecto era eso.

Lo tenia en visible , nose porque la verdad y no me fije en ningun momento!

Muchas gracias de verdad!

fede5426 · #7 (**permalink**) 11/05/2015, 06:30

De nada

No te olvides de marcar el tema como solucionado.