Ciao a tutti,
mi sto cimentando con HTML5 e CSS3. In modo particolare vorrei imparare ad usare la funzionalità di "@media screen" di CSS3.
Ho provato a fare un esperimento, ma senza successo e non capisco cosa stia sbagliando.
Ho creato un documento in HTML5 al quale ho linkato il file "style.css".
In questo file ho impostato le dimensioni, float e sfondo dei vari elementi della pagina HTML5 (header, article, aside e footer).
Quando provo a restringere la pagina web non accade nulla. Gli elementi rimangono sempre nella stessa posizione nonostante abbia cambiato le impostazioni di "float" se la dimensione dello schermo è inferiore a 700px.
Questa è la mia pagina HTML5
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Pagina HTML</title>
</head>
<body>
<header>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec.</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus sed ex ac pharetra.
Curabitur ultricies placerat lectus vel convallis. Suspendisse potenti. Nunc nec risus at mi mollis tristique.
Suspendisse cursus accumsan fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Sed dapibus lectus eu tortor mattis, ut tristique est vehicula.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
Morbi vestibulum in metus ut euismod. Sed ac enim in tortor gravida varius convallis in massa.
Vestibulum velit augue, placerat nec porttitor ut, accumsan ut leo. Donec sed tincidunt massa, vitae varius sapien.
</p>
<p>
Sed rhoncus sem et lectus porttitor, id congue libero auctor.
Nullam pretium, augue nec lacinia placerat, nisi libero eleifend turpis, et hendrerit enim diam eu nulla.
Ut pulvinar lacus dolor, id fringilla ipsum egestas quis. Proin vel congue augue, ut aliquet velit.
Vivamus consequat lectus sapien, quis egestas ipsum vestibulum vel.
Integer nibh metus, porttitor non sem luctus, consequat mollis leo.
Phasellus tincidunt tempus magna, sit amet pulvinar orci ultricies sit amet.
Cras eget tincidunt ipsum. Praesent ultrices lectus sed ipsum interdum, a commodo lectus feugiat.
Integer blandit consectetur justo, ut rhoncus tortor tempus sed. Morbi non enim lacinia, fermentum dui sed, semper leo.
Praesent condimentum eros diam, eget venenatis ante tristique vitae.
Suspendisse potenti. Phasellus convallis elit vitae neque efficitur blandit.
Mauris vitae dictum enim, vestibulum laoreet nulla.
</p>
<p>
Sed rhoncus sem et lectus porttitor, id congue libero auctor.
Nullam pretium, augue nec lacinia placerat, nisi libero eleifend turpis, et hendrerit enim diam eu nulla.
Ut pulvinar lacus dolor, id fringilla ipsum egestas quis. Proin vel congue augue, ut aliquet velit.
Vivamus consequat lectus sapien, quis egestas ipsum vestibulum vel.
Integer nibh metus, porttitor non sem luctus, consequat mollis leo.
Phasellus tincidunt tempus magna, sit amet pulvinar orci ultricies sit amet.
Cras eget tincidunt ipsum. Praesent ultrices lectus sed ipsum interdum, a commodo lectus feugiat.
Integer blandit consectetur justo, ut rhoncus tortor tempus sed. Morbi non enim lacinia, fermentum dui sed, semper leo.
Praesent condimentum eros diam, eget venenatis ante tristique vitae.
Suspendisse potenti. Phasellus convallis elit vitae neque efficitur blandit.
Mauris vitae dictum enim, vestibulum laoreet nulla.
</p>
</article>
<aside>
<p>
Nam tellus sem, luctus et urna in, eleifend porttitor quam.
Curabitur feugiat imperdiet ultrices.
Fusce sit amet diam vel libero pharetra ultrices.
Proin eget dui tincidunt, hendrerit augue vitae, facilisis nisi.
Maecenas in tincidunt sem.
Vivamus auctor urna et ante feugiat, vitae mollis nisi pretium.
Interdum et malesuada fames ac ante ipsum primis in faucibus.
Duis sit amet arcu leo. Suspendisse sed nunc sed enim pharetra tincidunt eu nec nibh.
Vestibulum felis lorem, mollis a sem eget, maximus finibus enim. Aenean semper malesuada congue.
Nam ante libero, auctor quis ullamcorper a, tristique in nulla.
Praesent pellentesque enim in consequat porttitor.
Integer dictum nulla in blandit vulputate.
Aenean blandit vehicula risus at consectetur.
Sed ante risus, rutrum quis fermentum et, volutpat a neque.
</p>
</aside>
<footer>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</footer>
</body>
</html>
Questa è la mia pagina CSS3:
header{
height:30%;
width:auto;
background-color:red;
}
article{
height:600px;
width:60%;
background-color:blue;
float:left;
}
article > p
{
color:white;
}
aside{
height:600px;
width: 40%;
background-color:green;
float:left;
}
footer{
background-color:grey;
width:auto;
}
@media screen and {max-width:700px}
{
article{float:none;width:auto;}
aside{float:none;width:auto;}
}
Qualcuno potrebbe aiutarmi? Cosa sbaglio?
Grazie in anticipo!