Header adattabile

di il
8 risposte

Header adattabile

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;	
}

8 Risposte

  • Re: Header adattabile

    Perchè non ti basi su strumenti che buona parte di queste problematiche le hanno già risolte?
    Ad esempio Bootstrap o Foundation Zurb.
  • Re: Header adattabile

    KuroKami69 ha scritto:


    Buona sera.
    come esercizio scolastico ci è stato chiesto di preparare un sito base su qualcosa che ci piace, utilizzando solo HTML5 e CSS3.
    e non intendo solo a livello di codice. ma anche di "strumentazione". la politica del nostro insegnante, e anche la mia, è che prima di usare "tool" che ti fan trovare la pappa pronta, bisogna imparare come funziona dietro le quinte il tutto. altrimenti si fa un lavoro a metà
  • Re: Header adattabile

    Non si tratta di aver la pappa pronta, ma di non reinventare la ruota ogni volta.

    Detto questo, se vogliamo parlare a livello didattico, dal tuo codice togli header e nav l'attributo position e avrai centrato il menù.

    Invece per l'aspetto responsive è difficile avere un unico valore sempre valido per alcuni aspetti del layout.
    I dispositivi possono essere molto diversi e con risoluzioni diverse.
    Per questo modtivo si utilizzano le Media Queries, regole css condizionate alle dimensioni del display e ad altri fattori.

    Tramite le media query, puoi dire al tuo codice, se il display è meno di 480px (uno smartphone) l'altezza del mio header la voglio 100px.
    Se il display è tra 480px e 768px allora meglio che il mio header sia alto 150px, mentre se si tratta di un PC, con risoluzione maggiore, magari meglio che sia alto 250px.

    Per fare questo puoi utilizzare le Media Queries
    
    
     /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {...}
    
    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {...}
    
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {...}
    
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {...}
    
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {...} 
    
    
    
  • Re: Header adattabile

    Grazie questo è molto esplicativo. giusto una curiosità, da cosa capisce di che device si tratta? voglio dire, il codice è uguale, cambia solo la dimensione del min-width
    comunque io volevo che lo header rimanesse fisso in alto e la pagina ci scorresse sotto
  • Re: Header adattabile

    In realtà non è importante che tipo di device, ma la sua risoluzione in quel momento.
    Ad esempio io posso ridimensionare il mio browser sul pc.
    comunque io volevo che lo header rimanesse fisso in alto e la pagina ci scorresse sotto
    E' un approccio sbagliato, la visione che hai su di un PC è diversa da come vedi un sito su di uno smartphone, per cui non è corretto volere la stessa altezza su tutti i device.
  • Re: Header adattabile

    Si ma è un esercizio scolastico, i dispositivi su cui verrà provato saranno solo desktop e portatili, con lo schermo di varie dimensioni. a casa per esempio ho un 32" come schermo, mentre il mio portatile ha 10". i pc della scuola sono 18" mi pare, mentre il portatile del mio prof credo sia un 19", è un alienware da gaming.
    sostanzialmente vorrei che il menu fosse centrato, e che il resto della pagina scorresse sotto l'header. e ovviamente che l'header si adatti alla pagina sia in altezza che in larghezza, ma la larghezza è a posto
  • Re: Header adattabile

    KuroKami69 ha scritto:


    Si ma è un esercizio scolastico
    Appunto, visto che è un esercizio, lavora nel modo corretto.
    Hai elencato i dospositivi nella quale probabilmente verrà visualizzato... e se il prof tirasse fuori un tablet, oppure un altro dispositivo?

    Inizia a lavorare con metodo subito.
  • Re: Header adattabile

    Ne ho già parlato con lui. ha detto che NON intende testare i nostri lavori su dispositivi portatili quali smartphone e tablet, e ha detto che va più che bene se non implementiamo una visualizzazione adatta a tali dispositivi. abbiamo iniziato html e css 1 mese fa, avendo a disposizione 1h a settimana. non ci si può aspettare molto
Devi accedere o registrarti per scrivere nel forum
8 risposte