buongiorno,
sto realizzando un piccolo sito web per un aeroporto e sono un novizio del mondo web.
Sto cercando di realizzare la struttura della homepage ma ho qualche difficoltà nel realizzarla in modo tale che si adatti alle varie dimensioni della pagina web.
Questa è una prima bozza:
Ora il mio problema è che quando vado a ridimensionare la pagina vorrei che tutto mantenesse la propria dimensione, invece gli oggetti inseriti si spostano:
ecco il codice:
codice:<html lang="it"><head> <title>Homepage</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <ul> <li><img src="logo1.png" width="100%" </li> <li><a href="default.asp" >Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul> <div id="foto"> <img src="img2.jpg" width="100%" height="100%" > </div> <div id="login" > <div id="news" > </div> </div> </body> </html>qualcuno può aiutarmi?codice:body { width: 100%; height: 100%; margin: 00px 00px 00px 00px; /*background: url(bg1.png) no-repeat fixed;*/ background-size:cover; background-color:#00a8f3; /*Questa regola è opzionale, puoi anche ometterla*/ } ul { list-style-type: none; margin: 0; padding: 0; width: 300px; height: 100%; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; text-align: center; font-family: Calibri; font-weight: bold; font-size: 40px; } li a.active { background-color: #4CAF50; color: white; } li a:hover:not(.active) { background-color: #555; color: white; } #foto{ width: *; height: 147.38px; /*float:left ;*/ position: absolute; left: 300px; right: 0; top: 0; } #login{ position: absolute; background-color: #f1f1f1; width: 500px; height: 350px; left: 350px; top: 200px; } #news{ width: 500px; height: 350px; background-color: #f1f188; position: relative; top: 400px; }
perchè la navbar non prosegue fino fondo pagine anche se ho selezionato 100?
non mi sono spiegato molto bene ma non so come altro fare!
grazie
Rispondi quotando
