Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Div w div'ie 'przyklejony' na dole
zietek
post
Post #1





Grupa: Zarejestrowani
Postów: 34
Pomógł: 1
Dołączył: 25.12.2007

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

Witam, probuje osadzic diva wewnetrznego w divie zewnetrzym tak aby ich dolne krawedzie zawsze sie pokrywaly. Chodzi o to ze przy zmianie wysokosci diva zewnetrznego zawsze widzimy dol diva wewnetrzengo.
Aby to latwiej sobie wyobrazic zrobilem przyklad z backgroundem. Efekt taki sam jak chce osiagnac, ale z wewnetrzna trescia...
Da sie to jakos osiagnac ?

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html>
  3.  <head>
  4.   <title></title>
  5.  </head>
  6.  <body>
  7.  
  8.   <div id="d1" style="position:relative;overflow:hidden;width:300px;height:150px;background-color:#AAAAAA"><div style="position:relative">a<br/>b<br/>a<br/>b<br/>a<br/>b<br/>a<br/>b<br/>a<br/>b<br/>a<br/>b<br/></div></div>
  9.  
  10. <div style="margin:10px 10px 50px 10px">
  11.  <input type="button" value="up" onclick="document.getElementById('d1').style.height='100px'">
  12.  <input type="button" value="down" onclick="document.getElementById('d1').style.height='150px'">
  13. </div>
  14.  
  15. <!-- taki efekt wizualny jak ponizej chce osiagnac --->
  16.  
  17.   <div id="d2" style="width:300px;height:150px;background-image:url(http://dwiestronyksiezyca.blox.pl/resource...ound-position:0 bottom"></div>
  18.  
  19. <div style="margin:10px 10px 50px 10px">
  20.  <input type="button" value="up" onclick="document.getElementById('d2').style.height='100px'">
  21.  <input type="button" value="down" onclick="document.getElementById('d2').style.height='150px'">
  22. </div>
  23.  
  24.  </body>
  25. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Toadstyle
post
Post #2





Grupa: Zarejestrowani
Postów: 54
Pomógł: 4
Dołączył: 26.01.2008
Skąd: Kraków

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

troche to nieczytelne
probowales bottom:0;margin-bottom:0; ?lub to samo z -1?
Go to the top of the page
+Quote Post
arecki
post
Post #3





Grupa: Zarejestrowani
Postów: 222
Pomógł: 35
Dołączył: 6.02.2005

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

Ostatnio ktoś miał problem ze scrollowaniem DIVa do czata. Żeby cały czas mu pokazywało się to co ostatnio było napisane. Akurat pamiętam bo tam zamieściłem rozwiązanie. Jak dobrze poszukasz i pogłówkujesz to znajdziesz. Generalnie trzeba tego DIVa "ręcznie" przewinąć w dół.
Go to the top of the page
+Quote Post
zietek
post
Post #4





Grupa: Zarejestrowani
Postów: 34
Pomógł: 1
Dołączył: 25.12.2007

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

probowalem bottom:0;margin-bottom:0; na div'ie wewnetrzym - nie daje rezultatu.
Z recznym przewijamiem w dol.... wolalbym wymusic jakos za pomoca css, a sterowac jedynie wysokoscia div'a nadrzednego.

Docelowo chcialbym osiagnac efekt jak menu po lewej na stronie http://docs.mootools.net/
Zatem przy plynnym rozciaganiu komorki nadrzednej nie jest za wygodnie sterowac scrollem podrzednej, chociaz w ostattecznosci bede do tego zmuszony.

Jezeli jednak ktos by znal jakies prostrze rozwiazanie to prosze o pomoc.

Ten post edytował zietek 29.01.2008, 22:54:42
Go to the top of the page
+Quote Post
arecki
post
Post #5





Grupa: Zarejestrowani
Postów: 222
Pomógł: 35
Dołączył: 6.02.2005

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

Cytat(zietek @ 29.01.2008, 22:53:35 ) *
Docelowo chcialbym osiagnac efekt jak menu po lewej na stronie http://docs.mootools.net/


Masz nawet URL w którym pokazane jest jak to zrobić i się pytasz jak (IMG:http://forum.php.pl/style_emoticons/default/questionmark.gif) Ja nic z tego nie kapuje (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) . Prosto się niestety nie da. Musisz odrobinę więcej niż sam CSS użyć (oczywiście mogę się mylić, gdyż nigdy w szkole nie byłem prymasem (IMG:http://forum.php.pl/style_emoticons/default/smile.gif) )

Ten post edytował arecki 30.01.2008, 18:43:10
Go to the top of the page
+Quote Post
zietek
post
Post #6





Grupa: Zarejestrowani
Postów: 34
Pomógł: 1
Dołączył: 25.12.2007

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

ok, udalo sie:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html> 
  3.  <head> 
  4.   <title></title> 
  5.  </head> 
  6.  <body> 
  7.  
  8.   <div style="overflow:hidden;width:300px;border:1px solid #444444"><div id="d1" style="margin-top:-100px">a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/>k<br/>l<br/></div></div>
  9.  
  10.   <div style="margin:10px 10px 50px 10px"> 
  11.    <input type="button" value="up" onclick="document.getElementById('d1').style.marginTop='-150px'"> 
  12.    <input type="button" value="down" onclick="document.getElementById('d1').style.marginTop='-100px'">
  13.   </div> 
  14.  
  15.  </body> 
  16. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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: 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 Aktualny czas: 25.12.2025 - 12:32
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn