Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pozycjonowanie obrazka do dołu diva.
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
Jellyeater
26.04.2009, 12:48:42
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ć.
drake88
26.04.2009, 12:58:16
Kod
position: fixed; bottom
Jellyeater
26.04.2009, 13:04:06
Niestety trzyma się ekranu, zamiast być na dole. sad.gif Na dodatek przesuwa się w prawo.
drake88
26.04.2009, 13:14:17
Kod
position: absolute; bottom: 0px;
batman
26.04.2009, 13:25:35
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.
Jellyeater
27.04.2009, 04:28:33
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
batman
27.04.2009, 07:07:06
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
Jellyeater
28.04.2009, 05:33:30
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...
batman
28.04.2009, 06:53:35 
[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.
kleszczoscisk
28.04.2009, 07:13:31
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


?
Jellyeater
28.04.2009, 17:56:28
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
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.