Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS]Repeat-Y - dostosowanie do dlugosci strony
Forum PHP.pl > Forum > Przedszkole
kaźmirz
28.03.2016, 14:51:16
Witam ponownie.
Mam problem z dostosowaniem diva z tlem, ktore ma sie powtarzac na osi Y, tak aby bylo doklanie tak samo "dlugie" jak reszta strony.
Tutaj daje link do tej "strony" http://proby.esy.es/
Chodzi o te cienie po bokach, zrobilem je na zasadzie divów z background w ktorym umiescilem grafike z repeat-y. Wszystko jest ok, dopóki strona nie zawiera wiecej tresci niz moze wyswietlic okno - wtedy przewijajac strone cienie sie koncza.

To moj kod css:
[CSS] pobierz, plaintext 
  1. html, body{
  2. 	background-color: #020;
  3. 	height: 100%;
  4. 	margin: 0;
  5. }
  6. div#calosc{
  7. 	margin: 0 auto;
  8. 	width: 800px;
  9. 	height: 100%;
  10. }
  11. div#lewa{
  12. 	background: url(../images/grad_left.png) left repeat-y;
  13. 	min-height: 100%;
  14. 	width: 18px;
  15. 	float: left;
  16. }
  17. div#prawa{
  18. 	background: url(../images/grad_right.png) right repeat-y;
  19. 	min-height: 100%;
  20. 	width: 18px;
  21. 	float: left;
  22. }
  23. div#content{
  24. 	background-color: #030;
  25. 	border-left
  26. 	border-left: 1px solid;
  27. 	border-right: 1px solid;
  28. 	border-color: #090;
  29. 	margin: 0 auto;
  30. 	width: 762px;
  31. 	min-height: auto;
  32. 	float: left;
  33. }
  34. div.nofloat{
  35. 	clear: both;
  36. }
[CSS] pobierz, plaintext


a tutaj html:
[HTML] pobierz, plaintext 
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Dokument bez tytułu</title>
  6. <link rel="stylesheet" type="text/css" href="includes/style2.css" />
  7. </head>
  8.  
  9. <body>
  10. <div id="calosc">
  11. 	<div id="lewa"></div>
  12. 	<div id="content">
  13.     	<p class="boycott">ABCDEFG</p>
  14.         <p class="boycott">HIJKLMN</p>
  15.         <p class="architects">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta interdum sem, id porta odio pretium eget. Morbi diam nunc, finibus quis tincidunt ac, iaculis ut dolor. Pellentesque a odio in orci scelerisque interdum rutrum sit amet risus. Sed dapibus urna eu quam vestibulum, ac commodo turpis malesuada. Quisque rutrum ornare lectus, at mattis ex sodales id. Duis nec odio risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum nulla, condimentum ac ipsum quis, ullamcorper pulvinar nisl. Curabitur quis metus ac augue bibendum tempor. Morbi imperdiet maximus porta.
  16.  
  17. Donec consequat in felis sit amet elementum. Suspendisse ut maximus risus, sed blandit est. Nam egestas ante libero, vitae porta enim interdum non. Phasellus vestibulum dictum risus. Nunc sit amet dapibus nulla, et ornare est. In hac habitasse platea dictumst. In sed magna elementum, malesuada mi commodo, auctor nisl. Nullam elementum massa vitae ultrices mattis. Maecenas lectus ex, sollicitudin quis orci sit amet, interdum ultricies mauris. Nunc id urna porttitor, placerat purus sed, eleifend tortor. Duis ante sem, tincidunt at velit id, efficitur elementum dolor. Nulla luctus urna nulla, id accumsan massa dignissim ut. Fusce non pellentesque velit, sed fermentum ante. Quisque id dui purus. Donec efficitur turpis dolor, id egestas velit faucibus et.
  18.  
  19. Aliquam pellentesque laoreet mauris, id vestibulum sem tincidunt in. Quisque sagittis nisi leo, at hendrerit nulla ultrices commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pulvinar lectus condimentum eleifend ultrices. Duis ac commodo ex, sed vulputate enim. Aenean tempus, sem eu placerat aliquam, eros libero facilisis augue, non dapibus enim nulla et elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras porta interdum sem, id porta odio pretium eget. Morbi diam nunc, finibus quis tincidunt ac, iaculis ut dolor. Pellentesque a odio in orci scelerisque interdum rutrum sit amet risus. Sed dapibus urna eu quam vestibulum, ac commodo turpis malesuada. Quisque rutrum ornare lectus, at mattis ex sodales id. Duis nec odio risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum nulla, condimentum ac ipsum quis, ullamcorper pulvinar nisl. Curabitur quis metus ac augue bibendum tempor. Morbi imperdiet maximus porta.
  20.  
  21. Donec consequat in felis sit amet elementum. Suspendisse ut maximus risus, sed blandit est. Nam egestas ante libero, vitae porta enim interdum non. Phasellus vestibulum dictum risus. Nunc sit amet dapibus nulla, et ornare est. In hac habitasse platea dictumst. In sed magna elementum, malesuada mi commodo, auctor nisl. Nullam elementum massa vitae ultrices mattis. Maecenas lectus ex, sollicitudin quis orci sit amet, interdum ultricies mauris. Nunc id urna porttitor, placerat purus sed, eleifend tortor. Duis ante sem, tincidunt at velit id, efficitur elementum dolor. Nulla luctus urna nulla, id accumsan massa dignissim ut. Fusce non pellentesque velit, sed fermentum ante. Quisque id dui purus. Donec efficitur turpis dolor, id egestas velit faucibus et.
  22.  
  23. Aliquam pellentesque laoreet mauris, id vestibulum sem tincidunt in. Quisque sagittis nisi leo, at hendrerit nulla ultrices commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur pulvinar lectus condimentum eleifend ultrices. Duis ac commodo ex, sed vulputate enim. Aenean tempus, sem eu placerat aliquam, eros libero facilisis augue, non dapibus enim nulla et elit</p>
  24.     </div>
  25.     <div id="prawa"></div>
  26.  
  27. </div>
  28.     <div class="nofloat"></div>
  29.  
  30. </body>
  31. </html>
  32.  
