Salve, sono nuovo su questo forum. Mi sono iscritto perchè ho un grosso problema con la realizzazione di menù sliding doors. Vorrei riuscire a fare un menu che all'interno della stessa pagina mi permetta di navigare. Vi mando il lavoro che ho fatto (il menu l'ho creato con il programma CSS TAB DESIGNER 2), considerate che non conosco linguaggio HTML e vado tutto a senso...Vorrei riuscire a non far scorrere il menu verso destra quando seleziono le voci del menu, in pratica vorrei riuscire a fare l'effetto di sovrapposizione...ma è un casino...è come se le immagini o il testo che metto facciano parte del pulsante...PLEASE HELP ME!!! Grazie in anticipo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<title>Sliding Doors Preview</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #fff; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: small/1.5em Georgia,Serif; COLOR: #000; PADDING-TOP: 0px; voice-family: inherit
}
UNKNOWN {
FONT-SIZE: small
}
#header {
FONT-SIZE: 93%; BACKGROUND: url(bg.gif) #dae0d2 repeat-x 50% bottom; FLOAT: left; WIDTH: 100%; LINE-HEIGHT: normal
}
#header UL {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 10px;
LIST-STYLE-TYPE: none;
position: fixed;
}
#header LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 9px;
BACKGROUND: url(left.gif) no-repeat left top;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
}
#header A {
PADDING-RIGHT: 15px; DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; BACKGROUND: url(right.gif) no-repeat right top; FLOAT: left; PADDING-BOTTOM: 4px; COLOR: #765; PADDING-TOP: 5px; TEXT-DECORATION: none
}
#header A {
FLOAT: none}
#header A:hover {
COLOR: #333;
width: 100%;
font-size: 93%;
line-height: normal;
float: left;
display: block;
position: relative;
}
#header #current {
BACKGROUND-IMAGE: url(left_on.gif)
}
#header #current A {
BACKGROUND-IMAGE: url(right_on.gif); PADDING-BOTTOM: 5px; COLOR: #333
}
#Layer1 {
position:fixed;
width:863px;
height:516px;
z-index:1;
left: 0px;
background-color: #FF00FF;
visibility: visible;
clear: both;
}
#Layer2 {
position:fixed;
width:865px;
height:516px;
z-index:2;
left: 0px;
background-color: #00FFFF;
visibility: visible;
clear: both;
}
#Layer3 {
position:fixed;
width:866px;
height:516px;
z-index:3;
left: 0px;
background-color: #FFFF00;
visibility: visible;
}
#Layer4 {
position:fixed;
width:867px;
height:516px;
z-index:4;
left: 0px;
background-color: #0000FF;
visibility: visible;
}
#Layer5 {
position:fixed;
width:866px;
height:516px;
z-index:5;
left: 0px;
background-color: #000000;
visibility: visible;
}
#Layer6 {
position:fixed;
width:866px;
height:516px;
z-index:6;
left: 0px;
background-color: #00FF00;
visibility: visible;
}
#Layer7 {
position:fixed;
width:867px;
height:516px;
z-index:7;
left: 0px;
background-color: #FF0000;
visibility: visible;
}
#Layer8 {
position:fixed;
width:850px;
height:390px;
z-index:1;
left: 0px;
background-color: #0000FF;
}
#Layer9 {
position:fixed;
width:831px;
height:366px;
z-index:1;
background-color: #9900FF;
visibility: visible;
}
#Layer10 {
position:fixed;
width:831px;
height:366px;
z-index:2;
left: 19px;
background-color: #99FFCC;
visibility: visible;
}
#Layer11 {
position:fixed;
width:900px;
height:366px;
z-index:1;
left: 0px;
background: blue;
visibility: visible;
}
#Layer12 {
position:fixed;
width:900px;
height:366px;
z-index:2;
left: 0px;
background: yellow;
visibility: visible;
}
-->
</style>
<script type='text/javascript'>
<!--
function show ( ele ) {
try {
var div = ele.nextSibling;
if ( div.style.display == 'none' ) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
} catch (e) {}
}
//-->
</script>
</head>
<body>
<div id="header">
<ul>
[*]Home<div style></div>[*]Products<div style='display:none'>[img]../../../Documents/ptwstore/d130.jpg[/img]</div>[*]Services[*]Support[*]Order[*]News[*]About[/list]
</div>
</body>
Rispondi quotando
