Ciao ragazzi,
mi stavo dilettando a fare un sito e l'utilizzo dei CSS a volte mi rende le cose molto più facili..
A volte posso saltare tantissime righe di codice html semplicemneto descrivendo un buon CSS.
Ora mi sono letto diversi capitoli di un libro recente e ho scritto il seguente codice frettolosamente.
Stavo eseguendo un po' di test quando ho voluto provarlo su FF e patatrack... non funziona!!!!
Eppure la funzione inline è supportata da FF ma se ci metto dentro un'immagine dentro il suo div si incasina tutto!
La mia intenzione era creare un area di dimensioni fisse (DIV) dove potevo inserire una foto e un testo che potevano avere dimensioni e formati diversi (la foto verticolare o orizzontale) rimanendo nell'area assegnata.
L'area assegnata tra l'altro era capace di andare a capo automaticamente ridimensionando il browser e capite anche voi che in una collezione di immagini si tratta di una funzione molto utile.
Il problema è nel display:inline che manda in tilt FF e non considera più la foto come oggetto contenuto nel tag e non mi rispetta neppure più l'attributo width!
Qualcuno sa spiegarmi come sistemarlo?
Purtroppo non è neppure il primo problema!
Ed io mi limito alla compatibilità IE e FF...
figuriamoci se dovessi considerarli tutti!
<html>
<head>
<style type="text/css">
div
{
display: inline;
width:220px;
margin: 2px;
padding:4px;
font-family : sans-serif;
font-size : 12px;
border:1px solid silver;
text-align:justify;
}
img{
margin: 0 8 0 0;
float:left;
border:1px solid black;
vertical-align:text-top;
}
</style>
</head>
<body>
<div>
[img]logo.gif[/img]testo molto lungo e descrittivo pinco pallino
</div>
<div>
[img]logo.gif[/img]testo molto lungo e descrittivo pinco pallino
</div>
<div>
[img]logo.gif[/img]testo molto lungo e descrittivo pinco pallino
</div>
<div>
[img]logo.gif[/img]testo molto lungo e descrittivo pinco pallino
</div>
<div>
[img]logo.gif[/img]testo molto lungo e descrittivo pinco pallino
</div>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Rispondi quotando
