Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [css] Div oddalony od dolu/bottom o n px, chce go miec na dole
Pucy
post
Post #1





Grupa: Zarejestrowani
Postów: 124
Pomógł: 0
Dołączył: 8.05.2006

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

Sluchajcie probowalem na wiele sposobow zrobic by div trzymal mi sie dolu diva w ktorym sie znajduje... nie chce tak reagowac poniewaz mam marginesy na -20k xp i overflow wylaczone a stopka jest na clear:both...

DIV o ktorym mowie znajduje sie w dobrej pozycji z pionie, ale jako ze stopka jest stala i niezmienna, moglbym go zmusic aby odstawal od dolu strony o np. 95px, wtedy znalazlby sie na dobrym miejjscu... teraz troche kodu 

[HTML] pobierz, plaintext 
  1. <div id="container">
  2.       <div id="links" class="column">         
  3.  
  4.             <div class="category"><br />START</div>
  5.             <div class="sep"><br /></div>
  6.  
  7.             <div class="category">STRONY INTERNETOWE
  8.                <div class="link"><a href="#">KONSULTING, SZKOLENIA</a></div>
  9.                <div class="link"><a href="#">AKTUALIZACJA PORTALI</a></div>
  10.                <div class="link"><a href="#">NARZEDZIA</a></div>         
  11.             </div>
  12.             <div class="sep"><br /></div>
  13.  
  14.             <div class="category">STRONY INTERNETOWE
  15.                <div class="link"><a href="#">KONSULTING, SZKOLENIA</a></div>
  16.                <div class="link"><a href="#">AKTUALIZACJA PORTALI</a></div>
  17.                <div class="link"><a href="#">NARZEDZIA</a></div>         
  18.             </div>
  19.  
  20.       <div id="news">
  21.          NEWSLETTER
  22.       </div>
  23.  
  24.       </div>
  25.  
  26.  
  27.  
  28.       <div id="center" class="column">   
  29.  
  30.          <div id="centerx">
  31.  
  32.             sda   <br />sda   <br />sda   <br />sda   <br />sda   <br />
  33.             sda   <br />sda   <br />sda   <br />sda   <br />sda   <br /><br />
  34.             sda   <br />sda   <br />sda   <br />sda   <br />sda   <br />
  35.             sda   <br />sda   <br />sda   <br />sda   <br />sda   <br />
  36.             sda   <br />sda   <br />sda   <br />sda   <br />sda   <br />
  37.             sda   <br />sda   <br />sda   <br />sda   <br />sda   <br />
  38.  
  39.          </div>
  40.  
  41.       </div>
  42.  
  43.  
  44.    </div>      
  45. <div id="fotter">
  46.  
  47.       <div class="fleft"><img src="./templates/page/images/fot1.gif" alt="" /></div>
  48.       <div class="fright">xxx</div>
  49.  
  50.    </div>
[HTML] pobierz, plaintext


CSS:

[HTML] pobierz, plaintext 
  1. #container {
  2. width:780px;
  3. overflow:hidden;
  4. }
  5.  
  6. #container .column {
  7. padding-bottom: 20010px; /* X + padding-bottom */
  8. margin-bottom: -20000px; /* X */
  9. }
  10.  
  11. #center {
  12. border:0px solid black;
  13. width:566px;
  14.  float:right;
  15. }
  16.  
  17. #links {
  18. padding-bottom:100px;
  19.  width:214px;
  20. border:0px solid black;
  21.  float: left; background-image:url('../page/images/bglinks.gif');
  22. background-repeat:no-repeat;
  23.  background-color:#535353;
  24. }
  25.  
  26. #news {
  27. border:1px solid black;
  28. width:214px;
  29. postion:relative;
  30. margin-left:10px;
  31.  padding-bottom:100px;
  32. height:50px;
  33. }
  34.  
  35. /*** IE Fix ***/
  36. * html #left {
  37.   left: 214px;           /* RC fullwidth */
  38. }
  39. #fotter { padding:0px; width:780px; border:0px solid black; clear:both;}
  40. #fotter .fleft { width:214px; height:95px; float:left; }
  41. #fotter .fright { width:566px; height:95px; float:right; background-image:url('../page/images/fot2.gif'); }
[HTML] pobierz, plaintext


P.S Ogolnie chodzi mi o taki rezultat jak na tym pliku
http://republika.pl/pucal/1.JPG

zielony - rozszerze czerwony (zaleznie od tresci)
czerwony - rozszerza zielone (zaleznie od tresci)
brazowy - jest zawsze na dole zielonego bez wzgledu na tresci w poprzednich dwoch prostokatach.

