|
|||||||
|
|
|
 |
|
|
Strumenti |
08-11-2013, 14:22
|
#1 |
|
Member
Iscritto dal: Oct 2012
Messaggi: 59
|
[CSS] Layout ridimensionabile
Ciao a tutti, vorrei creare un sito composto da un container che non occupa l'intero schermo ma solo una parte di esso e che si disponga al centro dello schermo.
Vorrei che il container fosse ridimensionabile ma non del tutto: se ho uno schermo grande il container non diventa enorme ma resta fisso su una certa dimensione (per esempio 800px) quando rimpicciolisco la finestra, il container deve diminuire di larghezza sotto però ad una certa dimensione non deve più ridimensionarsi ma rimanere fisso (e compare la scrollbar) E' possibile? Avevo pensato di usare le percentuali per width e i px per il min-width e max-width, potrebbe andare o c'è un metodo migliore per farlo? Ho fatto una bozza in questo modo ma mi da dei problemi al rimpicciolirsi della finestra e non capisco il motivo, i px mi sembrano giusti.. HTML Codice:
<html>
<head><link rel="stylesheet" type="text/css" href="style.css"></head>
<body>
<div id="container">
<div id="logo">
LOGO
</div>
<div id="nav">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
<div id="cont">
<div id="menu">MENU
</div>
<div id="testo">TESTO
</div>
</div>
<div id="footer">FOOTER
</div>
</div>
</body>
</html>
Codice:
body {
background: red;
color: black;
width: 100%;
}
#container {
width: 85%;
margin: 0 auto;
background: orange;
min-width: 850px;
}
#logo {
width: 100%;
margin: 0 auto;
background: yellow;
height: 50px;
min-width: 850px;
}
#nav {
width: 25%;
background: green;
float: left;
height: 370px;
min-width: 250px;
}
#nav ul {
background: darkred;
}
#cont {
width: 75%;
background: pink;
float: right;
height: 100px;
min-width: 600px;
}
#menu {
width: 100%;
background: lightgreen;
float: right;
height: 50px;
}
#testo {
width: 100%;
background: lightblue;
float: right;
height: 300px;
}
#footer {
width: 100%;
background: darkgrey;
height: 50px;
float: left;
min-width: 850px;
}
PS: mi piacerebbe che se ho uno schermo grande vedo il container più piccolo della finestra mentre se la finestra si ristringe il container rimane sempre della stessa dimensione e ciò che si rimpicciolisce è il body esterno al container ma non penso che questo sia possibile.. |
|
|
|
09-11-2013, 11:07
|
#2 |
|
Member
Iscritto dal: Oct 2012
Messaggi: 59
|
nessuno?
|
|
|
|
|
09-11-2013, 12:02
|
#3 |
|
Senior Member
Iscritto dal: Nov 2010
Città: Londra
Messaggi: 620
|
|
|
|
|
|
09-11-2013, 14:38
|
#4 |
|
Member
Iscritto dal: Oct 2012
Messaggi: 59
|
grazie ma non è proprio quello che cercavo..
|
|
|
|
|
09-11-2013, 15:29
|
#5 |
|
Senior Member
Iscritto dal: Nov 2010
Città: Londra
Messaggi: 620
|
te stai cercando come costruire una ruota.
li puoi trovare ruote già costruite, gratis. al contempo se vai a vedere il codice capisci come hanno costruito le ruote. il layout che cerchi di ottenere si fa con media-queries basate sulla viewport. non ha senso re-inventarsi la ruota da zero, ci sono dei framework anche molto leggeri (purecss è solo 4.4k) che hanno un sistema di griglie e di media-queries già impostate sulla base delle viewport più comuni (smartphones/tablet/small-desktop/large-desktop) nel frattempo puoi anche imparare un pò di cose utili tipo evitare il più possibile i selector sugli ID nel css. |
|
|
|
|
09-11-2013, 15:45
|
#6 | |
|
Member
Iscritto dal: Oct 2012
Messaggi: 59
|
Quote:
|
|
|
|
|
|
|
| Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 16:27.
