Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Pozycjonowanie obrazka do dołu diva.
Jellyeater
post 26.04.2009, 12:48:42
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 26.04.2009

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

Witam wszystkich!!!

Mam w tej chwili taką stronę: http://www.poligrafus.com.pl/
I chcę ją przerobić na DIV.
W tej chwili została mi jeszcze ostatnia rzecz:
http://www.jellyeater.net84.net/poligrafus/index1.html

Czy jest jakiś sposób, by ten obrazek po prawej był na dole? Próbowałem już nawet java scriptem, ale te moje divy nie mają podanej wysokości. sad.gif I nie wiem co robić.
Go to the top of the page
+Quote Post
drake88
post 26.04.2009, 12:58:16
Post #2





Grupa: Zarejestrowani
Postów: 283
Pomógł: 15
Dołączył: 22.03.2009
Skąd: Bytów

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

Kod
position: fixed; bottom


--------------------
Oferuję tworzenie stron internetowych, instalację oprogramowania oraz jego konfigurację.
Go to the top of the page
+Quote Post
Jellyeater
post 26.04.2009, 13:04:06
Post #3





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 26.04.2009

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

Niestety trzyma się ekranu, zamiast być na dole. sad.gif Na dodatek przesuwa się w prawo.
Go to the top of the page
+Quote Post
drake88
post 26.04.2009, 13:14:17
Post #4





Grupa: Zarejestrowani
Postów: 283
Pomógł: 15
Dołączył: 22.03.2009
Skąd: Bytów

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

Kod
position: absolute; bottom: 0px;


--------------------
Oferuję tworzenie stron internetowych, instalację oprogramowania oraz jego konfigurację.
Go to the top of the page
+Quote Post
batman
post 26.04.2009, 13:25:35
Post #5





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
Ale bzdury wypisujesz ~vonEverest.

Wrzuć ten obrazek nie do znacznika img, a jako tło div-a. Ustaw w stylach background-position na right bottom i masz problem z głowy. Nie zapomnij ustawić powtarzania na no-repeat.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
Jellyeater
post 27.04.2009, 04:28:33
Post #6





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 26.04.2009

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

Niestety nadal nie działa. Ale jest lepiej. W IE pokazuje się jak trzeba. W FF nie. Obrazek jest w div prawy_brzeg. Na stronie tej drugiej jest update z tym kodem.

Kod strony:
[HTML] pobierz, plaintext 
  1. <body id="theDoc" onLoad="ustaw(1); zatwierdz(1);">
  2.  
  3.     <div id="container">
  4.     <div class="box" style="width: 603px; float: left;">
  5.     <div class="box" style="width: 603px"><img height="127" width="603" alt="Poligrafus - Andrzej Adamiak Drukarnia Warszawa" src="images/Untitled-1_01.gif" /></div>
  6.     <div class="box" style="width: 603px"><a href="glowna.html" onmouseover="ustaw(1)" onmouseout="zwolnij()" onclick="return zatwierdz(1)"><img class="menu" height="27" width="159" border="0" name="rysunek1" alt="Strona główna" src="images/Untitled-1_03.gif" /></a><a href="oferta.html" onmouseover="ustaw(2)" onmouseout="zwolnij()" onclick="return zatwierdz(2)"><img class="menu" height="27" width="84" border="0" name="rysunek2" alt="Oferta" src="images/Untitled-1_04.gif" /></a><a href="referencje.html" onmouseover="ustaw(3)" onmouseout="zwolnij()" onclick="return zatwierdz(3)"><img  class="menu" height="27" width="123" border="0" name="rysunek3" alt="Referencje" src="images/Untitled-1_05.gif" /></a><a href="kontakt.html" onmouseover="ustaw(4)" onmouseout="zwolnij()" onclick="return zatwierdz(4)"><img class="menu" height="27" width="99" border="0" name="rysunek4" alt="Kontakt" src="images/Untitled-1_07.gif" /></a><img class="menu" height="27" width="138" border="0" name="empty" alt="" src="images/empty.gif" /></div>
  7.     </div>
  8.     <div class="box" style="width: 372px; float: left;"><img height="154" width="372" alt="" src="images/Untitled-1_02.gif" /></div>
  9.     <div class="box" style="width: 975px; float: none;"><img height="13" width="603" alt="" src="images/Untitled-1_08.gif" /><img height="13" width="372" alt="" src="images/Untitled-1_09.gif" /></div>
  10.  
  11.     <div id="lewy_brzeg"><img height="324" width="13" alt="" src="images/Untitled-1_10.gif" /></div>
  12.     <div id="pageajaxloader" style="background-color: white; text-align: center; height: 200px;">
  13.  
  14.  
  15.  
  16.     <img height="32" width="32" src="images/ajax-loader.gif" /></div>
  17.     <div id="pagecontent"></div>
  18.     <div id="prawy_brzeg"></div>
  19.  
  20.     <div class="box" style="width: 975px; float: none;"><img height="9" width="975" style="align: left;" alt="" src="images/bottom_stripe.gif" /></div>
  21.     </div>
  22.     <div class="box" style="width: 100%; height: 120px; display: block;">&nbsp;</div>
  23.  
  24.     <div id="mask" style="position: absolute; left: 0; top:0; width: 100%; height: 100%; background-color: black; filter: alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; display: none;">
  25.     &nbsp;
  26.     </div>
  27.     <div id="picturediv" style="position: absolute; display: none; top:0; left:0; width: 100%;">
  28.         <div id="picturediv1" style="margin: 30 auto;">
  29.             <div style="text-align: right;"><img width="25" height="25" border="0" alt="Close" src="images/close.gif" style="cursor: pointer" onclick="hidepicture()" /></div>
  30.             <div style="text-align: center;"><img id="pictureimg" src="images/ajax-loader_black.gif" /></div>
  31.             <div style="text-align: center; color: white; font-family: Arial;" id="pictureinfo"></div>
  32.         </div>
  33.     </div>
  34.     </body>
  35.     </html>
