Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Position, z-index i problemy ze stylem
Forum PHP.pl > Forum > Przedszkole
MisiaQ
13.08.2013, 19:07:40
Witam,

Mam problem ze stylem strony :/ Po całonocnych bojach z funkcjami: "Position: absolute i relative", oraz z "z-index" udało mi się stworzyć środek mojej przyszłej strony. Radość moja jednak nie trwała długo ponieważ zaraz pojawił się następny problem. W momencie, gdy chciałem dodać dodatkowe DIV'y przed oraz po DIV'ie oznaczonym na obrazku czerwoną ramką. Po prostu nie mogę tego zrobić! Dodaje kolejnego DIV'a po zamknięciu tego czerwonego, a on za każdym razem zamiast pod czerwonym pojawia się na samej górze strony...

Czemu tak się dzieje? Jak temu zaradzić? Ręce mi opadają....

Obrazek jak to wygląda -> link

Poniżej kod html i css

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.    <meta http-equiv="content-type" content="text/html" />
  5.     <link rel="stylesheet" href="container.css" type="text/css" /> 
  6.    <meta name="author" content="" />
  7.  
  8.    <title>Untitled 1</title>
  9. </head>
  10. <body>
  11.  
  12. <div id="container">
  13.  
  14. <div id="cien_gora"></div>
  15. <div id="cien_dol"></div>
  16. <div id="menu">menu</div>
  17. <div id="tresc">tresc<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></div>
  18.  
  19. </div>
  20.  
  21.  
  22. <div id="footer"></div>
  23.  
  24. </body>
  25. </html>
[HTML] pobierz, plaintext 



[CSS] pobierz, plaintext 
  1. #container {
  2.     width: 1004px;
  3.     height: auto;
  4.     position: absolute;
  5.     background: #dddddd;
  6.     border: red 2px solid;
  7.     left:50%;
  8.     margin-left:-502px;
  9.  
  10.  
  11. }
  12. #menu {
  13.     background: #ffffff;
  14.     width: 250px;
  15.     height: auto;
  16.     position: absolute; left: 20px;
  17.     z-index:3;
  18.     border: green 2px solid;
  19. }
  20. #tresc {
  21.     background: #ffffff;
  22.     width: 720px;
  23.     height: auto;
  24.     position: relative; right: 150px;
  25.     z-index:2;
  26.     margin-left: 400px;
  27.     border: yellow 2px solid;
  28.  
  29. }
  30. #cien_gora {
  31.     background: #000000;
  32.     width: 1004px;
  33.     height: 100px;
  34.     margin-left: auto ;
  35.     margin-right: auto ;
  36.     position: absolute;
  37.     z-index:2;
  38.     border: blue 2px solid;
  39. }
  40. #cien_dol {
  41.     background: #000000;
  42.     width: 760px;
  43.     height: 100px;
  44.     position: absolute; bottom: 0px; left: 240px; 
  45.     z-index: 2;
  46.     border: blue 2px solid;
  47. }
  48. #footer {
  49.     background: yellow;
  50.     box-shadow: 0px 3px 10px;
  51.     width: 100%;
  52.     height: 145px;
  53.     clear: both;
  54.     border: 0px solid;
  55.     border-color: yellow;;
  56.  
  57.  
  58. }
[CSS] pobierz, plaintext


lobopol
13.08.2013, 19:34:17
Nie robi się layoutów w ten sposób, po co ci position absolute w tym wypadku?
zrób sobie mniej więcej taki układ:
[HTML] pobierz, plaintext 
  1. <div class="top"></div>
  2. <div class="page">
  3. <div class="menu"></div>
  4. <div class="content">sssss</div>
  5. </div>
  6. <div class="footer"></div>
[HTML] pobierz, plaintext

top/footer dajesz ten cień i wysokość page dajesz clearfixa (wyszukaj sobie css clearfix) menu float left i szerokość content float left/right i szerokość position absoluty są zbędne w tym wypdaku
MisiaQ
14.08.2013, 16:35:07
Tak masz rację, ale to co znajduje się w czerwonym prostokącie musi pozostać w takiej formie jakie jest, czyli: zielona ramka z menu lekko zachodzi na ramkę żółtą w której wyświetlane będą wiadomości, a pod tymi dwoma elementami muszą znajdować się te czarne prostokąty nazwane tam "cieniami". Jeden przyklejony do górnej krawędzi czerwonego prostokąta, drugi przyklejony do dolnej prawej krawędzi czerwonego prostokąta.

Aby móc użyć funkcji "z-index", czyli poukładać to wszystko tak jak wcześniej napisałem musiałem nadać każdemu z tych elementów jakiś "position" ponieważ bez "position" funkcja "z-index" nie działa. Chyba, że się mylę, tak?

Chodzi mi tylko o możliwość dodawania DIVów powyżej oraz poniżej tego czerwonego prostokąta ;/

Stworzyłem sobie dosyć skomplikowany szalbon w PhotoShopie i teraz męczę się z tego zakodowaniem ;/


Zmieniłem trochę podejście do problemu i udało mi się go rozwiązać, ale tylko w 90%. Do całkowitego rozwiązania problemu potrzebna mi jest pomoc w napisaniu kodu który pobierał by wysokość z "div id=tresc", którego wysokość uzależniona jest od jego zawartości i wstawiała tę wartość do div id="container". Przeszukałem internet i wiem, że da się to zrobić za pomocą czegoś takiego: 
[PHP] pobierz, plaintext 
  1. document.getElementById('tresc').style.height = divHeight+'px';
[PHP] pobierz, plaintext
ale nie mam pojęcia jak użyć tego w moim przypadku i przypisać potem pobraną wartość do wysokości contenera. Podacie jakiś przykład?


