Foros del Web » Creando para Internet » HTML »

Descuadre al incluir doctype <!HTML html>

Estas en el tema de Descuadre al incluir doctype <!HTML html> en el foro de HTML en Foros del Web. Hola a todos, es la primera web que diseño en HTML5 y lo hice copiando el código que ví en un tutorial sobre Responsive Design, ...
  #1 (permalink)  
Antiguo 03/07/2012, 01:18
 
Fecha de Ingreso: junio-2007
Ubicación: Cádiz
Mensajes: 369
Antigüedad: 16 años, 10 meses
Puntos: 7
Descuadre al incluir doctype <!HTML html>

Hola a todos, es la primera web que diseño en HTML5 y lo hice copiando el código que ví en un tutorial sobre Responsive Design, donde sin darme cuenta se obviaba la definición del tipo de documento... tras haber realizado prácticamente entera la web... al pasar a chequear los errores, me di cuenta que no lo tenía incluido, puse el Doctype y corregí los errores, cuando al volver a cargar la web vi como se descuadraban algunas secciones que con cualquier otro tipo de documento se ve correctamente... No se si podríais echarme una mano con esto...

Código HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Grado en Relaciones Laborales y Recursos Humanos - Introducción</title>
	<link rel="stylesheet" type="text/css" href="../css/estilosGeneral.css" />
	<link href='http://fonts.googleapis.com/css?family=Actor|Open+Sans|Quattrocento' rel='stylesheet' type='text/css' />
</head>
<body>
	<section id="contenedor">
		<!-- Cabecera -->
		<header>
			<div style="position:relative;float:left;width:124px;">
			<a href="../index.html"><img src="../img/logoFacultadCienciasTrabajo.png" height="116" width="124" alt="Logo Facultad de Ciencias del Trabajo" class="logoFCT" /></a>
			</div>
			<div style="position:relative;float:left;width:700px; padding:40px 20px 20px 40px;">FACULTAD DE CIENCIAS DEL TRABAJO<br>
			<span style="font-size:18px;">UNIVERSIDAD DE HUELVA</span></div>
		</header>
		<!-- Navegacion Principal -->
		<nav>
			<ul>
				<li class="itemMenuActivo">Grado en RRLL y RRHH</li>
				<li><a href="../curso-adaptacion/index.html">Curso de Adaptación</a></li>
				<li><a href="../experto-oil/index.html">Experto Universitario OIL</a></li>
				<li><a href="../experto-ss/index.html">Experto Universitario SS</a></li>
			</ul>
		</nav>
		<section id="contenido">

			<!-- Camino de hormigas -->
			<section id="breadCumb">
				<h3>Grado en Relaciones Laborales y Recursos Humanos</h3><div class="unionBreadCumb">>></div> <h3>Introducción</h3>
			</section>

			<!-- SubMenu -->
			<section id="subMenu">
				<h2>Menú</h2>
				<ul>
					<li class="enlaceActivo">Introducción</li>
					<li class="itemSubMenu"><a href="requisitos.html">Requisitos</a></li>
					<li class="itemSubMenu"><a href="plan-estudios.html">Plan de Estudios</a></li>
				</ul>
			</section>

			<!-- Descripcion del contenido -->
			<section id="descripcion">
				<h1>Grado en Relaciones Laborales y Recursos Humanos</h1>
				<article>
					<p>El título de <strong>Grado en Relaciones Laborales y Recursos Humanos</strong> se incorpora a la oferta formativa de la <a href="" rel="nofollow" target="_blank">Universidad de Huelva</a> (UHU), en el curso académico 2009/2010, por la demanda creciente de profesionales en este sector en nuestra sociedad, además de por el alto interés científico que las Ciencias del Trabajo y Recursos Humanos despiertan en ámbito académico.</p>

					<p>El título de Grado en Ciencias del Trabajo y Recursos Humanos es el resultado del trabajo realizado por diferentes universidades participantes en el proyecto dirigido por el Ministerio de Educación y Ciencia, para la elaboración de un <strong>título único de Grado</strong> resultante de la <strong>integración de la Diplomatura en Relaciones Laborales y la Licenciatura en Ciencias del Trabajo</strong>. Este esfuerzo ha dado como fruto el Libro Blanco del título de Grado en Ciencias del Trabajo y Recursos Humanos que ha publicado la Agencia Nacional de Evaluación de la Calidad y Acreditación (ANECA) y que ha servido como documento de base para la elaboración del plan de estudios de dicho grado.</p>

					<p>Desde la persperctiva profesional, junto a la salidad tradicional de estos estudios, el ejercicio de la profesión de graduado social, como ejerciente libre o en el seno de una empresa, se abren en la actualidad otras orientaciones profesionales en las que ejercer las competencias, destrezas y habilidades que unos estudios de estas características proporcionan:</p>

					<p>En el ámbito de la empresa, el área de recursos humanos ha adquirido una importancia estratégica, que se ha traducido en una ampliación de sus efectivos, así como de una mayor demanda para las empresas especializadas en la prestación de servicios relacionados con el trabajo. La complejidad del sistema normativo regulador de las relaciones laborales y del mercado de trabajo conlleva para su gestión y aplicación sean necesarios especialistas, dentro de la empresa o como asesores externos, tanto para la gestión de las relaciones individuales de trabajo como para el desarrollo de relaciones colectivas entre la empresa y la representación de sus trabajadores. </p>

					<p>En el ámbito del mercado de trabajo, la aplicación de nuevas actividades socio-laborales vinculados al desarrollo local, y la aparición de nuevas actividades y servicios, ha generado la demanda de profesionales para atender estos servicios de colocación públicos y privados, en empresas de trabajo temporal, en gabinetes de selección, en empresas de outplacement, etc. </p>

					<p>En el campo de la prevención de riesgos laborales, las exigencias legales y el desarrollo de una conciencia de seguridad en el trabajo han generado una demanda de profesionales formados, para intergar los servicios de prevención de las empresas, empresas consultoras especializadas, órganos de la administración con competencias en este campo, etc.</p>

					<p>Desde la Facultad de Ciencias del Trabajo de la Universidad de Huelva además, siguiendo nuestra trayectoria, ofrecemos poder realizar el Grado de forma virtual facilitando así el acceso a alumnos que ya trabajan y tiene mayor dificultad para llevar a cabo sus estudios.</p>
				</article>
			</section> 
  #2 (permalink)  
