paragrafo in position:absolute

**serialkiller** · 29-07-2006, 16:37

'giorno....

dato che mi perdo normalmente in un bicchiere d'acqua...

ho questa pagina di esempio:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Prova</title>
<style type="text/css">
#prova {float:left;position:relative;width:300px;padding:5px;border:3px solid red;}
#prova p {position:absolute;top:0;left:100px;margin:0;padding:0;font-size:80%;}
</style>
</head>

<body>

<div id="prova">
[img]sole.png[/img]



prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  
prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  
prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  
prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  prova prova  
</p>
</div>

</body>
</html>

il problema è:

il paragrafo sfora dal div, ovvero il div che non ha nessuna dimensione in altezza impostata, dovrebbe adattarsi, e invece no

si adatta all'immagine, ma non al paragrafo, cosa ho combinato ?

Grazie

**cleverboy** · 29-07-2006, 17:23

la butto lì...
prova a definire una cosa tipo:

div {
height:auto;
}

**serialkiller** · 29-07-2006, 18:32

Quando non setti l'altezza è gia come se scrivessi height:auto; quindi non cambia nulla.

Per ora l'unico metodo funzionante è quello di far flottare l'immagine e il paragrafo, ma ovviamente non è la stessa cosa

**ashtur1** · 29-07-2006, 19:01

credo dipenda dal fatto che il paragrafo ha posizione assoluta e quindi se ne sbatte del div...

**serialkiller** · 29-07-2006, 19:11

Originariamente inviato da ashtur1
credo dipenda dal fatto che il paragrafo ha posizione assoluta e quindi se ne sbatte del div...

credo, la cosa che non mi torna è:

se io devo posizionare in modo assoluto, devo settare position:relative al suo contenitore, quindi il div è position:relative, il paragrafo a sua volta è position:absolute (quindi rispetto al suo bel div), altrimenti si pianterebbe in alto alla pagina.
La cosa che non riesco a capire

è perchè il buon vecchio <div> non si debba curare del suo caro amico

settato in absolute nei suoi confronti e non di quelli di pippo

Ho risolto facendo flottare tutto, però volevo capire se è proprio così e quindi mi rassegno o se sono io che sbaglio concetto

**ashtur1** · 30-07-2006, 14:02

secondo me perchè floatta....

**seed_squall_it** · 30-07-2006, 17:11

Quando un elemento è posizionato come relative (ma solo se con un offset specificato), absolute (sempre) o fixed (sempre), viene estratto dal normale flusso del documento e quindi non influenza nessun elemento posizionato normalmente (in modo statico). In praticolare, un elemento posizionato in modo assoluto ha SEMPRE automaticamente uno z-index maggiore degli elementi che lo precedono nel codice XHTML, comunque essi siano posizionati. E' chiaro quindi che il tuo <div> risente solo dell'altezza degli elementi flottanti (perché è flottante a sua volta) o posizionati staticamente (l'immagine) al suo interno. L'elemento

è estratto dal flusso del documento e non potrà mai influenzare l'altezza del <div>. L'unica soluzione è rendere il paragrafo e l'immagine flottanti a sinistra (se vuoi affiancarli), oppure non dichiarare il paragrafo come posizionato (se vuoi che il paragrafo appaia sotto all'immagine). In entrambi i casi, puoi eliminare la dichiarazione float: left del <div>. Solo nel caso tu abbia l'immagine e/o il paragrafo flottanti, devi aggiungere un elemento <br class="clear" /> appena prima di chiudere il <div id="prova">. La classe CSS dell'elemento
corrisponderà alla seguente regola di stile:

codice:

.clear {
clear: left;
}

ripulendo il float e quindi ripristinando il flusso del documento all'interno del <div> che contiene box flottanti. Questo fa sì che l'altezza del <div> sia influenzata automaticamente dal più alto degli elementi flottanti che racchiude.

**serialkiller** · 30-07-2006, 17:17

bene...

per quanto riguarda i flottanti, nessun problema, è quello che ho sempre fatto fino ad oggi, poi per questioni pratiche stavo cercando una "nuova" strada, e li mi sono fermato.

Ecco quindi la risposta al mio dubbio "viene estratto dal normale flusso", quindi tutto il resto vien da se, che dire...perfetta spiegazione

grazie a tutti

**seed_squall_it** · 30-07-2006, 17:31

In realtà, un'alternativa esiste...se vuoi affiancare due o più elementi (come se fossero flottanti) usando però il posizionamento assoluto riferito all'elemento contenitore e allo stesso tempo facendo in modo che il <div> contenitore risenta dell'altezza dell'elemento più alto, c'è il trucco. E' obbligatorio conoscere a priori quale degli elementi sarà SEMPRE il più alto e quindi posizionarlo in modo statico (normalmente) attribuendogli uno o entrambi i margini orizzontali (in base alla sua posizione) che verranno "coperti" dagli altri elementi posizionati in modo assoluto. L'unico vero limite a tutto questo è dato proprio dal fatto che devi sapere quale elemento sarà sempre il più alto (sarà lui che influenza l'altezza del contenitore). Se però sei disposto a usare un piccolo hack, il problema è risolvibile elegantemente. Ti basta impostare per l'elemento posizionato in modo statico una min-height tale da impedire sempre agli altri elementi posizionati in modo assoluto di "sbordare" oltre il contenitore. E' chiaro che l'hack è necessario per IE, che non supporta min-height. La min-height dovrà essere uguale o superiore al maggiore tra i valori delle altezze che gli elementi position: absolute potranno assumere.

**serialkiller** · 30-07-2006, 17:41

ecco, il motivo principale era proprio...far diversamente per ottenere qualcosa di più pulito...mi son detto, ho quasi sempre usato i flottagi per questo tipo di cose, perchè non proviamo con il posizionamento assoluto o relativo ? Ci ho provato, ma con questo ostacolo, ecco allora che se devo usare hack, la pulizia torna ad essere la solita, ovvero parziale sempre per come la intendo io, il sito in questione è un centro sportivo dedicato anche alle riabilitazioni o disabili motori, non ha l'obbligo di seguire la legge stanca, ma gradirei fare il più possibile un sito fruibile anche da questi ultimi, ecco la mia più attenzione a riguardo che gia in genere è elevata, insomma aspetto con ansia i CSS3 o meglio, browser che sappiano interpretarli a dovere

è come avere una bella coppa gelato davanti e non poterla mangiare :rollo:

Discussione: paragrafo in position:absolute

Strumenti discussione

Ricerca discussione

Visualizza

paragrafo in position:absolute

Permessi di invio