- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Sliding Doors con css
-
Sliding Doors con css
Buongiorno a tutti.
In Internet ho trovato il modo di creare uno Sliding Doors orizzontale, ideale per le mie esigenze. Così com'è è perfetto e funziona. Ora però mi sono messo in testa di capovolgerlo e, le palette arrotondate, invece di andare verso l'alto vorrei scendessero verso il basso. Pensavo bastasse rifare le immagini e capovolgere il tutto ma mi sbagliavo. Troppo semplice per essere vero!!!
Posto il codice CSS :#header{
width:100%;
float:left;
background-color:transparent;
background:url(img/sfondo-invertito.gif) repeat-x top;
font-size:70%;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-bottom:15px;
}
ul{
margin:0;
padding:10px 10px 0;
letter-spacing:.1em;
list-style:none;
font-size:1.1em;
}
li{
margin:0;
padding:0;
float:left;
background:url(img/bordo_dx_invertito.gif) right bottom no-repeat;
}
#active{
background:url(img/bordo_dx_active_invertito.gif) right bottom no-repeat;
}
a{
background:url(img/bordo_sx_active_invertito.gif) left bottom no-repeat;
padding-bottom:4px;
color:#FFFFA4;
}
a{
text-decoration:none;
display:block;
background:url(img/bordo_sx_invertito.gif) left bottom no-repeat;
padding:4px 16px 4px;
color:#fff;
}
a:hover{
color:#FFFFA4;
}![image](file:///C:/DOCUME%7E1/miro/IMPOST%7E1/Temp/moz-screenshot.jpg)![image](file:///C:/DOCUME%7E1/miro/IMPOST%7E1/Temp/moz-screenshot-1.jpg)Questo è l'HTML:
<div id="header">
<ul>
<li id="active"><a href="index.html"> Home </a></li>
<li><a href="Chisiamo.html"> Chi siamo </a></li>
<li><a href="Dovesiamo.html"> Dove siamo </a></li>
<li><a href="Specialisti.html">Specialisti</a></li>
<li><a href="Servizi.html"> Servizi </a></li>
<li><a href="Contatti.html"> Contatti </a></li>
</ul>
</div>Il problema è che, capovolgendo le immagini, ora mi taglia la parte bassa delle palette e negli angoli smussati si vede il colore verde di cui è composta la paletta.
Dove sbaglio? Cosa devo correggere? Bastano delle correzzioni o è tutto da rifare?Volevo anche inserire un paio di immagini per far vedere quel che succede ma non so come fare ad allegarle.
Spero siano sufficenti le mie spiegazioni.
Grazie
-
Puoi postare un link dove si vede il funzionamento?
Ciao
-
Posso solo darti il link delle palette che funzionano.
Dopo l'http e i 2 / / (senza la tripla w) mirolan.altervista.org/index (punto) htmlQuello "rovesciato" c'è l'ho in una cartella di prova sull'HD.
Come posso fare per farti vedere la differenza?
Grazie
-
Sono riuscito a mettere in linea quello che si vede capovolgendo le palette come dicevo sopra.
Se vai qui lo vedi:accatitipi://xoomer.virgilio.it/mirkhorn/
qui invece si possono vedere le palette dritte (quelle che vanno bene)
accatitipi://mirolan.altervista.org/index.html
Devo dire che è più una testardaggine mia quella di voler capovolgere le palette perchè così come sono già andrebbero benissimo.
Se qualcuno riuscisse a darmi una mano gliene sarei molto grato.
Grazie
-
Rieccomi,
per quanto riquarda l'immagine "bordo_sx_invertito.gif" quella originale ha l'angolo incriminato bianco mentre il tuo è trasparente.Per quanto riquarda la parte bassa tagliata... non mi risulta.
Spero di esserti stato utile
Valentino
-
Gentilissmo Lumpi,
avevi perfettamente ragione!!!
Ho sostituito le immagini dando lo sfondo bianco ed è sparito quell'antipatico angolino verde.
Ora si vede bene. Se vai allo stesso indirizzo di xoomer puoi vedere il risultato.Ti chiederei un'altra cortesia.
Tu sai cosa devo fare (quali istruzioni cambiare) per alzare le palette sino ad avvicinarle alla riga grigia superiore dello sfondo?
Io ci ho provato in tutti i modi ma non ci riesco.
Ancora grazie.
-
Ciao,
sono contento di averti aiutato.Per quanto riguarda il bordino superiore devi impostare #header ul in stile.css a padding: 0px 10px
-
Gentilissimo Valentino,
sembra incredibile come diventino semplici le cose quando te le spiegano!!!
Per cercare di spostare quelle palette le avevo provate tutte, anzi, quasi tutte, visto che bastava fare come mi hai indicato tu.
Da solo non ci sarei mai arrivato.
Grazie
Ora funziona tutto e sono riuscito a girarle come volevo io.
Se vai sul sito di mirolan/altervista potrai goderti anche tu il risultato.
Grazie ancora.
Miro