vfldj
08-11-2013, 13:22
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
<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>
CSS
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;
}
Grazie mille
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..
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
<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>
CSS
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;
}
Grazie mille
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..