Layout iframes

Stato
Discussione chiusa ad ulteriori risposte.
Ordina per data Ordina commenti per reazioni
J

jacoboss

Utente Silver
18 Novembre 2007
63
9
0
72
aiuto, avrei bisogno di un aiutino nel realizzare l'interfaccia di un sito con un layout fluido come indicato nello schema, i riquadri sono iframe e la dimensione deve essere fissa dove non è tratteggiato e della dimensone massima consentita dalla pagina, in modo da non avere scrollbar dove è tratteggiato (chiaramente con un min height da settare)
layoutio.jpg

io ho provato a lungo ma ho fatto solo casino... HELP...

EDIT: rebump enorme giusto per dire che a distanza di tempo mi ci son rimesso e l'ho fatto, era una cazzata solo che di frame e frameset non ne sapevo molto...
Codice: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<frameset rows="200,*,100" cols="*" frameborder="no" border="0" framespacing="0">

  <frame src="header.htm" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />

  
  <frameset rows="*" cols="100,*" framespacing="0" frameborder="no" border="0">
    <frame src="navi.htm" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
    <frame src="content.htm" name="mainFrame" id="mainFrame" title="mainFrame" />
  </frameset>

<frame src="footer.htm" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomFrame" />
  
  
</frameset>
<noframes><body>
il tuo browser non supporta i frameset... 
</body></noframes>
</html>
 
grazie bro, io avevo provato a fare questo ma fa pena ( partendo dagli esempi di html.it) e non ci va nemmeno vicno a quello che volevo fare....
http://www.mediafire.com/?zlylnzjzyqc
 
<iframe src ="" width="100%" height="10%">
<p>Your browser does not support iframes.</p>
</iframe>

<iframe src ="" width="20%" height="100%" style="margin-top:10px;float:left">
<p>Your browser does not support iframes.</p>
</iframe>

<iframe src ="" width="78%" height="100%" style="margin-top:10px;margin-left:10px;float:right">
<p>Your browser does not support iframes.</p>
</iframe>

<iframe src ="" width="100%" height="20%" style="margin-top:10px;">
<p>Your browser does not support iframes.</p>
</iframe>

qualcosa del genere Jacoboss?
 
prova questo, dovrebbe andare:
http://www.cyberfox.netsons.org/s/stdlayout.html

l'ho scritto per firefox non l'ho testato su altro ma il principio è lo stesso.

"overflow:hidden" fa si che se il contenuto è piu grande del div allora il div se ne fotte e lo lascia nascosto senza far apparire scrollbar o cagate del genere

il div apparentemente inutile prima del footer sotto il commento "spacer" serve per alcuni browser.

ho messo 800px di larghezza, ma attento a quando usi i BORDI!!! ogni pixel di bordo lo devi togliere dalla larghezza!
cosi invece di 800px di width, per esempio, l'header avra' width:798px + due bordi da 1px ciascuno.
 
@plus91:
si qualcosa di molto simile ma il frame centrale a sx ( menu per intenderci) deve avere larghezza fissa e altezza variabile quallo a dx (content) deve avere sia larghezza che altezza variabili e footer deve scorrere e stare attaccato al fondo della pagina fino a un min height
@greyfox:
grey sia con ff che con IE io vedo solo un layout monolitico mi son perso qualcosa?

ps visto che l'utilizzo finale è una pag dinamica basata sul php se avete altre soluzioni legate al php a me stannno benissimo...
 
GreyFox ha detto:
in che senso monolitico?
io lo vedo cosi:http://img63.imageshack.us/img63/1961/catturav.png
magari poi non ho capito che devi fare !
Clicca per espandere...

pardon non monolitico volevo dire a dimensione fissa, il problema è che le varie sezioni, devono occupare tutto lo spazio possibile e solo quello ovvero ridimensionando la finestra del browser le varie sezioni devono adattarsi ai bordi contraendosi ed espandendosi fino ad occupare tutto lo spazio disponibile e solo quello ( fino ad una dimensione minima )
 
