• K
    Super User •

    Allora l'elemento float è sempre difficile da amministrare sopratutto se non hai confidenza.

    Proviamo a farti un sunto.
    Innanzitutto il suo elemento genitore tipo un "div" deve avere delle dimensioni fisse poichè il float estrae l'oggetto dal flusso del documento , in più non è ereditabile. Ciò vuol dire che:

    • o il div genitore ha delle dimensione ben precise o anch'esso deve essere di tipo FLOAT (e in ogni caso ciò che contiene pure quest'ultimo deve comunque avere delle dimensioni statiche) altrimenti incorrerai in grossi problemi di visualizzazione.

    Facciamo quindi un esempio

    Se hai un div genitore di dimensioni 400 x 600px , gli oggetti interni cn l'attributo (es) float:left si sposteranno tutti sulla sinistra affiancandosi SE la loro dimensione in larghezza sommata glie lo permette.
    Prendi due immagini:

    Se la loro larghezza è di 200px fai conto che 2 immagini arriverebbero precisamente a 400px il che permette al loro "float" di affiancarle sullo stesso piano.
    Quando invece hai due immagini che sommandole superano la dimensione del div genitore, allora si porranno una al di sotto dell'altra.

    Facciamo un altro esempio:

    Hai un div di solite dimensioni (400 x 600px)
    E hai un elemento "lista".
    <ul>
    <li>frase 1</li>
    <li>frase 2</li>
    <li>frase 3</li>
    </ul>

    Per la natura di questi elementi, essi si posizioneranno in verticale.
    Vuoi metterli in orizzontale?
    Ci sono varie strategie ma usando appunto il "float:left" le tue tre frasi deli tag <li> si affiancheranno una accanto all'altra e non li vedrai andare a capo fintanto la loro dimensione in larghezza non ha raggiunto i 400px.
    Insomma una specie di elementi "INLINE".

    Ah conta che i "margini, il Padding e i bordi" vengono contati come "larghezza totale del tuo oggetto interno quindi se ad esempio hai due immagini di 200px e con bordo di 1px per lato, la larghezza del div contenitore deve essere almeno di 402px per 402px di altezza se vuoi farle entrare sulla stessa "linea".

    Probabilmente mi sono spiegato male, il float è difficile anche da dimostrarlo se non con delle immagini che ora non ho tempo di preparare. In ogni caso vi sono una miriade di esempi.

    Comunque è uno degli attributi più utili sul web, io per esempio li uso in modo costante e ripetitivo.

    0
  • V
    Bannato User Attivo •

    grazie infinite, karedas, anzi, grazie che hai perso tempo per spiegare a una zuccona come me cose che voi giustamente conoscete da anni, mentre io, asina che sono, altro che webmaster 😞 dovrei conoscere e invece non conosco.. chiedo venia, perché sto facendo perdere molto tempo e temo, anche se non vorrei, che continuerò ripetutamente a importunarvi.. purtroppo anche perché questo benedetto xhtml è ancora uno sconosciuto per me..

    cmq credo di aver capito, almeno teoricamente, il concetto che mi hai spiegato e credo di trovarlo abbastanza logico, e sicuramente mi tornerà utile 🙂 grazieeeeee

    è giusto che ti specifico, cmq, che questa impresa l'ho tentata unicamente perché voglio aiutare un amico (che probabilmente avrebbe meritato di meglio 😞 ) e perché per fortuna mia, il CSS è stato sritto insieme al layout che ho scaricato, e siccome è tutto già validato, sto cercando di fare il mio massimo per rifare il sitino al mio amico, senza invalidare il lavoro fatto dal creatore del template. P.S. non sono un genio di DIV, ma da quanto vedo, ogni div che struttura la pagina è oculatamente provvisto di misure specifiche.

    Cmq, per il momento, ho lasciato perdere il float centrale e penso di aver risolto così:

    http://www.paroledipoesia.com/index2.htm

    in pratica, ho fatto una delle poche cose che sapevo fare:

    ho creato una class per la copertina del libro, specificandone gli stessi margini
    che regolano il <p>, in modo che, almeno, si allinei al paragrafo, e non si veda appiccicato al margine sinistro, che non stava bene.

    Già che ci sono, se posso, vorrei chiedere un consiglio sulla risoluzione video.
    Nel CSS hanno impostato la larghezza del layout a 700 px. Allora, io lavoro con l'unico monitor che ho, un monitor a 17 del tipo normale, e utilizzo la canonica 1024 x 768. Mi è venuto in mente, però, che molti cominciano a usare una risoluzione più alta, e non vorrei che vedessero il sito un pò "stretto".

    Se aumentassi la larghezza a 800, farei una cosa logica e fattibile, o una cavolata? grazie di tutto e scusate ancora 🙂

    0
  • K
    Super User •

    Io ho 1280 x 1024 e lo vedo bene

    0
  • hogudo
    Super User •

    Quando avrai più tempo, ti consiglio di provare a fare i css con TopStyle (esiste versione gratuita e di prova). Le funzioni del programma sono bene delineate e non è possibile inserire valori non validi.

    Inoltre uno sguardo alle specifiche css sul sito del w3c possono aiutare molto.

    Ciao

    0
  • V
    Bannato User Attivo •

    @karedas said:

    Io ho 1280 x 1024 e lo vedo bene

    non lo vedi stretto? ti sembra ben definito?

    0
  • V
    Bannato User Attivo •

    @hogudo said:

    Quando avrai più tempo, ti consiglio di provare a fare i css con TopStyle (esiste versione gratuita e di prova). Le funzioni del programma sono bene delineate e non è possibile inserire valori non validi.

    Inoltre uno sguardo alle specifiche css sul sito del w3c possono aiutare molto.

    Ciao

    va bene, grazie, terrò presente il suggerimento. Anche sulle specifiche, hai ragionissima, però quando le consulto mi si confondono le idee e allora cerco di passare direttamente alla pratica :imb:

    0
  • L
    User Attivo •

    Ciao Vale76,
    Ti ho linkato quella risorsa perché rispecchiava il tuo problema, ma non l'ho visionata accuratamente. Non mi sono mai trovato a voler flottare al centro un immagine.
    Probabilmente metterei il contenitore del paragrafo come relativo, e posizionerei assolutamente l'immagine. Sicuramente è una pessima soluzione , però è la prima cosa che mi è venuta in mente e la proverei.

    Il consiglio che ti do è sempre quello di provare. Scrivere tre linee di CSS non costa mai nulla e sperimentando si scoprono sempre molte più cose di quante tu ne possa mai chiedere. 🙂

    Per quanto riguarda la dimensione del layout fisso, lo "standard" che va diffondendosi adesso è quello di progettare per la risoluzione minima di 1024x768, quindi incapsulando il layout in un contenitore di larghezza 950-960px circa.

    Il tuo layout a 750px di larghezza è ben visualizzato anche sugli 800x600. Io ti consiglio di controllare le statistiche e fare una stima delle risoluzioni dei tuoi visitatori per scegliere la dimensione che fa per te.

    :ciauz:

    0
  • V
    Bannato User Attivo •

    adesso io onestamente non so quanti visite riceva questo sito (non è il mio, ripeto) e per saperlo dovrò chiedere a lui, cmq, quindi, dovrei aumentare il layout, da 700 (com'è ora) a 750 mumble..
    provo su un'altra pagina di test.

    0
  • L
    User Attivo •

    @Vale76 said:

    adesso io onestamente non so quanti visite riceva questo sito (non è il mio, ripeto) e per saperlo dovrò chiedere a lui, cmq, quindi, dovrei aumentare il layout, da 700 (com'è ora) a 750 mumble..
    provo su un'altra pagina di test.

    Mi sembrava di aver letto 750, ma la sostanza non cambia: è un layout progettato per accogliere anche risoluzioni di 800x600.

    Non è che devi cambiarlo per forza: non c'è una valore "standard" obbligatorio, sono solo consigli liberamente applicabili.

    0
  • V
    Bannato User Attivo •

    @Laburno said:

    Mi sembrava di aver letto 750, ma la sostanza non cambia: è un layout progettato per accogliere anche risoluzioni di 800x600.

    Non è che devi cambiarlo per forza: non c'è una valore "standard" obbligatorio, sono solo consigli liberamente applicabili.

    ah va bene, però io vorrei essere sicura che si veda in maniera più ottimizzata possibile sia per le risoluzioni basse ( a proposito, c'è ancora qualcuno che usa la 800 x 600 :mmm: ) che per le risoluzioni alte, tipo la 1280.

    Cmq avevo già fatto una pagina di test e l'ho messa sul mio server; ovviamente adesso la foto dell'acquila è corta, però la risoluzione video verrebbe così, impostata a 750:

    http://www.paroledautore.net/test/corrado/biografia_prova.htm

    0
  • C
    Consiglio Direttivo •

    Per essere leggibile anche dagli 800x600 in modo perfetto, puoi arrivare ai 770px di larghezza.

    Ciao 🙂

    0
  • V
    Bannato User Attivo •

    @carlitosway said:

    Per essere leggibile anche dagli 800x600 in modo perfetto, puoi arrivare ai 770px di larghezza.

    Ciao 🙂

    ah! 800, invece sarebbe troppo?

    0
  • C
    Consiglio Direttivo •

    Diciamo che si vede comunque la barra orizzontale, anche se non è troppo 🙂

    Con 770px non appare neanche la barra orizzontale.

    Ciao

    0
  • V
    Bannato User Attivo •

    @carlitosway said:

    Diciamo che si vede comunque la barra orizzontale, anche se non è troppo 🙂

    Con 770px non appare neanche la barra orizzontale.

    Ciao

    ma comeeeeeee la barra nooooo 😢
    scusa, carlitos, a che risoluzione video ti riferisci?

    ho fatto una prova con il mio monitor a 17', ho messo la bruttissima 800 x 600 (brr.. e la trovavamo bella! 😮 ) e vedo tutto grande, troppo... brrr ma senza barre.

    0
  • C
    Consiglio Direttivo •

    Strano, sapevo che la misura ottimale era 760px, ma avevo fatto dei test ed ero arrivato alla misura di 770px con risoluzione 800x600. Molto strano, può darsi che funzioni così solo nel mio. Io ho testato tutto su un portatile con risoluzione a 1280x800.

    0
  • V
    Bannato User Attivo •

    @carlitosway said:

    Strano, sapevo che la misura ottimale era 760px, ma avevo fatto dei test ed ero arrivato alla misura di 770px con risoluzione 800x600. Molto strano, può darsi che funzioni così solo nel mio. Io ho testato tutto su un portatile con risoluzione a 1280x800.

    ah ma scusa, forse ti ho indotto io in errore.. pardon. Al momento il mio template è a 700, non l'ho modificato. 🙂

    Vorrei chiedere un altro aiutino please :redface:

    sempre riguardante il float; vorrei realizzare una pagina con un testo munito di immagine; l'immagine a sinistra, e il testo che dovrebbe affiancarlo, come in questo esempio:

    http://html.it/guide/esempi/css/test/float_clear.html

    e infatti, ho fatto una pagina di test e l'ho caricata sul mio server:

    nel css ho impostato queste due classi distinte:

    **questa per l'immagine:**

img.contesto {
float:left;
margin:9px 0 8px 9px;
padding:0;
}

    **questa per il <p>**

.particolare {
clear:right;
}
```e in effetti funge: 

http://www.paroledautore.net/test/corrado/biografia_prova.htm

però non mi piace, si vede tutto troppo attaccato.. io vorrei distanziare il paragrafo dall'immagine, ho fatto varie prove anche con articoli sui CSS trovati in rete, ma non sono riuscita a risolvere..

potete aiutarmi? :)
    0
  • K
    Super User •

    Dai a quel paragrafo un margin o un padding (preferibilmente) riferendoti con un id o una classe.
    Tieni sempre di conto di stare attenta alla larghezza del contenitore genitore che dando gli attributi sopracitati potresti incappare nel problema dello sforamento =p

    0
  • V
    Bannato User Attivo •

    @karedas said:

    Dai a quel paragrafo un margin o un padding (preferibilmente) riferendoti con un id o una classe.
    Tieni sempre di conto di stare attenta alla larghezza del contenitore genitore che dando gli attributi sopracitati potresti incappare nel problema dello sforamento =p

    sono riuscita, dopo vari test, ad arrivare a questa situazione finale, direi soddisfacente: 🙂

    http://www.paroledipoesia.com/me.htm

    0
Effettua l'accesso per rispondere