Posizionamento assoluto e relativo in html

[samiel]

Visto che mi sto dando all'html, ho pensato
di fare cosa gradita stressando un po' il forum
su questo argomento (che mi piace un sacco,,,)

Ecco il problema: volevo inserire per civetteria
le due icone della validazione W3C, ma ho
degli strani risultati. Probabilmente, mi sfugge
qualcosa di fondamentale sul posizionamento
relativo e assoluto. Ma veniamo al dunque.

Se uso questo codice, senza indicare il posizionamento:

Codice: Seleziona tutto

<div class="nopadding" >
<a href="http://validator.w3.org/check?uri=referer"><img
src="valid-xhtml10.png"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>
</div>
<div class="nopadding" >
<a href="http://jigsaw.w3.org/css-validator"><img
src="valid-css.png"
alt="Valid CSS!" height="31" width="88" border="0" /></a>
</div>

le icone vengono una sopra all'altra e attaccate.
Io invece voglio posizionarle una di fianco all'altra e leggermente separare.

Se uso il posizionamento "relative", con questo codice:

Codice: Seleziona tutto

<div class="nopadding" style="position:relative; top:3em; left:-25em">
<a href="http://validator.w3.org/check?uri=referer"><img
src="valid-xhtml10.png"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>
</div>
<div class="nopadding" style="relative; top:2em; left:-20em">
<a href="http://jigsaw.w3.org/css-validator"><img
src="valid-css.png"
alt="Valid CSS!" height="31" width="88" border="0" /></a>
</div>

non riesco a "muovere" gli oggetti. Anche se cambio parametri,
con determinati valori e icone stanno sempre nello stesso punto.

Un'altra cosa strana e che, in questi due casi, l'area cliccabile non coincide
con la superfice dell'icona, ma è molto più estesa...

Le cose funzionano perfettamente solo se uso il posizionamento assoluto, il cui codice è questo:

Codice: Seleziona tutto

<div class="nopadding" style="position:absolute; top:1650px; left:300px">
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>
</div>
<div class="nopadding" style="position:absolute; top:1650px; left:425px">
<a href="http://jigsaw.w3.org/css-validator"><img src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" height="31" width="88" border="0" /></a>
</div>

E questo il relativo CSS (anche se chiarito il mistero
trasferirò tutto nel CSS]. Non c'è qualcosa di anomalo?

Grazie!
M.

[samiel]

Ops...

Codice: Seleziona tutto

body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 76%;
    color: #1A2894;
    background-color: #BAFFFE;
    margin-top: 35px;
    margin-right: 35px;
    margin-bottom: 35px;
    margin-left: 35px;
    padding-left: 15em;
}

#sfondo {
background: #FFFFFF url(sfondo.jpeg) repeat fixed;
}

h1 {
    font-size: 250%;
  }

h2 {
    font-size: 200%;
  }

h3 {
    font-size: 175%;
  }

a {
    color: #1A2894;
    text-decoration: none;
  }

div.emph p {
    font-size: 145%;
    font-weight: bold;
    color: #1A2894;
  }

div.quoting p {
    margin: 30px;
    font-style: italic;
  }

div#box1 {
    background: #FEFFB1 /*#E0FFFD*/;
    padding: 10px;
}

/*è necessario muovere l'elenco alla sinistra e muovere il resto del testo un pò a destra, per fargli spazio. Le proprietà CSS che useremo sono 'padding-left' in body (per muovere il testo del 'body') e 'position', 'left' e 'top' in navbar (per muovere il menu).*/

ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 10em; /*sposta in basso*/
    left: 3em; /*muove verso destra*/
    width: 10em;
  }

/*allunga il menu*/
/* 'position: absolute' dice che l'elemento 'ul' viene posizionato indipendentemente da ogni testo che viene prima o dopo di esso nel documento e 'left' e 'top' indicano qual'è la posizione. In questo caso, 2em dall'alto e 1em dal lato sinistro della finestra.

'2em' significa 2 volte la dimensione del font usato. Per esempio, se il menu viene mostrato con un font di 12 punti, '2em' è uguale a 24 punti. 'em' rappresenta un'unità molto utile nei CSS, poiché si può adattare automaticamente al font che utilizza il lettore. La maggior parte dei browser ha un menu per aumentare o diminuire la dimensione del font: si può provare, e vedere che il menu aumenta in dimensione come aumenta il font, cosa che non accade, invece, se si fosse usato una dimensione in pixel. 

Il menu di navigazione sembra ancora un elenco, invece di un menu. Aggiungiamo allora un pò di stile. Toglieremo il pallino di elenco e sposteremo gli elementi a sinistra, là dove era il pallino. Daremo anche ad ogni elemento il suo sfondo bianco ed un rettangolo nero. (Perché? Nessun motivo particolare, solo perché possiamo.)

Non abbiamo ancora definito come dovrebbero essere i colori dei link, così aggiungiamoli: blu per i link che l'utente non ha ancora visitato e viola per i link già visitati: 

 Per tradizione, i browser mostrano i link con il sottolineato e con colori. In genere, i colori sono simili a quelli specificati qui nell'esempio: blu per i link a pagine che non sono state ancora visitate (o visitate molto tempo prima), viola per i link a pagine che sono state già visitate.

Nell'HTML, i link vengono creati con gli elementi <a>, così per specificare il colore, è necessario aggiungere una regola di stile per “a”. Per differenziare i link visitati da quelli non visitati, i CSS forniscono due “pseudo-classi” (:link e :visited). Queste sono chiamate “pseudo-classi” per distinguerle dalla classi attributi, presente direttamente in HTML, per esempio la class="navbar" nel nostro esempio. */

ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid #1A2894;
  }

