I forum Ricerca FAQ
Fai una domanda
Ultimo messaggio
indiana
indiana
il 3 aprile 2007 alle 16:25
25 messaggi dal 06 settembre 2002
Ciao a tutti,

ho un problema col posizionamento dei div. Spero di riuscirmi a spiegare bene:

Creo una pagina con vari div "sparsi" che dovrebbero posizionarsi in varie aree della pagina (diverse dal punto in cui colloco il codice). Tutto funziona, ma mi succede che nel punto in cui inserisco il codice, nel browser viene lasciato lo spazio bianco del div, anche se esso deve comparire da un'altra parte.
In pratica, dove scrivo il codice <div> ... </div> mi compaiono degli spazi, come se il browser lo leggesse anche in quel punto.

Purtroppo la creazione dei div risponde ad uno script asp ciclico per cui i div della pagina vengono scritti uno ogni tanto (insomma, non posso raggruparli in un punto ininfluente del codice html).
Esiste una proprietà css che in pratica mi permette di "bypassare" o rendere invisibile il codice del div nella posizione in cui è scritto?

Grazie!
Modificato da indiana il 03 aprile 2007 16.26 -
RispondiQuoting
ummon
ummon
il 4 aprile 2007 alle 11:11
95 messaggi dal 28 ottobre 2006
Non ho ben capito il problema che hai descritto, cioè non mi è chiaro se tu parli di una anomalia secondaria del risultato finale, o se proprio è l'architettura dei fogli di stile che non è corretta.

Il modo più rapido per risolvere la cosa, è che tu rendi accessibile da qualche parte una pagina in cui si verifica il fenomeno, a limite basta che posti il codice HTML statico che ti esce alla fine.
RispondiQuoting
indiana
indiana
il 4 aprile 2007 alle 11:44
25 messaggi dal 06 settembre 2002
ciao

hai ragione, è più facile vederlo che spiegarlo:
Copia e incolla questo codice e apri col browser:


<body>

<div id="container">
<div id="paragrafo1">
<b>Prargrafo 1</b><br>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p>
<p>testo testo testo testo testo testo testo testo testo testo testo testo</p>
<div style="
width:200px;
height: 200px;
position: relative;
top:50px;
left:400px;
border:1px solid black;"> box 1
</div>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p>
</div>
<div id="paragrafo2">
&nbsp;<p>&nbsp;</p>
<p><b>Prargrafo 2</b><br>
</p>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p>
<p>testo testo testo testo testo testo testo testo testo testo testo testo</p>
<div style="
width:200px;
height: 200px;
position: relative;
top:50px;
left:400px;
border:1px solid black;">box 2
</div>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p </div>
</div>
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>

</body>



Noterai che ho posizionato un div nel mezzo del paragrafo 1 e del paragrafo2
Come vedi il div si posiziona nel punto giusto ma tra la seconda e la terza riga di ogni paragrafo (proprio dove nel codice html ho inserito il div) c'è uno spazio. Io vorrei annullare quello spazio lasciando però i div nei punti dove li ho scritti.

Si può?

ciao
RispondiQuoting
ummon
ummon
il 4 aprile 2007 alle 12:02
95 messaggi dal 28 ottobre 2006
Il problema che hai è dovuto a come vengono composte e renderizzate le pagine HTML, non è cioè un bug o una cosa del genere, ma un comportamento voluto.

Devi pensare alla pagina HTML come qualcosa che viene composta un oggetto dietro l'altro. Tu hai messo dei DIV con posizionamento RELATIVE. Questi oggetti vengono posizionati nella pagina, con lo spazio che occupano e solo a dopo vengono SPOSTATI RELATIVAMENTE alla loro posizione, ma senza reimpaginare lo spazio che occupavano prima, da qui lo spazio bianco che vedevi.

Credo che tu abbia bisogno di definire quei DIV come FLOAT. Gli oggetti FLOAT vengono impaginati in modo diverso: vengono estratti dal flusso degli oggetti standard della pagina HTML, posizionati a destra o a sinistra di dove stanno, occupano un certo spazio che diventa proibito per gli oggetti nel flusso standard, che appunto gli scorrono attorno.