[HTML] pobierz, plaintext


Styl:

[HTML] pobierz, plaintext 
  1. body {
  2.     margin: 0px;
  3.     padding: 0px;
  4.     color: black; background: #333333;
  5.     text-align: center;
  6. }
  7. #container {
  8.     width: 975px;
  9.     margin: 0 auto;
  10.     position: relative; top: 60px;
  11.     padding: 0px 0px 0px 0px;
  12.     background-image: url(images/background.gif);
  13.     background-repeat: repeat-y;
  14. }
  15. div.box {
  16.     padding: 0px;
  17.     margin: 0px;
  18. }
  19. img.menu {
  20.     padding: 0px;
  21.     margin: 0px;
  22. }
  23. #lewy_brzeg {
  24.     float: left;
  25.     position: relative;
  26.     padding: 0px 0px 0px 0px; 
  27.     margin: 0px auto;
  28.     width: 13px; 
  29.     float: left;
  30. }
  31. html #lewy_brzeg {
  32.     display: inline;
  33. }
  34. #pagecontent {
  35.     position: relative;
  36.     float: left;
  37.     padding: 0px; 
  38.     width: 590px;
  39.     background-color:white;
  40. }
  41. html #pagecontent {
  42.     display: inline;
  43. }
  44. #prawy_brzeg {
  45.     padding: 0px 0px 0px 0px;
  46.     position: right bottom;
  47.     height: 324px;
  48.     width: 372px;
  49.     float: left;
  50.     background-image: url(images/color_block.gif);
  51.     background-repeat: norepeat;
  52. }
[HTML] pobierz, plaintext


BTW to pod FF 3.0.9 nie działa coś przycicsk html w odpowiedzi. sad.gif

Ten post edytował Jellyeater 27.04.2009, 04:29:59
Go to the top of the page
+Quote Post
batman
post 27.04.2009, 07:07:06
Post #7





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1
Nie do końca o to chodziło.
Nie zamieniaj znacznika img na div, tylko do div-a z treścią wrzuć ten obrazek. Coś na kształt tego:
[HTML] pobierz, plaintext 
  1. <div id="div_z_obrazkiem_w_tle">
  2.     <div id="div_z_trescia">
  3.         Lorem ipsum...
  4.     </div>
  5. </div>
[HTML] pobierz, plaintext


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
Jellyeater
post 28.04.2009, 05:33:30
Post #8





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 26.04.2009

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

Nie bardzo widzę jak mam to zrobić. sad.gif

Wszystko mam w <div id="container">, ale on ma już tło, brzegi ramki.

