Visualizzazione dei risultati da 1 a 10 su 10
  1. #1

    Formattare senza tabelle: larghezza del contenuto.

    Ciao a tutti.
    Preferisco usare i CSS per formattare i miei siti, anche se non sono ancora del tutto padrone della tecnica necessaria.

    Anche questa volta, sviluppando

    http://www.immobiliarecentrolago.it

    sono alle prese con la larghezza del "content" della pagina (per intenderci, la parte a sfondo giallo sfumato con sottile bordino blu) al quale non ho ancora trovato un modo soddisfacente per far occupare tutto lo spazio disponibile con ogni diversa risoluzione dello schermo e usando i diversi browsers.

    Ho provato a usare "width" (in percentuale, in pixels non andrebbe bene per diverse risoluzioni del monitor) e ho provato a definire solo i margini destro e sinistro.

    Non vorrei ridurmi, anche stavolta, a inventare trucchetti tipo tabelle invisibili per mantenere aperto il riquadro.

    Qualche suggerimento?
    E' nato www.lombardiamotori.it

    www.universocase.it: il primo portale italiano di annunci immobiliari gratuiti e autogestiti!

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Le dimensioni a px e i position absolute sono da evitare.

    Io ti consiglierei di mettere la cartina e il contenuto dentro un ulteriore div (lo chiamo "carcont").

    Il CSS di carcont dovra` avere:
    width 98%;
    height 100%; /* se ti pare il caso */

    Il CSS di cartina dovra` avere
    float:left;
    height:100%; /* sicuramente */
    width: (in px) /* questo te lo concedo */

    Il CSS di conten:
    float:left;
    height 100%; /* sicuramente */

    Dopo il box conten, prima di chiudere il box carcont, e` consigliabile inserire un boxino largo 100% e alto 1px con clear:all; per togliere l'effetto dei float.

    Poi se vuoi centrare qualcosa dentro conten, il div corrispondente (che sara` dentro il div conten) avra`:
    width: (la sua propria);
    height:(la sua propria);
    margin:auto; /* questo serve per centrare un div in un altro*/

    Se poi la centratura deve funzionare anche con IE, il box conten dovra` avere
    text-align:center; /* patch per IE */


    In pratica ti ho detto che devi cambiar filosofia: non imporre nulla al browser, ma permettergli la liberta` di definire le dimensioni, dandogli dei vincoli.
    Se invece gli dai vincoli troppo stretti (tipo dimensioni in px), e il browser ritiene di non poterli rispettare, il risultato non e` prevedibile.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    mich non è clear:all ma clear:both

    4 pag. x il forum:l'ospite ora ha solo link sponsorizzati, valli a capire-GommaLayout! Agg. 25 agosto 2004)-Molla&Collano privati tecnici, per favore

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Originariamente inviato da Jerry Masslo
    mich non è clear:all ma clear:both

    Opps scusate.
    Grazie Jerry della correzione
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Fatto, ho modificato il foglio di stile secondo le vostre indicazioni e mi sembra ottimo, certo meglio, molto meglio di prima.

    Ringrazio entrambi per l'utilissimo consiglio.

    Vorrei aggiungere una cosa, ad uso forum e magari per avere anche su questo un punto di vista diverso dal mio.

    Nonostante il notevole miglioramento, non avevo ancora trovato il modo di garantire che il contenuto della pagina (<div id="content") occupasse tutta la larghezza disponibile tra la cartina topografica (che tra l'altro è presente solo in alcune pagine, non in tutte) e il lato destro della pagina, indipendentemente dalla risoluzione dello schermo e dalla quantità di testo contenuta NEL content (che non sempre occupa tutta la larghezza del medesimo)

    Se il contenuto era più stretto dello spazio disponibile, anche il riquadro a sfondo giallo si ritirava (orribile)

    Per ora ho risolto con una funzione javascript, che definisce dinamicamente la larghezza del content in base alla risoluzione dello schermo e alla presenza o meno della cartina:

    codice:
    <script type="text/javascript">
    <!--
    
    function contentwidth(){//per controllare la larghezza del content
    	var contentwidth;
    	contentwidth = "";
    	var w;
    	w = window.screen.width;
    	var mappa;
    	mappa = document.getElementById("cartina");
    	if (mappa == null){
    		contentwidth = "97%"
    	}
    	else {
    		if (w<=800){
    			contentwidth = 555+"px"
    			}
    		else if (w>=1280){
    			contentwidth = 1035+"px"
    			}
    		else {
    			contentwidth = 779+"px"
    			}
    	}
    	
    	document.write("<div id='content' style='width: "+contentwidth+"'>");
    	
    -->
    }
    </script>
    Così non mi resta che scrivere
    <script type="text/javascript">contentwidth();</script>
    anzichè
    <div id="content">
    dove inizia il contenuto della pagina.

    Testato con tutte le risoluzioni-schermo più comuni: va benissimo.
    Browsers: non ancora, spero sia compatibile.........

    Sono invece ancora in alto mare con il posizionamento e la formattazione del footer, ma adesso è .........



    troppo tardi.

    Grazie ancora, a presto.

    E' nato www.lombardiamotori.it

    www.universocase.it: il primo portale italiano di annunci immobiliari gratuiti e autogestiti!

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Originariamente inviato da teorema55
    ...
    Per ora ho risolto con una funzione javascript, che definisce dinamicamente la larghezza del content in base alla risoluzione dello schermo e alla presenza o meno della cartina:
    ....
    Grazie ancora, a presto.

    Non e` una bella cosa far dipendere la visualizzazione da un JS: infatti se uno non ha JS ablilitato probabilmente vede un macello, o forse nel tuo caso non vede proprio nulla.

    Ma c'e` un altro problema (secondo me grave):
    Se uno apre il browser in una finestra che non occupa tutto lo schermo, si trova con la barra di scorrimento orizzontale (orribile!!).

    ma se il div content NON HA SPECIFICATO la larghezza, viene allargato fino a che c'e` posto; meglio se sotto c'e` un <div> che contiene sia la cartina (se presente) e il content
    in cui puoi definire la larghezza complessiva (che puo` essere ad esempio 98%, in modo da non sbattere sui bordi, che sta male, soprattutto in alcuni browser).
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  7. #7
    Un qualche esempio di questi può essere utile (il terzo, soprattutto)?

    - www.re1.it/pierofix/


  8. #8
    Grazie Mich per la pazienza, e pierofix per gli utili esempi.

    Sicuramente c'è qualche difetto di fondo nella mia impostazione da novizio, che causa questo comportamento e che devo correggere (dopo avere capito in che modo).

    Il div globale contenente la cartina e il content vero e proprio l'ho già adottato (width: 98% e funziona bene, come da te suggerito.

    I miei dubbi:
    ma se il div content NON HA SPECIFICATO la larghezza, viene allargato fino a che c'e` posto;
    questo comportamento, che mi sarei aspettato, risolverebbe tutti i problemi, ma creando i siti precedenti ho invece notato che:
    - se la larghezza non viene specificata, quando il content non contiene testo (o ne contiene poco)il riquadro si restringe rispetto all'intestazione e alla barra di navigazione
    - se viene specificata una larghezza alta in % (es. 100%) il riquadro deborda rispetto all'intestazione e alla barra di navigazione, mentre se la larghezza in % è più bassa, il riquadro rimane troppo stretto
    - impossibile specificare una larghezza in pixel data la varietà delle possibili risoluzioni-schermo

    Per il momento, per evitare trucchetti utilizzati in passato tipo inserire tabelle o stringhe di testo invisibili per mantenere aperto il riquadro, mi sembra che la soluzione javascript sia abbastanza universale e precisa, tra l'altro, con più test, ho notato che è anche cross-browser, oltre che cross-risoluzione, anche se effettivamente non funzionerà in quei (io credo ormai pochissimi) browsers con javascript disabilitato

    Il problema sarebbe più facile da risolvere se il content non fosse ospitato in un riquadro ben definito e separato dal resto della pagina, come avviene invece negli esempi di piero.........

    Sono però pronto ad adottare uno schema migliore, se effettivamente fosse efficace rispetto a questi punti..........il sito dove ho dovuto adottare i trucchetti di cui sopra è il mio personale,

    http://www.larianaweb.com

    per esempio nella pagina "portfolio".

    Quale è secondo voi la causa di fondo che non lascia che il content vada ad occupare tutto lo spazio disponibile?
    E' nato www.lombardiamotori.it

    www.universocase.it: il primo portale italiano di annunci immobiliari gratuiti e autogestiti!

  9. #9
    Perchè non utilizzi questa DOCTYPE per i tuoi documenti?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  10. #10
    L'ho già fatto in passato, e questa volta ho utilizzato "transitional" sperando in una validazione più agevole




    che differenza c'è, all'atto pratico?

    PS: aggiungo alle note qui sopra che non ho ancora potuto testare il comportamento del content QUANDO E' CONTENUTO IN UN CONTENITORE GENERALE DI RANGO SUPERIORE (il "carcon" di Mich), può darsi che in quel caso occupi tutto lo spazio disponibile...........appena riesco farò qualche prova.
    E' nato www.lombardiamotori.it

    www.universocase.it: il primo portale italiano di annunci immobiliari gratuiti e autogestiti!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.