Jak zrobić gradienty po bokach strony??

Odpowiedz Nowy wątek
2009-03-18 02:25

Rejestracja: 11 lat temu

Ostatnio: 9 lat temu

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 :)

Pozostało 580 znaków

2009-03-18 08:44

Rejestracja: 16 lat temu

Ostatnio: 7 lat temu

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>

Linuksa, czy innego Uniksa, można opisać za pomocą logiki boolowskiej a nie za pomocą prawdopodobieństwa.

'System szesnastkowy jest wspaniały! W skali od 1 do 10 daję mu E'

extreme safety for Ubuntu:
sudo echo -e 'Defaults targetpw\nDefaults timestamp_timeout=0' >> /etc/sudoers

Pozostało 580 znaków

2009-03-18 18:35

Rejestracja: 11 lat temu

Ostatnio: 9 lat temu

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ć :/

Pozostało 580 znaków

nav
2009-03-18 20:29
nav

Rejestracja: 16 lat temu

Ostatnio: 2 lata temu

Lokalizacja: Warszawa

0

Drobna modyfikacja poprzedniej wersji:

ble


```css
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;
}

utf-8 rlz! ٩(ಥ_ಥ)۶

Pozostało 580 znaków

2009-03-19 21:27

Rejestracja: 11 lat temu

Ostatnio: 9 lat temu

0

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

Pozostało 580 znaków

nav
2009-03-19 21:29
nav

Rejestracja: 16 lat temu

Ostatnio: 2 lata temu

Lokalizacja: Warszawa

0

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

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


utf-8 rlz! ٩(ಥ_ಥ)۶

Pozostało 580 znaków

Odpowiedz

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