Cornice pagina Html..

**Photoart** · 14-11-2008, 01:15

Ciao a tutti..volevo sapere come posso fare a creare una cornice intorno al mio contenuto dell apagina , in modo che rimanga sempre ai bordi del browser..

Proprio come quella di questo sito.. http://www.letfilms.com/

..se possibile senza usare flash...

**ricman** · 14-11-2008, 01:55

Prova a mettere body, html, e un div al 100% nelle due misure. Poi prova a dare al div un border:1px solid #000 e fai sapere che succede...

**Gufo** · 14-11-2008, 02:13

Originariamente inviato da ricman
Prova a mettere body, html, e un div al 100% nelle due misure. Poi prova a dare al div un border:1px solid #000 e fai sapere che succede...

Con percentuali non funziona, forse è meglio misure fisse così

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
body {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
#contenitore {
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	width: 1009px;
	height: 645px;
	border: #000000 outset 6px;
}
-->
</style>
</head>

<body>
<div id="contenitore"></div>
</body>
</html>

**emnlmn** · 14-11-2008, 10:15

Ciao.

il metodo con le misure in percentuali funziona per la larghezza ma non per l'altezza, e usando le misure fisse il bordo non segue il ridimensionamento della pagina...
insomma con i soli css risulta un po difficile.

un metodo che mi è venuto in mente è il seguente

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
#borderTop {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background:url(bt.gif) left top transparent no-repeat;
}

#borderBottom {
   height:100%;
   width:100%;
   background:url(bb.gif) transparent right bottom no-repeat;
}	 

</style>

<body>
  <div id="borderTop">
    <div id="borderBottom">
    </div>
  </div>
</body>
</html>

Brevemente, come puoi notare ho utilizzato due div, il quale compito è solamente di contenere due immagini che andranno a disegnare i bordi della finestra.
Il primo blocco, posizionato in modo assoluto (nb, non deve essere contenuto in nessun altro blocco posizionato in modo diverso da statico, deve fare riferimento ad <html>

) assume width e height pari al 100% della finestra.
gli viene assegnata come immagine di sfondo un immagine trasparente con il solo bordo superiore e sinistro disegnati sufficentemente grande per mostrare i bordi a tutte le risoluzioni.
il secondo div, contenuto nel primo, ha anche esso dimensioni pari al 100% e a differenza del suo blocco padre la sua immagine di sfondo disegnerà i bordi destro e inferiore.
non resta che assegnare un margine a <body> pari alla dimensione del bordo disegnato.

pultroppo questa soluzione non è pulitissima visto che prevede di aggiungere al codice due div che non hanno significato semantico... ma se non vuoi usare flash non saprei come altro fare.

se qualcun altro ha qualche metodo da suggerire...

**ricman** · 14-11-2008, 11:11

Originariamente inviato da emnlmn
il metodo con le misure in percentuali funziona per la larghezza ma non per l'altezza

Mah... veramente funziona anche con l'altezza... Però ho provato ed il problema è un altro: compaiono delle barre di scorrimento che non vorremmo e non c'è modo di far combaciare il tutto (mi sembra..)

Prova a chiedere al Mod di farti spostare in CSS...

**graffithouse** · 14-11-2008, 11:22

scusate, am se fa:

codice:

body{
border:5px solid #0000;
}

non fa prima?

**emnlmn** · 14-11-2008, 11:51

@richman: esattamente, per non funziona intendevo quello, sono sempre troppo parsimonioso con le parole quando devo spiegarmi

. E pultroppo non si può fare a meno che appaiano visto che lo spessore dei bordi si và ad aggiungere alla dimensione dei contenuti specificata, che nel nostro caso è già il 100% della finestra, e questo causerà l'overflow.
oppure passiamo tutti a ie5

.

@graffithouse: in quel modo il bordo inferiore si adatterà all'altezza dei contenuti e non alla finestra del browser

**Photoart** · 14-11-2008, 14:42

Grazie a tutti per le numerose risposte ora faccio due prove e vi aggiorno sul risultato...

**graffithouse** · 14-11-2008, 14:46

Originariamente inviato da emnlmn
@graffithouse: in quel modo il bordo inferiore si adatterà all'altezza dei contenuti e non alla finestra del browser

infatti chiedevo , non mi sono mai messo a fare pagine centrate :P

**Photoart** · 14-11-2008, 14:58

Originariamente inviato da emnlmn
Ciao.

il metodo con le misure in percentuali funziona per la larghezza ma non per l'altezza, e usando le misure fisse il bordo non segue il ridimensionamento della pagina...
insomma con i soli css risulta un po difficile.

un metodo che mi è venuto in mente è il seguente

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
#borderTop {
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background:url(bt.gif) left top transparent no-repeat;
}

#borderBottom {
   height:100%;
   width:100%;
   background:url(bb.gif) transparent right bottom no-repeat;
}	 

</style>

<body>
  <div id="borderTop">
    <div id="borderBottom">
    </div>
  </div>
</body>
</html>

Brevemente, come puoi notare ho utilizzato due div, il quale compito è solamente di contenere due immagini che andranno a disegnare i bordi della finestra.
Il primo blocco, posizionato in modo assoluto (nb, non deve essere contenuto in nessun altro blocco posizionato in modo diverso da statico, deve fare riferimento ad <html>

) assume width e height pari al 100% della finestra.
gli viene assegnata come immagine di sfondo un immagine trasparente con il solo bordo superiore e sinistro disegnati sufficentemente grande per mostrare i bordi a tutte le risoluzioni.
il secondo div, contenuto nel primo, ha anche esso dimensioni pari al 100% e a differenza del suo blocco padre la sua immagine di sfondo disegnerà i bordi destro e inferiore.
non resta che assegnare un margine a <body> pari alla dimensione del bordo disegnato.

pultroppo questa soluzione non è pulitissima visto che prevede di aggiungere al codice due div che non hanno significato semantico... ma se non vuoi usare flash non saprei come altro fare.

se qualcun altro ha qualche metodo da suggerire...

Perfetto questo mi funziona perfettamente...l'unica cosa mi mancano i bordi laterali...ci sono solo quello alto e quello basso...

Discussione: Cornice pagina Html..

Strumenti discussione

Ricerca discussione

Visualizza

Cornice pagina Html..

Permessi di invio