Antiguo 03/07/2012, 01:19
 
Fecha de Ingreso: junio-2007
Ubicación: Cádiz
Mensajes: 369
Antigüedad: 16 años, 10 meses
Puntos: 7
Respuesta: Descuadre al incluir doctype <!HTML html>

Código HTML:
 <!-- Formulario de contacto -->
			<section id="frmInformacion">
				<p style="padding-top:5px;padding-bottom:5px;text-align:center;color:#419467">
					<strong>Solicitar más información</strong>
				</p>
				<div id="frm">
					<form name="frmMasInfoHuelva" action="procesaFrmHuelva.asp" method="post">
						<input type="hidden" name="curso" value="Grado"/>
						<div class="campoFrm">
							* Nombre
						</div>	
						<div class="valorFrm">
							<input type="text" name="nombre" required="required" class="inputFrm bordeRedondeado"/>
						</div>
						<div class="clear">
						</div>
						<div class="campoFrm">
							* Apellidos
						</div>	
						<div class="valorFrm">
							<input type="text" name="apellidos" required="required"  class="inputFrm bordeRedondeado"/>
						</div>
						<div class="clear">
						</div>
						<div class="campoFrm">
							* Pais
						</div>	
						<div class="valorFrm">
							<select name="nombre" required="required"  class="inputFrm">
								<option value="">Seleccionar país</option>
							</select>
						</div>
						<div class="clear">
						</div>
						<div class="campoFrm">
							* Email
						</div>	
						<div class="valorFrm">
							<input type="email" name="email" required="required"  class="inputFrm bordeRedondeado"/>
						</div>
						<div class="clear">
						</div>
						<div class="campoFrm">
							* Teléfono
						</div>	
						<div class="valorFrm">
							<input type="text" name="telefono" required="required"  class="inputFrm bordeRedondeado"/>
						</div>
						<div class="clear">
						</div>
						<div class="campoFrm">
							* Edad
						</div>	
						<div class="valorFrm">
							<select name="edad" required="required" style="color:#666;border-width:1px;border-color:#e2f1e9;padding-bottom:5px;padding-top:5px;width:50px;">
								<option value=""></option>
								<option value="18">18</option>
								<option value="19">19</option>
								<option value="20">20</option>
								<option value="21">21</option>
								<option value="22">22</option>
								<option value="23">23</option>
								<option value="24">24</option>
								<option value="25">25</option>
								<option value="26">26</option>
								<option value="27">27</option>
								<option value="28">28</option>
								<option value="29">29</option>
								<option value="30">30</option>
								<option value="31">31</option>
								<option value="32">32</option>
								<option value="33">33</option>
								<option value="34">34</option>
								<option value="35">35</option>
								<option value="36">36</option>
								<option value="37">37</option>
								<option value="38">38</option>
								<option value="39">39</option>
								<option value="40">40</option>
								<option value="41">41</option>
								<option value="42">42</option>
								<option value="43">43</option>
								<option value="44">44</option>
								<option value="45">45</option>
								<option value="46">46</option>
								<option value="47">47</option>
								<option value="48">48</option>
								<option value="49">49</option>
								<option value="50">50</option>
							</select>
						</div>
						<div class="clear">
						</div>
						<div class="campoFrm">
							* Sexo
						</div>	
						<div class="valorFrm">
							<select name="nombre"  class="inputFrm">
								<option value="">Seleccionar sexo</option>
								<option value="Hombre">Hombre</option>
								<option value="Mujer">Mujer</option>
							</select>
						</div>
						<div class="clear">
						</div>
						<div class="campoAnchoFrm" style="text-align:left;">
							Consulta
						</div>	
						<div class="campoAnchoFrm">
							<textarea name="email" cols="31" rows="5"  class="inputFrm bordeRedondeado">
								Quiero recibir información sobre este curso...
							</textarea>
						</div>
						
						<div class="campoAnchoFrm">
							<input type="reset"/><input type="submit"/>
						</div>
					</form>	
				</div>
			</section>
		</section>
		<!-- pie -->
		<footer>
			Facultad Ciencias del Trabajo | Universidad de Huelva Copyright © 2012. Todos los derechos Reservados.
		</footer>	
	</section>	