[HTML] pobierz, plaintext
mariolita
28.03.2016, 15:11:20
przede wszystkim jeśli "calosc" ma stałą szerokość to ja bym zrobił zewnętrznego diva w którym bym dopiero umieścił "calosc" - ten zewnętrzny div niech będzie miała wysokośc auto i overflow auto i powtarzanie background-y i wtedy będzie się rozciągał do wysokości content - w ten sposób będzie na całej wysokości tło a jeśli chodzi o tło to na jednym png(czy jaki tam masz format) zrobić lewą i prawą stronę cieni

a jak chcesz zostać przy tym to zawsze możesz użyc jquery (wysokosc content i ustaw ta sama dla lewej i prawej)

contentWysokosc = $("#calosc").height();

$("#lewa").height(contentWysokosc);

$("#prawa").height(contentWysokosc);
kaźmirz
28.03.2016, 15:19:23
Cytat(mariolita @ 28.03.2016, 16:11:20 ) *
przede wszystkim jeśli "content" ma stałą szerokość to ja bym zrobił zewnętrznego diva w którym bym dopiero umieścił "content" - ten zewnętrzny div niech będzie miała wysokośc auto i overflow auto i powtarzanie background-y i wtedy będzie się rozciągał do wysokości content - w ten sposób będzie na całej wysokości tło a jeśli chodzi o tło to na jednym png(czy jaki tam masz format) zrobić lewą i prawą stronę cieni

a jak chcesz zostać przy tym to zawsze możesz użyc jquery (wysokosc content i ustaw ta sama dla lewej i prawej)

contentWysokosc = $("#content").height();

$("#lewa").height(contentWysokosc);

$("#prawa").height(contentWysokosc);

Tak wlasnie mam, mam diva "calosc" w ktorym kolejno sa div "left", div "content" i div "right", ale pokombinuje z tym overflow - zupelnie o tym zapomnialem (przerwa kilkuletnia wink.gif)

EDIT: Overflow rozwala mi kompletnie strone :/

EDIT2: Jakieś inne pomysły bez uzycia jquery?
trueblue
28.03.2016, 16:01:09
:before i :after dla #content zamiast #left i #right i ostylowanie tych pseudoselektorów, lub użycie box-shadow dla #content.
kaźmirz
28.03.2016, 16:11:05
Cytat(trueblue @ 28.03.2016, 17:01:09 ) *
:before i :after dla #content zamiast #left i #right i ostylowanie tych pseudoselektorów, lub użycie box-shadow dla #content.

Moglbys przyblizyc mi to :before i :after, najlepiej na przykladzie, bo dlugi rozbrat mialem z htmlem :/
Box-shadow wole uniknac, bo nie wiem czy wszystkie przegladarki to obsluguja (kilka lat temu byl z tym problem :/)

Boże jak ciezko wracac do czegos, co sie przerwalo na dlugi czas - myslalem ze latwiej mi bedzie wink.gif
trueblue
28.03.2016, 19:20:58
http://stackoverflow.com/a/10509853/5889778
http://caniuse.com/#search=box-shadow
kaźmirz
28.03.2016, 22:12:52
Cytat(trueblue @ 28.03.2016, 20:20:58 ) *
http://stackoverflow.com/a/10509853/5889778
http://caniuse.com/#search=box-shadow

Dzieki wielkie, zupelnie zapomnialem o selektorach, chociaz uzywam ich chocby :hover :/ A stronka bardzo przydatna, juz laduje w ulubionych.
Pozdrawiam

EDIT:
Co do tego ::before i ::after, to mi jakos nie dziala, zrobilem tak:
[CSS] pobierz, plaintext 
  1. div#content::before{
  2. 	content: "";
  3. 	background: url(../images/grad_left.png) left repeat-y;
  4. 	min-height: 100%;
  5. 	width: 18px;
  6. 	display: block;
  7. 	 position:absolute;
  8.   left:0;
  9.   right:0;
  10.   top:0;
  11.   z-index:-1;
  12. }
[CSS] pobierz, plaintext


i nie ma cienia...


EDIT: Jak na razie skorzystalem z box-shadow, bo jak zobaczylem na browsershots praktycznie kazda przegladarka juz to wspiera smile.gif
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.