Foros del Web - Ver Mensaje Individual

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...