Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [HTML][CSS]Repeat-Y - dostosowanie do dlugosci strony
kaźmirz
post
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
 
 Start new topic
Odpowiedzi
mariolita
post
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
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 (IMG:style_emoticons/default/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

Posty w temacie
- kaźmirz   [HTML][CSS]Repeat-Y - dostosowanie do dlugosci strony   28.03.2016, 14:51:16
- - mariolita   przede wszystkim jeśli "calosc" ma stałą...   28.03.2016, 15:11:20
|- - kaźmirz   Cytat(mariolita @ 28.03.2016, 16:11:2...   28.03.2016, 15:19:23
- - trueblue   :before i :after dla #content zamiast #left i #rig...   28.03.2016, 16:01:09
|- - kaźmirz   Cytat(trueblue @ 28.03.2016, 17:01:09...   28.03.2016, 16:11:05
- - trueblue   http://stackoverflow.com/a/10509853/5889778 http:/...   28.03.2016, 19:20:58
- - kaźmirz   Cytat(trueblue @ 28.03.2016, 20:20:58...   28.03.2016, 22:12:52

« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 11.10.2025 - 06:13
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn