adatta testo alla pagina con firefox

lukros

adatta testo alla pagina con firefox

Buongiorno a tutti,

probabilmente una domanda da principiante, ammetto le mie carenze.

Dovrei fare in modo che il CSS adatti in maniera automatica la pagina al contenuto. Attualmente la misura in altezza del contenitore è fissa ed explorer, se la supero, mi adatta comunque la pagina al contenuto metre gli altro browser no:


#contenuto {

    background-image:  url(sfondo_02.jpg);

    height: 850px;

    width: 960px;

    padding-top: 20px;

    background-repeat: repeat-y;

    background-position: center center;

    text-align: justify;

}

La cosa mi risolverebbe molti problemi, sapete come si fa?.

lumpi

Prova con min-height: 850px;

Ciao

lukros

Ciao Lumpi,

grazie per la risposta, in realtà funziona...a metà :). Infatti mi adatta perfettamente il testo ma stacca il contenitore #conteneto da #footer di circa 5 millimetri lasciando in mezzo quindi una riga con lo sfondo...

Ti scrivo tutto il CSS magari tu riesci a capire dove sbaglio:? (logicamente il problema è con firefox, a explorer dei cambiamenti poco importa :D)


body {

    text-align: center;
    margin: 0px;
    padding: 0px;
    background-color: #CCCCCC;
    color: #FFFFFF;
    }

#esterno {
    padding: 0px;
    margin: 0 auto;
    width: 960px;
    }

#header {
    background-image:  url(header_02.jpg);
    height: 223px;
    width: 960px;
    background-repeat: repeat-y;
    background-position: center center;
    }
#nav {
    background-image: url(nav_foot_02.jpg);
    height: 50px;
    width: 960px;
    background-repeat: repeat-y;
    background-position: center center;
    padding-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:;
    }

#contenuto {
    background-image:  url(sfondo_02.jpg);
    min-height: 850px;
    width: 960px;
    padding-top: 20px;
    background-repeat: repeat-y;
    background-position: center center;
    text-align: justify;
     }
 {
    height: 50px;
    width: 960px;
    background-image: url(nav_foot_02.jpg);
    background-repeat: repeat-y;
    background-position: center center;
    padding-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:;
}

lumpi

Imposta la poprietà di #contenuto in

padding: 20px 0 1px 0; 
```oppure aggiungi


Ciao

lukros

Fantastico funziona l'ho provato con firefox, explorer e chrome...ho cambiato il codice così:


#contenuto {

    background-image:  url(sfondo_02.jpg);
    min-height: 850px;
    width: 960px;
    padding: 20px 0 1px 0;
    background-repeat: repeat-y;
    background-position: center center;
        text-align: justify;

                 }
```unico ultimo problema il programma con cui gestisco il sito (DW), lui mi stacca i contenitori a video. Anzi, me li stacca appena inserisco il comando min-height...:? credo sia un problema del programma (?)

Il codice così come è scritto è corretto secondo te?

Grazie ancora.

claudio.c

Ciao,
dopo mesi di prove ho scoperto che basta dare al box contenitore un display:table; in questo modo puoi anche omettere la proprietà height, se la calcola il browser.

Il codice che hai scritto va più che bene; se vogliamo fare i pignoli lo puoi sintetizzare ulteriormente in:


#contenuto{
    background:url(sfondo_02.jpg) repeat-y center center;
    display:table;
    width:960px;
    padding:20px 0 1px 0;
    text-align:justify}

Fammi sapere, un saluto.
Claudio.

lumpi

Pignoli per pignoli......(spero non me ne vogliate):D

Se all'interno del div non usi il tag p o un altro tag che nelle proprietà intrinseche ha un margine puoi omettere sia la proprietà height, il padding e il display... funziona comunque.

IO faccio cosi:
min-height: se non posso permettere al div di chiudersi per vari motivi (per esempio poche informazioni e conseguente pagina troppo corta, o se devo posizionare uno sfondo in un determinato punto senza ripeterlo).

padding o margin al paragrafo (a seconda delle necessità):
se uso tag con margine intrinseco.

La possibilità del display:table è interessante, non la conoscevo ma a naso potrebbe dare problemi con layout complessi.
Cito testualmente:
The element will be displayed as a block table (like <table>), with a line break before and after the table

Dunque per ridurre all'osso il codice non ti resta che fondere le risposte precedenti.

Buon lavoro

lukros

dopo mesi di prove ho scoperto che basta dare al box contenitore un display:table

Grazie Claudio e grazie Lumpi per le precisazioni. Ho risolto un bel problema che tra le cose si ripeteva su più di un sito per me :D. Ieri ho modificato un sacco di pagine con un clik!