problema dimensionamento pagine web

**tenrampi** · 05-05-2017, 12:39

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>

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

qualcuno può aiutarmi?
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

**Floyd611** · 06-05-2017, 11:41

Ciao,
in pratica manca un tag molto importante che ti rende la pagina "adattabile" a tutti i tipi di media:
il meta tag viewport
Mi riferisco al Responsive Web Design.
Non ho visto il codice ma ti consiglio di cominciare a studiare il RWD dalle basi.
I breakpoint, come scrivere codice affinchè si veda bene dal cellulare al monitor ecc...
Ne hai un bel po' di studi fare, prima.

Perdonami se faccio una battuta, nulla di personale.
Hai affermato di essere un novizio del mondo web e stai facendo un sito per un aereoporto??
Un pò come è capitato ad alitalia. Si è messa nelle mani di gente che non sa fare i conti con la penna...

**Roby140569** · 07-05-2017, 11:16

Il consiglio di Floyd è giusto: studia, studia, studia!

Sei un novizio e usi ASP? Lo uso ancora anch'io (perché lo conosco da anni e per certi progetti va ancora bene), ma è un linguaggio un po' vecchiotto. Se sei agli inizi, il consiglio che posso darti è quello di studiare qualcosa di più nuovo.

Toglimi una cuoriosità. Sviluppare un sito per un aeroporto è un qualcosa che stai facendo per imparare, o è una specie di compito per una scuola che stai frequentando?
Mi suona un po' strano che un aeroporto affidi ad un (come ti sei definito tu) "novizio del mondo del web", un progetto che, se fatto bene, dovrebbe avere un certo livello di complessità.

**tenrampi** · 07-05-2017, 21:56

Vi ringrazio per le risposte, comunque avrei dovuto effettivamente specificare che è un progetto scolastico quindi nulla di professionale!

Però appunto ho delle specifiche che devo rispettare per lo sviluppo del sito, purtroppo non ho mai sviluppato nulla per il web e mi sono trovato catapultato nel dover sviluppare questo progetto partendo da una base di conoscenza praticamente nulla!

Discussione: problema dimensionamento pagine web

Strumenti discussione

Ricerca discussione

Visualizza

problema dimensionamento pagine web

Tag per questa discussione

Permessi di invio