Evito di curare il codice e posto una leggere modifica per farti vedere se è quello che cerchi. Poi si possono fare ulteriori miglioramenti, ma intanti mettiamo questo punto fermo.


<body>

<div id="container" style="width: 600px; border:1px solid red;">
<div id="paragrafo1">
<b>Prargrafo 1</b><br>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p>
<p>testo testo testo testo testo testo testo testo testo testo testo testo</p>
<div style="
width:200px;
height: 200px;
float: right; border:1px solid black;"> box 1
</div>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p>
</div>
<div id="paragrafo2">
&nbsp;<p>&nbsp;</p>
<p><b>Prargrafo 2</b><br>
</p>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p>
<p>testo testo testo testo testo testo testo testo testo testo testo testo</p>
<div style="
width:200px;
height: 200px;
float: right;
border:1px solid black;">box 2
</div>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p>
<p>testo testo testo testo testo testo testo testo testo testo testo testo
</p> </div>

<div style="clear: both; ">&nbsp;</div>

</div>
</div>

<p>&nbsp;</p>
<p>&nbsp;</p>

</body>
RispondiQuoting
indiana
indiana
il 4 aprile 2007 alle 12:30
25 messaggi dal 06 settembre 2002
Ciao,

si, hai compreso esattamente il problema e direi che la soluzione è ottima! Solo una domanda: ha qualche tipo di influenza posizionare gli oggetti "float" a destra o a sinistra visto che poi si dovrebbero posizionare secondo le coordinate che gli do?

Grazie

ciao
RispondiQuoting
ummon
ummon
il 4 aprile 2007 alle 13:41
95 messaggi dal 28 ottobre 2006
Forse non ho capito bene l'ultima domanda, per cui nel dubbio faccio il discorso completo.

Usando oggetti posizionati con la proprietà FLOAT non devi specificare nessuna coordinata, basta indicare float:left o float:right, al che l'oggetto verrà posizionato verticalmente nel punto esatto dove lo hai inserito e orizzontalmente a destra o a sinistra, al bordo dell'oggetto che lo contiene. Se vedi l'esempio che ti ho riportato, ho imposto una larghezza al div container, per imporre un bordo al float:right, altrimenti sarebbe andato fino al bordo destro del browser.

Come regola generale di utilizzo dei CSS per i layout dei siti, conviene evitare l'uso di posizionamenti troppo complessi e così detti "pixel-perfect", poichè è molto probabile che su browser diversi si abbiano leggere differenze. E' invece consigliabile un layout tollerante alle diverse implementazioni. Per esempio dicendo solamente FLOAT:RIGHT lasci ai vari browser il posizionamento preciso dell'oggetto, mentre se specifichi esplicitamente le coordinate, ti esponi a eventuali diverse interpretazioni dei box-model.
RispondiQuoting
indiana
indiana
il 4 aprile 2007 alle 14:40
25 messaggi dal 06 settembre 2002
Ciao

capisco ora ho compreso meglio, sei stato molto utile! Farò qualche esperimento e spero che tu voglia rispondere ad eventuali altri miei dubbi. ;-)

grazie!
RispondiQuoting
ummon
ummon
il 4 aprile 2007 alle 15:14
95 messaggi dal 28 ottobre 2006
indiana ha scritto:
Ciao
capisco ora ho compreso meglio, sei stato molto utile! Farò qualche esperimento e spero che tu voglia rispondere ad eventuali altri miei dubbi. ;-)


Eheheh... paradossalmente sono in una situazione privilegiata, sono argomenti che non hanno niente a che vedere col mio lavoro: da anni seguo HTML e CSS solamente per passione personale, per cui posso approfondirli fino all'inutile... quindi dubbi e domande su HTML, e soprattutto CSS, mi interessano sempre.

ciao
RispondiQuoting

Torna al forum | Feed RSS

ASPItalia.com non è responsabile per il contenuto dei messaggi presenti su questo servizio, non avendo nessun controllo sui messaggi postati nei propri forum, che rappresentano l'espressione del pensiero degli autori.