JuliusDesign

MySpace in Flash: Posizionare i moduli Friends e Comments

di Letture: 1.744

L’altra volta avevamo visto come creare la contact table orizzontale all’interno di MySpace

Oggi vedremo come posizionare il modulo degli amici e commenti in un account

Nelle prossime settimane, sempre con il supporto del bravo Stefano, impareremo a gestire via CSS i colori del layout e alcune accortezze su come modificare account MySpace Music

Andiamo a vedere insieme il codice CSS da inserire:

Questo è il codice compreto da inserire nel box “Chi sono” sotto la classe precedentemente creata durante la Lezione 1e 2 il codice CSS:

<style>
body{ background-color: E5E5E5;}
body table div font a, body table div div {visibility:hidden;}
.div #footerWarpper { visibility:hidden;}
.flashModulo {
top:200px;
width:800px;
height:500px;
position: absolute;
left: 50%;
margin-left: -400px;}
.contactTableModulo {
height:150px;
left:50%;
margin-left:-400px;
position:absolute;
top:174px;
width:800px;
}
table.friendSpace {
width:800px !important;
height: auto;
position:absolute;
top:700px;
left:50%;
margin-left:-400px;
overflow:visible;
background-color: FFFFFF;
border-top:0px solid 0d0d0d;
border-right:0px solid 0d0d0d;
border-left:0px solid 0d0d0d;
}
table.friendSpace tbody tr td {
font-family:Tahoma;
font-size:10px;
font-weight:normal;
}
.friendSpace a:link {color:ffffff;font-family:Trebuchet ms, tahoma;}
.friendSpace a:visited {color:ffffff;font-family:Trebuchet ms, tahoma;}
.friendSpace a:hover {color:ffffff;font-family:Trebuchet ms, tahoma;}
.friendSpace a:active {color:ffffff;font-family:Trebuchet ms, tahoma;}</style>
<style>table.friendSpace tbody tr td table tbody tr td table {
border-bottom:0 solid 0d0d0d;}
table.friendSpace tbody tr td table tbody tr td table tbody tr td table {
width:185px !important;
align:center !important;
border:0 solid 0d0d0d;
background-color: FFFFFF;
font-family: Tahoma;
font-size:10px;
font-weight:normal;
}
.friendsComments {
align:center;
position:absolute;
top:1090px;
left:50%;
margin-left:-400px;
width:800px;
overflow:visible;
background-color: FFFFFF;
border:0px solid 0d0d0d; }
</style>

Scarica Codice

Una cosa molto importante nel posizionamento dei blocchi tra cui gli amici e i commenti e l’atributo CSS top:<valore numerico>;

Infatti indica la distanza del nostro modulo dall’inizio della pagina web espresso in pixel

Andiamo a vederlo nei dettagli:

Posizionare il modulo amici

table.friendSpace {
width:800px !important;
height: auto;
position:absolute;
top:2000px;
left:50%;
margin-left:-400px;
display:block;
overflow:visible;
background-color: 000000;
border-top:0px solid 0d0d0d;
border-right:0px solid 0d0d0d;
border-left:0px solid 0d0d0d;
}

Codice relativo alla tabella

table.friendSpace tbody tr td {
font-family:Tahoma;
font-size:10px;
font-weight:normal;
}

Parte relativa ai link del modulo degli amici piu precisamente definisce il font e il colore

.friendSpace a:link {color:ffffff;font-family:Trebuchet ms, tahoma;}
.friendSpace a:visited {color:ffffff;font-family:Trebuchet ms, tahoma;}
.friendSpace a:hover {color:ffffff;font-family:Trebuchet ms, tahoma;}
.friendSpace a:active {color:ffffff;font-family:Trebuchet ms, tahoma;}

Tabella del modulo amici

table.friendSpace tbody tr td table tbody tr td table {
border-bottom:0 solid 0d0d0d;
}

Parte relativa alle spaziature fra gli elementi del modulo degli amici

table.friendSpace tbody tr td table tbody tr td table tbody tr td table {
width:185px !important;
align:center !important;
border:0 solid 0d0d0d;
background-color: 000000;
font-family: Tahoma;
font-size:10px;
font-weight:normal;
}

Posizionare i commenti in modo centrato

.friendsComments {
align:center;
position:absolute;
top:3990px;
left:50%;
margin-left:-400px;
width:800px;
overflow:visible;
background-color: 000000;
border:0px solid 0d0d0d; }

Potete vedere l’esempio di Spazio MySpace a questo indirizzo: MySpaceFlashTutorial

Author

Sono un Creative Strategist con più di 10 anni di esperienza in strategie digitali. Il mio ruolo di Stratega consiste nell’ideare e sviluppare concept creativi per progetti multicanale, individuando le attivazioni e dinamiche di Marketing da applicare attraverso un approccio strategico.

