bordo h1...problema con con img

[equiweb.it]

ciauz a tutti...scusate per il titolo poco chiaro... vi do subito un esempio del mio problema... http://www.equiweb.net/php/articoli/...?articolo_id=2
la foto vicino a ciao dovebbe essere sopra alla "sottolineatura"...
cioè...dovrebbe essere così http://www.equiweb.net/php/articoli/...?articolo_id=3
(il secondo caso funge perchè limmagine ha dimensioni diverse...)

questaa è la parte di codice css interessata

.view_cont .alto h1{margin-top: 3px;border-bottom: 1px dotted #999; padding:3px; text-align:left; clear:right;}
.view_cont .alto h3{margin-top: 15px;margin-bottom: 5px;text-align:left; font-size:13px; clear:left;}
.view_cont .alto img{float:left;margin-right:15px;}

come potrei risolvere il problema?


ciauz e grazie a tutti per l'aiuto

[equiweb.it]

uppolo...

[ricman]

Originariamente inviato da equiweb.it
come potrei risolvere il problema?

Ne dico una.. ma non garantisco...
Potresti fare delle prove mettendo la foto dentro l'H1...

[paologaz]

Non sono un esperto! ma provando magari con vertical-align ?

[equiweb.it]

vi ringrazio per le risposte...
ho provato... ma non cambia nulla :-(


ciauzz

[ricman]

Originariamente inviato da equiweb.it
ho provato... ma non cambia nulla

Riassumi con del codice le prove che hai fatto... magari ci sfugge qualcosa...

[equiweb.it]

ciauz...hai perfettamnte ragione... ecco come ho modificato il codice seguendo i vostri consigli

Originariamente inviato da ricman
Ne dico una.. ma non garantisco...
Potresti fare delle prove mettendo la foto dentro l'H1...

HTML

<h1>[img]/grafica/logo.jpg[/img]titolo</h1>

ma il problema rimaneva...

Originariamente inviato da paologaz
Non sono un esperto! ma provando magari con vertical-align ?

CSS

.view_cont .alto img{float:left;margin-right:15px; width:100px;

e anche con questa modifica...il problema rimaneva...

ciauz e grazie dell'aiuto

[Mich_]

vertical-align dovrebbe funionare con i testi, non con i blocchi.
Quindi va bene per un testo (o anche un'immagine, se non e` flottata) dentro un

(che deve pero` avere dimensioni definite)

Per i blocchi si devono usare i margini oppure il posizionamento relativo e top/bottom e left/right

Ma una cosa piu` furba e` evitare il posizionamento, e sfruttare invece il float (quindi il tutto e` flottato): in tal caso occorre che i blocchi siano strutturati in modo intelligente, secondo la semantica.

[equiweb.it]

ciauz Mich_, grazie della risposta...
ho capito la tua spiegazione...però quello che nn ho capito è come poter risolvere questo problema...
cioè...

devo riuscire a evitare che succeda come nel primo caso (vedi foto qui sotto) ma come nel secondo




ciauzz e grazie

[Mich_]

Provo ad analizzare la tua immagine (la seconda).

C'e` un titolo, probabilmente un <h2> seguito da un <h3> (il <h1> immagino serva per il titolo della pagina).

In questo titolo la parte a sinistra e` un'immagine, che pero` non fa parte del contenuto, ma dello sfondo (quindi va messa in background). Lo sfondo deve essere largo come tutta l'area ad essa riservata, e deve avere un bordo inferiore.

In

h2 {
  background: url(equi_small.gif) no-repeat bottom left;
  padding: 2px 100px 2px 2px;    /* valori da definire */
  border: 1px solid #999;
  width: 100%;
  height: 30px;
  margin: 10px 0 0 0;
  font-size: 180%;
}
h3 {
  width: 100%;
  padding: 0;
  font-size: 80%; 
}
h3 .scrt {
  float: left;
}
h3 .aut {
  float: left;
  font-weight: bold;
}h3 .dat {
  float: right;
}

HTML:
<h2>ciao</h2>
<h3><p class="scr"> Scritto da</p> <p class="aut">Filo Iazza</p><p class="dat">Giovedì, 8 Marzo 2007</p></h3>