Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] Problem z divami i inputem
Forum PHP.pl > Forum > Przedszkole
Elber
Witam, chcę osiągnąć taki efekt końcowy:



Ale niestety coś mi nie wychodzi ...



To mój HTML

  1. <div class="belka_gora">
  2. <div class="lewa_gora"></div>
  3.  
  4. <font style="padding-right:62px;">o nas | kontakt | raty | <a style="color:#01bcde; text-decoration:none;" href="">regulamin</a> | transport | mapa sklepu</font>
  5.  
  6. <div class="szukajka">
  7.  
  8. <form name="advanced_search_box" action="advanced_search_result.php" method="get">
  9. <input type="hidden" name="inc_subcat" value="1"><input type="hidden" name="search_in_description" value="1"><input type="text" name="keywords" style="width:169px;" maxlength="40">
  10. <input type="image" src="images/szukaj.png" style="border: 0px" alt="Szukaj" title=" Szukaj ">
  11. </form>
  12.  
  13. </div>
  14.  
  15.  
  16. <div class="prawa_gora"></div>
  17.  
  18. </div>


A to CSS:

  1. div.belka_gora{
  2. margin: 0 auto;
  3. background: url("images/srodek_gora.png") repeat-x;
  4. height:46px;
  5. padding-bottom:5px;
  6. text-align: right;
  7. line-height: 32px;
  8. font-family: Tahoma;
  9. font-size: 12px;
  10. font-weight: bold;
  11. color: #ffffff;
  12. }
  13.  
  14. div.szukajka{
  15. float:left;
  16. position:relative;
  17. }
  18. div.lewa_gora{
  19. float:left;
  20. background: url("images/lewa_gora.png") no-repeat;
  21. width: 47px;
  22. height:46px;
  23. }
  24.  
  25. div.prawa_gora{
  26. float:right;
  27. background: url("images/prawa_gora.png") no-repeat;
  28. width:10px;
  29. height:46px;
  30. }


Form tudzież input nie chce za bardzo utrzymać się na swoim miejscu i przechodzi pod spód tak jak to widać na załączonym obrazku ... Jak to zrobić aby było dobrze ?
Tajgeer
W kodzie HTML przesuń całego diva z klasą szukajka przed taga font (czyli zaraz za diva o klasie lewa_gora).

  1. <div class="belka_gora">
  2. <div class="lewa_gora"></div>
  3.  
  4. <div class="szukajka">
  5.  
  6. <form name="advanced_search_box" action="advanced_search_result.php" method="get">
  7. <input type="hidden" name="inc_subcat" value="1"><input type="hidden" name="search_in_description" value="1"><input type="text" name="keywords" style="width:169px;" maxlength="40">
  8. <input type="image" src="images/szukaj.png" style="border: 0px" alt="Szukaj" title=" Szukaj ">
  9. </form>
  10.  
  11. </div>
  12.  
  13. <font style="padding-right:62px;">o nas | kontakt | raty | <a style="color:#01bcde; text-decoration:none;" href="">regulamin</a> | transport | mapa sklepu</font>
  14.  
  15.  
  16. <div class="prawa_gora"></div>
  17.  
  18. </div>
Elber
Próbowałem już prędzej sad.gif Efekt taki:



Nikt nie ma pomysłu jak to naprawić ?

Bardzo proszę o pomoc...
Damonsson
Utwórz nowy czysty plik html i wklej do niego tylko to co tutaj pokazałeś...powinno być ok, więc może jakieś inne style psują Ci zabawę.
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.