ul.navbar a {
    text-decoration: none;
  }

a:link {
    font-weight: bold;
    color: #1A2894;
  }

a:visited {
    font-weight: bold;
    color: #1A2894;
  }

img#ridimensiona {
    width: 80%;
  }

img {
    display:block;
    margin:0 auto;    /* puoi cambiare il primo valore */
    padding:50px 0px 50px 0px;
}

.nopadding img {
   padding: 0;
}

.menu { margin:6px 8px 4px 0; color:#aaa; background:transparent;
        border-bottom:1px dotted #fff; border-left:1px dotted #fff}
.menu a {text-decoration:none; font-weight:bold; color:#ff8}
.menu a:hover {color:#aaa}

[lotar]

Per affiancare due "div" con il css devi usare il float. Esempio:

Codice: Seleziona tutto

<div class="nopadding" style="float:left"> 
<a href="http://validator.w3.org/check?uri=referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a> 
</div> 
<div class="nopadding" style="float:left"> 
<a href="http://jigsaw.w3.org/css-validator"><img src="valid-css.png" alt="Valid CSS!" height="31" width="88" border="0" /></a> 
</div>
<div style="clear:both">&nbsp;</div>

Oppure usare un solo div e dare lo spazio tra le immagini con "padding-left" o "padding-right":

Codice: Seleziona tutto

<div class="nopadding" > 
<a href="http://validator.w3.org/check?uri=referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a> 
<a href="http://jigsaw.w3.org/css-validator"><img src="valid-css.png" 
alt="Valid CSS!" height="31" width="88" border="0" style="padding-left:10px" /></a> 
</div>

Oppure usare semplicemente con il tag "img" l'attributo "hspace", che serve per specificare lo spazio orizzontale attorno all'immagine.

Codice: Seleziona tutto

<a href="http://validator.w3.org/check?uri=referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator"><img src="valid-css.png" alt="Valid CSS!" height="31" width="88" border="0" hspace="10" /></a> 

Spero di essere stato d'aiuto...

[samiel]

Ho provato tutte e tre le soluzioni.

La seconda e la terza distanziano correttamente
le due icone, ma le posizionano una sopra e una sotto,
e non l'una di fianco all'altra, come desidererei.
Inoltre, ripropongono il fatto, per me misterioso,
che l'area cliccabile è amplissima, ben maggiore delle icone.
Mi piacerebbe capire perché...

La prima invece funziona egregiamente,
dunque l'ho adottata.

Ma qual è in questo caso lo svantaggio,
se ce n'è uno, di adottare un posizionamento assoluto?

Mille grazie
M.

[lotar]

Nella seconda e la terza devi scrivere il tag "img" uno dopo l'altro senza mettere div in mezzo. Usare due tag "div" uno vicino all'altro, è nomale che il contenuto andrà sempre a capo. Volendo si potrebbe usare al posto di div, il tag "span" per evitare questo. Ecco perchè ti ho messo in esempio il "float".

Per il fatto che l'area cliccabile delle immagini va oltre l'immagine è dovuto ai valori inseriti in "padding" nella regola che hai scritto:

Codice: Seleziona tutto

img { 
     display:block; 
     margin:0 auto;    /* puoi cambiare il primo valore */ 
     padding:50px 0px 50px 0px; 

In pratica hai impostato che tutte le immagini della pagina devono avere il padding (lo spazio attorno all'immagine in questo caso) con tutti quei pixel.

Per evitare questo o scrivi una regola CSS ad hoc per quelle immagini, o per tutte le immagini del sito imposti il padding a zero, oppure semplicemente modifica così:

Codice: Seleziona tutto

<img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" style="padding:0px"/>

Ciao

[samiel]

Me la seconda e la terza, nel tuo codice, non hanno
il doppio <div> e nemmeno io l'ho messo, tuttavia
sono poste in verticale anziché in orizzontale.
Stessa cosa se metto:

Codice: Seleziona tutto

<span>
<a href="http://validator.w3.org/check?uri=referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>
<a href="http://jigsaw.w3.org/css-validator"><img src="valid-css.png"
alt="Valid CSS!" height="31" width="88" border="0" style="padding-left:10px" /></a>
</span>[code]
Continuano ad essere allineate verticalmente
anziché affiancate.
Inoltre, è vero che ho messo il padding,
ma se noti ho anchre creato una classe
[code].nopadding img {
   padding: 0;
} 

e in origine avevo messo:

Codice: Seleziona tutto

<div class="nopadding" style="position:absolute; top:1650px; left:300px">
    <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Transitional" height="31" width="88" border="0" /></a>
</div>
<div class="nopadding" style="position:absolute; top:1650px; left:425px">
    <a href="http://jigsaw.w3.org/css-validator"><img src="http://jigsaw.w3.org/css-validator/images/vcss"
        alt="Valid CSS!" height="31" width="88" border="0" /></a>

comunque mi piacerebbe chiarire come mai
con un solo <div> o con <span>
vengono lo stesso non alineate... Non è strano?

M.

[samiel]

No, hai ragione!
Ho provato a eliminare dal CSS la classe padding
e tutto torna regolare. Evidentemente ho sbagliato
qualcosa nell aclasse nopadding. Ma siccome sono
quasi le 2 e mezza, rimando a domani lo studio
della faccenda...

Ancora grazie
M.

[aschenaz]

Quoto lotar sul discorso del float.

Io userei il padding il meno possibile, preferendo sfruttare il margin di blocchi annidati.
Purtroppo, a causa del più diffuso (e fetente) browser
che interpreta il padding (e i bordi) a modo suo, è meglio rinunciarci per ragioni di compatibilità cross-browser.

Il posizionamento assoluto va bene se usi un layout allineato a sinistra. Altrimenti, diventa praticamente inutilizzabile.

Per i css, ti consiglio di adottare l'accorpamento delle classi. Così puoi limitare il peso dei fogli di stile (in certe validazioni diventa importante) e avere maggiore ordine e controllabilità degli effetti.
Guarda, ad esempio, questa porzione di css:

Codice: Seleziona tutto

p, div { margin:0;padding:0;font-size:inherit;line-height:1.20em}
img {margin:0;padding:0;border:0}
.l { text-align:left}
.r { text-align:right}
.c { text-align:center}
.j { text-align:justify}
.fl { float:left}
.fr { float:right}
.cl { clear:both}
.w200 { width:200px}

Io la uso in questo modo (può tornare utile nel tuo caso):

Codice: Seleziona tutto

<p class="c fl w200>Ecco le immagini:</p>
<p class="fl"><img src="percorsoimmagine" alt="testoalternativo" /></p>
<p class="fl"><img src="percorsoimmagine" alt="testoalternativo" /></p>
<p class="cl">&nbsp;</p>

Come ti è stato detto (mi pare), il fatto che la porzione cliccabile supera le dimensioni dell'immagine è dovuto al display:block.

[samiel]

Buono il consiglio sull'accorpamento, ne ho anche letto
nei manuali, ma prima volevo finire sto codice del piffero,
poi sistemo melgio il codice.

@ ninobi

Io userei il padding il meno possibile,
preferendo sfruttare il margin di blocchi annidati

E per distanziare delle immagini dal testo
(proprio separate, no float)
che strategia mi consigli?

M.

[aschenaz]

E per distanziare delle immagini dal testo
(proprio separate, no float)
che strategia mi consigli?

Se intendi immagini distanziate, ma pur sempre incastonate nel testo, io uso comunque il float:

Codice: Seleziona tutto

.fl {float:left}
.imgmargin {margin:0 10px 10px 0}

---
<div>
   <img class="fl imgmargin" ... />
   testo testo testo testo testo testo testo testo testo testo...
</div>

Non è neanche necessario impostare il clear dopo, ma solo se il blocco di testo è abbastanza voluminoso da coprire la dimensione dell'immagine, altrimenti l'immagine sconfina nel blocco successivo.

Se invece vuoi che l'immagine sia proprio affiancata (senza testo sotto), puoi metterla in un div a parte (sempre con il float, però).

Infine ci sarebbe la soluzione tabella, ma, come sai, le tabelle non dovrebbero essere mai usate al di fuori dello scopo per cui sono state create...

Ciao,
nino

[samiel]

Più che altro... dovrei sistemare una pagina
in questo modo:



testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo

LOGO1
LOGO2
LOGO3

testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo

I 3 loghi sono in realtà 3 gif che compongono
il logo nella sua interezza. Ora, né usando padding
ne col codice come segue:

Codice: Seleziona tutto

<div><img margin="20px 0 0 0" src="logo1.gif" alt="logo1" /></div>
<div><img src="logo2.gif" alt="logo2"/></div>
<div><img margin="0 0 20px 0" src="logo3.gif" alt="logo3" /></div>

riesco a smuovere le immagini di un millimetro...

M.

[aschenaz]

Se ho capito bene (e le immagini devono stare una sotto l'altra), così dovrebbe andare bene:

Codice: Seleziona tutto

p { margin:0;padding:0;}
img {margin:0;padding:0;border:0} 
.t20 {margin-top:20px}
.b20 {margin-bottom:20px}

Codice: Seleziona tutto

<p>
testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo 
</p>
<p class="t20"><img src="logo1.gif" alt="logo1" /></p>
<p><img src="logo2.gif" alt="logo2" /></p>
<p class="b20"><img src="logo3.gif" alt="logo3" /></p>
<p>
testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo
testo testo testo testo testo testo testo testo testo 
</p>

Ho qualche dubbio che il parametro margin all'interno del tag possa funzionare...
In caso, usa il css in linea:

Codice: Seleziona tutto

<div style="margin:0 20px 0 0">

Ciao,
nino

[samiel]

@ ninobi
Scusa se non ti ho ringraziato finora,
ma ho avuto un paio di giornate campali.
Avevo in effetti prodotto autonomamente
una soluzione analoga:

Codice: Seleziona tutto

#logo1 {
    display:block;
    margin:0 auto;
    margin:60px 0 0 0;
}

#logo3 {
    display:block;
    margin:0 auto;
    margin:0 0 90px 0;
}

e quindi:

Codice: Seleziona tutto

I<div id="logo1"><img src="logo1.gif" alt="logo1" /></div>
<div><img src="logo2.gif" alt="logo2"/></div>
<div id="logo3"><img src="logo3.gif" alt="logo3" /></div>

Non capisco però il vantaggio o lo svantaggio
di inserire l'immagine in un tag <p> ovvero <div>...

M.

[aschenaz]

Non capisco però il vantaggio o lo svantaggio
di inserire l'immagine in un tag <p> ovvero <div>...

P e div hanno qualche differenza, ma, spesso, possono essere usati alternativamente.

Le differenze sostanziali (occhio: sono cognizioni che ho rilevato in pratica, non prenderle come da manuale) sono queste:

- il div può contenere dei p, ma non viceversa (conviene, quindi, usare il div quando hai a che fare con grosse porzioni di testo, che contengono paragrafi, immagini...);
- il p, di default, aggiunge un margine inferiore maggiore rispetto a div.

Poi, in particolari condizioni (spesso usando il float) ho notato che hanno comportamenti diversi a riguardo dell'espansione orizzontale (se non si impostano le dimensioni). Conviene provare entrambi e notare le differenze.

Ci sarebbe da fare anche un discorso di semantica: div dovrebbe stare per divisor, p per paragraph...

Ciao,
nino

[samiel]

Poi, in particolari condizioni (spesso usando il float) ho notato che hanno comportamenti diversi a riguardo dell'espansione orizzontale (se non si impostano le dimensioni). Conviene provare entrambi e notare le differenze

Da quello che ho capito, float fa problemi con IE,
almeno fino alla versione 6.
Dovrei fare delle verifiche anche su IE 7,
ma non ho nessuna intenzione di acquistare Vista...

Un ultimo inghippo, anche se questo post
è ormai un accrocchio di temi html

Vorrei eliminare una cornice su due img.
Ora, questo codice funziona:

Codice: Seleziona tutto

<div id="w3c1"><a href="http://validator.w3.org/check?uri=referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" height="31" width="88" border="0" /></a></div>

Ma dal momento che border è deprecato
nell'XHTML 1.0 strict, ho trasferito tutto nel CSS,
per cui ho questo codice:

Codice: Seleziona tutto

<div id="w3c1"><a href="http://validator.w3.org/check?uri=referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" height="31" width="88"  /></a></div>

Nel CSS, ho invece:

Codice: Seleziona tutto

#w3c1 {
float:left;
margin:60px 0 0 0;
border:0px;
}

#w3c2 {
float:left;
margin:60px 0 0 20px;
border: 0px;
}

E non funziona più, nel senso che gil altri parametri
vengono rispettati, ma il borgo compare...

Dove sta l'inghippo?
Grazie!

M.