Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [HTML][CSS]Repeat-Y - dostosowanie do dlugosci strony
kaźmirz
post 28.03.2016, 14:51:16
Post #1





Grupa: Zarejestrowani
Postów: 103
Pomógł: 2
Dołączył: 6.07.2010

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
mariolita
post 28.03.2016, 15:11:20
Post #2





Grupa: Zarejestrowani
Postów: 116
Pomógł: 10
Dołączył: 24.04.2015

Ostrzeżenie: (0%)
-----

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

Ten post edytował mariolita 28.03.2016, 15:19:25
Go to the top of the page
+Quote Post
kaźmirz
post 28.03.2016, 15:19:23
Post #3





Grupa: Zarejestrowani
Postów: 103
Pomógł: 2
Dołączył: 6.07.2010

Ostrzeżenie: (0%)
-----

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?

Ten post edytował kaźmirz 28.03.2016, 15:26:11
Go to the top of the page
+Quote Post
trueblue
post 28.03.2016, 16:01:09
Post #4





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

:before i :after dla #content zamiast #left i #right i ostylowanie tych pseudoselektorów, lub użycie box-shadow dla #content.


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
kaźmirz
post 28.03.2016, 16:11:05
Post #5





Grupa: Zarejestrowani
Postów: 103
Pomógł: 2
Dołączył: 6.07.2010

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
trueblue
post 28.03.2016, 19:20:58
Post #6





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

http://stackoverflow.com/a/10509853/5889778
http://caniuse.com/#search=box-shadow


--------------------
https://kawalekkodu.pl
Go to the top of the page
+Quote Post
kaźmirz
post 28.03.2016, 22:12:52
Post #7





Grupa: Zarejestrowani
Postów: 103
Pomógł: 2
Dołączył: 6.07.2010

Ostrzeżenie: (0%)
-----

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

Ten post edytował kaźmirz 28.03.2016, 23:01:57
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 18.07.2025 - 04:40
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn