Box centrato e barre di scorrimento

**mlolcu** · 12-05-2014, 16:25

Buongiorno,
stò cercando di creare una pagina dove ci sia un'immagine sfondo che si ridimensioni automaticamente a seconda della dimensione del browser.
Sopra l'immagine vorrei un box centrato nella pagina, semitrasparente, che contenga un blocco di testo.

Quello che sono riuscito a fare:
- l'immagine di sfondo che si ridimensiona
- il box semitrasparente

Quello che non sono riuscito a fare:
- centrare il box nella pagina
- creare le barre di scorrimento al browser nel caso il testo si estenda oltre la pagina

Mi aiutate per favore?
Questa la pagina HTML:

codice HTML:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Nuova pagina 3</title>
    <base target="_self">
    <link href="css/stili.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 7]>
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/core.js"></script>
    <![endif]-->
</head>

<body>
<div id="background">
    <div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <img src="images/sfondo1.jpg" id="bgk" alt="" />
                </td>
            </tr>
        </table>
    </div>
</div>

<div class="container">
    <div class="content">
        <p>testo molto lungo...</p>
    </div>
</div>
</body>
</html>

Questo il foglio CSS:

codice:

* {
    margin:0;
    border:0;
    padding:0;
}

    html, body,#backgound,#background table,#background td{
    width:100%;
    height: 100%;
    background-color:transparent;
    color:#000;
    overflow:hidden;
}
#background {
    position: fixed;
}
#background td{
    vertical-align:middle;
    text-align:center
}

#background img{
    min-height:50%;
    min-width:50%;
    margin:0 auto
}

#background, #bgk{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:0;
}

#container{
    position:absolute;
    top:0;
    left:0;
    z-index:70;
    overflow:auto;
}

.content{
    position: absolute;
    margin: 0 auto; 
    width: 770px;
    overflow:auto;
    padding-left: 20px;
    padding-right: 20px;
    border-left: 0;
    border-right: 0;
    padding-top: 20px;
    padding-bottom: 100px;
    font: 10px Verdana, Arial;
    background: rgba(255,255,255,0.25);
}

GRAZIE!!!

**MAeSI** · 12-05-2014, 17:49

Ciao,
senza toccare la tua struttura HTML, potresti provare a fare queste modifiche:

Nel codice HTML hai un div con classe container, non con id container come hai invece dichiarato nel CSS, correggila.

Prova a dare position:relative al div.container e togliere position:absolute al div.content. Così ottieni la centratura del box in orizzontale.

Per la barra di scroll, prova ad assegnare al div.container un'altezza 100%.

**mlolcu** · 12-05-2014, 18:06

Originariamente inviata da MAeSI

Ciao,
senza toccare la tua struttura HTML, potresti provare a fare queste modifiche:

Nel codice HTML hai un div con classe container, non con id container come hai invece dichiarato nel CSS, correggila.

Prova a dare position:relative al div.container e togliere position:absolute al div.content. Così ottieni la centratura del box in orizzontale.

Per la barra di scroll, prova ad assegnare al div.container un'altezza 100%.

Ciao e grazie per l'attenzione.
Spero di aver seguito bene le tue indicazioni, ho modificato il foglio CSS ed è andato tutto a posto

codice:

.container{
    height:100%;
    position:relative;
    top:0;
    left:0;
    z-index:70;
    overflow:auto;
}

.content{
    margin: 0 auto; 
    width: 770px;
    overflow:auto;
    padding-left: 20px;
    padding-right: 20px;
    border-left: 0;
    border-right: 0;
    padding-top: 20px;
    padding-bottom: 100px;
    font: 10px Verdana, Arial;
    background: rgba(255,255,255,0.25);
}

Grazie ancora per la pazienza!

**mlolcu** · 12-05-2014, 18:46

Scusa, ho una curiosità.
Io stò impostando il box che contiene il testo per una larghezza di 1024px, mi sono preparato un'immagine di riferimento larga 1024px, ma per avere il box largo 1024px devo impostare la classe Content ad una larghezza complessiva di 820px.
Perchè questa discrepanza? 820px non sono 1024?
Preciso che stò utilizzando FireFox senza zoom (Ctrl+0), se però guardo Chrome nella stessa condizione trovo tutti i caratteri più piccoli. Qual'è il browser giusto da considerare?

.content{
margin: 0 auto;
width: 760px;
overflow:auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
padding-bottom: 100px;
border-left: 0;
border-right: 0;
font: 10px Verdana, Arial;
background: rgba(255,255,255,0.25);
}

**MAeSI** · 12-05-2014, 21:50

Originariamente inviata da mlolcu

Perchè questa discrepanza? 820px non sono 1024?

Certo che no, ma credo di non aver capito bene a cosa ti serve un'immagine di riferimento.

Originariamente inviata da mlolcu

Preciso che stò utilizzando FireFox senza zoom (Ctrl+0), se però guardo Chrome nella stessa condizione trovo tutti i caratteri più piccoli.

Se linki un esempio, forse si riesce a capire di più.

Originariamente inviata da mlolcu

Qual'è il browser giusto da considerare?

Tutti

**mlolcu** · 13-05-2014, 06:05

Ciao,
l'esempio è gia nel codice che ho postato e mi riferisco al box Content che conterrà il testo la cui larghezza è 30+760+30. L'immagine di riferimento è semplicemente un rettangolo rosso largo 1024 per verificare come si presenta il sito quando il browser è largo come il rettangolo. Ma ripensandoci credo di aver capito che sebbene 820 sembri largo 1024 su FireFox, in fondo tutto dipende da come il browser renderizza i font e dal livello di zoom. Quindi il lavoro che stò facendo è inutile, basta impostare il box con una larghezza ad esempio di 964 più due padding laterali di 30 per avere un box effettivamente largo 1024. Poi a seconda del browser e dello zoom sarà tutto più o meno largo.
E' così?
Grazie ancora per la pazienza

Discussione: Box centrato e barre di scorrimento

Strumenti discussione

Ricerca discussione

Visualizza

Box centrato e barre di scorrimento

Permessi di invio