non voglio arrendermi: sito visibile a 800 e a 1024

**stranyera** · 17-11-2006, 16:39

allora ragazzi, non voglio arrendermi questa volta, ma non riesco ad andare avanti e a trovare una soluzione.

Ho un sito classico a 3 colonne piu' header e footer:
- la colonna di sx contiene il menu' di navigazione che ha dimensione fissa (max 148px);
- la colonna di destra conterrà dei banner realizzati in Flash (minimo 150px di larghezza);
la parte centrale è suddivisa in due colonne, di larghezza minima 190px, che contengono dei contenuti sia tabellari (testo) che immagini (gif e piccoli swf di flash).

Sto provando da giorni a fare in modo che, almeno la seconda colonna della parte centrale (quella con le img e i flash per intenderci), funzioni ridimensionando la pagina per una visualizzazione sia a 800 che a 1024 (e possibilmente anche a 1280), ma non riesco!....le soluzioni che sto provando a fare non vanno bene...

qualcuno mi aiuta?

**gra-fichetto** · 17-11-2006, 18:13

Partendo da uno di questi layout Partendo da uno di questi layout , nella tua pagina:

codice:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="stile.css" type="text/css" media="screen" />
<!--[if lte IE 6]>
<link rel="stylesheet" href="stile-ie.css" type="text/css" media="screen" />
<![endif]-->
</head>

<body>
<div id="container">
<div id="header"><h1>Header</h1>download this layout</div>

<div id="wrapper">
	<div id="content">
		<div class="colonna">
		

1) Content here. column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
		

very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
		

fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
		

column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
		</div>
		
		<div class="colonna">
		

1) Content here. column long long column very long fill fill fill long text text column text silly very make long very fill silly make make long make text fill very long text column silly silly very column long very column filler fill long make filler long silly very long silly silly silly long filler make column filler make silly long long fill very.</p>
		

very make make fill silly long long filler column long make silly silly column filler fill fill very filler text fill filler column make fill make text very make make very fill fill long make very filler column very long very filler silly very make filler silly make make column column </p>
		

fill long make long text very make long fill column make text very silly column filler silly text fill text filler filler filler make make make make text filler fill column filler make silly make text text fill make very filler column very </p>
		

column text long column make silly long text filler silly very very very long filler fill very fill silly very make make filler text filler text make silly text text long fill fill make text fill long text very silly long long filler filler fill silly long make column make silly long column long make very </p>
		</div>

	</div>
</div>
<div id="navigation">


2) Navigation here. long long fill filler very fill column column silly filler very filler fill fill filler text fill very silly fill text filler silly silly filler fill very make fill column text column very very column fill fill very silly column silly silly fill fill long filler </p>

</div>
<div id="extra">


3) More stuff here. very text make long silly make text very very text make long filler very make column make silly column fill silly column long make silly filler column filler silly long long column fill silly column very </p>
</div>
<div id="footer">

The footer. You can go to the index page.</p></div>
</div>
</body>
</html>

nel tuo CSS:

codice:

html,body{
	margin: 0;
	padding:0
}
body{
	font: 100% Arial, Sans-serif
}
p{
	margin: 0 10px 10px
}
div#header{
	position: relative
}
div#header h1{height:80px;line-height:80px;margin:0;
padding-left:10px;background: #EEE;color: #79B30B}
div#header a{position:absolute;right:0;top:23px}
div#content p{line-height:1.4}
div#navigation{
	background:#B9CAFF
	}
div#extra{background:#FF8539}
div#footer{background: #333;color: #FFF}
div#footer p{margin:0;padding:5px 10px}
div#footer a{display:inline;padding:0;color: #C6D5FD}

div#wrapper{
	float: left;
	width: 100%;
	
}
div#container{
	max-width: 1260px
}
div#content{
	margin: 0  26% 0 150px;
	
}
div#navigation{
	float: left;
	width: 148px;
	margin-left: -100%
}
div#extra{
	float:left;
	width: 25%;
	min-width: 150px;
	margin-left:-25%
}
div#footer{clear:left;width:100%}
.colonna{
	width: 50%;
	float: left;
	min-width: 190px
}

nel CSS per IE:

codice:

.colonna{
	width: 26%;
	float: left;
}

Altrimenti, credo di non aver compreso la tua richiesta.

**stranyera** · 17-11-2006, 23:32

grazie gra...conoscevo quel link ma me lo ero perso

ora provo il tuo suggerimento!

**stranyera** · 21-11-2006, 00:38

eccomi..scusa per il ritardo, ma ho avuto il tempo di provare solo stasera!

dunque...funziona, perfettamente tutto quanto

e di questo sono feliccissima perchè non mi obbliga a usare le tabelle

**stranyera** · 21-11-2006, 01:03

uhm...dubbi dell'ultimo minuto:
la colonna 2, quella affianco all'extra, rimane fissa come dimensioni...
io ho necessità che sia elastica per permettere alle varie risoluzioni di allineare 2 (ris. 800) o 3 (ris. 1024) contenuti (i famosi swf).
...a 1024 rimane un sacco d spazio tra la terza colonna e quella estremamente a destra...

**gra-fichetto** · 21-11-2006, 11:03

nel tuo css per IE (stile-ie.css):

codice:

.colonna{
	width: 29%;
	float: left
}

div#content{
	margin: 0  23% 0 150px;
	
}
div#extra{
	float:left;
	width: 24%;
	min-width: 150px;
	margin-left:-24%
}

**stranyera** · 21-11-2006, 18:47

nada....i miei swf diventano 3 solo a ris 1280...a 1024 rimangono sempre 2

ho ridotto anche la dimensione della colonna extra ma rimangono sempre 2

**gra-fichetto** · 22-11-2006, 10:19

prova ad eliminare i margini dal p

codice:

p{
	margin: 0
}

E' possibile vedere la pagina online?

**stranyera** · 22-11-2006, 12:40

Originariamente inviato da gra-fichetto
...

E' possibile vedere la pagina online?

potrei ma solo privatamente

**gra-fichetto** · 22-11-2006, 13:04

Bene. Ricevo solo su appuntamento...

La struttura è simile a quella che ti ho postato?
Il css?
Puoi segnare anche le dimensioni dei 3 swf?
Quando dici che i tuoi swf diventano 2, il terzo che fine fa?
Puoi allegare un'immagine tipo?

Discussione: non voglio arrendermi: sito visibile a 800 e a 1024

Strumenti discussione

Ricerca discussione

Visualizza

non voglio arrendermi: sito visibile a 800 e a 1024

Permessi di invio