x-kom hosting

jak zrobic profesjonalne menu

-~Jersey_29~-
utworzono
utworzono

http://gta.net.pl/ np na tej stronie jak jest menu po lewej to mamy tak fajnie zrobione ze mamy podzielone menu np na to "gta chinatown wars", "gta IV" i ta granica jest zrobiona za pomoca tych malutkich obrazeczkow. I pod spodem juz elegancko sa takie szarawe "bloczki" i w nich napisane odnosniki do dzialow strony. Jak on zrobil to ze podzielil to menu na te "bloczki" i na nich dal tekst, chodzi mi o to ze ja tez bym chcial zrobic takie menu:
[Nazwa dzialu, np w formie obrazka]
-link 1
-link 2
I w tle "link 1,2" dac takie bloczki albo jakis x-image.jpg.
Jak sie do tego zabrac zeby bylo profesjonalnie a nie wklejanie bloczkow jeden po jednym w kodzie html? : p
z gory dziekuje

przemek980
komentarz
komentarz

Obrazki możesz zrobić na przykład w Photoshopie.
Później odpowiedni kod CSS.
Najlepiej zobacz ich kod.
Mają zbudowany na [i]<li> <ul>[/i].

-~Jersey_29~-
komentarz
komentarz

no to wiem, do tego sam mniej wiecej doszedlem tylko problem w tym ze nie wiem jak to zrobili z tym <li> i <ul>. Nie chce od nich kopiowac, tylko prosze zeby mi ktos na jakims przykladzie wytlumaczyl mniej wiecej jaka jest struktura takiego menu (znaczy sie kod).

benkowik
komentarz
komentarz

[url="http://www.kurshtml.boo.pl/css/pionowe_menu,menu.html"]http://www.kurshtml.boo.pl/css/pionowe_menu,menu.html[/url]

-~Jersey_29~-
komentarz
komentarz

i juz na poczatku sie zacialem xD. wg instrukcji dalem w style.css;
[code]ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}[/code]
a w index.html poza tym ze odnosnik do style.css, znacznik html, body , head etc to umiescilem:
[code]<li><a href="czcionki.html">Czcionki</a></li>
<li><a href="tekst.html">Tekst</a></li>
<li><a href="tlo.html">Tło</a></li>
<li><a href="marginesy.html">Marginesy</a></li>
<li><a href="obramowanie.html">Obramowanie</a></li>[/code]

i nic to nie zmienia bo sprawdzilem i rownie dobrze moze byc pusty style.css
help

przemek980
komentarz
komentarz

Spróbuj usunąć jedno [i]<ul>[/i] z CSS.

-~Jersey_29~-
komentarz
komentarz

[code]ul, {
display: block;
list-style: none;
margin: 0;
padding: 0;
}[/code]

niestety tez nie dziala
jakies inne pomysly?

przemek980
komentarz
komentarz

Napisałem jedno <ul>
[code]
ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}
[/code]

-~Jersey_29~-
komentarz
komentarz

to ja tego troche nie rozumiem.. divy mam robic w ten sposob:
#nazwadiva{kod}
a jakies li czy ul mam dawac po prostu tak z niczego:
li ul{kod} (i nie wiadomo, mam pisac <li>, <ul> czy <li ul> bo to na to wychodzi..)

dumiti
komentarz
komentarz

bo li, ul to znaczniki html, mozna je w cssie dawać bez #divów...
jak dajesz background jako obrazek pod tło w tym menu (bloczki) to musisz ustalić jego szerokość i wysokość
najlepiej pobaw się najpierw na jakiejś pustej stronie, przetestuj jak wszystko działa i dopiero wrzuć to tam gdzie trzeba :)

-~Jersey_29~-
komentarz
komentarz (edytowane)

Dobra, juz all obczailem. Tylko jak ja mam definiowac sobie znaczniki html w tym style.css, np wlasnie te <li> czy <ul>. Podajcie schemat tak jak mam w przykladzie diva, ze:
#calosc
{
width:650px;
height:650px;
}

