Hola, estoy siguiendo un curso para aprender a hacer webs.
El problema que encuentro es que ellos en el curso consiguen que funcione la web, pero yo por mas vueltas que le doy no consigo saber que es lo que hago mal. No consigo que cuando tienes la pagina a un determinado tamaño enseñe la parte que debe, normalmente solo funciona una, o la great o la medium o la mini, pero no las 3 a la vez.
A ver si podeis echarme una mano ^^ Muchas gracias a todos
index.html
los distintos CSS
colors.css
base.css
great.css
medium.css
mini.css
El problema que encuentro es que ellos en el curso consiguen que funcione la web, pero yo por mas vueltas que le doy no consigo saber que es lo que hago mal. No consigo que cuando tienes la pagina a un determinado tamaño enseñe la parte que debe, normalmente solo funciona una, o la great o la medium o la mini, pero no las 3 a la vez.
A ver si podeis echarme una mano ^^ Muchas gracias a todos
index.html
Código [Seleccionar]
DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>Ejemplo de adaptativo</title>
<link href="css/colors.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
<link href="css/great.css" rel="stylesheet" type="text/css" media="screen and (min width: 981px)">
<link href="css/medium.css" rel="stylesheet" type="text/css" media="screen and (min-width: 481px) and (max-width: 980px)">
<link href="css/mini.css" rel="stylesheet" type="text/css" media="screen and (max width: 480px)">
</head>
<body>
<header>
<h1>El titulo de mi sitio web </h1>
<h2 class="display-great">Grandisimo</h2>
<h2 class="display-great">Grande</h2>
<h2 class="display-medium">Mediano</h2>
<h2 class="display-mini">Mini</h2>
</header>
<div id="wrapper">
<nav class="main-nav">
<h2>Mi menu</h2>
<select class="menu display-great display-medium">
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>
<select class="display-mini">
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>
</nav>
<section id="main-section">
<h2>Mi Contenido </h2>
<article>
<h3><a href="#">Entrada1</a></h3>
<p class="display-great display-medium">Un lorem</p>
</article>
<article>
<h3><a href="#">Entrada2</a></h3>
<p class="display-great display-medium">Un lorem</p>
</article>
<article>
<h3><a href="#">Entrada3</a></h3>
<p class="display-great display-medium">Un lorem</p>
</article>
</section>
</div>
<footer>
<p>Esto es el pie</p>
<select class="display-mini">
<option>Uno</option>
<option>Dos</option>
<option>Tres</option>
</select>
</footer>
</body>
</html>
los distintos CSS
colors.css
Código [Seleccionar]
body {
color: black;
}
header {
background-color: #f47e7d;
}
nav {
background-color: #b5d045;
}
section {
background-color: #e0c7a8;
}
footer {
background-color: #fb8335;
}
a,a:link, a:visited, a:active, a:hove {
color: #81c0c5;
}
base.css
Código [Seleccionar]
.display-mini {
display: none;
}
.display-great {
display: none;
}
.display-medium {
display: none;
}
.menu{
padding-left: 0;
}
.menu li{
display: inline;
list-style-type: none;
}great.css
Código [Seleccionar]
.display-great {
display: inherit !important;
}
h1, h2 {
text-align: center;
}
header, footer, #wrapper {
margin-left:auto;
margin-right: auto;
clear: both;
width: 100%;
max-width: 1500px;
}
#main-nav {
float: left;
width: 20%;
max-width: 300px;
}
main-section {
margin-left: 21%;
width: 79%;
max-width: 1200px;
}medium.css
Código [Seleccionar]
.display-medium {
display: inherit !important;
}
body{
font-family: Georgia;
}mini.css
Código [Seleccionar]
.display-mini {
display: inherit !important;
}
body {
font-family: Arial;
}
select.display-mini {
font-size:1.2em;
width:100%;
}