Come creare una toolbar personalizzata? (Era: Barra [Help])

05-02-2011, 16.14.20

Salve a tutti, sto rinnovando un sito e quindi si trova off line. Però vorrei inserire una barra http://www.djrevolution.it/ in tal modo che le persone possono essere indirizzate ai social network.
Vorrei fare una cosa come questo sito: www.lucadorigo.com

Cosa dovrei fare? Ovviamente la barra e il resto deve essere compatibile con ogni browser e risoluzione di schermo.

Per favore aiutatemi... :)
Grazie, cordiali saluti

**darkwolf** · 05-02-2011, 16.34.57

Per fare una cosa simile ho semplicemente sfruttato la toolbar di AV

Facile, veloce e pronta all'uso :)

05-02-2011, 16.45.37

Si ma là ci sono scritte tutte le cose di altervista... io la devo personalizzare. Come faccio? Spiegami un pò :)

**darkwolf** · 05-02-2011, 16.57.26

Allora, se ne vuoi una personalizzata, devi agire via html e css.
Una roba simile dovrebbe andare (da mettere subito dopo il <body>)
NB: assegna un buon margine inferiore allo stesso body altrimenti non vedrai l'intera pagina.

Codice HTML:

<div style="width: 100%; height: 30px; text-align: center; margin: 0px auto; padding-top: 15px; background-color: black; color: white; position: fixed; bottom: 0;">qui il codice con le icone e i link ai vari social</div>

Ovviamente è solo una bozza (ma un buon punto di partenza).

05-02-2011, 17.00.00

Aspetta, provo ;)
-
Quasi perfetta ma...
a sinistra non è "attaccata" allo schermo, come mai? E poi ho posizionato il testo a destra, e scrivendo Social Network si vede solamente "Social Netwo". Il resto viene "inghiottito"! Io la vedo su una risoluzione di 1024 x 768 pixel.

Mi puoi dare anche il codice per creare l'effetto delle immagini da bianco nere al loro colore originale? Così le posiziono nella barra

**darkwolf** · 05-02-2011, 17.27.52

Non noto distanziamenti (mi sembra correttamente posizionata)

Per le immagini, sempre tramite css, potresti metterne 2 (una scura di default e una colorata con effetto hover)

05-02-2011, 17.34.45

Originalmente inviato da darkwolf

Non noto distanziamenti (mi sembra correttamente posizionata)

Per le immagini, sempre tramite css, potresti metterne 2 (una scura di default e una colorata con effetto hover)

Ok fatto. Ultimo problema. Adesso devo scrivere una cosa a sinstra della barra. Che codice aggiungo?

**darkwolf** · 05-02-2011, 17.40.42

Originalmente inviato da revolutiondj

Ok fatto. Ultimo problema. Adesso devo scrivere una cosa a sinstra della barra. Che codice aggiungo?

Ma per il fatto che non era attaccata a sinistra hai risolto (qual era il problema dato che io non lo noto)?
Destra e sinistra:

Codice HTML:

<div style="width: 100%; height: 30px; margin: 0px auto; padding-top: 10px; background-color: black; color: white; position: fixed; bottom: 0;">
<span style="float:left; margin-left: 10px;">
testo a sinistra
</span>
<span style="float:right; margin-right: 10px;">
<a href="http://facebook.com/MrDjRevolution/"><img src="http://revolutiondj.altervista.org/facebook.png"></a> 
<a href="http://youtube.com/MrDjRevolution/"><img src="http://revolutiondj.altervista.org/youtube.png"></a> 
<a href="http://twitter.com/MrDjRevolution/"><img src="http://revolutiondj.altervista.org/twitter.png"></a> 
<a href="http://myspace.com/MrDjRevolution/"><img src="http://revolutiondj.altervista.org/myspace.png"></a>
</span>
</div>

05-02-2011, 17.47.54

Grazie mille, sei un mito ;)

**darkwolf** · 05-02-2011, 17.52.27

Prego ma:
1) Non hai risposto alla domanda sul problema di visualizzazione (giusto per curiosità, dato che io non l'ho notato);
2) Adesso che hai la bozza sarebbe bene riscrivere via css (assegnando singoli id alla toolbar; toolbar_sx e toolbar_dx - giusto per ordine e pulizia);
3) Non hai applicato l'hover per sostituire le immagini (bisogna agire sempre tramite css, assegnando due immagini diverse [default + hover] ai singoli link).

06-02-2011, 15.01.07

1. Non sò come l'ho risolto :)
2. Non sò come migliorare il codice. Ma è meglio lasciar perdere, fra un mese devo aprirlo il sito
3. No vanno bene così le immagini

Discussione: Come creare una toolbar personalizzata? (Era: Barra [Help])

LinkBack

Strumenti discussione

Display

Come creare una toolbar personalizzata? (Era: Barra [Help])

Regole di scrittura