Ciao,
ho messo su un planet e volevo che i vari post degli utenti assomigliassero a quelli di htttp://planet.gnome.org .
Per rendere quella "nuvoletta" ci sono 8 immagini come sfondo nel foglio di stile
codice:
div.person-info {
float: left;
position: relative;
left: 4px;
margin-top: 25px!important;
padding: 0 20px 30px 0;
width: 120px;
background: url(img/bubble/bubble-nipple.png) top right no-repeat;
text-align: center;
div.post {
background: #fff url(img/bubble/bubble-left.png) left repeat-y;
margin-left: 140px;
}
div.post2 {
background: url(img/bubble/bubble-right.png) right repeat-y;
}
h4.post-title, div.post-title {
background: url(img/bubble/bubble-top-left.png) top left no-repeat;
margin: 1em 0 0 0;
}
h4.post-title a, div.post-title span {
display: block;
background: url(img/bubble/bubble-top-right.png) top right no-repeat;
padding: 22px 25px 0 25px;
font-weight: normal;
font-size: 140%;
text-decoration: none;
}
div.post-header {
background: url(img/bubble/bubble-top.png) top repeat-x;
}
div.post-footer {
background: url(img/bubble/bubble-bottom.png) bottom repeat-x;
}
div.post-footer p {
background: url(img/bubble/bubble-bottom-left.png) bottom left no-repeat;
margin: 0;
}
div.post-footer p a {
display: block;
background: url(img/bubble/bubble-bottom-right.png) bottom right no-repeat;
padding: 15px 20px 20px 25px;
text-align: right;
font-size: 85%;
color: #999;
text-decoration: none;
}
div.post-contents {
padding: 0 25px 0 25px;
margin-right: 10px;
}
la corrispondenza immagini-posizione penso sia ovvia,l'unica è bubble-nibble che corrisponde a quel trangolino vicino al volto dell'autore.
L'html legato a questo stile è abbastanza banale
codice:
<div class="person-info">
<img class="face">
</div>
<div class="post">
<div class="post2">
<div class="post-header">
<h4 class="post-title"></h4>
</div>
<div class="post-contents">
</div>
<div class="post-footer">
</div>
</div>
</div>
Ne ho provate tante ma lo sfondo di post2 non ne vuole sapere di venire fuori ( la riga verticale a destra),il resto è tutto ok.
Quelli di gnome per qualche ragione ( e forse è qui che casca l'asino) hanno cambiato lo script in python "generatore" ed hanno untilizzato un sistema diverso che ad occhio,pur avendo copiato quasi tutto
, non posso utilizzare