</body>
</html> 
  #3 (permalink)  
Antiguo 03/07/2012, 01:21
 
Fecha de Ingreso: junio-2007
Ubicación: Cádiz
Mensajes: 369
Antigüedad: 16 años, 10 meses
Puntos: 7
Respuesta: Descuadre al incluir doctype <!HTML html>

Adjunto también el código css, no sabía como incluir todo el código html porque no cabía en un único mensaje, si hay otra mejor forma de ponerlo borráis este post y me decís como hacerlo ok??

Gracias anticipadas!

Código HTML:
*{
	margin: 0px;
}

body{
	width:100%;
	background-color:#eee;
	color:#666;
	font-family: 'Open Sans', sans-serif;
	font-size:12px;
}

#contenedor{
	width:950px;
	background-color:#fff;
	margin:auto;
	overflow: auto;
	padding: 0px;
}

header{
	width:100%;
	margin-bottom:5px;
	height:136px;
	font-family: 'Quattrocento', serif;
	font-size:26px;
	color:#777;
	background-image: url(../img/fondoCabecera.png); 
}

nav{
	width:100%;
	float:left;
	border-bottom:2px solid #419467;
}

nav ul{
	text-align:center;
}

nav ul li{
	display:inline-block;
	font-size:12px;
	width:20%;
}

nav ul li:hover{
	color:#419467;
}

nav ul li a:link{
	color:#ffffff;
	display:block;	

	width:100%;
	text-align:center;
	background-color:#419467;

	padding-top:10px;
	padding-bottom:10px;

	border-top-right-radius:7px;
	-moz-border-top-right-radius:7px; /*Firefox*/
	-webkit-border-top-right-radius:7px; /*Safari y navegadores que usen WebKit*/
	border-top-left-radius:7px;
	-moz-border-top-left-radius:7px; /*Firefox*/
	-webkit-border-top-left-radius:7px; /*Safari y navegadores que usen WebKit*/
}

nav ul li a:visited{
	color:#ffffff;
}

nav ul li a:hover{
	color:#419467;
	background-color:#e2f1e9;

	border-top-right-radius:7px;
	-moz-border-top-right-radius:7px; /*Firefox*/
	-webkit-border-top-right-radius:7px; /*Safari y navegadores que usen WebKit*/
	border-top-left-radius:7px;
	-moz-border-top-left-radius:7px; /*Firefox*/
	-webkit-border-top-left-radius:7px; /*Safari y navegadores que usen WebKit*/
}

.itemMenuActivo{
	color:#419467;
	background-color:#e2f1e9;
	padding-top:10px;
	padding-bottom:10px;

	border-top-right-radius:7px;
	-moz-border-top-right-radius:7px; /*Firefox*/
	-webkit-border-top-right-radius:7px; /*Safari y navegadores que usen WebKit*/
	border-top-left-radius:7px;
	-moz-border-top-left-radius:7px; /*Firefox*/
	-webkit-border-top-left-radius:7px; /*Safari y navegadores que usen WebKit*/
}

#contenido{
	width:100%;
	background-color:#fff;
	overflow: auto;
}

#submenu{
	width:140px;
	margin: 5px;
	float:left;
}

