Newbie Layout

danlupo

Utente Attivo
13 Lug 2009
73
0
0
Domanda: Come fate a farsi che un layout di un vostro sito funzioni a qualsiasi risoluzione (1024x768 1280x1024 etc..) ??
Io ho provato a fare un semplice layout a 2 colonne +header+footer e non riesco ad impostare un titolo che non vada sopra agli altri Div, o ad utilizzare una grandezza del div contenitore e dei figlio in maniera decente. Se uso gli EM poi mi si scatena una guerra degli elementi :ilpirata:
Ho letto e riletto diverse guida ed articoli ma non ne ho cavato un ragno dal buco.

Qualcuno mi può dare una mano, anche semplice ??

Daniele
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
io utilizzo sempre le misure in px (calcolando con pazienza px su px) per es per una risol di 1024x768
poi guardare questo
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
</head>
<style type="text/css">
html{
	margin: 0;
	padding: 0;
}

body {
	background-color: #333333;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	margin: 0;
	padding: 0;	
}
#contenitore{
	/*box contenitore centrato sullo schermo 1024x768*/
	width:930px;
	height:580px;
	position: absolute;
	background-color: #009900;
	overflow: hidden;
	top: 50%;
	left: 50%;
	margin-left: -466px;
	margin-top:-290px;
}
#testata{
	width: 930px;
	height:100px;
	position:absolute;
	background-color:#CCCCCC;
	top: 0px;
	left: 0px;
}
#sinistro{
	width: 130px;
	height:380px;
	position:absolute;
	background-color: #FF0000;
	top: 100px;
	left: 0px;
}
#destro{
	width: 800px;
	height:380px;
	position:absolute;
	background-color: #FFCC00;
	top: 100px;
	left: 130px;
}
#piede{
	width: 930px;
	height:100px;
	position:absolute;
	background-color:#CCCCCC;
	bottom:0px;
	left: 0px;
}
</style>
<body>
<div id="contenitore">
	<div id="testata">titolo</div>
	<div id="sinistro">a sinistra</div>
	<div id="destro">a destra</div>
	<div id="piede">piede</div>
</div>
</body>
</html>
per le altre risoluzioni puoi con js verificare la risoluzione e cambiare css di conseguenza
personalmente risultandomi che la risoluzione dei miei visitatori è per il 95% 1024x768, l'adatto solo a quella, gli altri vdrenno (sempre centrato) più piccolo
dimenticavo per heigt non è semplicissimo perche dipende anche dall'altezza delle barre del bw
 

danlupo

Utente Attivo
13 Lug 2009
73
0
0
Ciao.. Grazie per la risposta!!

Volevo chiederti un consiglio: Meglio preparare un layout per il 1024x768 e gli altri "Ranges" o preparare due fogli di stile uno per il 1024x768 e uno per il 1280x1024 ??
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
149
63
PR
www.borgo-italia.it
ciao
secondo me, ma è un'opinione personale, conviene preparare più fogli css, in questo modo puoi uggiungere in seguito altre risoluzioni senza toccare le pagine.
se può servirti tra gli articoli js di mrwebmaster uno indica il metodo per rilevare la risoluzione del monitor dell'utente, penso che con qualche accorgimento in base al risultato possa essere richiamato un css o un altro
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Nuovo e newbie Presentati al Forum 0
S Another newbie from India Presentati al Forum 1
DeAndreon Non trovo l'errore(newbie) PHP 8
M ultra newbie, separare pagina con dreamweaver HTML e CSS 4
S Problemino da Newbie con DOM Javascript 0
T newbie: chiusura popup Javascript 1
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 fluido HTML e CSS 13
M Layout e zoom HTML e CSS 1
F layout fluido HTML e CSS 4
L Cambiare contenuto senza modificare il layout PHP 6
F problema con layout fluido HTML e CSS 1
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

Discussioni simili