Buona sera.
come esercizio scolastico ci è stato chiesto di preparare un sito base su qualcosa che ci piace, utilizzando solo HTML5 e CSS3.
mi son messo quindi al lavoro, e appena fatto il menu, ho subito trovato problemi con il css per poter avere l'immagine header visibile sempre al 100% su qualunque dispositivo.
all'inizio mi ero arrangiato impostando un height in pixel, ma se la risoluzione dello schermo è diversa, mi taglia o meno dei pezzi.
vi posto il codice (è molto banale, sono ancora un dilettante), sperando che possiate consigliarmi bene
lo scopo che voglio raggiungere è quello di avere un'immagine che fa da header, e AI PIEDI dell'immagine ci voglio mettere il menu (usando il nav) in modo che acquisisca lo sfondo dell'header
sostanzialmente quindi vorrei capire 2 cose:
1) come cavolo metto un'altezza all'header che sia sempre valida (in % ho provato, ma probabilmente sbaglio qualcosa)
2) come cavolo centro la mia UL al centro?
grazie a chiunque possa indicarmi una via
HTML della pagina
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
<title>Giappone</title>
</head>
<body>
<header>
<!--h1>Giappone</h1-->
<nav>
<ul id="menu">
<li><a href="#">Storia</a></li>
<li>
<a href="#">Geografia</a>
<ul>
<li id="sub"><a href="#">Regioni</a></li>
<li id="sub"><a href="#">Prefatture</a></li>
</ul>
</li> <!-- includere sottomenu regioni con città principali e luoghi d'interesse etc -->
<li>
<a href="#">Cultura</a>
<ul>
<li id="sub"><a href="#">Religione</a></li>
<li id="sub"><a href="#">Festività</a></li>
<li id="sub"><a href="#">Istruzione</a></li>
</ul>
</li> <!-- religione, festività etc -->
<li>
<a href="#">Curiosità</a>
<ul>
<li id="sub"><a href="#">Mode</a></li>
<li id="sub"><a href="#">Fenomeni</a></li>
<li id="sub"><a href="#">Only In Japan</a></li>
</ul>
</li> <!-- mode, fenomeni, fatti strani etc -->
<li><a href="#">Articoli</a></li> <!-- cose inerenti il giappone, tipo sui viaggi etc -->
<li>
<a href="#">Galleria</a>
<ul>
<li id="sub"><a href="#">Estate</a></li>
<li id="sub"><a href="#">Autunno</a></li>
<li id="sub"><a href="#">Inverno</a></li>
<li id="sub"><a href="#">Primavera</a></li>
</ul>
</li> <!-- dividere in 4 stagioni, e mettere qualche immagine per ogni evento -->
</ul>
</nav>
</header>
<article>
<h4>Brevi Cenni</h4>
<p>bla bla bla</p>
</article>
</body>
</html>
CSS della pagina
@charset "utf-8";
/* CSS Document */
html, body{
width: 100%;
//height:100%;
}
header {
height:inherit;
width: 100%;
margin:0;
padding:0;
background: url(../img/header.png) no-repeat;
background-size: 100%;
position:relative;
}
nav {
height:auto;
width: 654px;
z-index:500;
border-radius:5px;
margin: 0% auto 0% auto;
position: absolute;
bottom: 0px;
}
article {
margin-top:10px;
position:absolute;
}
#menu {
margin:0;
padding:0;
width:100%;
border:none;
}
#menu ul, #menu a {
margin:0;
padding:0;
border:none;
}
#menu li {
list-style:none;
float:left;
position:relative;
padding:3px;
height:50%;
width:100px;
text-align:center;
}
#menu li a {
display:block;
text-decoration:none;
padding:0px 15px;
margin 5px 0px;
border-left:1px solid;
line-height:20px;
}
#menu li:first-child a {
border-left:none;
}
#menu ul {
position:absolute;
float:left;
opacity:0;
transition:opacity .55s ease .1s;
-moz-transition:opacity .55s ease .1s;
-webkit-transition:opacity .55s ease .1s;
-ms-transition:opacity .55s ease .1s;
-o-transition:opacity .55s ease .1s;
}
#menu li:hover > ul {
opacity:1;
}
#menu ul li {
height:0px;
overflow:hidden;
padding:0px;
}
#menu li:hover > ul li {
height:auto;
overflow:visible;
}
#menu ul li a {
width:100px;
margin:0;
padding: 5px 5px;
border-left:none;
border-bottom:1px solid;
}
#menu ul li:last-child a {
border-bottom:none;
}
#sub {
background:url(../img/sfondoli.jpg);
background-size:cover;
}