Align img che dà problemi??

**dabbia** · 20-06-2006, 18:21

Ho un problema con i CSS: quando inserisco un'immagine con alliniamento a sinistra, questa viene nascosta dal div "contenuti"...
Posto i css, sperando anche in qualche consiglio.
Grazie

codice:

body { 
font:80% verdana,helvetica,sans-serif; 
margin:0;padding:0;
text-align:center;
background-color: #E1E1E1;
}
#bodyContent { width:96%;text-align:left;margin:0 auto; border:1px solid #000; }
hr { display:none }
h1,h2,h3,h4,h5,form{margin: 0;padding:0}


a:link {color:#c00; text-decoration:none}
a:visited {color:#990000; text-decoration:none}
a:hover { text-decoration:underline}

/* testa */
#testa {
position: relative;
background:#FFFFFF; 
padding: 10px 0px 6px 10px;
}
#logo { width:50%}
#sottotesta { 
background:#669933; 
border-top: 1px solid #C7C7C7;
padding: 4px 8px 4px 8px; color:#FFFFFF;
font-size:12px;
text-align:center;
}
/* corpo */
#corpo { 
position:relative; 
background:#E8E6DD; 
border-left:1px solid #E8E6DD; 
border-right:1px solid #E8E6DD; 
border-top:1px solid #C7C7C7;
border-bottom:1px solid #E8E6DD;
}
#corpo-colonna1 { 
	position:absolute; top:0; left:0; 
	width:14.4em; 
	padding:1px 0; 
	
}

#corpo-colonna2 { 
	margin:0 12em 0 14.4em; 
	border-left:1px solid #C7C7C7; 
	border-right:1px solid #C7C7C7;
	border-bottom:1px solid #C7C7C7;
	background:#fff; 
}
#corpo-colonna3 { 
	position:absolute; top:0; right:0; 
	width:12em; 
	padding:1px 0; 
}
#colondx, #colonsx {
padding: 0 6px 0 6px;
}
/*pie' di pagina */
#piedipagina { 
	background:#E8E6DD; 
	padding:0.5em 0 0.5em 0;
	text-align:center;
	font-weight:bold;
	font-size: 86%;
}
#contenuti { padding: 8px 1em 1em 1em; position:relative}
#sotto { text-align:center;	font-size:smaller;}
#titrovi { font-size: 80%; border-bottom: 1px dashed #C7C7C7; padding-bottom: 4px}
#titrovi b { color: #990000}

**Mich_** · 21-06-2006, 09:08

Dovresti postare anche il codice HTML, compreso il DOCTYPE.
Comunque probabilmente il problema e` dato dall'uso del position: andrebbe usato solo sapendo cosa si fa, altrimenti e` meglio lasciar fare al browser.

**dabbia** · 21-06-2006, 09:58

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link media="print" rel="stylesheet" href="css/stampa.css" type="text/css">
<style type="text/css">
@import url("css/layout.css");
</style>
</head>

<body>
<div id="bodyContent"><div id="testa"><div id="logo">logo</div>
  </div>
  <hr>
  <div id="corpo">
    <div id="corpo-colonna1">
<ul class="menu1">[*]Diario di bordo (campo)[*]voce1[*]voce5[/list]
      <div id="colonsx"></div></div>
	  <hr>
    <div id="corpo-colonna2">
      <div id="contenuti"> <div id="titrovi">Ti trovi in: home page</div><div class="titolopagina">I miei libri</div> 


         <b class="rosso">Ultima:[/b]

         [img]images/truccato.jpg[/img]

         

         Titolo: news

           

           Presentazione: gdfg dsfg g sfg sdf gsdfg dsfg lsglg ldsfg ksl kf&ograve;lgk &ograve;kg kgf &ograve;lskg &ograve;ldskgf &ograve;ldskg &ograve;lkg ldsk
         

df</p>
         

