immagini e div contenitore

[jezebel]

Ciao,

ho cercato sul forum ma non ho trovato la soluzione, opure non ho saputo cercare!

Cmq ho un problema con questo codice:

.felencocategorie {
position:relative;
border-bottom : 1px solid #CC3300;
border-top : 1px solid #CC3300;
margin: 0px;
margin-top: 20px;
margin-left: 53px;
padding-bottom: 2px;
width: 372px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
.felencocategorie img {
float:left;
margin: 0px;
border: 0px;
padding-bottom: 10px;
padding-right: 10px;
padding-top: 5px;
padding-left: 0px;
}
.felencocategorie div {
margin: 0px;
border: 0px;
padding-bottom: 0px;
padding-right: 5px;
padding-top: 5px;
padding-left: 0px;
font-weight: bold ;
font-size: 11px;
color: #000099;
}
.felencocategorie p {
margin: 0px;
border: 0px;
padding-bottom: 0px;
padding-right: 5px;
padding-top: 8px;
padding-left: 0px;
font-weight: normal ;
font-size: 10px;
color: #000099;
}

Nella pagina:

<div class="felencocategorie>
[img]img1.gif[/img]<div>nome</div>
<div>cognome</div>

descrizione</p></div>

Il problema è che vorrei che il bordo di felencocategorie si trovasse sempre al di sotto dell'immagine invece se il testo di descrizione è più piccolo dell'altezza dell'immagine, il bordo arriva fino al testo.

In pratica: va bene così

----------------(bordo top)
----|
img |   testo
----|
----------------(bordo-bottom)

e non così

----------------(bordo-top)
----|
img | testo
----|-----------(bordo bottom)
----|

Come posso fare?

Edit: Ho inserito i tag [ code ] perche` si capisca cosa chiedi

[Mich_]

Anche con la mia correzione, non e` che lo schema sia molto chiaro.

Prova comunque una sintassi HTML diversa:

<div class="felencocategorie>
  [img]img1.gif[/img]
  

nome</p>
  

cognome</p>
  

descrizione</p>
</div>

Oppure:

<div class="felencocategorie>
  [img]img1.gif[/img]
  <div>
    

nome</p>
    

cognome</p>
    

descrizione</p>
  </div>
</div>

Nel secondo caso dovrai definire float:left; anche il <div> interno.
Se poi devi anche centrare verticalmente (seconda soluzione), occorre agire sui margini superiore e inferiore dei due blocchi (l'img e il div interno) (e impostare il vertical-align, se deve funzionare anche in IE).

[jezebel]

Scusa se rispondo solo ora...

niente!!!niente!!niente! non funziona...
Ho provato di tutto, il contenitore esterno non considera l'altezza dell'mmagine ma solo dei contenitori del testo..

[jezebel]

Ps: con Opera pechè con IE tutto ok

[Mich_]

Se con IE e` a posto e con altri browser sbaglia, probabilmente ci sono errori nel codice.
Conviene sempre sistemare per i browser conformi e poi adattare per IE. (Con cio` non sto dicendo che Opera e` conforme: lo puo` essere in alcune configurazioni).


Hai una pagina in linea dove hai implementato?
Perche` dal codice postato si capisce poco.
In alternativa posta il codice che stai usando, ma inseriscilo dentro i marcatori [ code ] ... [ /code ] (senza spazi)

[jezebel]

Oh,
ho creato un sito provvisorio su altervista con la pagina
http://ulissirob.altervista.org/Paro...Valentino.html

spero possa essere utile.
Ricordo ancora una volta che non funge con opera, la visualizzazione con IE funge.

Ho trovato un sito che usava:

min-height: 50px;
height: auto !important;
height: 50px;

così pare possa andare con entrambi ma è una buona soluzione?

Grazie, ciao

[Mich_]

Quello e` l'hack standard per far funzionare il min-height anche per IE.

Comunque ho guardato la pagina con FF (linux) e in effetti le varie "buste" sono via via spostate man mano che si scende.

Comunque la pagina non e` scritta bene: ci sono molte formattazioni HTML, che possono andare in contrasto con i CSS.

Quando si usanoi CSS e` opportuno eliminare tutti i tag e gli attributi di formattazione HTML.

Ma ci sono altri problemi.
Intanto la formattazione fatta con un tabella (e` semanticamente scorretto)
Poi vedo un

non chiuso (e allora tutto il palco dei CSS casca miseramente): i CSS hanno la necessita` di un codice HTML corretto.
Puoi vedere i siti seguenti per un aiuto alla correzione della sintassi formale:
validatore HTML
validatore CSS

[jezebel]

Hai ragione, il

è stato dimenticato nelle varie prove fatte e per quanto riguarda la formattazione sto passando ai css poco alla volta.

A questo proposito vorrei chiederti un consiglio.
Vorrei acquistare un libro per studiare meglio i Css.
Cosa mi consiglieresti, quello di Troiani o di Meyer?

Vedo subito i link che mi ha consigliato.
Grazie ancora.