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

Letture Consigliate per CSS

Articoli simili


Autore:

Web Designer Freelance di Torino che ama la grafica e sperimentare tecniche di creatività sul web. Grazie all'esperienza maturata nel campo del web design potrai scoprire i servizi disponibili, oppure guardare i suoi ultimi lavori.