layout ridimensionabile con ombra

**NiKolino** · 17-07-2008, 12:35

Ciao a tutti,

devo realizzare un layout ridimensionabile con ombra, come da oggetto :quote:

Ho fatto quanto segue:

codice:

<body><div id="contenitore">
  <div id="top">
    <div id="top_left"> </div>
    <div id="top_right"> </div>   
    <div id="top_center"> </div>
  </div>
  <div id="middle">
    <div id="middle_left"> </div>
    <div id="middle_right"> </div>  
     <div id="middle_center">
      

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
      

 Donec eget sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; </p>
      

Mauris justo ligula, dignissim sed, consectetuer vel, sollicitudin at, nisi. </p>
      

Phasellus eget urna. Mauris rhoncus, dolor eu sagittis suscipit, justo nisi consectetuer nisl,</p>
      

 eget ultricies ligula purus consequat magna. Praesent viverra egestas tortor.</p>
    </div>
  </div> 
  <div id="bottom">
    <div id="bottom_left"> </div>
    <div id="bottom_right"> </div> 
    <div id="bottom_center"> </div>
  </div> 
</div>
</body>

Con il seguente CSS:

codice:

html, body {
height:100%;

  margin: 0;
  border: 0;
  padding: 0;
}
#contenitore {
margin:10px;
  width: 75%;
}

#top {
  width: 100%;
  height: 6px;
    position:relative;
	clear:both;

}
#top_left {
  width: 6px;
  height: 100%;
  background:url(immagini/corner_LU.jpg) no-repeat;
  float: left;
}
#top_right {
  width: 6px;
  height: 100%;
  background: url(immagini/corner_RU.jpg) no-repeat;
  float: right;
}
#top_center {
  height: 100%;
  width: auto;
  background: url(immagini/bar_U.jpg)repeat-x;
}

#middle {
  width: 100%;
  height:100%;
  position:relative;
  clear: both;
  }
#middle_left {
  width: 6px;
  height:100%;
  background: url(immagini/bar_L.jpg);
  background-repeat: repeat-y;
  float: left;
  border:0;
  margin:0;
  padding:o;
}
#middle_right {
  width: 6px;
  height:100%;
  background: url(immagini/bar_R.jpg);
  background-repeat: repeat-y;
  float:right;
}
#middle_center {
  float: left;
}

#bottom {
  width: 100%;
  height: 6px;
    position:relative;
	clear:both;

}
#bottom_left {
  width: 6px;
  height: 100%;
  background: url(immagini/corner_LB.jpg) no-repeat;
  float: left;
}
#bottom_right {
  width: 6px;
  height: 100%;
  background: url(immagini/corner_RB.jpg) no-repeat;
  float: right;
}
#bottom_center {
  height: 100%;
  width:auto;
  background: url(immagini/bar_B.jpg) repeat-x;
}

Il risultato è che con firefox le due immagini di sfondo delle barre laterali (middle_right e middle_left) non vengono ripetute ma inserite 1 sola volta.
Di Explorer è meglio non parlare...

Perchè?????????'

**gabar-el** · 17-07-2008, 16:13

direi che è un errore nel css circa il background. dai l'immagine in background e poi la ripeti in background-repeat. se usi background devi mettere tutto li, del resto come hai fatto da altre parti, altrimenti il css va in conflitto.

**NiKolino** · 17-07-2008, 16:27

Ho provato a mettere il repeat nel background, ma il problema rimane...

Però!!!!!!

...sono riuscito a risolvere grazie a

http://www.gommalayout.mondoquarto.o...a/Ombrata.html

Grazie comunque gabar-el!!!

**gabar-el** · 17-07-2008, 16:30

prego e buon per te, ma credo che se fai così debba funzionare per forza!

codice:

#middle_right {
  width: 6px;
  height:100%;
  background: url(immagini/bar_R.jpg) top right repeat-y;
  float:right;
}

Discussione: layout ridimensionabile con ombra

Strumenti discussione

Ricerca discussione

Visualizza

layout ridimensionabile con ombra

Permessi di invio