Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]Problem z obrazkiem pod odsyłaczem
Forum PHP.pl > Forum > Przedszkole
GoOx
Witam.
Mam takie problem:
  1. .menu {
  2. background:url('foty/menu.png') repeat-x;
  3. margin-top:0px;
  4. margin-left:20px;
  5. width:250px;
  6. height:700px;
  7. float:left;
  8. text-decoration: none;
  9. }
  10.  
  11. .menu a:link {
  12. color: #ffffff;
  13. background:url('foty/bg3.png') repeat-x;
  14. text-decoration: none;
  15. }
  16.  
  17. .menu a:hover {
  18. color: #ffffff;
  19. background:url('foty/bg4.png') repeat-x;
  20. text-decoration: none;
  21. }


Dodałem by do odsyłacze dodawał się obrazek pod napis ale ten obrazek ucina gdy kończy się tekst.
Czy da się jakoś zrobić by ten obrazek był w całości?
!*!
Wrzuć to na http://jsfiddle.net/
GoOx
Nie za bardzo ponieważ wszystkie obrazki mam na ftp.

To jest zwykły obrazek bez napisu.
Tylko na obrazek jest nałożony napis.

Wyżej podałem css to macie menu
  1. <link rel="stylesheet" href="styl.css" type="text/css">
  2. <div class="menu">
  3. </br>
  4. </br>
  5. </br>
  6. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="4">Html/Css/Php</font></br>
  7. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="3"><a href="/wstep.php">Wstęp</font></a>
  8. </br>
  9. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="3"><a href="/formatowanie.php">Formatowanie czcionki</font></a>
  10. </br>
  11. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="3"><a href="/odsylacz.php">Odsyłacze</font></a>
  12. </br>
  13. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="3"><a href="/css.php">CSS</font></a></br>
  14. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="3"><a href="/div.php">Div'y</font></a></br>
  15. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="3"><a href="/program.php">Program pomocniczy</font></a></br>
  16. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="3"><a href="/szablony.php">Szablony</font></a>
  17. </br>
  18. </br>
  19. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="4">Pawn</font></br>
  20. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="3"><a href="/wsteppa.php">Wstęp</a></font></br>
  21. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="/converter.php">Dodawanie obiektów</a></br>
  22. &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <font size="3"><a href="/gamemod.php">Budowa Gamemodu</a></font></br>
  23. </div>
  24. </div>
qrooel
Do:
  1. .menu a:link {}


Spróbuj dodać: display: block; oraz overflow: hidden;

W ostateczności spróbuj podać szerokość i wysokość tego tych linków, o ile obrazki są takiej samej wielkości.
GoOx
overflow nic nie daje a display robi że na całą długośc powiela się obrazek.

I to i to nic nie dało.
qrooel
Masz: background:url('foty/bg3.png') repeat-x; więc nic dziwnego, że obrazek się powiela. Daj może dla tego backgrounda: no-repeat;
GoOx
To teraz zrobiły mi się bardzo duże odstępu między odsyłaczami i odsyłacze sie ustawiły przy samej scianie obrazka menu.

Tak jakby zingorowały &nbsp; może dać diva?
qrooel
Wrzuć to na jakiś serwer, żeby można było to zobaczyć na żywo. ;]
GoOx
Proszę.

http://testecomputer.ugu.pl/index.php
qrooel
Masz odstępy bo masz tam przecież '<br>' powsadzane.

Tak się nie robi menu.

Menu opiera się na listach.

  1.  
  2. <ul class="menu">
  3. <li><a href="#">Odnosnik</a></li>
  4. <li><a href="#">Odnosnik</a></li>
  5. <li><a href="#">Odnosnik</a></li>
  6. <li><a href="#">Odnosnik</a></li>
  7. </ul>
  8.  


Opanuj sobie najpierw podstawy.

http://www.devinrolsen.com/pure-css-vertical-menu/
http://www.kurshtml.edu.pl/css/poziome_menu,menu.html
GoOx
Dobra dzięki już poprawione biggrin.gif

Ja raczej się uczę na fazie prób i błędów i praktyce sama teoria to już inna rzecz ;p
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.