Back to top

Autore Topic: RISOLTO - Layout fluido (pagina che si adatta alla larghezza della finestra)  (Letto 3307 volte)

Offline Nicola1

  • Nuovo arrivato
  • *
  • Post: 21
    • Mostra profilo
Ciao ragazzi,
vorrei creare nel mio template un layout fluido (ammesso che si dica così). Vorrei cioè fare in modo che la mia pagina in larghezza si adatti semre al 100% a qualsiasi computer o a qualsiasi dimensione della finestra del browser.
Vorrei quindi che se riducessi la mia finestra a qualsiasi dimensione, mi compaia sempre l'immagine della mia pagina adattata in larghezza al 100% senza farmi apparire l'odiosa barra di scorrimento orizzontale! (cosa che avviene puntualmente adesso!)
Come posso fare?
Ho già impostato nell'header e nel footer il parametro width: 100% ma non cambia nulla.

Perchè? Devo fare altro?
Ho finito le idee e son alle cozze :-(

Grazie
« Ultima modifica: 16 Dic 2011, 18:53:02 da Nicola1 »

Offline xplosion

  • Global Moderator
  • Instancabile
  • ********
  • Post: 4047
  • Sesso: Maschio
    • Mostra profilo
Ciao Nicola1,
Guarda che sono passati i tempi dei layouts fluidi, che sono anche difficili da gestire.
Comunque serve un link al tuo sito per avere un idea su come è fatto il tuo template.

Offline Nicola1

  • Nuovo arrivato
  • *
  • Post: 21
    • Mostra profilo
Ciao Nicola1,
Guarda che sono passati i tempi dei layouts fluidi, che sono anche difficili da gestire.
Comunque serve un link al tuo sito per avere un idea su come è fatto il tuo template.

Cio xplosion. Ad esser sincero per me è tutto nuovo perchè sto facendo i primi passi. Se avete suggerimenti su ogni aspetto son ben accetti. Cmq nel frattempo ho capito il problema e mentre mi rispondevi avevo già scritto ulteriori spiegazioni che qua allego. Non so se basta o se devo inserire il link.


 Ho capito il problema però non so come risolverlo. Provo a spiegarlo.Premetto che il colore di fondo di tutta la pagina è il nero.Tuto accade perchè ho una immagine centrale impostata sui 900px di larghezza per 400px di altezza. Ai lati di questa immagine, per la corrispondente altezza di 400px, sia a destra che a sinistra vorrei avere due fasce laterali di colore di fondo diverso dal resto (grigio) con una linea di bordo superiore e inferiore. Tali fasce laterali però (nelle mie intenzioni e cosa che non riesco a fare) dovrebbero adattarsi alla finestra del browser aumentando o diminuendo la loro dimensione senza far comparire la barra spaziatrice orizontale a seconda della dimenione della finestra. Per ottenere questo, ho impostato pertanto nel css quanto segue:#slides {    margin: 0px -220px 0px -400px;    padding: 0px 0px 0px 400px;    position: relative;    text-align: center;    overflow:hidden;    background-color: #0D0D0D;    border-top: solid #333333 thin;    border-bottom:solid #333333 thin;    boorder: 0;

Se la fascia grigia a sinistra viene giustamente "tagliata" quando riduco la finestra, quello di destra mi causa la comparsa della barra di scorrimento orizzontale e non si adatta.
L'errore sta tutto in queste righe di codice perchè se elimino il rigo margin e padding ottengo l'adattamento desiderato, con però lo sfondo anche in questa zona, nero come nel resto della pagina.

Sapete dirmi come ottenere l'uovo e la gallina? :-D

Offline Nicola1

  • Nuovo arrivato
  • *
  • Post: 21
    • Mostra profilo
Ho risolto :-D

Ho azzerato i parametri margin e padding e son andato a modificare direttamente il colore di fondo nel box che contiene l'immagine.

Grazie lo stesso. E scusate se alcune domande che faccio sono stupide ma sto imparando passo a passo mentre faccio le cose.

Offline Fabrizio Fiorita

  • Abituale
  • ****
  • Post: 1315
  • Sesso: Maschio
    • Mostra profilo
Ciao.
Se hai risolto scrivi [RISOLTO] nel titolo del tuo primo post.
Buona notte.
Fabrizio
Fabrizio
Per programmare servono i tasti e la testa. Peccato che molti usino solo i primi...
Vai a vedere il mio sito: http://www.fabriziofiorita.joomlafree.it/index.php?option=com_content&view=featured&Itemid=101

 



Web Design Bolzano Kreatif