@Jaco: avevo chiesto la stessa identica cosa al bronsa per il fooproject, ed è venuto fuori un ottimo risultato, compatibile con tutto se ricordo bene. Aspetta semplicemente che te lo posta ;)
 
orakool ha detto:
@Jaco: avevo chiesto la stessa identica cosa al bronsa per il fooproject, ed è venuto fuori un ottimo risultato, compatibile con tutto se ricordo bene. Aspetta semplicemente che te lo posta ;)
Clicca per espandere...

oky attendo fiducioso thanks,
però è strano un design così dovrebbe essere più comune invece non l'ho trovato da nessuna parte...
eppure di applicazioni ne avrebbe a profusione, forse i layout fliudi non sono molto amati per colpa di accrocchi vari che tocca fare per stare attenti alla compatibilità coi browser... peccato hanno un bel potenziale...
 
GreyFox ha detto:
basta sostituire ai pixel le percentuali
Clicca per espandere...

no, così rimarrebbe il problema del menù che non deve avere una larghezza elastica ma una larghezza fissa e una altezza elastica
cioè footer e header sono a posto
altezza fissa larghezza 100%
però menu deve avere altezza = altezza max - (altezza header + altezza footer) e larghezza fissa mentre content deve avere la stessa altezza di menu e come larghezza = (larghezza max - larghezza menu)... tutto li è questo che non so come fare...
 
capit..
allora posso consigliarti o di sistemare il tutto con javascript
o di usare una tabella...
piu tardi quando avro' tempo provero' un'altra configurazione dei div...
 
ragazzi bronsa non trova il file e orakool non si ricorda la pss qualcuno può aiutarmi a continuare, magari provando a ripartire da zero perchè
ormai è un pò che sta storia va avanti e tra poco mi riiniziano le lezioni e sto buttando del tempo prezioso... suggerimenti validi please?
 
Jacoboss ha detto:
ragazzi bronsa non trova il file e orakool non si ricorda la pss qualcuno può aiutarmi a continuare, magari provando a ripartire da zero perchè
ormai è un pò che sta storia va avanti e tra poco mi riiniziano le lezioni e sto buttando del tempo prezioso... suggerimenti validi please?
Clicca per espandere...

Non è che orakool non ritrova la password e bronsa non ritrova il file, è che il file è dentro l'FTP e Bronsa ha la password. E comunque, quel layout l'ha fatto Bronsa, ci vuole tanto a chiedergli direttamente come ha fatto?
 
orakool ha detto:
Jacoboss ha detto:
ragazzi bronsa non trova il file e orakool non si ricorda la pss qualcuno può aiutarmi a continuare, magari provando a ripartire da zero perchè
ormai è un pò che sta storia va avanti e tra poco mi riiniziano le lezioni e sto buttando del tempo prezioso... suggerimenti validi please?
Clicca per espandere...

Non è che orakool non ritrova la password e bronsa non ritrova il file, è che il file è dentro l'FTP e Bronsa ha la password. E comunque, quel layout l'ha fatto Bronsa, ci vuole tanto a chiedergli direttamente come ha fatto?
Clicca per espandere...
Il fatto è che non ricordo nemmeno io la password ftp e lungi da me il ricordarmi come l'avevo fatto :/
 
[ot]
bronsa ha detto:
orakool ha detto:
Jacoboss ha detto:
ragazzi bronsa non trova il file e orakool non si ricorda la pss qualcuno può aiutarmi a continuare, magari provando a ripartire da zero perchè
ormai è un pò che sta storia va avanti e tra poco mi riiniziano le lezioni e sto buttando del tempo prezioso... suggerimenti validi please?
Clicca per espandere...

