Layout fluido

marconisi

Nuovo Utente
10 Ago 2013
14
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
10 Ago 2013
14
0
0
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?
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
10 Ago 2013
14
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
se hai un div contenitore come nell'esempio che ti ho postato si
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Nuovo Utente
10 Ago 2013
14
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
 

marcomg

Utente Attivo
19 Nov 2011
204
0
16
Se sei andato sul sito hai visto cosa può fare, sul sito c'è anche una bella guida!
 
Discussioni simili
Autore Titolo Forum Risposte Data
F layout fluido HTML e CSS 4
F problema con layout fluido HTML e CSS 1
nim layout fluido HTML e CSS 4
M immagini e layout fluido HTML e CSS 0
D Layout di foglio Excel generato con PhpSpreadsheet PHP 5
felino Bug estetici del nuovo layout Supporto Mr.Webmaster 1
A [WordPress] Elementor responsive layout WordPress 8
Andrea_Ventura [HTML] Realizzazione di un layout dinamico di immagini HTML e CSS 4
Andrea_Ventura [HTML] Layout multicolonna (no table) HTML e CSS 2
L border in tabella php + layout stampa PHP 0
crealatualista [PHP] layout pagina con immagine codice a barre PHP 3
utente css esterno con layout HTML e CSS 1
F layout stampa css HTML e CSS 2
G Java & layout Java 2
M Layout e menu mobile HTML e CSS 2
M Problema con il layout HTML e CSS 3
R Dubbi Incolonnamento Layout con Bootstrap. HTML e CSS 1
Marco_88 Problemi layout con firefox HTML e CSS 3
felino Adattare un layout desktop ad un responsive HTML e CSS 9
K Aggiornare solo una parte di Layout Sviluppo app per Android 0
A Consiglio su layout responsive HTML e CSS 3
E layout responsive problemi con google chrome su smartphone android e win 8 HTML e CSS 0
D Tabella con layout per smartphone HTML e CSS 2
G Javascript library layout Javascript 1
S problema di layout HTML e CSS 5
Devil-94 Layout html css HTML e CSS 1
giap Layout come questo sito HTML e CSS 4
P proprietà Position in layout liquido... HTML e CSS 0
A Layout stabile per varie risoluzioni HTML e CSS 0
L preview di una textarea con layout del sito PHP 2
felino Nuovo layout del forum Supporto Mr.Webmaster 7
V Layout fragment main Sviluppo app per Android 1
L Layout flessibile con css. Voi come fate? HTML e CSS 1
X Dimensioni pagina scegliere layout HTML e CSS 2
A inserire background con gradiente in un layout Sviluppo app per Android 1
S Visualizzazione errata del layout e dei font del sito HTML e CSS 1
R inserire menu spry in layout a griglia fluida HTML e CSS 1
L Problema dimensione layout WordPress 1
L Consiglio su layout css... HTML e CSS 2
I Shape5-Vertex Template - sistemazione layout Joomla 1
A Problema gestione layout con css HTML e CSS 11
M Layout e zoom HTML e CSS 1
L Cambiare contenuto senza modificare il layout PHP 6
Y corrispondenza misure portando un layout da photoshop in html/css Photoshop 0
P inserire elementi dotati di dimensione propria in layout a griglia fluida HTML e CSS 5
P Layout a griglia fluida vs. animazioni flash HTML e CSS 0
M Layout compatibile per ogni browser HTML e CSS 3
L Feedback - design / layout per un sito dedicato ai Tablet PC Presenta il tuo Sito 2
J A corto di layout HTML e CSS 2
neo996sps Estrarre i dati e presentarli con un layout particolare PHP 0

Discussioni simili