Elasticizzare layout con Div

[dwb]

In riferimento al sito www.fotogabry.it, potrei, modificando il css, far si che il layout e i div si adattino in base alla risoluzione del visitatore?

[ResianTaxidrive]

Attualmente su quel sito, tutti i valori di larghezza sono scritti in px, bisognerebbe scrivere tutto in percentuale.

[dwb]

Originariamente inviato da ResianTaxidrive
Attualmente su quel sito, tutti i valori di larghezza sono scritti in px, bisognerebbe scrivere tutto in percentuale.

Ti ringrazio innanzitutto per la risposta! Come dovrei impostare le percentuali secondo te?

[Emulman]

tutto dipende da come vuoi tu..regolandoti sul fatto che la pagina visualizzata sul tuo monitor ha una larghezza pari al 100%. ad esempio se hai tre div orizzontali e vuoi che abbiano tutti la stessa larghezza puoi mettere come width per ogni div 33%. O se vuoi che quello centrale sia più largo dei laterali allora puoi fare

<div style="width: 20%"></div><div style="width: 60%"></div><div style="width: 20%"></div> 

insomma regolati un pò tu!

[dwb]

Ecco il mio attuale CSS:

<style type="text/css">
body {
	font-family:Verdana, Geneva, sans-serif;
	background-color: #72797f;
	margin:0;
	}
#main {
	width: 1260px;
	margin: 0 auto;
	color: #fff;
	background-image: url(immagini/linea2.jpg);
	background-repeat: repeat-y;
	background-position: 360px;
	}
#content {
	border-bottom:1px solid #fff;
	}
#left {
	width:354px;
	float:left;
	}
#right {
 	width: 880px;
 	float: left;
 	padding-left: 8px; 	
}	}
#footer {
	text-align:right;
	padding-top:5px;
	padding-left:374px;
	font-size: 10px;
	}
#menu {
	}
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	}
#accordion {
	text-align:right;
	margin-top:15px;
	padding-right:10px;
	}
#accordion ul {
	display:none;
	padding:1px 0;
	}
#accordion li {
	background: #72797f;
	font-size:16px;
	cursor:pointer;
	padding:1px;
	color:#fff;
	margin-bottom:10px; /*distanzia le voci del menu */
	}

#accordion li li{
	font-size:14px;
	margin-bottom:3px; /*distanzia le voci del sottomenu */
	}
#accordion a {
	text-decoration:none;
	color:#fff;
	}

#main #footer #main2 #footer2 .menu_under {
	font-size: 12px;
}
#main #footer #main2 #footer2 table tr td {
	text-align: right;
	font-size: 9px;
}
</style>

Vorrei quindi fare in modo di "elasticizzarlo", o quantomeno ottimizzarlo per risoluzioni da 1024 in su, visto che se si visualizza a 1024x768, come potete vedere, esce lo scroller orizzontale...

[Emulman]

qui vedo che basta agire su alcune voci (quel che metto è solo come riferimento, prova tu a video poi a vedere se corrisponde a quel che vuoi)

#main {
        float: left;
    width: 65%;
    color: #fff;
    background-image: url(immagini/linea2.jpg);
    background-repeat: repeat-y;
    background-position: 33%;
    }
#left {
    width:10%;
    float:left;
    }
#right {
     width: 25px;
     float: left;
     padding-left: 8px;     
} 

[dwb]

Ho fatto delle modifiche, ma c'è qualche problema:

http://www.fotogabry.it/testres/



Ecco il CSS:

<style type="text/css">
body {
	font-family:Verdana, Geneva, sans-serif;
	background-color: #72797f;
	margin:0;
	}
#main {
	float: left;
	width: 1020px;
	color: #fff;
	background-image: url(immagini/linea2.jpg);
	background-repeat: repeat-y;
	background-position: 33%;
	}
#content {
	border-bottom:1px solid #fff;
	}
#left {
	width:10%; 
    float:left; 
	}
#right {
	width: 900px;
	float: left;
	padding-left: 8px;
}	}
#footer {
	text-align:right;
	padding-top:5px;
	padding-left:374px;
	font-size: 10px;
	}
#menu {
	}
ul {
	list-style-type:none;
	margin:0;
	padding:0;
	}
#accordion {
	text-align:right;
	margin-top:15px;
	padding-right:10px;
	}
#accordion ul {
	display:none;
	padding:1px 0;
	}
#accordion li {
	background: #72797f;
	font-size:16px;
	cursor:pointer;
	padding:1px;
	color:#fff;
	margin-bottom:10px; /*distanzia le voci del menu */
	}

#accordion li li{
	font-size:14px;
	margin-bottom:3px; /*distanzia le voci del sottomenu */
	}
#accordion a {
	text-decoration:none;
	color:#fff;
	}

#main #footer #main2 #footer2 .menu_under {
	font-size: 12px;
}
#main #footer #main2 #footer2 table tr td {
	text-align: right;
}
</style>

Scusate in anticipo, ma faccio lo sviluppatore, e mastico poco di CSS.

[Emulman]

da quel che vedi c'è una immagine di 354 pixel nel div id=left" che è troppo corto per contenerla..dato che una immagine non si può ridurre a percentuale (a meno che non la ridimensioni) ti consiglio di spostarla come prima istruzione del <div id="right">
la riga che "taglia" il testo si trova a 33% dall'inizio del div=right, spostalo proprio all'inizio, a background-position: 0px;


P.S. permettimi di dirti BRAVO per la photogallery, hai scelto proprio un gran bel plugin di jquery!!!! ti consiglierie solo di farlo aprire in un'altra finestra o in un frame perchè altrimenti non si può tornare alla home page...

[dwb]

Mi daresti una mano a livello "pratico"?

[Emulman]

sullo spostamento dei div o sullo spostamento della gallery in un'altra pagina??