Non riesco a fare un sepmlice box, mi date una mano?

[Manson]

Ciao a tutti!

In pratica si tratta di fare un semplicissimo box usando i CSS
Il box è composto da un'immagine in alto che fa da bordo arrotondato, un'immagine al centro messa come sfondo che si ripete in verticale (dove poi va il contenuto), e un'ultima immagine in basso che chiude la scatola con un altro bordo arrotondato.

Ho usato questo codice XHTML:

  
<div id="boxup">[img]images/boxcenterup.gif[/img]</div>
<div id="contentbg">
 

Contenuto Contenuto</p>
 

Contenuto Contenuto</p>
 

Contenuto Contenuto</p>
</div>
<div id="boxdown">[img]images/boxcenterdown.gif[/img]</div>

e questo come CSS:

#contentbg {
        margin: 0px;
	padding: 0px;
	background-image: url(/sito/images/boxcenterbg.gif);
	background-repeat: repeat-y;
}

#boxup {
	margin: 0px;
	padding: 0px;
}

#boxdown {
	margin: 0px;
	padding: 0px;
}

Ora il problema è il seguente: su Firefox c'è dello spazio tra i vari DIV (su IE no) che pensavo di aver eliminato con margin e padding a 0. Ma invece non è stato così. come posso risolvere?

Grazie a tutti

[thomas_anderson]

Ti consiglio di impostare l'immagine in alto come background di #boxup. e lo stesso per #boxdown.

Altrimenti si adiranno le vie legali:
thomas_anderson ricorrente
Manson resistente.

[Manson]

ho seguito il tuo consiglio ma, seppur il percorso sia corretto, non vedo gli sfondi in alto e in basso, forse perché ora i div non hanno nulla al loro interno. Ti riporto il codice attuale:

  <div id="boxup"></div>
  <div id="contentbg">
    

Contenuto Contenuto</p>
    

Contenuto Contenuto</p>
    

Contenuto Contenuto</p>
  </div>
  <div id="boxdown"></div>

#contentbg {
   width: 100%;
   margin: 0px;
	padding: 0px;
	background-image: url(/sito/images/boxcenterbg.gif);
	background-repeat: repeat-y;
}

#boxup {
   background-image: url(/sito/images/boxcenterup.gif);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
}

#boxdown {
	background-image: url(/sito/images/boxcenterdown.gif);
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
}

Dove sbaglio?

[thomas_anderson]

Imposta la proprietà background-position: top left; poi, come fatto anche su Extrowebsite, scrivi:

<div id="boxup">nbsp</div>

Questo li renderà visibili anche in Opera, Mozilla e Firefox.
Internet Explorer, siccome è una chiavica, mostra tutto anche dove non c'è niente da mostrare.

metti in mezzo ai div. cioè uno spazio in codice xhtml (il forum non me lo visualizza)

[Manson]

Continua a non andare, gli sfondi si vedono ora, ma sempre con i div staccati tra loro. Ecco il codice:

  <div id="boxup"></div>
  <div id="contentbg">
    

Contenuto Contenuto</p>
    

Contenuto Contenuto</p>
    

Contenuto Contenuto</p>
  </div>
  <div id="boxdown"></div>

#contentbg {
       width: 100%;
       margin: 0px;
       padding: 0px;
       background-image: url(/sito/images/boxcenterbg.gif);
       background-position: top left;
       background-repeat: repeat-y;
}

#boxup {
       background-image: url(/sito/images/boxcenterup.gif);
       background-position: top left;
       background-repeat: no-repeat;
       margin: 0px;
       padding: 0px;
}

#boxdown {
       background-image:url(/sito/images/boxcenterdown.gif);
       background-position: top left;
       background-repeat: no-repeat;
       margin: 0px;
       padding: 0px;
}

Ti ringrazio per le risposte, ma qualcosa ancora non va. Se riuscissi a scoprirlo mi faresti un grosso piacere

EDIT: Si avevo capito degli spazi li ho messi con il codice

[thomas_anderson]

Prova ad impostare position: relative; per ciascun box.

[Manson]

provato, non cambia nulla
se vuoi guarda con i tuoi occhi:
http://www.padremanson.com/sito/

CSS aggiornato:

#contentbg {
   margin: 0px;
	padding: 0px;
	background-image: url(/sito/images/boxcenterbg.gif);
	background-position: top left;
	background-repeat: repeat-y;
	position: relative;
}

#boxup {
   background-image: url(/sito/images/boxcenterup.gif);
	background-position: top left;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	position: relative;
}

#boxdown {
	background-image: url(/sito/images/boxcenterdown.gif);
	background-position: top left;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	position: relative;
}

[thomas_anderson]

Prova allora ad impostare background-position solo a top per la parte superiore e centrale e bottom per quella inferiore. Imposta anche4 un'altezza per la parte superiore ed inferiore.

[Manson]

ancora nulla

CSS aggiornato

#contentbg {
   width: 100%;
   margin: 0px;
	padding: 0px;
	background-image: url(/sito/images/boxcenterbg.gif);
	background-position: top;
	background-repeat: repeat-y;
	position: relative;
}

#boxup {
   background-image: url(/sito/images/boxcenterup.gif);
	background-position: top;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	position: relative;
	height: 16px;
}

#boxdown {
	background-image: url(/sito/images/boxcenterdown.gif);
	background-position: bottom;
	background-repeat: no-repeat;
	margin: 0px;
	padding: 0px;
	position: relative;
	height: 16px;
}

Ho provato anche mettendo background-position bottom sul box alto e top sul box basso ma nulla uguale

[Sickbrain]

Ho visto il tuo problema e penso di essere riuscito a risolverlo. Devi effettuare delle modifiche concettuali sull'impostazione dei box.

CODICE HTML

<div id="contentbg">
<div id="boxup"></div>
<p id="boxup"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed tempus.
Donec vestibulum, tortor sed tempor posuere, orci purus elementum diam, a fermentum mi diam
eget felis.</p>
<div id="boxdown"></div>
</div>

A questo codice devi abbinare il CSS

CODICE CSS

#contentbg
{ margin:0 auto; /* posizionamento, per ora al centro */
  padding:0;
  width:752px; /* determina la grandezza del box */ /* Lo si può impostrare anche in % */
}
#contentbg p {
  margin-top: -4px;
  padding: 0px;
  background: url("boxcenterbg.gif"); 

}
#boxup {
  width:100%;
  background: url("boxcenterup.gif") repeat-x;
  margin: 0;
}

#boxdown {
  background: url("boxcenterdown.gif");
  padding:0;
  margin-bottom:0px;
  height: 16px;
  text-align:right;
  font-size: 85%; /* L'impostazione del font in % è importante per visualizzazione in IE */
}

Io l'ho testato e tutto è perfetto, inoltre con questa soluzione puoi aggiungere la lunghezza di testo che preferisci e non avrai problemi di visualizzazione.

Se t'interessa puoi visitare questo link:

http://www.sickbrain.org/?document_i...ic_id=8&page=0

Spero di esserti stato d'aiuto.