Problema sfondo sinistro e destro

**iadream** · 25-06-2009, 15:31

Salve amici, ho un'immagine di cui allego copia che vorrei trasformare in struttura css centrata rispetto alla pagina.
il problema mi si presenta con lo sfondo che a destra ed a sinistra non è uguale.....
Esiste secondo voi una soluzione...
In rete non so nemmeno come cercarla!

Grazie!

**iadream** · 25-06-2009, 15:35

scusate dimenticavo l'immagine!

**Mich_** · 25-06-2009, 16:42

Ma questa devi metterla come sfondo o come <img>? La soluzione e` tecnicamente leggermente diversa, ma la logica e` la stessa.
In ambedue i casi c'e` soluzione, anche se non e` immediata: comporta un minimo di tag HTML da inserire extra.

In pratica nel blocco che sta sotto l'immagine (il body?) devi inserire due oggetti (<div>) con posizionamento assoluto, uno che occupa la meta` destra ed uno la meta` a sinistra. Poi sopra il contenitore del sito, con l'immagine centrata.

Ecco una bozza:

codice:

HTML:
<body>
  <div id="sfondoSx" class="sfondo">&amp;nbsp;</div>
  <div id="sfondoDx" class="sfondo">&amp;nbsp;</div>
  <div id="wrapper">
    ....
  </div>
</body>

CSS:
* {
  margin: 0;
  padding: 0;
  border: 0;
}
html, body {
  width: 100%;
}
.sfondo {
  width: 50%;
  position: absolute;
  top:0; 
  background-repeat: repeat-x;
}
#sfondoDx {
  right: 0;
  background: url(bgSx.jpg)
}
#sfondoSx {
  left: 0;
  background: url(bgDx.jpg)
}
#wrapper {
  position: absolute;
  /* puo` essere largo 100%, oppure puo` essere centrato; dipende da come e` impostata la pagina */
  background: url(sfondobello.jpg);
  background-position: 50% 0;
  min-height: ...;   /* quanto la larghezza dell'immagine */
}

**iadream** · 25-06-2009, 17:24

Grazie per la soluzione, a cui avevo pensato anche io:

www.arturarte.com/prova

Però ho pensato ad un posizionamento di 80% a sinistra e 20% a destra!
Certo non è una cosa molto carina perchè se riduco di molto la finestra del browser ovviamente c'è una sovrapposizione.....
Però credo che sia l'unico modo... concordi?

codice:

body {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 90%;
	color: #333;
	text-align: center;
	margin: 0px;
	padding: 0px;
}
#warp {
	padding: 0px;
	width: 100%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	text-align: center;
}
#header-warp {
	background-image: url(/images/struttura/home_01.gif);
	background-repeat: repeat-x;
	height: 465px;
}
#content-wrap {
	padding: 0px;
	float: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 80%;
	text-align: left;
}
#header {
	background-image: url(/images/struttura/home_02.gif);
	background-repeat: no-repeat;
	height: 39px;
	width: 678px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 130px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#content {
	background-image: url(/images/struttura/home_05.gif);
	background-repeat: no-repeat;
	height: 285px;
	width: 668px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: auto;
	padding: 5px;
}
#content_rgt {
	float: left;
	background-image: url(/images/struttura/home_04.gif);
	width: 20%;
	background-color: #BEBEBE;
	background-repeat: repeat-x;
}
#footer-warp {
	background-image: url(/images/struttura/home_07.gif);
	background-repeat: repeat-x;
	height: 200px;
}
#logo {
	background-image: url(/images/struttura/home_06.gif);
	background-repeat: no-repeat;
	height: 296px;
	width: 191px;
	padding: 0px;
	margin-top: 169px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: 0px;
}
#opere {
	width: 130px;
	float: left;
	margin-left: -200px;
	height: 270px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
#contenuti {
	padding: 2px;
	margin-right: 0px;
	margin-left: -70px;
	font-size: 0.86em;
	color: #333;
	height: 275px;
	width: 540px;
	margin-top: 0px;
	text-align: justify;
	overflow: auto;
	margin-bottom: 0px;
	float: left;
}
#footer-lft {
	float: left;
	width: 80%;
}
#footer {
	background-image: url(/images/struttura/home_08.gif);
	background-repeat: no-repeat;
	height: 100px;
	width: 678px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: auto;
}
#footer-rgt {
	float: left;
	width: 20%;
}

Discussione: Problema sfondo sinistro e destro

Strumenti discussione

Ricerca discussione

Visualizza

Problema sfondo sinistro e destro

scusate

grazie

Permessi di invio