Originariamente inviato da sitodue
Ciao a tutti, per la prima volta ho implementato in un sito un tab fatto di soli css, seguendo l'esempio della guida presente qui sul forum, ma siccome non ne sono molto pratico ho un paio di dubbi.
Il codice è il seguente:
codice:
<style type="text/css">
.sidebar {
float:left;
width:180px;
height:100%;
}
.content {
width:850px;
height:1300px;
overflow:hidden;
}
#tabs { }
#tabs li {
float:left
}
#tabs li a {
float:left;
display:block;
text-decoration: none;
}
#tab1 {
width:850px;
height:1500px;
}
#tab2 {
width:850px;
height:1000px;
}
</style>
</head>
<body>
<div class="sidebar">
//voci di menu laterale
</div>
<ul id="tabs">[*]1a voce[*]2a voce[/list]
<div class="content">
<div id="tab1">
<a name="tab1" id="tab1"></a>
//contenuto del primo tab
</div>
<div id="tab2">
<a name="tab2" id="tab2"></a>
//contenuto del secondo tab
</div>
</div>
</body>
</html>
Il meccanismo funziona correttamente ma ci sono 2 "inestetismi" che vorrei correggere...
In primo luogo, quando clicco sui relativi tab, la pagina mi si centra sul div evidenziato e poichè i div sono posizionati a partire da una certa altezza in poi, ottengo il brutto effetto che la pagina sia centrata a metà della scrollbar laterale...
Il secondo "insestetismo" è dato dalla differente lunghezza dei 2 div (1500px il primo, 1000px il secondo); se imposto 1300 per entrambi, quando visualizzo il secondo div la pagina risulta essere molto più lunga del suo effettivo contenuto; se imposto 1000px solo per il secondo, quando lo visualizzo mi mostra anche parte del contenuto del primo div, poichè ovviamente sono uno sull'altro!
Quali tecniche posso adottare per correggere?
Rispondi quotando