Kto mi pomoze osiagnac taki rezultat?
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
s_w_ir
post
Post #2





Grupa: Zarejestrowani
Postów: 315
Pomógł: 1
Dołączył: 6.08.2003
Skąd: Kielce

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

Masz, jeśli coś CI nie pasuje to pisz
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
  2. "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
  4. 	<head>
  5. 		<link rel="stylesheet" href="style.css" type="text/css" />
  6. 	</head>
  7. 	<!-- Main view !-->
  8. 	<body>
  9. 		<div id="container">
  10. 			<div id="links">
  11. 				<div class="category"><strong>STRONY INTERNETOWE</strong></br>
  12. 					<a href="#">KONSULTING, SZKOLENIA</a><br />
  13. 					<a href="#">AKTUALIZACJA PORTALI</a><br />
  14. 					<a href="#">NARZEDZIA</a><br />
  15. 				</div>
  16. 				<div id="news">
  17. 					NEWSLETTER
  18. 				</div>
  19. 			</div>
  20.  
  21. 			<div id="fotter">
  22. 				<img src="./templates/page/images/fot1.gif" alt="" />
  23. 				<span>xxx</span>
  24. 			</div>
  25. 			<div id="center">
  26. 				<div id="centerx">
  27. 					sda <br />sda <br />sda <br />sda <br />sda <br />
  28. 					sda sda sda sda sda 
  29. 					sda <br />sda <br />sda <br />sda <br />sda <br />
  30. 					sda sda sda sda sda 
  31. 					sda <br />sda <br />sda <br />sda <br />sda <br />
  32. 					sda sda sda sda sda 
  33. 					sda <br />sda <br />sda <br />sda <br />sda <br />
  34. 					sda sda sda sda sda 
  35. 				</div>
  36. 			</div>
  37. 		</div>
  38. 	</body>
  39. </html>
[HTML] pobierz, plaintext


Kod
body
{
    margin: 0;
    padding: 0;
}

html, body, #container
{
    min-height: 100%;
    width: 100%;
    height: 100%;
}
html>body, html>body #contents {
    height: auto;
}

#container
{
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
}
    
#links
{
    border: 0;
    position: absolute;
    top: 0;
    left: 0;
    background: green;
    width: 13em;
}

#center
{    
    border: 0;
    margin: 0;
    margin-left: 13em;
    background: red;
}

#fotter
{
    position:absolute;
    bottom: 0;
    left: 0;
    width: 13em;
    background: brown;
}



Ps. nic Cie nie ostrzeże.

Ten post edytował s_w_ir 22.08.2006, 21:42:43
Go to the top of the page
+Quote Post

Posty w temacie
- Pucy   [css] Div oddalony od dolu/bottom o n px   12.08.2006, 12:01:58
- - s_w_ir   Kodposition : absolute; bottom:0; Teraz ta...   20.08.2006, 20:31:08
- - Pucy   MOze przetestuje, ale pytalem sie znajomego to mi ...   20.08.2006, 22:30:02
- - s_w_ir   Bez obrazy dla Twojego znajomego, ale... Tabele zo...   20.08.2006, 23:07:28
- - mike_mech   Cytat(Pucy @ 12.08.2006, 13:01 ) zielony ...   20.08.2006, 23:33:36
- - nasty_psycho   Cytatinna sprawa że trzeba się troche napracować ż...   21.08.2006, 01:14:02
- - s_w_ir   Mowa oczywiście o pierwszych próbach, przy przejśc...   21.08.2006, 02:39:39
- - Pucy   Znam definicje i zastosowanie tabel... mike_mech...   22.08.2006, 17:35:34
- - s_w_ir   Jesli jestes programista to naturalna cechą progra...   22.08.2006, 18:00:48
- - Pucy   Jestem programistą , tylko dlaczego mam poswi...   22.08.2006, 18:16:08
- - s_w_ir   Masz, jeśli coś CI nie pasuje to pisz [HTML] pobie...   22.08.2006, 21:40:15
- - Pucy   Czy ja naprawde zle tlumacze? s_w_ir to nie tak:(...   23.08.2006, 12:39:42
- - s_w_ir   Jak tłumaczysz tak masz: w kodzie mike_mech'a ...   23.08.2006, 21:57:19
- - Pucy   Cytat(wez to szare miejsce na dole zmien na zielon...   24.08.2006, 15:32:20

« 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: 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: 5.10.2025 - 13:17
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn