[CSS]impaginare immagine circondata da testo con i css

[frog831]

Ho un problema che anche se banale non riesco a risolvere( so proprio impedito co sti css)
Ho questa pagina:
http://frog831.ifreepages.com/index....izza=portfolio

come vedete l'impaginazione e' un casino.
Devo mettere l'immagine sulla sinistra con la descrizione affianco e il link "pagina successiva >> " sotto .
perche' x una cosa cosi' semplice mi sto addannando tanto????
sicuramente sbaglio qualcosa di fondamentale.

il css e' questo;

/* CSS Document */
body { 
	font:80% verdana,helvetica,sans-serif; 
	margin:0; padding:0;
	background:#FFF;
}
A:link{
   text-decoration:none;
   color:#000000;
}
A:hover{
   text-decoration:underline;
   color:#999999;
}
A:visited{
   text-decoration:none;
   color:#000000;
}
p#paragrafo-iniziale { text-indent: 0em; }
p#paragrafo-iniziale:first-letter { 
   font-size: 3em;
   font-style: italic;
   float: left;
   background: #8A9CB2;
   color: #FFF;
   margin:0 5px 5px -10px;
   padding: 0px 5px 5px 10px;
   line-height:1em;
}
p#paragrafo-iniziale:first-line { 
  text-transform: uppercase;
  font-style: italic; 
}
code { font:80% verdana,helvetica,sans-serif; display:block; margin:0 1em .5em 1em; }
p,h1,h2,h3 {display:block; margin:0 1em .5em 1em; }
form,A{margin:0 1em .5em 1em;display:block;}
hr { display:none }
/*note*/
blockquote {
width:50%;
font: .70em/2em verdana, helvetica, sans-serif;
word-spacing: .2em;
padding: 2.5em 1em;
margin: 0 0 2em 2em;
border:1px solid #455667;

}
blockquote span.special-quote {
color: #455667;
font: italic 900 2em/1em georgia, serif;
}
/*Sezione Portfolio*/
div#portfolio p.descrizione{
   width:40%;
   height:100%;
   float:left;
   display:block;
   margin:0;
   padding:0;
}
div#portfolio img{
   display:block;
   width:50%;
   height:100%;
    margin:0;
   padding:0;
   float:left;
}
div#portfolio A.paginazione{
   display:block;
   width:100%;
}

div#portfolio h1{
display:block;
   width:100%;
   color:#FFFFFF;
   background-color:#000000;
   margin:0;
   padding:0;
}
/*Sezione Validator*/
div#validator img{
   border:0;
   margin:1em 0 0 0;
}
div#validator p{
display:inline;
}
/*Fine sezione validator*/
/* centrare la pagina web a larghezza fissa */
body { text-align:center }  
body{background: #455667 url(img/gradient4.jpg) fixed repeat-x top}
#testa { width:90%; margin:0 auto; margin-top:1em; text-align:left }
#corpo { width:90%; margin:0 auto; text-align:left }
#piedipagina { width:90%; margin:0 auto; text-align:left }

/*Impostazioni del menu di navigazione*/
div#navigation ul{list-style-type: none;margin: 0px;padding: 0px}
div#navigation li{margin: 0px 0px ;padding: 0px}
div#navigation a{display: block;width: 150px;margin:0 auto;line-height: 30px;
    text-decoration: none; border: 1px solid #666;text-indent: 30px;
    background: url("img/bknormal.jpg") no-repeat top left;
    color: #333;font-variant: small-caps}
div#navigation a:hover{
    background: url("img/bkactive.jpg") no-repeat top left;color: #1F2A3E}

div#navigation li#activelink a,div#navigation li#activelink a:hover{
    background: url("img/bkactive.jpg") no-repeat top left;color: #fff}

/* testa */
#testa { 
	background:#899BB3; 
	border:1px solid #000; 
	}
img#testa-banner{
   width:100%;
}
/* corpo */
#corpo { 
	position:relative; 
	/*background:#f0f0f0;*/ 
	background:#C5CAD1;
	border:1px solid #000;
	 }
#corpo-colonna1 { 
	position:absolute; top:0; left:0; 
	width:153px; 
	padding:0 0; 
}
#corpo-colonna2 { 
	margin:0 25% 0 153px; 
	border-left:1px solid #000; 
	border-right:1px solid #000; 
	background:#fff; 
	padding:1em 0; 
}
#corpo-colonna3 { 
	position:absolute; top:0; right:0; 
	width:25%; 
	padding:1em 0; 
}
/*pie' di pagina */
#piedipagina { 
	background:#ABB6C4; 
	border:1px solid #000; 
	padding:0 0; 
}

[frog831]

nessuno sa dirmi cosa c'e' di sbagliato nel mio codice???
se non riesco a correggere il problema rimango in questo vicolo cieco e sono senza sito

[Mich_]

Vedo due definizioni di body dentro il CSS. Quale e` quella valida?

Vedo dei tag maiuscoli. Sono sbagliati, anche se i browser potrebbero riconoscerli lo stesso.

In questo momento non riesco a visualizzare il link da te postato, per cui non riesco a ripetere i tuoi problemi.

[frog831]

non so dove ho visto che il tag <a> viene indicato nel css con A correggimi se sbaglio.
cmq non penso sia legato alla cattiva visualizzazione del testo intorno all'immagine nella sezione portfolio (che ho notato si verifica solo con firefox mentre con ie si dovrebbe vedere bene)
fatemi sapere.

[Mich_]

Originariamente inviato da frog831
non so dove ho visto che il tag <a> viene indicato nel css con A correggimi se sbaglio.

Questo non mi risulta. Sembra un'informazione ricavata da un linguaggio di sviluppo di Microsoft.

cmq non penso sia legato alla cattiva visualizzazione del testo intorno all'immagine nella sezione portfolio (che ho notato si verifica solo con firefox mentre con ie si dovrebbe vedere bene)
fatemi sapere.

Questa volta sono riuscito a connettermi al sito (ma ci ha messo molto tempo). In effetti (Mozilla 1.4) fa un po' schifo ilposizionamento di quell'oggetto grafico sopra le scritte.

Ecco alcuni "errori" che ho visto.

form,A{margin:0 1em .5em 1em;display:block;}

Qui stai dicendo che in tutta la pagina i link sono elementi di tipo blocco. Sei sicuro che lo volevi fare?

</img>
Questo non lo avevo mai visto. Il tag <img> non ha tag di chiusura.

Pagina Successiva >>
Non puoi usare il simbolo > in una pagina Web: va sostiuito con &amp;gt;

Comunque tutto questo non risolve il tuo problema. Non sono riuscito a vedere cosa ti da` il problema. Prova a analizzare tutta la pagina alla luce delle specifiche: probabilmente c'e` un position usato male o qualcosa ddi simile.
Certo che la pagina non e` molto curata dal punto di vista del linguaggio.
Anche una validazione della pagina (con un validatore per HTML e/o CSS) potrebbe darti informazioni utili alla correzione del problema.

[frog831]

allora: mi scuso se il sito e' spesso down purtroppo e' l'unico spazio free che ho trovato a supportare php e dbmysql.
Per quanto riguarda il tag img chiuso il validatore xhtml mi dava errore se non lo mettevo.cmq la pagina e' validata sia per quanto riguarda l'xhtml sia per i css.
Vedi i due bannerini in fondo alla pagina.
Provero' a riguardarmi tutto il codice thx.

[Mich_]

Il fatto che il validatore ti validi il tag di chiusura </img> non vuol dire necessariamente che si possa fare. (ma che validatore hai usato? E` certo un refuso del validatore: se lo segnali agli amministratori del validatore fai loro un favore)

Comunque il tag <img> non ha chiusura in HTML/XHTML. Puo` darsi che lo abbia in XML.

Per chiudere un tag che non ha chiusura, si deve mettere una slash prima del "maggiore" di fine tag.

[frog831]

ok si c'hai ragione tu
il tag img si mette cosi' <img ... />
allora x quanto riguarda il sito:
ora mi si vede bene con explorer ma mi da' ancora un problema con firefox.
come mai ????cioe': il codice se va su firefox e non su explorer di solito e' xke explorer interpreta tutto come vuole ma se succede il contrario vuol dire che e' sbalgiato il codice?????
la pagina l'ho spostata a questo indirizzo cosi' ora e' sempre up :
http://www.neoborn.com/archives/user...izza=portfolio
il css sta qui:
http://www.neoborn.com/archives/user...ne_liquido.css

[Mich_]

Ho visto un "errore", non so se e` quello, ma potrebbe essere.

Dentro i nomi degli oggetti e delle classi, non si possono usare segni matematici: in particolare il -

Capisco che sono tanti da sostituire, ma a mio parere e` essenziale.

[frog831]

ho sistemato il css come hai detto ma non e' cambiato nulla.
la cosa che mi da i nervi e' che su IExplorer che in teoria dovrebbe attenersi meglio agli standard si vede bene mentre su firefox NO!
qualcuno mi sa dire il xke???ormai ho imparato le poche righe di codice a memoria nn so piu' cosa correggere....