> Faqs > Método de maquetación de página web

Método de maquetación de página web

Estoy haciendo una página web y no sé si la forma en la que la hago esta bien o no, es por ello que me gustaría saber si es la forma correcta o no.

En un principio, había utilizado para todo la opción de position:absolute, ya que es muy facil de usar, pero muy tedioso, pero según parece esto no esta muy bien visto, y que no estará en el flujo normal de la página.

En segundo lugar, la cual es la que estoy utilizando en este momento. Estoy creando divs en los cuales introduzco, otros divs invisibles y dentro de este, creo otro div para posicionarlo. Quiero que se fijen en el div que se llama botonera principal. Muestro mi código:

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Degreed</title>
	<meta charset = "UTF-8">

	<link rel="stylesheet" type="text/css" href="css/principal.css">

</head>
<body>

	<div class="botonera_principal">
		<div id="ancho_botonera_principal">
			<div id="area_usuario">
				<ul>
					<li id="inicio_sesion" href="#">Iniciar sesión</li>
					<li> / </li>
					<li id="registro" href="#">Registrarse</li>
				</ul>
			</div>
			<div id="area_buscador">
				<input id="buscador"type="text" size="24" maxlength="30"></div>
			</div>

			
		</div>
	</div>
	
	<div class="botonera_secundaria"></div>

	<div class="panel_noticias">
		<div class="panel_lateral"></div>
	</div>

	<div class="panel_final"></div>

</body>
</html>


CSS

body{
	margin: 0px;
	padding: 0px;
}

.botonera_principal{
	background-color: rgb(44,44,44);
	height: 68px;
}

#ancho_botonera_principal{ /*Revisar*/
	height: 68px;
	width: 1046px;
	margin: auto;
}

#area_usuario{
	height: 68px;
	width: 200px;
	float: right;
}

#area_buscador{
	height: 68px;
	width: 600px;
	float: right;
	display: flex;
}

#buscador{
	width: 300px;
	height: 25px;
	border-radius: 4px;
	margin: auto;
	vertical-align: middle;
	font-size: 20px;
}

.botonera_principal ul{
	padding: 0px;
	margin: 0px;
	float: right;
	padding-top: 48px; /*Revisar*/
	padding-right: 5px; /*Revisar*/
}

.botonera_principal ul li{
	padding: 0px;
	margin: 0px;
	list-style: none;
	display: inline;
	font-size: 15px;
	color: rgb(141,141,141);
	font-style: none;
}

#inicio_sesion{
	cursor: pointer;
}

#inicio_sesion:hover{
	color: rgb(252,203,26);
}

#registro{
	cursor: pointer;
}

#registro:hover{
	color: rgb(252,203,26);
}

.botonera_secundaria{
	background-color: rgb(13,13,13);
	height: 30px;
}

.panel_noticias{
	background-color: rgb(162,0,0);
	height: 2000px;
	width: 1046px; /*55%*/
	margin: auto;
}

.panel_lateral{
	background-color: rgb(44,44,44);
	height: 2000px;
	width: 293px; /*28%*/
	float: right;
}

.panel_final{
	background-color: black;
	height: 120px;
}

Respuestas

Hola Sergio, Realmente no es un enfoque muy adecuado.

#ancho_botonera_principal{ /*Revisar*/
	height: 68px;
	width: 1046px;
	margin: auto;
}

El mayor problema de este código es que produce una divisíón de 1046px de ancho, que no es adptable para nada a todo tipo de pantallas. Ese mismo comportamiento lo puedes hacer de manera que, cuando estás en un móvil se vea también bien.

Lo de position: absolute, es inviable para toda una página. Hay ejemplos muy concretos donde puedes aplicar el absolute, pero no indiscriminadamente. El enfoque que tienes ahora es más correcto, salvando los problemas de adaptabilidad. Tienes que seguir aprendiendo cosas de CSS para tenerlo más claro.

Te recomiendo leer:

Cuando veas lo sencillo que es maquetar con Flexbox se te hará la luz!

Miguel Angel
3090 138 206 17