Overflow di un'immagine

[Pennywise83]

Ciao a tutti.
Vorrei sapere se è possibile fare una cosa con il css... vi allego un immagine per spiegarmi meglio:



Le linee rosse demarcano i bordi di due div, in quello superiore ho un avatar e le informazioni dell'utente (sei connesso come XXX - Logout, etc) mentre nel div di sotto ho altri contenuti.

Come vedete l'immagine dell'avatar è tagliata. Per ora ho adottato la soluzione di ridimensionare, sempre tramite css, la dimensione dell'immagine per farla stare nel suo div, ma volevo sapere se era possibile che l'immagine "scavalcasse" il proprio id e comparisse completa. Ovviamente coprirebbe le scritte che compaiono nel 2° div, però imposterei un margin-left tale da farle apparire accanto all'immagine.

Non ho mai usato il valore Overflow e non ho capito neanche tanto bene a cosa serva, ma penso che potrebbe essere la cosa che fa al caso mio. Qualcuno sa come potrei fare?

Se all'immagine do il falore "position: absolute" più o meno ottengo quello che voglio, solo che non riesco a controllare molto bene gli spazi. Fate conto che il risultato dovrebbe apparire pressochè identico tra firefox e Ie...

Se qualcuno ha qualche suggerimento mi farebbe molto piacere

[Mich_]

Il position potrebbe avere effetti indesiderati e soprattutto diversi in ogni browser.

Invece cio` che ti serve e` proprio
overflow: visible;
Che permette ad un oggetto di sforare i bordi del contenitore.
In pratica devi settare l'overflow nel blocco che contiene l'immagine.

[Pennywise83]

Ci ho provato, ma non funziona, o meglio, succedono le seguenti cose:
Con firefox l'immagine appare tagliata (come nello screenshot), mentre in explorer il contenitore 1 (quello che contiene l'avatar e le informazioni) si espande vericalmente per contenere l'immagine, sfasando quindi tutto...

il codice è il seguente:

#cont1{

width: 199px;

height: 40px;

margin-right: 3px;
padding: 0px;

display: inline;

float: right;


background: #bdedfd url("./immagini/header_middle_bg2_2.png") no-repeat;

}
/* C'è un float: right e display: inline per via del bug di explorer che raddoppia i margini */

#cont1 img{
width: 46px;

overflow: visible;

display: inline;
vertical-align: top;

padding: 1px;

background: #fff;

margin: 0px;

border: 1px solid #34beed;
}

[Mich_]

Permettimi un attimo un passo indietro.
Il tuo problema puo` essere risolto con delle tecniche CSS non troppo standard, con possibili problemi in altri browser (e` in fondo cio` che ti avevo suggerito come primo consiglio).

Oppure il problema puo` essere affrontato da un altro punto di vista:
In fondo devi fare due "righe" con alla sinistra di ambedue l'immagine.
Non e` che puoi risolvere dando semplicemente un float:left; all'immagine (o al suo contenitore)?
In tal caso la struttura diventerebbe:

 <div id="header">
  <img href="...">
  <div id="primariga">
  <div id="secondariga">
</div>

con un CSS del tipo:

#header {
  ...
}
#header img {
  float: left;
  border: ...; /* se serve */
  ...
}

[Pennywise83]

Purtroppo questo non è possibile dato che la riga di sotto deve essere per forza di quelle dimensioni per contenere l'immagine di sfondo. Inoltre questa riga è variabile, il sito ha una sezione blog e un'altra forum, e non fa parte dell'header. Quindi potrei agire solo sulla prima riga, dove attualmente è riservato lo spazio dell'avatar...

Dunque non è possibile tramite tecniche standare che l'immagine "scavalchi" i bordi senza spostare gli elementi div?

Grazie lo stesso cmq

[Mich_]

Dunque non è possibile tramite tecniche standare che l'immagine "scavalchi" i bordi senza spostare gli elementi div?

Non e` esattamente vero.
La cosa e` possibile, in teoria, ma occorre vedere come i browser interpretano quei comandi.

Probabilmente diventa piu` semplice se usi XHTML 1.0 strict, e rinunci alla compatibilita` con IE 5.5 e precedenti.

Si puo` anche risolvere usando posizionamenti assoluti e z-index, anche in questo caso con problemi di compatibilita` con vari browser.