Colonna a scomparsa

**^EvAmPiReS^** · 20-06-2007, 21:19

Salve a tutti ho sviluppato un sito web a 3 colonne con i float, vorrei sapere qual è il modo più semplice per rendere la colonna di destra "a scomparsa", magari cliccando su un bottone che allunghi il container centrale fino alla massima width rimuovendo la suddetta colonna...magari se potreste linkarmi qualche esempio...grazie

**ricman** · 21-06-2007, 08:50

Originariamente inviato da ^EvAmPiReS^
Salve a tutti ho sviluppato un sito web a 3 colonne con i float, vorrei sapere qual è il modo più semplice per rendere la colonna di destra "a scomparsa", magari cliccando su un bottone che allunghi il container centrale fino alla massima width rimuovendo la suddetta colonna...magari se potreste linkarmi qualche esempio...grazie

Se tu avessi usato la Ricerca avresti ottenuto, ad esempio, questa pagina

**^EvAmPiReS^** · 21-06-2007, 12:18

Grazie, è che volevo evitare l'utilizzo di javascript, ma a questo punto credo che cederò

**ricman** · 21-06-2007, 13:00

Originariamente inviato da ^EvAmPiReS^
Grazie, è che volevo evitare l'utilizzo di javascript, ma a questo punto credo che cederò

Cedi cedi.... è l'unico modo per cambiaro lo stato di un oggetto.
L'alternativa sarebbe in un linguaggio a tua scelta con "ricarico" della pagina...

**Vincent.Zeno** · 21-06-2007, 13:15

altrimenti, sempre con l'uso di JS, c'è questa soluzione proposta de pierofix:

codice:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML lang=it xml:lang="it" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>esempio 1 mostra-nascondi</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css media=screen>
BODY {
	FONT-SIZE: 13px; COLOR: #333; FONT-FAMILY: "Trebuchet MS", serif
}
OL {
	BORDER-TOP: #fff 1px solid; WIDTH: 350px; LIST-STYLE-TYPE: none
}
LI {
	BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 6px; PADDING-LEFT: 6px; FONT-SIZE: 11px; PADDING-BOTTOM: 6px; MARGIN: 0px; BORDER-LEFT: #fff 1px solid; PADDING-TOP: 6px; BORDER-BOTTOM: #fff 1px solid; BACKGROUND-COLOR: #cc9
}
LI:hover {
	BACKGROUND-COLOR: #d1d1a3
}
LI A {
	DISPLAY: block; FONT-SIZE: 13px; COLOR: #c60; TEXT-DECORATION: none
}
LI A:hover {
	COLOR: #f90; TEXT-DECORATION: none
}
LI SPAN {
	BORDER-TOP: #c60 1px solid; DISPLAY: none; PADDING-TOP: 6px
}
</STYLE>

<SCRIPT><!--
	function hided(obj) {
		var aId="a"+obj
		document.getElementById(obj).style.display="none"
		document.getElementById(aId).href="javascript:showd(" + "'" + obj + "'" + ");"
	}
	
	function showd(obj) {
		var aId="a"+obj
		document.getElementById(obj).style.display="block"
		document.getElementById(aId).href="javascript:hided(" + "'" + obj + "'" + ");"
	}
//--></SCRIPT>

</HEAD>
<BODY>
<H1>Un bel mostra-nascondi in stile DOM</H1>


Clicca sui titoli per vedere una breve descrizione dell'articolo. Clicca una 
seconda volta per nasconderla.</P>
<LI><A id=ad1 href="javascript:showd('d1')">Internet Explorer nel 
  cestino</A><SPAN id=d1> Quando l'aria di rivoluzione si respira anche nel 
  web.</SPAN> 
  <LI>Ciao<SPAN id=d2> Un messaggio 
  breve scritto da uno che si nasconde dietro un nick.</SPAN> 
  <LI>Che strano!<SPAN id=d3> Il 
  miglior ricettario sulla vita scolastica mai scritto prima da un ex 
  allievo.</SPAN> </LI>
</BODY>
</HTML>

**ricman** · 21-06-2007, 14:55

Si... però non usate le maiuscole così nel codice [[si lo so... sono rompico###oni

]]

Discussione: Colonna a scomparsa

Strumenti discussione

Ricerca discussione

Visualizza

Colonna a scomparsa

Re: Colonna a scomparsa

Permessi di invio