[Ayuda] Problema con tamaño de ventana (posicionamiento css)

Funebrer0 · 17 Julio 2015, 15:22 PM

Buenos días, estoy viendo algo de html/css para la facultad y resulta que ando complicado en el tema del posicionamiento. Estoy haciendo un encabezado con un menú simple y unas imágenes y si tengo el navegador en pantalla completa se ve bien, pero si modifico el tamaño de la pantalla se empieza a ver mal. Supongo que estoy posicionando mal. Les dejo el código y espero me puedan dar una mano.
Saludos!

HTML:

Código (html4strict) [Seleccionar]


<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/styles.css">
		<title>Inicio</title>
	</head>
	<body>
		<header>
			<ul>
				<li><a href="#">Inicio</a></li>
				<li><a href="#">Categorias</a></li>
				<li><a href="#">Contacto</a></li>
			</ul>
			<a href="#"><img src="img/fb.png" alt="" class="imhead"></a>
			<a href="#"><img src="img/tw.png" alt="" class="imhead"></a>
		</header>
	</body>
</html>

CSS:

Código (css) [Seleccionar]


*{
	margin: 0;
	padding: 0;
}

body{
	background-color: rgb(205,205,205);
}

ul{
	list-style-type: none;
}

a{
	text-decoration: none;
}

header{
	background-color: rgb(47,159,203);
	width: 100%;
	border-bottom: 1px solid rgb(68,68,68);
	position: fixed;
	height: 40px;
}

header ul{
	text-align: center;
}

header ul li{
	padding: 10px;
	display: inline-block;
	margin-right: 10px;
	margin-left: 10px;
}

header ul li:hover{
	-webkit-transition: background .4s ease-out;
	-moz-transition: background .2s ease-out;
	-ms-transition: background .2s ease-out;
	-o-transition: background .2s ease-out;
	background-color: rgb(58,58,58);
	border-radius: 2px;
}

header ul li a{
	color: #FFF;
	font-family: Verdana;
}

header a img{
	width: 30px;
	position: relative;
	left: 96.5%;
	top: -35px;
}

DarK_FirefoX · 17 Julio 2015, 16:27 PM

¿Podrías poner una imagen de que es lo que pasa cuando redimensionas el navegador?

Salu2s

Funebrer0 · 18 Julio 2015, 18:17 PM

Ahí agregue una imagen.

$pedrojo2704 · 18 Julio 2015, 22:34 PM

Ocurre porque el diseño CSS actúa sobre cualquier tamaño de pantalla. En tu caso lo has diseñado para una pantalla grande y al hacer la pantalla más pequeña, el CSS sigue actuando igual y por eso se descoloca cada elemento.

Para solucionar eso deberías hacer un diseño "responsive" (o adaptativo) para que, cuando se utilice un tamaño de pantalla grande (por ejemplo al utilizar un monitor) se ejecute una parte del CSS y cuando se utilice un tamaño de pantalla pequeño (por ejemplo, un Smartphone) se ejecute otra parte de CSS, adaptando así los distintos elementos a los diferentes tamaños.

El uso de este tipo de diseño es bastante sencillo de utilizar, aunque habrá que utilizar más líneas de código. Para hacerlo, te recomiendo utilizar el "media" del CSS. Te dejo este link donde se explica con ejemplos su funcionamiento: https://developer.mozilla.org/es/docs/CSS/Media_queries

Espero que te sirva de ayuda.

Saludos!

Funebrer0 · 19 Julio 2015, 17:29 PM

Gracias! La voy a hacer responsive entonces. Me recomendas que lo haga con bootstrap? O que primero aprenda a hacerlo por mi cuenta sin frameworks?

$pedrojo2704 · 20 Julio 2015, 02:40 AM

Si tienes poco tiempo para hacerlo, utiliza Bootstrap, será rápido y sencillo, pero si tienes todo el tiempo que quieras, entonces aprende a hacerlo desde cero, nunca está mal saber hacerlo, además, siempre tendrás tiempo de utilizar Frameworks más adelante para ahorrar trabajo

Enviado desde mi Nexus 5 mediante Tapatalk

reprogramacion · 22 Julio 2015, 10:37 AM

Si tienes tiempo yo también te recomiendo aprender primero las técnicas básicas del Responsive Web Design "a pelo". Si te metes directamente con Boostrap llegarás antes al resultado final, pero no sabrás por qué.

Por cierto, si te vas a iniciar en el diseño responsive te recomiendo leer la traducción del artículo original de Ethan Marcotte (A List Apart) que, digamos, fue el que bautizó esta técnica.