Forum PHP.pl > [PHP][HTML][CSS]Menu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Strarus

6.03.2009, 19:29:24

cześć
mam problem z wyświetlaniem generowanego menu. otóż na stronie zamiast pełnych grafik wyświetla się tylko coś takiego:

style są w porządku, więc o co chodzi?

ps. na localu wszystko jest ok, więc nie wiem o co chodzi?

tomsi

6.03.2009, 19:37:40

Temat: Najczestsze_bledy

Może punkt 10 rozwiąże Twój problem

Strarus

6.03.2009, 19:43:08

Niestety nie znalazłem tam pomocy, może kod będzie pomocny dla Was:

[PHP] pobierz, plaintext 
<?php
$url = basename($_SERVER['PHP_SELF']);
 $menu = array(
 'index.php' => 'Home',
 'artykuly.php' => 'Artykuły',
 'uzytkownicy.php' => 'Użytkownicy'
 );
 foreach($menu as $key => $value) {
 if ($url == $key) {
    print('<a class="menu_a" href="'.$key.'">'.$value.'</a>');
 } else {
    print('<a class="menu" href="'.$key.'">'.$value.'</a>');
 }
}
?>
[PHP] pobierz, plaintext

Marr

6.03.2009, 19:46:24

a co ma piernik do wiatraka?

Pokaż jak to powinno wyglądac. Może jakis base href psoci?

Spawnm

6.03.2009, 19:48:49

pokaż style css , tam jest źle , i coś mi się zdaje że sprawdzałeś na 2 różnych przeglądarkach .

Strarus

6.03.2009, 19:50:42

czyli pełne wym,iary zdefiniowane w css

CSS:

Kod

a.menu:link {
    background-image: url(menu.png);
    margin-right: 5px;
    width: 120px;
    height: 40px;
    text-align: center;
    padding-top: 6px;
    font-family: Microsoft Sans Serif;
    color: white;
    text-decoration: none;
}
a.menu:hover {
    background-image: url(menu.png);
    margin-right: 5px;
    background-position: 100% -40px;
    width: 120px;
    height: 40px;
    text-align: center;
    padding-top: 6px;
    font-family: Microsoft Sans Serif;
    color: white;
    text-decoration: none;
}
a.menu_a:link {
    background-image: url(menu_active.png);
    margin-right: 0px;
    width: 120px;
    height: 40px;
    text-align: center;
    padding-top: 6px;
    font-family: Microsoft Sans Serif;
    color: white;
    text-decoration: none;
}
a.menu_a:hover {
    background-image: url(menu_active.png);
    margin-right: 0px;
    background-position: 100% -40px;
    width: 120px;
    height: 40px;
    text-align: center;
    padding-top: 6px;
    font-family: Microsoft Sans Serif;
    color: white;
    text-decoration: none;
}

Marr

6.03.2009, 19:51:37

obstawiam po prostu zle podlikowanie do css'a. Nie może być inaczej (a przynajmniej wg mnie). Użyj sobie bezwzględnej ścieżki (zaczynając od http:// i tak dalej)do css'a i zobacz czy działa

Strarus

6.03.2009, 19:53:35

a zobacz CSS moje, myśle, że jest ok?

Spawnm

6.03.2009, 19:59:00

margin-right: 5px;
i masz powód odstępu

Strarus

6.03.2009, 20:02:22

ale mi nie chodzi o odstęp, tylko o to, że obrazki są dopasowane do napisu :/

Spawnm

6.03.2009, 20:04:00

zobacz ścieżki do obrazków , są w tym samym katalogu co plik który się wykonuje?
bo tak wynika z css.

Strarus

6.03.2009, 20:05:42

tak

edit: ktoś jeszcze wcześniej pytał o przeglądarki, tak ff i ie

decha-design

7.03.2009, 00:39:49

obiekt inline nie może mieć nadanej stałej szerokości ... zrób to na divach z float'em i będzie działać ... tylko wtedy standardy szlag trafi no ale cóż =))

Strarus

7.03.2009, 08:41:27

nie rozumiem co mam zrobić na divach i jak

w ogóle te linki mają grafike tylko na wysokość i szerokość dopasowaną, a powinny być 120x40

erix

7.03.2009, 11:44:41

Chodzi o warstwę. Nadaj jej opływanie (float).

Strarus

7.03.2009, 14:13:23

dodałem float: right i działało, ale wszystko było po prawej stronie (ma być na środku) a jak daję center (chyba w ogóle nie można) to jest tak jak było...

Spawnm

7.03.2009, 15:03:25

no to daj float: right i wszystko w boxa z margin:0 auto

Strarus

7.03.2009, 17:17:07

dobra już mam coś

jeszcze troszkę i będzie ok

dzięki

teraz jak już mam wszystko wyśrodkowane to mi nie wiem dlaczego obrazki wystają w dół:

background-repeat: no-repeat; nie pomaga

tylko w hover (dziwne)

Spawnm

7.03.2009, 17:18:59

pokaż kawałek kodu

Strarus

7.03.2009, 17:22:29

Kod

a.menu:link {
    background-image: url(menu.png);
    background-repeat: no-repeat;
    width: 120px;
    height: 40px;
    padding-top: 6px;
    float: right;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-family: Microsoft Sans Serif;
    display: inline;
}
a.menu:hover {
    background-image: url(menu.png);
    background-repeat: no-repeat;
    background-position: 100% -40px;
    width: 120px;
    height: 40px;
    padding-top: 6px;
    float: right;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-family: Microsoft Sans Serif;
    display: inline;
}

ścieżki się zgadzają, html to
<a class="menu" href="#">Home</a>

Spawnm

7.03.2009, 17:28:50

hmh pokaż nie tylko linki ale też box w którym się znajdują ...

Strarus

7.03.2009, 17:31:12

Kod

div#menu {
    width: 100%;
    height: 40px;
    margin: 0px auto;
    background-image: url(back_manu.png);
    background-repeat: repeat-x;
}
div#me {
    width: 360px;
    text-align: center;
}

html

Kod

Spawnm

7.03.2009, 17:33:44

ten sam height , ale linkom dałeś padding-top: 6px;, wywal

Strarus

7.03.2009, 17:36:30

dzięki

nie wiedziałem, że padding może 'zwiększyć' zasięg elementu

teraz tylko vertical-align:middle ;d

ale coś mi ten vertical-align: middle; nie działa

Spawnm

7.03.2009, 17:41:16

@ teraz tylko vertical-align:middle
a do czego to dajesz? (którego diva)
ewentualnie pobaw się w różnych przeglądarkach albo z tym paddingiem ale dla div menu albo z margin-top dla a

Strarus

7.03.2009, 17:42:44

vertical-align: middle; dawałem dla a.link i innych

Spawnm

7.03.2009, 17:43:46

daj dla boxa to w nim coś ma być pozycjonowane .

poczytaj sobie jakiś kurs o html i css

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.