Salve a tutti,
dono diverse nottate spese a sbattere la testa sul problema mi arrendo all'evidenza che sia necessario chiedere aiuto.
Sto gestendo il sito della mia associazione e vorrei reimpostarlo dandogli un po' più di "vita". Volevo creare una pagina che avesse il layout di una rivista (per capirsi) con una serie di paragrafi articolati come se fossero degli articoli.
Per ottenere ciò ho creato un div contenitore per dare le dimensioni massime della pagina, al suo interno un elenco (ul) i cui vari elementi mi servono a cadenzare in verticale la pagina e all'interno di questi dei div con proprietà float left e right secondo esigenze.
Il tutto però non regge, o meglio, tiene su una pagina e su un'altra invece crea il panico: blocchi di testo che usano margini ignoti e che si sovrappongono ad altri, immagini che schizzano via nell'iperspazio...un macello...
Vi posto il codice nella speranza che qualcuno abbia voglia di perdere tempo a capire qualcosa di quello che ho fatto e a dirmi dove ho sbagliato.
Sono ben accetti anche suggerimenti di qualsiasi natura su una rassettata generale del sistema. Io faccio tutt'altro nella vita e questo "lavoraccio" lo faccio solo perchè non c'è nessun'altro disposto a farlo (oltre che perchè mi diverto 0
)
Grazie!
dono diverse nottate spese a sbattere la testa sul problema mi arrendo all'evidenza che sia necessario chiedere aiuto.
Sto gestendo il sito della mia associazione e vorrei reimpostarlo dandogli un po' più di "vita". Volevo creare una pagina che avesse il layout di una rivista (per capirsi) con una serie di paragrafi articolati come se fossero degli articoli.
Per ottenere ciò ho creato un div contenitore per dare le dimensioni massime della pagina, al suo interno un elenco (ul) i cui vari elementi mi servono a cadenzare in verticale la pagina e all'interno di questi dei div con proprietà float left e right secondo esigenze.
Il tutto però non regge, o meglio, tiene su una pagina e su un'altra invece crea il panico: blocchi di testo che usano margini ignoti e che si sovrappongono ad altri, immagini che schizzano via nell'iperspazio...un macello...
Vi posto il codice nella speranza che qualcuno abbia voglia di perdere tempo a capire qualcosa di quello che ho fatto e a dirmi dove ho sbagliato.
Sono ben accetti anche suggerimenti di qualsiasi natura su una rassettata generale del sistema. Io faccio tutt'altro nella vita e questo "lavoraccio" lo faccio solo perchè non c'è nessun'altro disposto a farlo (oltre che perchè mi diverto 0
)
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bunker Soratte</title>
<link href="bunkerstyle.css" rel="stylesheet" type="text/css">
<!-- carica lightbox per visualizzare immagini java -->
<link href="jpg/lightbox/css/lightbox.css" rel="stylesheet" />
<style type="text/css">
body {
background-color: #000000;
}
</style>
<script type="text/javascript" src="xfade2.js"></script>
<script src="jpg/lightbox/js/jquery-1.10.2.min.js"></script>
<script src="jpg/lightbox/js/lightbox-2.6.min.js"></script>
</head>
<body>
<div id="page" >
<div id="header">
<!-- scritta bunker soratte in alto a sinistra -->
<div id="scritta"></div>
</div>
<!-- header -->
<div id="content">
<!-- riga tra header e menu -->
<div id="riga-grigia" class="pagina"></div>
<!-- menu -->
<ul id="menu">
<li><a href="chi_siamo.html" class="chi_siamo_page"></a></li>
<li><a href="dove_siamo.html" class="dove_siamo"></a></li>
<li><a href="storia.html" class="storia"></a></li>
<li><a href="info.html" class="info"></a></li>
<li><a href="index.html" class="home"></a></li>
<li><a href="prenotazioni.html" class="prenotazioni"></a></li>
<li><a href="contatti.html" class="contatti"></a></li>
<li><a href="link.html" class="link"></a></li>
<li><a href="gallery.html" class="gallery"></a></li>
</ul>
<!-- spazio tra menu e testo pagina -->
<div id="blocco_vuoto"></div>
<!-- testo pagina in blocchi in lista -->
<ul id="blocchi_testo">
<li id="blocchi_testo" class="paginaintera">
<div id="spazio_testo" class="sinistro_50x100">
<p class="Titolo">L'Associazione "Bunker Soratte"</p><br />
<div id="riga-grigia" class="testi"><br /><p class="Testo">“Bunker Soratte” è un'Associazione culturale formata da menti libere intellettualmente e politicamente, pensata con l'unico scopo di valorizzare, riesumare ed esorcizzare la storia, i miti e le leggende che gravitano attorno alle gallerie della ex-zona militare del monte Soratte.
L'idea di riunirci in libera Associazione con obiettivi meramente culturali nasce sia dall'esigenza di scoprire un capitolo di storia solo parzialmente noto, sia dalla necessità di valorizzare luoghi pregni di memoria e fino a poco tempo fa vietati al pubblico.Un capitolo di storia santorestese che costituisce un piccolo ed incredibile tassello del più grande mosaico della storia d'Italia del Novecento: dalle officine protette del Duce, al quartier generale segreto delle truppe naziste del Feldmaresciallo Albert Kesselring, fino ai più recenti rifugi anti-atomici del governo italiano realizzati durante il periodo della guerra fredda: oltre 4 Km di gallerie riconsegnate, solo da poco, ai civili.
Attraverso il museo diffuso “Percorso della Memoria”, ove sono ancora ben evidenti le ferite del bombardamento dell’aviazione alleata del 1944, saremo lieti di condurvi nelle viscere del Soratte con rievocazioni storiche, filmati e allestimenti museali ricavati all’esterno ed all’interno delle gallerie.
Si avrà così modo di rivivere i momenti cruciali della Seconda Guerra Mondiale e della Guerra Fredda, in un contesto sempre ritenuto segretissimo, a pochi minuti da Roma.
L’Associazione promuove ricerche e percorsi formativi attraverso corsi, convegni, pubblicazioni e manifestazioni periodiche in Italia e all’estero.*</p></div></div><div id="immagine_testo" class="destra"><br/><br/><br/><a href="jpg/lightbox/img/carro.png" data-lightbox="image-1" title="Carro M60"><img src="jpg/lightbox/img/carro-tumb.png" width="420" height="323" /></a></div>
</div>
</li>
<li id="blocchi_testo" class="paginaintera">
<div id="immagine_testo" class="sinistra" >
<div class="pulsante">
<a href="jpg/lightbox/img/cannone.png" data-lightbox="image-2" title="Allestimenti">
<img class="normale" src="jpg/lightbox/img/cannone-tumb-nb.png" width="175" height="162" />
<img class="over" src="jpg/lightbox/img/cannone-tumb-color.png" width="175" height="162" /></a>
</div>
</div>
<div id="immagine_testo" class="sinistra" >
<div class="pulsante">
<a href="jpg/lightbox/img/cenabunker.png" data-lightbox="image-3" title="Cena Bunker Soratte">
<img class="normale" src="jpg/lightbox/img/cenabunker-tumb-nb.png" width="175" height="162" />
<img class="over" src="jpg/lightbox/img/cenabunker-tumb-color.png" width="175" height="162" /></a>
</div>
</div>
<div id="spazio_testo" class="destro">
<p class="Titolo">Valorizzazione e recupero delle Gallerie del Monte Soratte</p><br />
<div id="riga-grigia" class="testi"><br />
<p class="Testo">L'Associazione “Bunker Soratte” opera in due direzioni: la prima di ricerca e la seconda di diffusione dell'informazione. Gli iscritti all'Associazione effettuano continuamente indagini volte alla raccolta della maggior quantità possibile di materiale attinente il sito e la sua storia, con l'intento di costituire una memoria degli eventi legati alla costruzione del complesso e ai suoi successivi utilizzi. Proprio per questo motivo l'Associazione organizza visite guidate e manifestazioni; queste ultime sono arricchite dalla presenza di allestimenti, di postazioni militari con mezzi bellici e figuranti in divisa organizzate dall'Associazione “Vestigia Belli” (vedi sotto “Le Associazioni Partners”).<br /></p>
</div>
</div>
</li>
<li id="blocchi_testo" class="paginaintera"><div id="spazio_testo" class="sinistro"><p class="Titolo">Cosa facciamo</p><br /><div id="riga-grigia" class="testi"><br /><p class="Testo">
L'Associazione “Bunker Soratte” si occupa di promuovere e recuperare il sito delle Gallerie del monte Soratte e la Storia ad esso legata, in particolare gli eventi che portarono alla costruzione di questa imponente opera di ingegneria militare, alla successiva occupazione dell’area da parte del Feldmaresciallo Albert Kesselring, alla riconversione di una parte di questi corridoi ipogei in bunker antiatomico ad opera della Nato, nel corso degli anni '70.</p>
</div>
</div>
</li>
<li id="blocchi_testo" class="paginaintera">
<div id="spazio_testo" class="sinistro">
<p class="Titolo">Mezzi di sostentamento dell'Associazione</p><br />
<div id="riga-grigia" class="testi"><br /><p class="Testo"> L'Associazione “Bunker Soratte” è una realtà santorestese senza scopo di lucro: il contributo che si richiede per le visite guidate, viene prontamente reinvestito per l'esecuzione di lavori di messa in sicurezza e allestimento del percorso.<br/>E' possibile vedere il bilancio dell'associzione <a href="documenti/bilancio2012.pdf">qui.</a></p></div></div>
<div id="spazio_testo" class="destro"><p class="Titolo">Associazioni Partner</p><br /><div id="riga-grigia" class="testi"><br /><p class="Testo">- Associazione Vestigia Belli<br />- Associazione Avventura Soratte</p></div></div></li>
<div id="spazio_testo" class="destro">
<div id="blocchi_testo" class="sinistro"><a href="jpg/lightbox/img/rospo.png" data-lightbox="image-4" title="Allestimento"><img src="jpg/lightbox/img/rospo-tumb-nb.png" width="350" height="323" /></a></div>
<div id="blocchi_testo" class="destro"><a href="jpg/lightbox/img/macchina.png" data-lightbox="image-5" title="Allestimento"><img src="jpg/lightbox/img/macchina-tumb.png" width="350" height="323" /></a></div></li>
</ul>
</div><!-- /content -->
<div class="clear"></div>
<div id="footer" style="clear:both">
<div id="riga-grigia" class="pagina"></div>
<p class="Testo" align="center"> Associazione Culturale Bunker Soratte </p><br /><br /><div align="center"><a href="https://www.facebook.com/groups/123393667673015/?bookmark_t=group">
<div class="pulsante">
<img src="jpg/fb.png" width="25" height="25" class="normale" />
<img class="over" src="jpg/fbover.png" width="25" height="25" /></div><div id="scritta_pulsante">
Seguici su Facebook </div></a><div class="pulsante"><img src="jpg/telefono.png" width="25" height="25" /><div id="scritta_pulsante" class="Testo"> Telefono </div></div><a href="mailto:"><div class="pulsante">
<img src="jpg/mail.png" width="25" height="25" class="normale" />
<img class="over" src="jpg/mailover.png" width="25" height="25" /><div id="scritta_pulsante"> </div></div></a></div></div>
</div><!-- /footer -->
</div>
</body>
Codice:
@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0; }
/* Tutta la pagina */
#page{
width: 100%;
background-color:#000000;
}
/* Testa */
div#header{
background-color:#0a0a0a;
position:relative;
top:0;
z-index:0;
height: auto;
}
/* Corpo */
div#content{
background-color:#000000;
position:relative;
z-index:0;
width:100%;
}
/* Fondo */
div#footer{
background-color:#000000;
position:relative;
width:100%;
height:100px;
z-index:1;
padding-top:20px;
}
/* Scritta bunker */
div#scritta {
background-image:url(jpg/bunkersoratte3.png);
width:450px;
height:110px;
top: 0;
left: 50%;
margin-left: -530px;
position:relative;
z-index:2;
display:block;
}
/* slideshow */
div#slideshow {
cursor: pointer;
width:1800px;
height:400px;
bottom: 0;
margin-left:-900px;
left: 50%;
position:relative;
z-index:1;
}
#slideshow img {
display: none;
position: absolute;
top: 0;
left: 0;
}
/*riga grigia ai lati del menu*/
div#riga-grigia.pagina {
position:absolute;
height:50px;
width:100%;
z-index:1;
background:url(jpg/rigagrigia.png);
background-position: 0 -2px;
top:0;
left:0;
}
/*riga grigia tra testi e titoli*/
div#riga-grigia.testi {
position:relaive;
height:50px;
width:100%;
z-index:1;
background:url(jpg/rigagrigia.png);
background-position: 0 -2px;
left:0;
top: 0;
}
ul#menu{
list-style: none;
position: absolute;
z-index: 2;
height: 100px;
width: 1024px;
margin-left: -512px;
left: 50%;
top: 0px;
}
ul#menu li {
float: left;
line-height: 100px;
}
ul#menu li a{
display: block;
overflow: hidden;
margin-right: 0;
outline: none;
height: 100px;
background: url('jpg/menu1.png');
}
ul#menu li a.chi_siamo {width: 120px; height:100px; background-position: 0 -3px;}
ul#menu li a.chi_siamo:hover {width: 120px; height:100px; background-position: 0 -116px;}
ul#menu li a.chi_siamo_page {width: 120px; height:100px; background-position: 0 -116px;}
ul#menu li a.chi_siamo_page:hover {width: 120px; height:100px; background-position: 0 -116px;}
ul#menu li a.dove_siamo {width: 104px; height:100px; background-position: -121px -3px;}
ul#menu li a.dove_siamo:hover {width: 104px; height:100px; background-position: -121px -116px;}
ul#menu li a.storia {width: 61px; height:100px; background-position: -225px -3px;}
ul#menu li a.storia:hover {width: 61px; height:100px; background-position: -225px -116px;}
ul#menu li a.info {width: 50px; height:100px; background-position: -287px -3px;}
ul#menu li a.info:hover {width: 50px; height:100px; background-position: -287px -116px;}
ul#menu li a.home {width: 360px; height:100px; background-position: -338px -3px;}
ul#menu li a.home:hover {width: 360px; height:100px; background-position: -338px -116px;}
ul#menu li a.prenotazioni {width: 107px; height:100px; background-position: -698px -3px;}
ul#menu li a.prenotazioni:hover {width: 107px; height:100px; background-position: -698px -116px;}
ul#menu li a.contatti {width: 77px; height:100px; background-position: -806px -3px;}
ul#menu li a.contatti:hover {width: 77px; height:100px; background-position: -806px -116px;}
ul#menu li a.link {width: 48px; height:100px; background-position: -883px -3px;}
ul#menu li a.link:hover {width: 48px; height:100px; background-position: -883px -116px;}
ul#menu li a.gallery {width: 97px; height:100px; background-position: -932px -3px;}
ul#menu li a.gallery:hover {width: 97px; height:100px; background-position: -932px -116px;}
/*lista di elementi che occupano l'intera pagina*/
ul#blocchi_testo {
display: block;
list-style: none;
width:1024px;
z-index:1;
margin:0 auto;
}
ul#blocchi_testo li.paginaintera{
display: block;
align: left;
width: 100%;
background-color: #000000;
}
/*div che sono racchiusi negli elementi della lista "blocchi testo"*/
div#spazio_testo {
display: block;
width:1024px;
z-index:1;
margin:0 auto;
}
div#spazio_testo.100x100{
display: block;
position: relative;
align: left;
width: 800px;
margin-left:3%;
margin-bottom: 24%;
background-color: #000000;
height:auto;
padding-bottom:3%;
}
div#spazio_testo.sinistro{
display: block;
align: left;
width: 40%;
margin-left:3%;
margin-bottom: 24%;
float: left;
background-color: #000000;
height:auto;
padding-bottom:3%;
}
div#spazio_testo.sinistro_50x100{
display: block;
align: left;
width: 50%;
margin-left:3%;
margin-bottom: 24;
float: left;
background-color: #000000;
padding-bottom:3%;
}
div#spazio_testo.destro_50x100{
display: block;
align: right;
width: 50%;
margin-bottom: 24%;
float: right;
background-color: #000000;
padding-bottom:3%;
}
div#spazio_testo.destro{
display: block;
align: right;
width: 40%;
margin-right: 3%;
margin-bottom: 24%;
float: right;
background-color: #000000;
padding-bottom:3%;
}
div#blocco_vuoto {
display:block:
position:relative;
height: 100px;
width: 100%;
}
div#blocco_vuoto.100x100 {
display:block;
height: 200px;
width: 1023px;
}
.Testo {
color: #929292;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
line-height: 20px;
}
.Titolo {
color:#ffffff;
font-size: 26px;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
line-height: 40px;
}
.Sottotitolo {
color: #929292;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
}
a:link {
color: #929292;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
}
a:active {
color: #FFFFFF;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
}
a:visited {
color: #929292;
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
text-decoration: none;
}
/*pulsante leggi*/
.pulsante { display:inline;}
.normale {display: inline;}
.over {display: none;}
.pulsante:hover .normale {display: none;}
.pulsante:hover .over {display: inline;}
img {
border:0;
display:inline;
}
/*div che contirne le immagini*/
div#immagine_testo.destra {
padding-left:20px;
float: right;
display:block;
margin-bottom:10%;
}
/*div che contirne le immagini*/
div#immagine_testo.sinistra {
margin-left: 3%;
float: left;
display:block;
}
/*div che contirne le scritte di lato alle icone a fondo pagina*/
div#scritta_pulsante {
display:inline;
padding: 1px;
height: 40px;
}Grazie!