gd</p>
      </div>
    </div>
	  <hr>
    <div id="corpo-colonna3"><div id="colondx">banner

     banner2</div>
	  </div></div>
  <hr>
  <div id="piedipagina">| home | copyright | mappa | rss | aiuto | </div>
</div>
<div id="sotto">

&copy; - Tutti i diritti riservati. 
</div>
</body></html>

Naturalmente questo problema me lo dà solo con IE e non con Firefox...

**Mich_** · 21-06-2006, 10:25

Quella pagina e` realizzata con tag semanticamente sbagliati. Questo comporta che il CSS e` molto piu` difficile da programmare, e comunque e` un accrocchio che non puo` avere vita lunga.
In particolare il mescolare formattazione realizzata con tag HTML e CSS lascia ai browser la scelta se dare prevalenza ad un tipo di formattazione o all'altro, e non da` la possibilita` di avere uncontrollo su cio` che si progetta.

Converrebbe quindi rivedere tutta la pagina, utilizzando modelli di layout piu` corretti (vedi ad esempio i layout dei "link utili").
Anche il linguaggio usato (XTML 4 transitional) e` di tipo vecchio: rifacendo una pagina conviene usare un linguaggio piu` moderno; il meglio sarebbe XHTML Strict.

**dabbia** · 21-06-2006, 10:29

Quando parli di "link utili" ti riferisci alla sezione di HTML? Il layout è preso proprio da lì... Cosa dovrei riguardare in particolare??? Voglio imparare e accetto i tuoi consigli! Dammi qualche informazione più precisa in modo che posso approfondire il discorso...
Grazie ancora

**Mich_** · 21-06-2006, 10:36

I "link utili" sono un thread di questo forum; e` suddiiviso in sezioni ed una di queste sono dei layout, realizzati tutti con CSS per linguaggi moderni.
Se hai trovato quella pagina in questo forum e` un errore, e va tolta; ti pregherei quindi di segnalarmelo.

**dabbia** · 21-06-2006, 10:51

Per la cronaca: mi ero rifatto a questo stile http://www.constile.org/template/nuo...esempio_3.html

Ho visto la sezione da te segnalatami... Si può perdere giorni a visitare tutti i siti...

Dove posso trovare allora un layout con XHTML strict e CSS corretti?
Grazie ancora

**Mich_** · 21-06-2006, 11:54

Il sito di constile (Gianluca Troiani) e` una delle migliori risorse italiane.
Quella pagina comunque non e` delle sue migliori. A mio parere questo articolo e` piu` adatto.

Ma comunque la tua pagina non assomiglia a quella di Gianluca: hai modificato il linguaggio, hai introdotto tag semanticamente sbagliati e soprattutto attributi CSS di formattazione, che vanno in contrasto con il CSS.

**dabbia** · 21-06-2006, 16:26

Ciao! Ancora io...

Volevo ringraziarti: ho appena rifatto tutto il mio layout seguendo i tuoi consigli... E adesso non ho più problemi... Magari ti posto pure il codice così mi fai un ultimo tuo parere...

Solo altre due piccole curiosità:

- all'interno del div principale, in home page, vorrei creare 2 colonne affiancate stile quotidiano... Dove potrei guardare per un codice corretto??
- infine, l'immagine principale che accompagnerà il testo dovrà essere distanziata dalle scritte con un margine di 8 pixel. Mi consigli uno "style="margin-right:8px" o una classe??"

Grazie ancora

**Mich_** · 21-06-2006, 16:45

Per le due colonne, trovi in constile vari spunti. Puoi prendere uno stile a due colonne ed inserirlo dentro un altro blocco (per il resto non ho capito csa vuoi, per cui non ti posso che dare un'info generica).

Il discorso che fai su style o classe non ha molto senso (se lo ho capito).
Comunque quando usi i CSS, cerca di spostare tutta la formattazione dentro lo stile, in modo da separare contenuto da presentazione: e` il modo moderno di lavorare.

Discussione: Align img che dà problemi??

Strumenti discussione

Ricerca discussione

Visualizza

Align img che dà problemi??

Permessi di invio