Całość wygląda tak i chcę pobrać wysokość z zielonego prostokąta i przypisać te wartość do czerwonego:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. 	<meta http-equiv="content-type" content="text/html" />
  5.      <link rel="stylesheet" href="test8.css" type="text/css" />
  6. 	<meta name="author" content="" />
  7.  
  8. 	<title>test 8</title>
  9. </head>
  10.  
  11. <body>
  12.  
  13. <div id="container" >
  14. <div id="container_menu_tresc">
  15. <div id="menu">menu</div>
  16. <div id="tresc">
  17. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in mi congue, pretium arcu tempor, pharetra orci. Fusce non aliquam augue, in sodales felis. Curabitur ut mauris et lacus vestibulum sodales eu ut sapien. Cras placerat leo ornare, ultrices urna a, eleifend lectus. Praesent eget felis egestas, auctor libero a, dictum est. Nunc consequat a mauris nec tristique. Nam iaculis, sem et iaculis tempus, tellus ante dignissim neque, ac faucibus ante mauris id turpis. Donec at rhoncus erat. Donec nec pharetra justo. Aliquam ac tincidunt turpis, ut ultricies orci. Vestibulum neque tellus, varius at placerat et, dignissim a tellus. Mauris eget posuere tellus. Donec condimentum rutrum odio non dapibus. Phasellus quis enim cursus, blandit orci vel, rutrum elit.
  18. Praesent lacinia, neque eget mollis vehicula, turpis leo commodo lectus, ut bibendum velit arcu eu lectus. Nunc ac tempor justo. Nam aliquam nec urna sed rutrum. Cras tristique fermentum lacus, ut ullamcorper turpis cursus ac. Vivamus viverra sem vel rutrum bibendum. Praesent et dolor semper quam ultricies aliquam. Phasellus sed diam eget nibh sollicitudin posuere. Nam eget mauris rhoncus dolor dictum mattis. Etiam pretium, tellus vel convallis egestas, quam libero consequat felis, sed auctor justo turpis eu enim. Cras volutpat, est id adipiscing ullamcorper, dui velit pulvinar leo, sit amet sollicitudin elit libero vitae mauris. Integer cursus enim non nibh hendrerit, in ultrices lacus lacinia. Suspendisse pharetra ullamcorper orci sed varius. Sed commodo tincidunt eros, quis consectetur massa luctus a.
  19. </div>
  20. </div>
  21. <div id="shadow_up">shadow_up</div>
  22. <div id="shadow_down">shadow_down</div>
  23. </div>
  24.  
  25.  
  26. <div id="footer"></div>
  27.  
  28. </body>
  29. </html>
[HTML] pobierz, plaintext 



[CSS] pobierz, plaintext 
  1. body {
  2.     width: 100%;
  3.     margin: 0 auto;
  4.     margin-left: auto;
  5.     margin-right: auto;
  6.     text-align: center;
  7. }
  8.  
  9. #container_menu_tresc {
  10.     width: 1004px;
  11.     height: auto;
  12.     position: absolute;
  13.     border: #000000 2px solid;
  14.     margin-left: auto;
  15.     margin-right: auto;
  16. }
  17. #container {
  18.     background: red;
  19.     width: 1004px;
  20.     height: 500px; 
  21.     border: red 2px solid;
  22.     margin-left: auto;
  23.     margin-right: auto;
  24. }
  25. #shadow_up {
  26.     width: 100%;
  27.     height: 50%; 
  28.     border: #000000 2px solid;
  29.     margin-left: auto;
  30.     margin-right: auto;
  31. }
  32. #menu {
  33.     background: yellow;
  34.     width: 250px;
  35.     height: 200px; 
  36.     border: #000000 2px solid;
  37.     position: absolute; left: 30px;
  38.     z-index:1;
  39.     margin-left: auto;
  40.     margin-right: auto;
  41. }
  42. #tresc {
  43.     background: green;
  44.     width: 740px;
  45.     height: auto; 
  46.     border: #000000 2px solid;
  47.     position: absolute; right: 30px;
  48.     margin-left: auto;
  49.     margin-right: auto;
  50. }
  51. #shadow_down { 
  52.     width: 100%;
  53.     height: 50%;
  54.     border: #000000 2px solid;
  55.     margin-top: auto;
  56.     margin-left: auto;
  57. }
  58. #footer {
  59.     background: url(bg_logo.png);
  60.     width: 100%;
  61.     height: 145px; 
  62.     border: #000000 2px solid;
  63.     margin-left: auto;
  64.     margin-right: auto;
  65. }
[CSS] pobierz, plaintext
fate
15.08.2013, 20:17:14 
[HTML] pobierz, plaintext 
  1. function jakasFunkcja()
  2. {
  3. var jakas = document.getElementById('#tresc').offsetHeight ;    
  4. document.getElementById('#container').style.height = "jakas";
  5. }
  6.  
  7. window.onload=jakasFunkcja;
[HTML] pobierz, plaintext


nie wiem do konca czemu to nie dziala bo nie znam sie na JS wiec nie bede sie meczyl i rzeźbił ale potrzebujesz czegos takiego mozliwe ze wystarczy poprawić składnię
MisiaQ
16.08.2013, 15:28:29
Wielkie dzięki fate, działa!
-fate-
16.08.2013, 17:03:07
na JSFIDLU nie trybiło moze ten window.onload albo nie widzialem po prostu efektu tam gdzie wystepowal hehe

Poczytaj teraz jak zastapic window.onload gdyz tym sposobem mozesz wywolac tylko 1 funkcje na starcie a z czasem bedziesz pewnie potrzebowal czegos jeszcze
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.