Chi ha letto questo articolo ha letto anche

22 Commenti

  1. Simone

    Questi codici però valgono con i vecchi myspace, com la nuova versione di myspace le cose cambiano un bel pò!

    Cita / Quota
  3. Simone

    beh in realtà la prima versione di myspace era impostata come una matriosca con una serie di tabelle annidate, con il myspace 2.0 hanno riorganizzato tutto usando dei div, e in più sono cambiati anche i nomi degli id e dei class dei vari moduli del myspace…. es. non si parla più di
    .friendsComments ma si parla di div.commentsModule e così anche per altri moduli ma smanettando un pò si trovano subito… Spero di esserti stato utille, ciao.

    Cita / Quota
  4. Alphadog

    Simone, quindi pure quello detto in precedenza (nelle altre lezioni) non ha valore?

    :-(

    Cita / Quota
  5. Simone

    bhe no la parte del posizionamento del modulo flash può essere usato anche nel myspace 2.0, poi in raltà le parti relative al css vanno bene, bisogna però cambiare i class altrimenti non funzionano…

    Cita / Quota
  6. Nicola

    Ciao Julius.. A quando il prossimo articolo relativo ai colori del layout via CSS? Complimentoni per il tuo blog..

    Cita / Quota
  7. DAMN!

    Giuliano sembra che hai abbandonato questo argomento. comunque se qualcuno passa di qui potrebbe dirmi come si cambiano i class? ( ne parlava Simone il 26 novembre 2008!)
    vi ricordo che questi tutorial rimangono sempre e per chi passa di qui sono utili a capire, ma da quello che ho letto non ho trovato una soluzione. Insomma nel profilo 2.0 il posizionamento del modulo flash?

    siamo rimasti sempre al CSS

    .flashModulo {
    top:200px;
    width:800px;
    height:500px;
    position: absolute;
    left: 50%;
    margin-left: -400px;}
    .contactTableModulo {
    height:150px;
    left:50%;
    margin-left:-400px;
    z-index:9
    }

    ————————

    E poi?

    p.s. un’altra cosa

    ho ho provato a mettere questo codice in un modulo html:

    l’indirizzo http:// vi fara’ vedere l’immagine in flash
    ma non capisco perche’ c’e’ scritto File Size: 0.00MB
    (?????)
    cosa sbaglio?

    Cita / Quota
  15. DAMN!

    finsce con
    pluginspage=”http://www.macromedia.com/go/getflashplayer” allowscriptaccess=”never”
    allownetworking=”internal”>
    ;((

    Cita / Quota
  16. DAMN!

    il codice si trova in rete ma sto provando e riprovando a metterlo in un commento ma niente! forse dipende dal mio flash?

    Cita / Quota
  19. Simone

    Ciao DAMN,
    non ho bene capito i tuoi problemi, cmq ti posso linkare il codice che ho usato io per il myspace: http://www.myspace.com/overdrive999 e lo trovi a questo indirizzo: http://monacosimone.sytes.net/code.txt.
    Prova a darci un’occhiata e vedi se riesci a venire a capo di qualcosa, ovviamente le cose vanno studiate e capite non basta copiare ed incollare il codice a questo scopo ti linko anche quest’altro file che ti permette un pò di capire come sono gestiti i css… spero di esserti stato di aiuto, un saluto.

    Simone

    Cita / Quota
  21. Federico

    Ciao Giuliano,
    a me è capitata una cosa strana.
    Nel profilo 2.0 come sai pui inserire i Moduli che vuoi nella sezione “personalizza il profilo”.
    Io tra i vari moduli ho inserito anche un Modulo HTML, il problema è che ora come ora non mi ci fa più accedere.
    In sostanza quando nella modalità “Personalizza profilo” passi con il mouse su un Modulo ti fa apparire un menù a tendina tramite il quale puoi interagire con quel modulo, bene…a me non lo fa apparire più ma solo per il Modulo HTML che per altro non si può modificare nella sezione “Modifica profilo” come invece si può fare per Interessi, Chi sono..etc..etc…risultato mi ritrovo con un modulo che non riesco più a modificare, che non si può cancellare e che di fatto è inaccessibile.
    Secondo te come se ne esce?
    Ti sarei davvero grato se potessi rispondermi.
    Un saluto

    Cita / Quota
  22. Mirko

    @ Federico:
    Il problema dei moduli html non più modificabili va avanti da settimane, bisognerebbe contattare l’assistenza di myspace ma non saprei come!! E’ ormai un problema che affligge tra l’altro moltissimi utenti (non ho ancora capito se è un problema per tutti o solo per alcuni sfigati tipo me….)

    Cita / Quota

Commenti