background repeat-x non mi funziona :(

**Goliath** · 04-04-2011, 13:02

come posso fare la barra nera 'infinita' alla destra e alla sinistra del mio sito?

ho postato uno screenshot, tutto il sito e' dentro il div 'contenitor'

pensavo di mettere una barretta nera come background e ripeterla solo in x ma non mi funziona.

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>
<link rel="shortcut icon" href="Images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wango</title>
<style type="text/css">
body {
	background-color: #d1d1d1;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	IMG {border:0; 	background-color: #d1d1d1;
	margin-left: 0px;	
						}
}
td { vertical-align: top; }
a:visited {
	color: #FFF;

	}
body{text-align: center}   /* centra in IE5.x */
div#container{ width: 931px;
    margin: 0 auto;   /* centra negli altri browser */
    text-align: left;   /* ripristina l'allineamento */ 
	}
	
	{
background-image:url('images/background.gif');
background-repeat:repeat-x;
background-position:left top;
}

</style>
<script type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
</script>

</head>
<body>
<div id="container">
<table width="0" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><table id="Table_01" width="634" height="919" border="0" cellpadding="0" cellspacing="0" bgcolor=#FFFFFF>
	<tr>
		<td>
			[img]images/logo.gif[/img]


			[img]images/reel.gif[/img]

            
            [img]images/video.gif[/img]
         
		</td>
</tr>
</table></td>
    <td><table id="Table_02" width="297" height="919" border="0" cellpadding="0" cellspacing="0" bgcolor=#FFFFFF>
		<td>
			[img]images/head-02.gif[/img]

			[img]images/text.gif[/img]

			[img]images/email.gif[/img]
       </td>
	</tr>
</table></td>
  </tr>
</table>
</div>
</body>

</html>

**Prill** · 04-04-2011, 15:05

Se guardi il css inserito in quest'altra tua discussione per altro problema, vedrai che sono state eliminate quelle parentesi graffe di troppo che di fatto fanno sì che il background non risulti assegnato al div container né a nessun altro elemento

**Goliath** · 04-04-2011, 21:32

ciao, Grazie mille x la pulizia al codice, il mio era un copia e incolla di qua e di la :P

riguardo al background, non so se hai visto il file che ho allegato come reference.

in pratico ho fatto una gif di 1 px di larghezza e stessa altezza della barra dentro il div

dovrei in pratica avere ai lati la stessa barra nera che si estende.

quindi credo che non dovrebbe stare dentro il container ma al di fuori delle due colonne.

con il codice che ho adesso non vedo nessun background caricato.

Uploaded with ImageShack.us

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>
<link rel="shortcut icon" href="Images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wango</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border:0;
}
body {
	background-color: #d1d1d1;	
	text-align: center;
}
#container {
	width: 931px;
	margin: 0 auto;
	background-image:url(images/background.gif);
	background-repeat:repeat-x;
}
#colonnaSinistra {
	width: 634px;
	float: left;
}
#colonnaDestra {
	width: 297px;
	float: right;
}

</style>

</head>

<body>
<div id="container">
  <div id="colonnaSinistra">
    [img]images/logo.gif[/img]

    [img]images/reel.gif[/img]
			
    [img]images/video.gif[/img]

  </div>
  <div id="colonnaDestra">
    [img]images/head-02.gif[/img]

    [img]images/text.gif[/img]
			
    [img]images/email.gif[/img]

  </div>
<br clear="all" />
</div>
</body>
</html>

**Prill** · 05-04-2011, 07:43

Allora devi spostare il background su body. Non avevo visto prima il tuo screenshot. Se le due colonne devono partire dopo il logo puoi riconsiderare il codice 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>
<link rel="shortcut icon" href="Images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Wango</title>

<style type="text/css">
* {
	margin: 0;
	padding: 0;
	border:0;
}
body {
	text-align: center;
	background-color: #d1d1d1;
	background-image:url(images/background.gif);
	background-repeat:repeat-x;
}
#container {
	width: 931px;
	margin: 0 auto;
}
#header {
}
#content {
	background-color: #fff;
}
#colonnaSinistra {
	width: 634px;
	float: left;
}
#colonnaDestra {
	width: 297px;
	float: right;
}

</style>

</head>

<body>
<div id="container">

  <div id="header">[img]images/logo.gif[/img]</div>

  <div id="content">
     <div id="colonnaSinistra">contenuti della colonna sinistra</div>
     <div id="colonnaDestra">contenuti della colonna destra</div>
  <br clear="all" />
  </div>
   
</div>
</body>
</html>

**Goliath** · 05-04-2011, 12:55

grazie mille

Discussione: background repeat-x non mi funziona :(

Strumenti discussione

Ricerca discussione

Visualizza

background repeat-x non mi funziona :(

Permessi di invio