Ciao a tutti, allora premetto che sto lavorando su del codice consigliato da un utente del forum, abbastanza tempo fa, il codice consiste in una pagina semplice dove c'è un menu con navigazione, inoltre il menu permette di scorrere diverse schede ed aprirle in un unica pagina.
Attualmente è in PHP anche se i comandi relativi sono ben pochi.
Bene la pagina funziona correttamente, ora però vorrei darle un aspetto migliore. Per suddividere la pagina ho dato degli sfondi colorati in maniera da identificare le sezioni, ora vorrei però dare uno sfondo, ovvero mettere nel menu di navigazione come sfondo per ogni voce l'immagine ad esempio di una sceda, come per Firefox e nel riquadro che si apre sotto l'aspetto diciamo di una tabella, in modo da dare un aspetto piu gradevole. Il problema è questo, non sono riuscito a metterci degli sfondi, ho cercato su internet e testato i vari metodi ma nulla, confermo che le immagini erano nel percorso adatto.Codice PHP:<html>
<head>
<style type="text/css">
body{font: 76%/1.3 Arial,sans-serif;background:#FFF;color:#222}
div.tabpanel {width:100%;margin-bottom:2em; margin-left: auto; margin-right: auto; background:black;}
div.tabpanel div.tab{border: 0px solid #D7D7D7;border-top:0; margin-left: auto; margin-right: auto;}
div.tabpanel div.tab{padding: 10px; margin-left: auto; margin-right: auto;}
div.tab h2{width:100%;margin: 0;padding:0.3em 0;font-size:150%;color:white;}
div.tab p{margin-top:0;}
ul.tabnav{width: 100%;overflow:hidden;list-style: none;
margin: 0;padding:0; background:red;}
ul.tabnav li{float: left;margin: 0 0 0 0.5em;padding: 0; background:yellow;}
ul.tabnav a{float: left;padding: 0 0 0 0.8em;
text-decoration: none;color: #41FF32;
border-bottom: 1px solid #D7D7D7;}
ul.tabnav span{float: left;padding: 0.6em 0.8em 0.6em 0;
cursor: pointer; background:blue;}
ul.tabnav a.active,ul.tabnav a:hover{
border-bottom:1px solid #FFF; background:lime;}
ul.tabnav a.active span,ul.tabnav a:hover span{
color: white; }
</style>
<script type="text/javascript">
function makeTabs(oCont,oNav,nDefault) {
var nActive = nDefault || <?if(!isset($_POST['pagina'])){ echo '2'; }else{ echo $_POST['pagina'];}?>, aTabs = [], aLnks = oNav.getElementsByTagName("a"), aChilds = oCont.childNodes;
function show(number) {
for (var i = 0; i < aTabs.length; i++) {
aTabs[i].style.display = i + 1 === number ? "block" : "none";
aLnks[i].className = i + 1 === number ? "active" : "";
}
}
for (var i = 0; i < aChilds.length; i++) {
if (aChilds[i].className === "tab") { aTabs.push(aChilds[i]); }
}
show(nActive);
function change() {
show(parseFloat(this.id.substr(this.id.search(/\d/))));
return(false);
}
for (var i = 0; i < aLnks.length; i++) {
aLnks[i].id = "tabLnk" + String(i + 1);
aLnks[i].onclick = change;
}
}
</script>
</head>
<body onload="makeTabs(document.getElementById('tabcont1'),document.getElementById('tabcont1-nav'));">
<h2><font color="yellow">Parte Fissa </h2>
<ul id="tabcont1-nav" class="tabnav">[*][url="#tab1"]<span>Campo Alfa</span>[/url][*][url="#tab2"]<span>Campo Beta</span>[/url]
[*][url="#tab3"]<span>Campo Gamma</span>[/url][*][url="#tab4"]<span>Campo Delta</span>[/url][/list]
<div id="tabcont1" class="tabpanel">
<div id="tab1" class="tab">
<form action="<?=$_SERVER['PHP_SELF']?>" method="POST">
<?=$_POST['pagina'];?>
<font color="white">Bla Bla Bla.</font>
<input type="hidden" name='pagina' value="1">
<input type="submit" name="salva">
</form>
</div>
<div id="tab2" class="tab">
<form action="<?=$_SERVER['PHP_SELF']?>" method="POST">
<?=$_POST['pagina'];?>
<font color="white"> Bla Bla...
</font>
<input type="hidden" name='pagina' value="2">
<input type="submit" name="salva">
</form>
</div>
<div id="tab3" class="tab">
<form action="<?=$_SERVER['PHP_SELF']?>" method="POST">
<?=$_POST['pagina'];?>
<input type="hidden" name='pagina' value="3">
<input type="submit" name="salva">
</form>
</div>
<div id="tab4" class="tab">
<form action="<?=$_SERVER['PHP_SELF']?>" method="POST">
<?=$_POST['pagina'];?>
<input type="hidden" name='pagina' value="4">
<input type="submit" name="salva">
</form>
</div>
</div>
(PS. Le sezioni che richiedono integrazione dell'immagine sono la sezione blu e la sezione nera)
Grazie a tutti!!!

Rispondi quotando