Newbie Layout

danlupo · 28 Lug 2009

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 · 28 Lug 2009

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 · 28 Lug 2009

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 · 29 Lug 2009

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

Cerca

Cerca

Newbie Layout

danlupo

Utente Attivo

borgo italia

Super Moderatore

danlupo

Utente Attivo

borgo italia

Super Moderatore

Discussioni simili