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

    DIV con adattamento alla dimensione della pagina

    Salve a tutti. Sto lavorando da un po' di tempo alla parte grafica del mio sito. Poiché non sono ancora molto ferrato in questo aspetto vorrei chiedervi 2 cose. Innanzitutto ho scelto lo stile a tre colonne con un header e un footer, ricapitolando: ho in tutto 6 div, header, footer, i 3 div per le colonne (sinistra, centro e destra) ed un contenitore che contiene questi ultimi 3 div. Non so se forse ho abbondato con i DIV ma il mio intento era quello di dare una maggiore compattezza alle pagine, magari i più esperti possono darmi un loro parere... Quello che mi interesserebbe ottenere è:

    1. Avere il DIV centrale adattabile alla pagina (nel mio caso il "content"), ovvero che quando questa si ridimensiona si va a ricoprire col DIV centrale i margini di sinistra e di destra (che nel mio caso contengono in tutti i casi i margini di sinistra e destra dell'immagine di sfondo definita nel selettore "html". Come mi consigliate di ottenere questo effetto?

    2. Riuscire ad avere i bordi dei DIV arrotondati anche su IE se questo magari è possibile in qualche modo. Ho sentito parlare di qualche trucco esistente, ma non so se questo è corretto ai fini della validazione...

    Per una maggiore chiarezza posto qui sotto il codice del mio foglio di stile:


    codice:
    h1, p {
           text-align: center;
           color: gold;
          }
    html {
          background-image: url(immagine.jpg);
         }
    .header {
             /*border: 1px solid black;*/
            }
    .body {
           margin-left: 270px;
           margin-right: 270px;
           overflow:hidden;
          }
    .left {
           position:absolute;
           top:120px;
           left:130px;
           bottom:435px;
           width: 190px;
           z-index: 10;
           border: 3px solid black;
           -moz-border-radius: 0px 30px 0px 30px;
           -webkit-border-radius: 0px 30px 0px 30px;
          }
    .right {
            position:absolute;
            top:120px;
            right:130px;
            bottom:480px;
            width: 190px;
            z-index: 10;
            border: 3px solid black;
            -moz-border-radius: 0px 30px 0px 30px;
            -webkit-border-radius: 0px 30px 0px 30px;
           }
    .content {
              background-color: #CCFFFF;
              -moz-border-radius: 30px 30px 30px 30px;
              -webkit-border-radius: 30px 30px 30px 30px;
              -moz-box-shadow: 10px 10px 5px #888888; /*Mozilla*/
              margin-right: 10px;*/
              margin: 90px;
              margin-top: 10px;
             }
    .footer {
               /*border: 1px solid black;*/
              }
    p.paragrafi {
                 text-align: left;
                 color: black;
                 font-size: 85%;
                }
    li {
        margin-top: 25px;
       }
    h4 {
        text-align: center;
       }
    h5 {
        margin-top: 40px;;
       }

    Grazie anticipatamente per le risposte e colgo l'occasione per augurarvi buone feste!

    Nessun uomo vive a lungo quando muoiono i suoi sogni

  2. #2
    il codice non funzionerà mai poichè è tutto impostato su absolute, è sbagliata tutta l'impostazione, a risoluzioni diverse e ingrandendo e diminuendo la finestra del bronswer vedrai tutto uno sull'altro...

    devi innanzitutto scegliere la posizione voluta, se ad esempio hai scelto di fare 3 div allineati, fai un primo div con: position: relative impostando ad esempio width: 1000px (ti consiglio di non oltrepassare questo limite poi ti spiegherò il perchè).

    all'interno di questo div metti i 3 div in absolute impostando le relative larghezze esempio 300-300-300 di larghezza e lasciando un po di spazio, in ogni caso ti invito prima a studiare bene il css.

    se oltrepassi il width di 1000px; se ad esempio un utente ha un pc datato con una risoluzione piu bassa di 1200 non si arriveranno neanche a vedere i 2 div di sinistra e di destra..

    Spero di esserti stato utile: http://testsize.com/ per testare il tuo sito in tutte le risoluzioni.

  3. #3
    Utente di HTML.it L'avatar di cassano
    Registrato dal
    Aug 2004
    Messaggi
    3,002
    Potresti usare le percentuali in modo che si adatti alle varie risoluzioni dei monitor.

  4. #4
    Grazie del suggerimento ad entrambi gli utenti che mi hanno risposto. Purtroppo il CSS ancora non ho avuto modo di approfondirlo. Proverò ad adottare le soluzioni che mi avete proposto e magari accompagnate da un buono studio mi permetteranno di risolvere questo genere di problemi. In ogni caso ripasserò a chiedere qui! Grazie e a presto!

    Nessun uomo vive a lungo quando muoiono i suoi sogni

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.