Ciao, premetto che sono nuovo e autodidatta, quindi posso aver scritto parecchie stupidate senza saperlo ahah 
il mio problema è che non riesco a capire come funzionano le risoluzioni in altezza, cioè io riesco a ridimesionare una pagina in base alla larghezza con le %, ma con l'altezza non funziona
questa è la struttura dell'html
codice HTML:
<body>
<div id="contenitore">
<div id="navbar">
<div class="barradinavigazionetesti">
HOME EVENTI RICERCA PER APP
</div>
</div>
<div id="menu">
<!-- LOGO -->
<img src="IMG/logo_03.png" alt="logo" class="logo">
<div id="latestadded">
<img src="IMG/abc.jpg" alt="IMMAGINEFESTA" class="immaginefesta">
<div class="labeltext"> andera </div>
</div>
<div id="latestadded2"><img src="IMG/abc.jpg" alt="IMMAGINEFESTA" class="immaginefesta">
<div class="labeltext"> andera </div>
</div>
</div>
e questo quello del CSS
codice HTML:
body {
background-color: #0d072c;
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
overflow-y : auto;
}
#contenitore {
width: 100%;
}
#navbar {
width: 100%;
background-color: #00B3DB;
opacity: 0.37;
}
#menu {
width: 100%;
margin-top:auto;
height: 100px;
}
#footer {
background-color: #99d8e4;
opacity: 0.13;
width: 100%;
}
#latestadded {
margin: 0 auto;
margin-top: 30px;
width: 480px;
overflow: auto; /* METTE IN LINEA GLI ELEMENTI CON IL FLOAT */
background-color: #443f5b;
height: auto;
}
#latestadded2 {
margin: 0 auto;
margin-top: 5px;
width: 480px;
overflow: auto; /* METTE IN LINEA GLI ELEMENTI CON IL FLOAT */
background-color: #443f5b;
}
/*CLASSI*/
.barradinavigazionetesti { /*TESTI PER LA BARRA DI NAVIGAZIONE*/
font-family: LetterGothic, Verdana, sans-serif;
font-size: 24px;
color: #FFFFFF;
margin-top: auto;
margin-bottom: auto;
margin-left: 5px;
text-align: center;
}
img.scala { /*RIDIMENSIONIAMO IMG*/
max-width:100%;
height:auto;
width: auto;
}
.logo { /*LOGO*/
display:block;
margin:0 auto;
max-width: 285px;
max-height: 299px;
}
/*LATEST ADDED CLASSES*/
.immaginefesta {
float: left;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
max-width: 182px;
height: auto;
weight: auto;
}
.labeltext {
float: left;
background:#FFFFFF;
width: 59%;
height: 25%;
margin-top: 45px;
}
Il punto è che se io apro il file home.html mi ridimensiona la pagina in larghezza ma mi inserisce la scrollbar, io invece vorrei che la pagina si visualizzasse su qualsiasi dispositivo senza scrollbar, cioè che l'altezza si adattasse alla dimensione del dispositivo o browser, ho provato con le %, con i vh, a mettere delle dimensioni fisse a #contenitore ma non cambia in nessun modo, ho provato anche a ridimensionare le immagini e i #latestadded con le % ma se io vado a cambiare le dimensioni del browser non le modifica, e poi, non riesco a capire con che criterio ridimensiona in %, perchè io ho un file psd con il mio progetto completo, e provo a usare quelle dimensioni nella proporzione (100:r=s
) ma non mi da uguali risultati..
vi chiedo cortesemente se potete farmi luce su questi dubbi, che credo siano davvero stupidi però è una settimana che ci lavoro sopra senza risultato
Rispondi quotando