pliz :P

Gość
komentarz
komentarz

np.

<div [b]id="calosc"[/b]></div>

to będzie
#calosc {
}

id można dodać też do wielu znaczników wystarczy dodać [b]id=""[/b]

-~Jersey_29~-
komentarz
komentarz (edytowane)

nie o to chodzilo, chodzi mi o to definiowanie znacznikow <ul> czy <li> bo tutaj nie rozumiem np dlaczego jest na poczatku "ul, ul li". Dlaczego to nie jest "ul, li" tylko to drugie "li" jest poprzedzone "ul"? W tym sęk
[code]ul, ul li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}[/code]
O tutaj to jest. Po prostu chce wiedziec dlaczego nie powinno to byc np tak:
[code]ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
}[/code]

i oddzielnie:
[code]li {
display: block;
list-style: none;
margin: 0;
padding: 0;
}[/code]

[color="#FF0000"]Teraz inna rzecz (na tym mi bardziej zalezy):[/color]

ul, ul li {
display: block;
list-style: none;
margin: 0px;
padding: 0px;
background: url(bg_menu_item.jpg) repeat-y;
}
czy jezeli chce zeby miec menu, jakis tam naglowek a potem jak bede dawal linki to chce takie tlo osiagnac (bg_menu_item.jpg) dla kazdego <ul> to to jest dobra metoda czy nieprofesjonalna?

przemek980
komentarz
komentarz

Spokojnie, jeszcze jednego problemu nie rozwiązaliśmy.
1) Spróbuj zrobić osobno ul i osobno li. Sam kombinuj. W ten sposób najszybciej się nauczysz.
2) Namieszałeś tak, że nic z tego nie kumam. Powoli wyjaśnij o co chodzi. <ul> to tylko znacznik wskazujący, że chcesz pisać jakąś listę (w tym wypadku). To <li> jest tym właściwym znacznikiem, na którym bazujemy.

-~Jersey_29~-
komentarz
komentarz (edytowane)

Dobra, juz wszystko sobie wyjasnilem, mniejsza. Teraz cos innego.
chce zrobic taki deal:

[code]<div id="calosc">
<div id="menu">
<div id="up">
<div id="mid">
<div id="low">




</div>
</div>
</div>
</div>
</div>[/code]

dalem sobie po lewej menu, i to menu chce podzielic na trzy częsci: gorna, srodkowa i dolna (up, mid, low).W kazdej ma sie znajdowac tlo obrazkowe (u gory bedzie sie "zaczynala" ta kolumna, potem przez "mid" bedzie leciala zaleznie ile jest tekstu, a w "low" bedzie "obrazek zamykajacy" kolumne. Nie wiem co zrobic, w style.css wpisalem tak:
[code]#menu{
border:1px solid black;
height:1167px;
width:201px;
}

#up{
height:279px;
width:201px;
background: url(menu-mid - Copy.jpg);
}

#mid{
background: url(menu-mid.jpg);
width:201px;
height:auto;
}

#low{
height:279px;
width:201px;
background: url(menu-mid - Copy2.jpg);
}[/code]
Ale niestety nic z tego nie wyszlo. Co powinienem zrobic?

przemek980
komentarz
komentarz (edytowane)

background: url(menu-mid - Copy.jpg);

A nie masz tych obrazków w innym folderze?
Jeśli masz je np. w katalogu [i]images[/i] to musisz napisać
[code]background: url(images/menu-mid - Copy.jpg);[/code]

Sprawdź, czy jest .jpg czy .JPG.

Dałeś odnośnik w pliku .html
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />

Wciąż szukasz rozwiązania problemu? Napisz teraz na forum!

Możesz zadać pytanie bez konieczności rejestracji - wystarczy, że wypełnisz formularz.

×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Strona wykorzystuje pliki cookies w celu prawidłowego świadczenia usług i wygody użytkowników. Warunki przechowywania i dostępu do plików cookies możesz zmienić w ustawieniach przeglądarki.