riquadro che si adatti allo schermo

[pietrozanchetti]

ciao a tutti,
premetto che sono abbastanza inesperto con la scrittura in html (non so nemmeno se ho inserito la domanda nella giusta sezione).
vorrei creare una pagina con un riquadro colorato che sia lontano 10 px dal bordo in alto, 10 dal bordo a sinistra e che si estenda in basso e a destra fino alla fine dello schermo.

come posso fare?

grazie mille a tutti!

[Experiment8]

Ciao,

il box si adatterà in base al contenuto? che cosa dovrebbe contenere?

potresti usare un box in position absolute o fixed che copra quella parte di schermo, mettendo uno stile CSS del tipo:

HTML:

<div class="tuaClasse">Contenuto</div>

CSS:

.tuaClasse {
     position: fixed;
     width: 100%;
     height: 100%;
     top: 10px;
     left: 10px;
     background: #000000;
}

Anche se così avrai 10px tagliati sotto e a destra, al momento non mi viene in mente altro. Non è esattamente una buona pratica questa che ti indico, ma per la tua richiesta mi sembra l'unica possibile. Ti chiedo se puoi indicare meglio cosa vuoi ottenere come effetto finale...

[pietrozanchetti]

Originariamente inviato da Experiment8
Ciao,

il box si adatterà in base al contenuto? che cosa dovrebbe contenere?

potresti usare un box in position absolute o fixed che copra quella parte di schermo, mettendo uno stile CSS del tipo:

HTML:

<div class="tuaClasse">Contenuto</div>

CSS:

.tuaClasse {
     position: fixed;
     width: 100%;
     height: 100%;
     top: 10px;
     left: 10px;
     background: #000000;
}

Anche se così avrai 10px tagliati sotto e a destra, al momento non mi viene in mente altro. Non è esattamente una buona pratica questa che ti indico, ma per la tua richiesta mi sembra l'unica possibile. Ti chiedo se puoi indicare meglio cosa vuoi ottenere come effetto finale...

per farti capire, guarda questa pagina: http://oo-oo.co/threetales/

lo spazio bianco sopra e a sinistra rimane inalterato, mentre il riquadro colorato si estende fino alla fine dello schermo a destra e in basso

[Experiment8]

Ho capito, io per schermo intendo la finestra del contenuto visbile, per cui in realta il codice che ti ho postato non serve in questo caso, per fare ciò dovresti fare una cosa di questo tipo:

HTML:

<div class="tuaClasse">Contenuto</div>

CSS:

tuaClasse {
      display: block;
      overflow: hidden;
      backgorund: #000000 (metti il colore che vuoi di sfondo);
      margin: 10px 0 0 10px;
}

Il fatto poi che il box si estenda in altezza dipenderà dal contenuto all'interno, nel tuo esempio il box giallo che mi hai mostrato è visibile solamente perchè ha al suo interno del contenuto, altrimenti avrebbe altezza zero e non vedresti lo sfondo colorato.

Fammi sapere

[pietrozanchetti]

Originariamente inviato da Experiment8
Ho capito, io per schermo intendo la finestra del contenuto visbile, per cui in realta il codice che ti ho postato non serve in questo caso, per fare ciò dovresti fare una cosa di questo tipo:

HTML:

<div class="tuaClasse">Contenuto</div>

CSS:

tuaClasse {
      display: block;
      overflow: hidden;
      backgorund: #000000 (metti il colore che vuoi di sfondo);
      margin: 10px 0 0 10px;
}

Il fatto poi che il box si estenda in altezza dipenderà dal contenuto all'interno, nel tuo esempio il box giallo che mi hai mostrato è visibile solamente perchè ha al suo interno del contenuto, altrimenti avrebbe altezza zero e non vedresti lo sfondo colorato.

Fammi sapere

sì, l'altezza poi dipende dal contenuto