Non è che orakool non ritrova la password e bronsa non ritrova il file, è che il file è dentro l'FTP e Bronsa ha la password. E comunque, quel layout l'ha fatto Bronsa, ci vuole tanto a chiedergli direttamente come ha fatto?
Clicca per espandere...
Il fatto è che non ricordo nemmeno io la password ftp e lungi da me il ricordarmi come l'avevo fatto :/
Clicca per espandere...

era tipo C_4MP ma non ci giurerei... (ho tolto una lettera che dovresti ricordarti per non dare la pass a giro anche se nessuno sa la pass di che...)
[/ot]

anyway bro quello che mi hai passato non va bene...
non è a dim variabile è a dim fissa cioè hai dato 766 a centr e 980-776 a right...
con content di 980
a me serviva width 100%
right chessò 150 e centr il resto...
mega help
(intanto posto il tpl li)

un'altra cosa i nomi dei file tutti maiuscoli e i link nei file tutti minuscoli mandano tutto a puttane dal momento che apache e company sono case sensitive... si risolve facile basta rinominare... non si sa mai postasse qualcuno il file non ha formattazione o cose del genere (file di bro )
[attachment=1846]

EDIT:
seguendo i tutorial di un noto sito ho trovato degli esempi che facevano ( in parte ) quello che serviva a me
ora il punto è....
essendo questo: http://www.mediafire.com/?zmkmjg2mztj
quello che ho messo insieme come dao a navi e content un height che arrivi fino al footer?
pensavo bastasse un height = 100% ma nein... non buono
any suggestion?
per capirci verde come dovrebbe essere rosso come è
 
GreyFox ha detto:
http://www.cyberfox.netsons.org/s/stdlayout.html
era piu semplice di quando pensassi...
Clicca per espandere...

grey è quasi perfetto però dovrebbe fare anche questo:
http://www.html.it/guide/esempi/layout_css/mono.php?stile=monoaltmin

per ora ci provo da me se poi avessi problemi ti rompo le scatole di nuovo XD
 
Che nell'esempio il bordo inferiore della pagina è attaccato al bordo inferiore della finestra io sono riuscito solo ad attaccare il footer al fondopagina ora posto il codice..
EDIT eccolo:
Codice: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<style>
/* malaroba */
	html,body
	{
		margin:0;
		padding: 0;
		height: 100%
	}
	div#page
	{
		position: relative; 
		height:100%
	}
	body>div#page
	{
		height: auto;
		min-height: 100%
	}
	div#content
	{
		padding: 0 1.5em 5em
	}
	div#footer
	{
		position:absolute;
		bottom: 0;width: 100%
	} /* malaroba */
       
        div {
          overflow:hidden;
          border:1px solid #333333;
          margin:0;
          padding:0;
        }
        iframe{
           border:0;
        }
</style>

</head>

<body>

	
	<!-- contenitore -->
	<div id= "page" style="width:100%;margin: 0px auto;border:0">
		   
		<!-- header -->
			<div style="clear:both;">
			<iframe style="width:100%;min-height:150px"></iframe>
		</div>
		   
		<!-- contenitore pagina e sidebar -->
		<div id="content" style="clear:both;margin-top:4px;border:0;padding:0;overflow:hidden">
		   
			<!-- sidebar -->
			<div style="float:left;margin-right:5px;">

					<iframe style="width:200px;min-height:250px" ></iframe>

			</div>
		   
			<div style="width:auto;">
					<iframe style="width:100%;min-height:250px" ></iframe>
		   </div>
		   
		</div>
	   
		<!-- spacer -->
		<div style="clear:both;border:0"></div>
	   
		<!-- footer -->
		<div id="footer" style="clear:both;margin-top:4px">
			<iframe style="width:100%;height:20px" ></iframe>
		</div>

	</div>


</body>
</html>
 
Stato
Discussione chiusa ad ulteriori risposte.

DISCUSSIONI SIMILI

M
Domanda python web scraping
  • 2
  • 523
2
523
Python
DidyMond
Top Bottom
Indietro