Layout fluido

marconisi · 2013-08-10T18:25:26+0200

Salva ragazzi. Nel sito che sto realizzando vorrei avere un layout fluido. Molti mi hanno consigliato di usare solo misure in percentuale ma non funziona

.
Vi posto il codice css:

Codice:

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	overflow: auto;  
}
#titolo {
	font-size: 350%;
	text-align: center;
	font-style: italic;
	font-family: "Georgia", serif;
	padding: 0;
}
#elencoTorte ul {
	font-size: 110%;
	padding: 0;
	text-align: center;
}
#elencoTorte {
	margin-left: 5%;
}

nav ul {
	list-style: none;
	padding: 0;
	text-align: center;
	margin-left: 10%;
	margin-right: 10%;
	height: 10%;
}
nav ul li {
	font-size: 130%;
	margin-right: 5%;
	float: left;
	margin-left: 5%;
}
body {
	background-color: #E09FFF;
}
#elencoTorte ul li {
	float: left;
	margin-left: 15%;
}
a, a:visited, a:link {
	text-decoration: none;
	color: #C140FF;
}
a:hover {
	color: #E1BFFF;
}
h3 {
	font-size: 130%;
}
h4 {
	position: relative;
	bottom: 100%;
	padding: 0;
}
hr {
	height: 0.2em;
	margin: 0 auto;
	border: 1px solid #E09FFF;
	background-color: #E081FF;
	width: 80%;
}
header {
	padding: 0;
	margin-bottom: -1%;
}
#sinistra {
	float: left;
	border: 4px ridge violet;
	margin: 2%;
	height: 100%;
	background-color: #E09FFF;
	width: 15%;
}
#destra {
	float: left;
	margin: 2%;
	border: 4px ridge violet;
	width: 75%;
	height: 80%;
	min-height: 400px;
	background-color: #E09FFF;
}
#ultimeTorte, #tutteTorte {
	padding: 0;
	margin-left: 10%;
	font-size: 120%;
}
#corpo {
	border: 0.3em ridge violet;
	margin-left: 10%;
	display: inline-block;
	width: 80%;
	background-color: #E1BFFF;
}
#elencoTorte {
	
}
footer {
	font-size: 110%;
	margin-left: 35%;
	margin-right: 35%;
	margin-top: -1%;
}
#foot {
	margin-left: 10%;
	margin-right: 10%;
}
#nome {
	text-align: center;
	font-size: 2em;
	margin-bottom: 0.5em;
}
#fotoTorta, #descrizioneTorta {
	float: left;
}
.imgTorta {
	max-height: 350px;
	max-width: 250px;
	border: 0.2em ridge violet;
}
#fotoTorta {
	margin-left: 2%;
}
#descrizioneTorta {
	border: 0.2em ridge violet;
	width: 65%;
	height: 80%;
	min-height: 350px;
	margin-left: 3%;
	margin-bottom: 3%;
	background-color: #E1BFFF;	
}
#boxTitolo {
	font-size: 130%;
	text-align: center;
}
p {
	font-size: 110%;
	padding-left: 1%;
	line-height: 130%;
}
#inserimento {
	text-align: center;
}

Grazie a tutti coloro che risponderanno

criric · 2013-08-11T07:43:31+0200

Ciao, puoi provare questo schema

HTML:

<html>
    <head>
        <style>
            html body {
                margin:0;
                padding:0;
            }
            #contenitore {
                width: 100%;
                overflow: hidden;
            }
            #testata {
                width: 100%;
                height: 90px;
                border-bottom: 1px dashed gray
            }
            #titolo {
                width: 25%;
                float: left;
                margin-left: 5%;                
            }
            #menu {
                width: 25%;
                float: left;
                margin-left: 5%;
            }
            #menu ul {
                list-style-type: none;
                margin:0;
            }
            #menu ul li {
                padding:4px;
                text-indent: 4px;
                border-bottom: 1px dashed gray                
            }
            #corpo {
                width: 65%;
                float: left;
                padding:10px;
            }
            #footer {
                clear: both;
                width: 100%;
                height: 90px;
                border-top: 1px dashed gray;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="contenitore">
            <div id="testata">
                <div id="titolo"><h2>Titolo</h2></div>
            </div>
            <div id="menu">
                <ul>
                    <li>lista 1</li>
                    <li>lista 2</li>
                    <li>lista 3</li>
                    <li>lista 4</li>
                    <li>lista 5</li>
                </ul>
            </div>
            <div id="corpo">
                contenuto<br/>contenuto<br/>contenuto<br/>contenuto<br/>
                contenuto<br/>contenuto<br/>contenuto<br/>contenuto<br/>
                contenuto<br/>contenuto<br/>contenuto<br/>contenuto<br/>
                contenuto<br/>contenuto<br/>contenuto<br/>contenuto<br/>
            </div>
            <div id="footer">copyright</div>
        </div>
    </body>
