[HTML/CSS] Problemi di visualizzazione

25-04-2006, 01.37.33

Ciao a tutti
stavo scrivendo un layout ma ho riscontrato alcuni problemi di visualizzazione*. Butto qui una parte del codice, sapreste dirmi dove ho sbagliato per favore? Essendo soltanto una parte, ho omesso alcuni tag sotto e sopra per risparmiare spazio:

Codice PHP:


body { width: 760px; /* Larghezza in Pixel del corpo */

       height: auto; /* Altezza in pixel del corpo */ 

       margin: auto; }

       

.header { background-color: transparent; 

          width: 760px;

          height: auto;

          border: 1px solid #ffcc99;

          margin-top: 15px;

          margin-bottom: 15px; /* Lascia uno spazio di x pixel dall'header */

          text-align: center; /* Tutto viene allineato al centro: Ha priorità sul codice HTML */ }



.colonna_sx { background-image: url(bg_colonne.jpg);

              width: 185px;

              height: auto;

              float: left; /* Sposta la tabella sulla sinistra dello schermo */ }

              

.colonna_sx li a { text-decoration: none; /* Decorazione link testuali nella colonna di sinistra */ 

                   font-family: Arial, Helvetica, sans-serif;

                   font-size: small; 

                   font-variant:small-caps;}

    

.colonna_home { background-image: url(bg_home.jpg); 

                width: 370px; /* Larghezza della colonna centrale nella Home Page */

                height: auto;

                overflow-x: hidden; /* Scrollbar orizzontale (asse x) nascosta */

                overflow-y: auto; /* Scrollbar verticale (asse y) visibile */ 

                margin-left: 10px; 

                margin-right:10px;

                float: left; }

               

.colonna_dx { width: 185px; /* Come da progetto, la colonna degli affiliati DOVREBBE essere mostrata soltanto nella pagina index */

              background-image: url(bg_colonne.jpg);

                   

              padding: 5px 10px 5px 10px; /* Un piccolo spazio vuoto viene lasciato tra il bordo ed il contenuto, per favorire un impatto visivo più pulito */  }

                    

.infobox { width: 760px;

           background-image: url(background.jpg);

           border: 1px solid #ffcc99;

           margin-top: 10px;

           padding: 5px 5px 5px 5px;

           text-align: center;

           clear: both;}

           

/* Inizio definizione caratteri, immagini etc (DA STABILIRE) */

</style>

</head>



<body>



<div class="header"><img src="header.jpg" alt="Peach & Strawberry by itAndy90"></div>

<!-- Codice colonna sinistra - menu -->

<div class="colonna_sx"><img src="menu_header.jpg"><br> <!-- Lasciare questa riga -->

                        <ul><li><a href="#">Link1</a></li>

                        <li><a href="#">Link2</a></li>

                        <li><a href="#">Link3</a></li>

                        </ul>

                     <img src="footer_colonne.jpg"></div>

<!-- Codice colonna centrale - contenuti -->

<div class="colonna_home"><img src="home.jpg"><br> <!-- Lasciare questa riga -->

                          <img src="footer_home.jpg"></div>

<div class="colonna_dx"><img src="affiliati_header.jpg"><br> <!-- Lasciare questa riga -->

                               <img src="footer_colonne.jpg"></div>

<div class="infobox">Questo Layout è stato scritto interamente da Andrea "itAndy90" del gruppo sviluppatori MkSoftware</div>

*Per problemi di visualizzazione intendo, per dirne uno, la tabella dx che non si mette a destra me in basso a sinistra... di conseguenza un po' il tutto sfuma (credo che sistemando questo il resto vada a posto da sè)
Grazie anticipatamente

25-04-2006, 09.29.07

Dando un'occhiata veloce mi sembra di vedere che ad entrambi le colonne hai messo float: left ...Porva a mettere float: right a quella di destra e vedi come va!!!

26-04-2006, 12.46.55

Non ho cambiamenti se non uno: la tabella di destra continua a stare in basso ma si sposta a destra (invce dovrebbe essere allineata in alto con le altre due tabelle). Forse è perchè non ho descritto degli attributi "position"? Che poi non ricordo mancoa che servono... qualcuno per piacere mi potrebbe dare una rinfrescatina? =) Thx anticipatamente

**SolitaryExplorer** · 26-04-2006, 13.33.21

Position serve per attribuire una posizione relativa o assoluta ad un elemento.

Da quanto ho capito dal tuo codice, tu vorresti creare un layout a 3 colonne.
Potrei dirti di mettere un float: left a tutte e tre le colonne, ma se per caso la larghezza complessiva delle colonne supera la larghezza della risoluzione dello schermo, la colonna più a destra scivola sotto le altre.

Per farla più semplice, ti suggerisco di adottare il layout che descrivo in questa discussione: http://forum.altervista.org/showthread.php?t=51595.

Ciauz!

Discussione: [HTML/CSS] Problemi di visualizzazione

LinkBack

Strumenti discussione

Display

[HTML/CSS] Problemi di visualizzazione

Regole di scrittura