Jak zrobić gradienty po bokach strony??

0

Męcze się już z tymi gradientami po bokach strony z trzeci dzień:/ Chciałbym aby strona miała wygląd taki jak na tym zdjęciu:

http://img352.imageshack.us/img352/6126/3kie8.jpg

Ja zrobiłem gradienty w taki sposób:

#LEWY{
	background: url("images/lewy.jpg");
	background-attachment:fixed;
	background-repeat: repeat-y;
	float: left;
	}

Drugi gradient umieściłem w sekcji "body":

          body{
	background: url("images/prawy.jpg");
	background-repeat: repeat-y;
	background-position: right;
	position: left;
	}

Jednak gdy zmniejszam rozdzielczość prawy gradient zostaje przy prawym boku okna przeglądarki a chciałbym aby znajdował się na całej długości prawego boku strony :)

0

tu masz zrobione

styles.css:

body{
  width:1000px;
  height:400px;
  margin:0 auto;
  background-color:#eeeeee;
  margin:0 auto;
  padding:0;
}

#lewy{
  background: url("lewy.jpg");
  background-repeat: repeat-y;
  width:66px;
  height:100%;
  float: left;
  margin:0;
  padding:0;
}

#prawy{
  background: url("prawy.jpg");
  background-repeat: repeat-y;
  width:66px;
  height:100%;
  float: right;
  margin:0;
  padding:0;
}

#content{
  background-color:#ffffff;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

html:

<!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=iso-8859-2" />
    <meta http-equiv="Content-Language" content="pl" />
    <title>tytul</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div id="lewy"></div>
  <div id="prawy"></div>
  <div id="content">
    <p>ble</p>
  </div>
</body>
</html>
0

Wielkie dzięki, ale to nie jest do końca to co chciałem uzyskać bo wysokość body jest ustalona na sztywno i jeśli na stronę będziemy dodawać jakiś tekst powyżej np. tych 400px to gradienty nie będą się rozciągać :/

0

Drobna modyfikacja poprzedniej wersji:

ble

``` 
body{
  background-color:#eeeeee;
  margin: 0;
  padding:0;
  width: 600;
}

#lewy{
  background: url("lewy.jpg") top left repeat-y;
  padding-left:66px;
}

#prawy{
  background: url("prawy.jpg") top right repeat-y;
  padding-right: 66px;
}

#content{
  margin:0 auto;
  width: 600px;
  background-color:#ffffff;
}
0

Ten sposób nie jest chyba zbyt dobry bo gradienty w ogole sie nie pokazuja :/

0

http://nav.kom.pl/cssGradientSides/

Może nie zwróciłeś uwagi na ścieżki do plików...

1 użytkowników online, w tym zalogowanych: 0, gości: 1