</html>

marconisi · 2013-08-11T09:54:46+0200

Ma usando le misure in pixel si può ottenere lo stesso un layout fluido? Perché secondo te il css che ho scritto io non da un layout fluido pur essendo tutto scritto con le percentuali?

criric · 2013-08-11T10:42:51+0200

hai dato una larghezza ed un altezza alla pagina (html) penso sia questo il problema: non credo abbia nessun effetto
devi invece assegnare i parametri ad un div contenitore che si adatterà poi alle dimensioni della pagina

marconisi · 2013-08-11T10:58:34+0200

criric ha scritto:
hai dato una larghezza ed un altezza alla pagina (html) penso sia questo il problema: non credo abbia nessun effetto
devi invece assegnare i parametri ad un div contenitore che si adatterà poi alle dimensioni della pagina

Ho tolto il width: 100% e l'height: 100% all'html. Devo assegnare queste grandezze al div che contiene tutti i contenuti della pagina?

criric · 2013-08-11T11:18:14+0200

se hai un div contenitore come nell'esempio che ti ho postato si

marconisi · 2013-08-11T11:21:21+0200

criric ha scritto:
se hai un div contenitore come nell'esempio che ti ho postato si

Fatto: ho messo width: 100% e height: 100% nel di "principale", che è quello che contiene tutta la pagina subito dopo il body, ma non và cmq :crying:

criric · 2013-08-11T11:27:07+0200

togli height: 100% che non è compatibile su titti i browser e metti overflow:hidden che fa adattare il div al contenuto
poi cosa non funziona?

marconisi · 2013-08-11T11:34:14+0200

criric ha scritto:
togli height: 100% che non è compatibile su titti i browser e metti overflow:hidden che fa adattare il div al contenuto
poi cosa non funziona?

Fatto anche questo. Quando faccio il ridimensionamento della pagina (specialmente quando ingrandisco), gli elementi se ne vanno per conto proprio: i <li> del menu si mettono su due file, i box dei contenuti anche. Si stravolge tutto il layout. Eppure ho messo in % tutte le larghezze di questi elementi. Qualche soluzione?
A proposito, grazie per il tempo che stai dedicando ai miei problemi.

criric · 2013-08-11T15:21:53+0200

non credo sia necessario mettere le percentuali anche al font e al margin quelle le puoi lasciare in px ,l'importante è che i contenitori siano in percentuale

marconisi · 2013-08-11T18:37:29+0200

criric ha scritto:
non credo sia necessario mettere le percentuali anche al font e al margin quelle le puoi lasciare in px ,l'importante è che i contenitori siano in percentuale

Pensi sia solo questo il problema?
Appena posso provo.

marcomg · 2013-08-11T18:41:49+0200

Perché non utilizzi il framework twitter bootstrap?
http://getbootstrap.com/2.3.2/index.html
Prova a ridimensionare la finestra del browser e guarda

marconisi · 2013-08-11T22:27:38+0200

marcomg ha scritto:
Perché non utilizzi il framework twitter bootstrap?
http://getbootstrap.com/2.3.2/index.html
Prova a ridimensionare la finestra del browser e guarda

Mi puoi spiegare come funziona? Non l'ho ancora provato. Grazie

marcomg · 2013-08-14T09:24:01+0200

Se sei andato sul sito hai visto cosa può fare, sul sito c'è anche una bella guida!

Cerca

Cerca

Layout fluido

marconisi

Nuovo Utente

criric

Super Moderatore

marconisi

Nuovo Utente

criric

Super Moderatore

marconisi

Nuovo Utente

criric

Super Moderatore

marconisi

Nuovo Utente

criric

Super Moderatore

marconisi

Nuovo Utente

criric

Super Moderatore

marconisi

Nuovo Utente

marcomg

Utente Attivo

marconisi

Nuovo Utente

marcomg

Utente Attivo

Discussioni simili