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

Iniciado por Funebrer0, 17 Julio 2015, 15:22 PM

0 Miembros y 1 Visitante están viendo este tema.

Funebrer0

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

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

Salu2s


$pedrojo2704

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

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

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

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