Potem mam menu, a na koniec
<div id="lewy_brzeg"></div>
<div id="pagecontent"></div>
<div id="prawy_brzeg"></div>

I teraz tylko pagecontent ma jakąś zawartość. Gdzie dać diva z tymi kwadratami? Próbowałem:
<div id="tło">
<div id="lewy_brzeg"></div>
<div id="pagecontent"></div>
<div id="prawy_brzeg"></div>
</div>

I dać tło do diva, ale psuje się to niemiłosiernie.

Chyba powrócę do tabelek. sad.gif Bo Te divy to nie na moje wyrafinowane wymagania. sad.gif Tylko ponoć google pomija tabelki...
Go to the top of the page
+Quote Post
batman
post 28.04.2009, 06:53:35
Post #9





Grupa: Moderatorzy
Postów: 2 921
Pomógł: 269
Dołączył: 11.08.2005
Skąd: 127.0.0.1




 
[HTML] pobierz, plaintext 
  1. <div id="tło">
  2. <div id="lewy_brzeg"></div>
  3. <div id="pagecontent"></div>
  4. </div>
[HTML] pobierz, plaintext

Zrób tak i będzie działać. A jak nie zadziała, to stwórz nową stronę i wystaw ją na świat, by można było zobaczyć co jest w kodzie.


--------------------
I would love to change the world, but they won't give me the source code.
My software never has bugs. It just develops random features.
Go to the top of the page
+Quote Post
kleszczoscisk
post 28.04.2009, 07:13:31
Post #10





Grupa: Zarejestrowani
Postów: 164
Pomógł: 3
Dołączył: 13.12.2007

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

Moze spróbuj tak:

[HTML] pobierz, plaintext 
  1. #prawy_brzeg {
  2.     padding: 0px 0px 0px 0px;
  3.     position: absolute;
  4.     bottom: 9px;
  5.     right: 0;
  6.     height: 324px;
  7.     width: 372px;
  8.     background: #ff8000  url(http://www.jellyeater.net84.net/poligrafus/images/color_block.gif) bottom right no-repeat;
  9. }
[HTML] pobierz, plaintext


?


--------------------

Siedź cicho, kiedy śpi licho.
Go to the top of the page
+Quote Post
Jellyeater
post 28.04.2009, 17:56:28
Post #11





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 26.04.2009

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

Dzięki pomogło!!!

EDIT prawie pomogło. W IE jeszcze się nie zgadza. sad.gif Ale to tylko 1 px...

Ostatecznie jest 
[HTML] pobierz, plaintext 
  1. <div id="tlo">
  2.     <div id="lewy_brzeg"><img height="324" width="13" alt="" src="images/Untitled-1_10.gif" /></div>
  3.     <div id="pageajaxloader" style="background-color: white; text-align: center; height: 200px;"><br /><br /><br /><br /><img height="32" width="32" alt="" src="images/ajax-loader.gif" /></div>
  4.     <div id="pagecontent"></div>
  5.     <div id="prawy_brzeg"></div>
  6. </div>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. #lewy_brzeg {
  2.     float: left;
  3.     position: relative;
  4.     padding: 0px 0px 0px 0px; 
  5.     margin: 0px auto;
  6.     width: 13px; 
  7.     float: left;
  8. }
  9. html #lewy_brzeg {
  10.     display: inline;
  11. }
  12. #pagecontent {
  13.     position: relative;
  14.     float: left;
  15.     padding: 0px; 
  16.     width: 590px;
  17.     background-color:white;
  18. }
  19. html #pagecontent {
  20.     display: inline;
  21. }
  22. #prawy_brzeg {
  23. padding: 0px 0px 0px 0px;
  24. position: absolute;
  25. bottom: 9px;
  26. right: 0;
  27. height: 324px;
  28. width: 372px;
  29. background: #ff8000 url(images/color_block.gif) bottom right no-repeat;
  30. }
  31. #tlo{
  32.     padding: 0px 0px 0px 0px;
  33.     position: right bottom;
  34.     width: 975px;
  35. }
[HTML] pobierz, plaintext


Ten post edytował Jellyeater 28.04.2009, 17:59:03
Go to the top of the page
+Quote Post
« Następny starszy · CSS · 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: 14.07.2025 - 14:50
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn