Problemi con DIV immagini e testo

matrix66

Problemi con DIV immagini e testo

Sono alle prime armi con i css e ho un grosso problema che non riesco a risolvere.
Non usando le tabelle ho cercato di imparare i DIV ma il risultato è altalenante.

Nella pagina html ho scritto:

Nel foglio css ho scritto:

.div1[ border: 1px solid #ccc; padding:2; height:auto; width:auto]

L'immagine si vede bene e anche il testo è ok tranne il fatto che non è centrato rispetto all'immagine, mi spiego meglio, limmagine è centrata proporzionalmente dal bordo del contenitore ma il testo parte dall'alto dell'immagine.

Mi potreste aiutare nel capire dove ho sbagliato

hotshot

Ciao Matrix66,

non ho capito bene come veolevi fare il layout, se mi spieghi, ti posso dare un consiglio,

Ola'

matrix66

@Hotshot said:

Ciao Matrix66,

non ho capito bene come veolevi fare il layout, se mi spieghi, ti posso dare un consiglio,

Ola'

Ciao tieni conto che sono alle prime armi con i css ho preso un libro e ho iniziato a cercare di imparare
Allora una volta usavo le tabelle ma ora ho imparato che si possono usare i div al loro posto ma il risultato è brutto ovviamente per colpa mia.
Vorrei sinserire un immagine con una descrizione più o meno lunga a fiaco, una volta con la mia tabellina divisa in due celle mettevo l'immagine a sinistra centrandola nella cella e il testo destra centrandolo nella cella così l'aspetto era molto gradevole e proporzionato.
Ora senza tabella e con i div come hai visto nel codice che ti ho scritto riesco a mettere l'immagine con il testo vicino ma il tutto risulta sproporzionato perchè il testo parte dal lato sinistro in alto dell'immagine e a secondo che sia più o meno lungo non è mai all'ineato centralmente all'immagine alla sua sinistra lo diventa solo se la lunghezza del testo riesce a riempire l'altezza reale della foto.
Questo con la tabellina non succedeva perchè il testo nella cella adiacente lo posizionavo con allineamento centrale e in questo modo era sempre proporzionato all'immagine qualsiasi lunghezza avesse.
Potresti aiutarmi a risolvere il problema

hogudo

Non ho capito bene neanche io.
Per prima cosa formatta tutto solo con i css, poi postaci un esempio.
Ho il sentore che al 90% tu abbia bisogno di mettere un paragrafo dentro il div, però se non posti andiamo alla cieca

matrix66

@hogudo said:

Non ho capito bene neanche io.
Per prima cosa formatta tutto solo con i css, poi postaci un esempio.
Ho il sentore che al 90% tu abbia bisogno di mettere un paragrafo dentro il div, però se non posti andiamo alla cieca

Ciao che cosa ti devo postare che non ho capito

Ho scritto il codice che è nella mia pagina html non è quello che intendi?

matrix66

@Matrix66 said:

Ciao che cosa ti devo postare che non ho capito

Ho scritto il codice che è nella mia pagina html non è quello che intendi?

Cerco di spiegarmi meglio ti posto il codice che è nella mia pagina html:

[HTML] <div class="div1"><img src="images/Babel_small.jpg" alt="Babel" style="float:left;margin: 2px" width="auto" height="auto"><b><a href="The%20grudge%202.htm">The Grudge 2</a></b>
<font color="#FF0000"><b>(Nelle sale dal 10 Novembre)</b> </font><font color="#FF0000"><b><img border="0" src="images/New.gif" alt="News" align="absmiddle" width="28" height="11"></b></font><br>Dopo il clamoroso successo di "The grudge", i produttori ci hanno messo tre giorni, dalla sua uscita nelle sale, per avviare la produzione di questo secondo
capitolo e tutto questo ci fa un po pensare.<br>Ancora diretto dal regista nipponico Takashi Shimizu, autore anche degli originali giapponesi, "The grudge 2" non è, però, un semplice remake del suo omonimo nipponico.<div style="clear:left"></div></div>[/HTML]

Ed ecco il css:

.div1 { border : 1px solid #ccc; padding: 4px; height: auto; width: auto; text-align: left}

La pagina html è completa del testo e dell'immagine

matrix66

@Matrix66 said:

Cerco di spiegarmi meglio ti posto il codice che è nella mia pagina html:

[html] <div class="div1"><img src="images/Babel_small.jpg" alt="Babel" style="float:left;margin: 2px" width="auto" height="auto"><b><a href="The%20grudge%202.htm">The Grudge 2</a></b>
<font color="#FF0000"><b>(Nelle sale dal 10 Novembre)</b> </font><font color="#FF0000"><b><img border="0" src="images/New.gif" alt="News" align="absmiddle" width="28" height="11"></b></font><br>Dopo il clamoroso successo di "The grudge", i produttori ci hanno messo tre giorni, dalla sua uscita nelle sale, per avviare la produzione di questo secondo
capitolo e tutto questo ci fa un po pensare.<br>Ancora diretto dal regista nipponico Takashi Shimizu, autore anche degli originali giapponesi, "The grudge 2" non è, però, un semplice remake del suo omonimo nipponico.<div style="clear:left"></div></div>[/html]
Ed ecco il css:

.div1 { border : 1px solid #ccc; padding: 4px; height: auto; width: auto; text-align: left}

La pagina html è completa del testo e dell'immagine

Sono riuscito a essere chiaro con i codici?

hotshot

Io opterei per questa semplice opzione:

<div class="Contenitore">
<div class="sinistra">immagine</div>
<div class="destra">testo</div>
</div>

Css:

.Contenitore{
width: 400px;
height: 600px;
}
.sinistra{
width: 180px;
height: 200px;
left: 10px;
position: relative;
}
.destra{
width: 180px;
height: 580px;
left: 10px;
position: relative;
}

Le cifre sono assolutamente indicative, e puoi aggiungere altri o differenti attributi.
Devi valutare che ogni elemento, avendo un suo stile può essere gestito con tutti gli attributi che vuoi, spero sia stato abbastanza chiaro.

Ciao