#submenu ul{
	margin:0px;
	padding:10px 0px 10px 0px;

	background-color:#e2f1e9;

	border-bottom-right-radius:7px;
	-moz-border-bottom-right-radius:7px; /*Firefox*/
	-webkit-border-bottom-right-radius:7px; /*Safari y navegadores que usen WebKit*/
	border-bottom-left-radius:7px;
	-moz-border-bottom-left-radius:7px; /*Firefox*/
	-webkit-border-bottom-left-radius:7px; /*Safari y navegadores que usen WebKit*/
}
#submenu ul li{
	list-style:none;
	margin-bottom: 5px;
	padding: 2px 0px 2px 7px;
}

.enlaceActivo{
	font-weight:bold;
}

#breadCumb{
	font-size:10px;
	padding:5px;
}

.unionBreadCumb{
	display: inline-block;
	padding:1px 2px 0px 4px;
	color:#419467;
}

#descripcion{
	width:476px;
	padding: 7px;
	margin: 5px;
	background-color:#fff;
	float: left;
}

article{
	line-height:140%;
}

article p{
	margin-bottom:10px;
}

.tablaInfo th{
	padding-top:5px;
	padding-bottom:5px;
}

.tablaInfo td{
	padding:5px;
	vertical-align:top;
	border-bottom:1px solid #419467;
}

.bordeDerecho{
	border-right:1px solid #419467;
}
.tablaInfo ul{
	padding: 0px;
}

.tablaInfo ul li{
	list-style:none;
	padding: 2px 0px 5px 2px;
	margin:0px;
}

#frmInformacion{
	width:276px;
	padding: 7px;
	margin: 5px;
	background-color:#e2f1e9;
	color:#666;
	float:left;
	border-radius:7px;
	-moz-border-radius:7px; /*Firefox*/
	-webkit-border-radius:7px; /*Safari y navegadores que usen WebKit*/
}

.clear{
	clear:both;
}
.campoFrm{
	position:relative;
	float: left;
	padding:7px 0px 7px 0px;
	margin-top:5px;
	margin-bottom:5px;
	width:80px;
	font-weight:bold;
}

.valorFrm{
	position:relative;
	float: left;
	margin-top:5px;
	margin-bottom:5px;
	width:196px;
}

.inputFrm{
	width:100%;
	color:#666;
	border-color:#e2f1e9;
	border-width:1px;
	padding-top:5px;
	padding-bottom:5px;
}

.bordeRedondeado{
	border:1px solid #e2f1e9;
	border-radius:5px;
}

.campoAnchoFrm{
	position:relative;
	float: left;
	width:100%;
	font-weight:bold;
	padding-top:5px;
	padding-bottom:5px;
	text-align:center;
}

footer{
	width:100%;
	background-color:#419467;
	color:#fff;
	margin-top:5px;
	text-align:center;
	font-size:10px;
	padding-top:5px;
	padding-bottom:5px;
}

/*Otros elementos*/
.logoFCT{
	padding: 10px 10px 10px 20px;
}

/*Fuentes*/
h1{
	color:#419467;
	font-size:16px;
	padding-bottom:5px;
}

h3{
	display:inline-block;
	color:#419467;
}

h2{
	color:#fff;
	font-size:12px;
	padding: 3px 0px 3px 7px;
	background-color:#419467;

	border-top-right-radius:7px;
	-moz-border-top-right-radius:7px; /*Firefox*/
	-webkit-border-top-right-radius:7px; /*Safari y navegadores que usen WebKit*/
	border-top-left-radius:7px;
	-moz-border-top-left-radius:7px; /*Firefox*/
	-webkit-border-top-left-radius:7px; /*Safari y navegadores que usen WebKit*/


}

/*Enlaces*/

a:link{
	color:#D1765C;
	text-decoration:none;
}

a:hover{
	color:#D1765C;
	text-decoration:underline;
}

a:active{
	color:#D1765C;
}

a:visited{
	color:#D1765C;
}
  #4 (permalink)  
Antiguo 03/07/2012, 05:27
 
Fecha de Ingreso: junio-2007
Ubicación: Cádiz
Mensajes: 369
Antigüedad: 16 años, 10 meses
Puntos: 7
Respuesta: Descuadre al incluir doctype <!HTML html>

Bueno, ya lo he solucionado, al final como siempre los errores más tontos son a los que no les ve la solución, después de 5 horas delante del monitor no me dió por fijarme en el nombre de las clases css y la que atañe al submeno estaba en el html como submenu mientras que en el css era subMenu.... lo siento por el tocho para una duda tan absurda

Gracias igualmente ;)

Etiquetas: css, descuadre, doctype, incluir, link, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:50.