Problema CSS, creazione di tabs

Ho un problema CSS che non riesco a capire. Non sono nemmeno sicuro che sia ansible. Quello che voglio è il seguente:

Ho tre pulsanti / tabs come questo http://sv.tinypic.com/r/21cf85t/6 e quando si fa clic su una scheda deve essere visualizzato un div diverso per ogni scheda come questa http://sv.tinypic.com/r / 21l5y85 / 6 o http://sv.tinypic.com/r/2dbrv5u/6 .

So come mostrare / hide i div con jQuery ma il problema è che i div aumenteranno di altezza http://sv.tinypic.com/r/k2xxfb/6 e quindi spingeranno le altre tabs e div. C’è un modo per creare ciò che sto cercando di fare?

Non sono un guru dei CSS quindi se hai un esempio da guardare o posso postare un codice qui sarei molto grato!

Questo è l’HTML che sto utilizzando per le mie tabs:

Content
Content Tab 1
Content Tab 2

CSS:

 .MainContent { float: left; } .TabsHolder { float: left; } .Button1 { float: left; margin: 100px 0px 20px 0px; background: url(images/Button1.png) no-repeat 0 0; height: 79px; width: 27px; } #Tab1 { width: 200px; margin: 80px 0px 20px 0px; border: solid 1px #ACCD45; position: relative; float: left; overflow: hidden; padding: 20px; } .Button2 { float: left; margin: 0px 0px 20px 0px; background: url(images/Button2.png) no-repeat 0 0; height: 97px; width: 27px; } #Tab2 { width: 200px; margin: 0px 0px 20px 0px; border: solid 1px #ACCD45; position: relative; float: left; overflow: hidden; padding: 20px; } div.clearer { clear: both; margin: 0px; margin-bottom: 0px; margin-top: 0px; padding: 0px; line-height: 0px; height: 0px; width: 0px; overflow: hidden; } 

Ecco cosa ho messo insieme usando puro CSS – Testato in Firefox, IE8 e Chrome (non sono sicuro degli altri). Prova una demo qui .

Nota: volevo fare un commento su una cosa nel tuo codice HTML originale: non è ansible aggiungere un’immagine di sfondo a un tag link.

CSS

 .MainContent { float: left; width: 400px; height: 400px; background: #444; } .buttons { float: left; margin: 10px 0 10px 0; width: 27px; clear: both; } .Button1 { background: #555 url(images/Button1.png) no-repeat 0 0; height: 79px; } .Button2 { background: #555 url(images/Button2.png) no-repeat 0 0; height: 97px; } .Button3 { background: #555 url(images/Button3.png) no-repeat 0 0; height: 127px; } .tabsHolder { float: left; position: relative; } .tabs { width: 200px; height: 200px; margin: 0 0 20px 0; border: solid 1px #ACCD45; background: #444; overflow: hidden; padding: 20px; display: none; position: absolute; left: 0; } #tab1 { top: 0; } #tab2 { top: 98px; } #tab3 { top: 215px; } a:hover .tabs {display: block;} 

HTML

 
Content

Dovrai definire le pagine (div da hide / mostrare) e le tabs in due div separate.

Questi vorranno essere flottati uno accanto all’altro, quindi avrai qualcosa come

 
....
....

È quindi ansible impostare un’altezza minima sulle pagine (altezza per IE6, inserire in un foglio di stile condizionale), impostare pagine e tabs su entrambi a sinistra, entrambi con larghezza fissa.

Infine, quando alleghi il tuo evento a $ (‘# tab a’), assicurati di iterare su tutte le pagine nascondendo quelle non rilevanti.

Senza JavaScript, non puoi hide una delle tue div, puoi avere solo una pagina HTML per scheda (come questa o questa ).

Se vuoi qualcosa di più dinamico, dovresti usare JavaScript. Il sistema di tabs è un componente integrato di jQuery, ad esempio. ( Homepage , demo dal vivo ).

Spero che ti possa aiutare.