Autor Zpráva
Folly
Profil
Zdravim vsechny,
jak uz napovida titulek meho prispevku potreboval bych poradit/pomoct s menu na mych strankach (http://mytests.xf.cz/).
Vytvoril sem si ve Photoshopu "design" stranek. Logo, menu ... Prikladam link na obrazek pro Vasi lepsi predstavu.
Odkaz na obrazek: http://nahrejto.cz/files/b35wtxh7z1pkwzingt12.jpg

Muj problem je, jak menu na stranky dostat v pozadovane podobe, tak jak je na obrazku. Jde to asi pres CSS, coz ja sam bohuzel nezvladnu. Dival sem se ze to nastavuje pomoci <li> a <ul>. Jenze pri mych pokusech se to bohuzel nezdarilo. Takze jsem to tam nahazel zbytecne slozite pomoci JavaScriptu, ale jak muzete videt jednotlive casti/obrazky menu maji mezi sebou rozestupy/mezery a ja nevim jak se jich zbavit, zkousel sem to pres border, vspace a hspace ale nic nepomaha.

Tak bych Vas chtel poprosit, jestli by mi nekdo z Vas, mohl napsat jak na to pomoci CSS (pres JavaScript to nechci, je to zbytecny a nikde sem to snad ani nevidel).
Jsem zacatecnik s webovkama tak prosimvas vynechte komentare typu "debile to je uplne jednoduchy atd..."
Predem moc diky.
Yur4Y
Profil
ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
li {
	float: left;
	width: 8em;
	margin-right: 1em;
	border: 1px solid;
}
To je nejaký ten základ, farby a podobné detaily si musíte doladiť sám. Tiež pouvažujte, či nie je zo sémantického hľadiska lepšie miesto <ul> použiť <menu>.
Folly
Profil
Yur4Y
Ok kdyz se ted na to podivas ( http://mytests.xf.cz/ ), tak uz je to vsechno za sebou bez mezer. Ted bych ale potreboval vedet jak dostat na pozadi ty obrazky a na to pismo. Zkousel jsem to odkoukat z webovejch sablon na www.freelayouts.com , stahl sem si od tam asi pet stranek s podobnym menu udelanym v CSS a odkoukat to odtama, ale kdyz sem si otevrela CSS kterekoliv te webovky tak to bylo az nemozne slozity a dlouhy a odkoukat se to z toho nedalo, nemohl bys me pls poradit jak dal? Jak tam dostat ty pozadi.

Vim ze to udelam, tak ze si nejak pojmenuj div a ten nastavim v CSS pomoci background-image:url, margin, float atd...
Ale vubec nevim jak to vsechno dat dohromady.
Byl ti moc vdecnej kdybys me poradil jak to nejak dat dohromady.
Predem moc dik.
Lexter
Profil
Folly
Na div se vyprdi. V menu je spousta prvků, které můžeš použít. Jde to třeba takto:

K Yur4Yovu kód přidáš

ul li a
{
background: url(../images/nazev-obrazku.pripona) no-repeat #000000; /*definuješ obrázek na pozadí + náhradní barvu, kdyby náhodou obrázek nedorazil
}


Jasně, bude to chtít trochu poladit, ale základ máš.
Folly
Profil
Asi uz s tim sem fakt otravnej, ale kdyz uz sem si ty stranky graficky navrhl tak bych to chtel dokoncit.
Takze sem to zas uz trosku poupravil. Zas se muzete podivat ( http://mytests.xf.cz/ ).
Ted uz to mam ty odkazy za sebou bez mezer ale zas ten obrazek na pozadi toho odkazu neni celej. Myslim cely to mnou navrzeny tlacitko ten button, ty dva jak sou niz na strance ukazany on.bmp a off.bmp tak ty sou vykresleny jenom na pozadi napisu odkazu a ja bych potreboval aby se tam objevil celej ten obrazek toho tlacitka a na nem ten odkaz. Tak sem nastavil ve style vsude width a height presne stejne jako rozmery obrazku ale stejne se objevi zas jenom ten kousek za textem.
Nevite pls nekdo jak to udelat aby se ten obrazek/button objevil celej a ne jen za textem.
Predem moc dekuju.
Lexter
Profil
Folly
Využij vlastnosti display: block; a padding u odkazů. Tím je roztáhneš.

ul li a
{
display: block; /* Udělá z odkazu blokový prvek a budeš jej moci libovolně paddingem roztahovat
padding: Xpx Xpx Xpx Xpx; /* X nahradíš za vyhovující hodnoty v číslech
}


Pokud mají tlačítka stejnou šířku a asi mají, tak by to šlo třeba takto:

ul li a
{
display: block; /* --//--
padding: Xpx 0 Xpx 0; /* X nahradíš za vyhovující hodnoty v číslech
width: Xpx; /* --//--
text-align: center; /* Aby byl text hezky na středu.
}
joe
Profil
Celkem jednoduše. Tady bych volil třeba pozitivní pozicování, tzn. že každou položku, tag <li>, musíš označit nějakým id/třídou. Třreba m1, m2, ..., m_

ul { width: 100%; height: ...px; position: relative; }
ul li { position: absolute; width: ...px; overflow: hidden; background: url('menus.png'); position: relative; }
ul li a { display: block; width: 100%; height: 100%; }

li#m1 { left: ...px;  }
li#m2 { left: ...px; }
li#m_ { left: ...px; }

li#m1 a { background-position: ...; }
li#m2 a { background-position: ...; }
li#m_ a { background-position: ...; }
Folly
Profil
Vsem Vam moc dekuju za odpovedi a za to, ze se snazite pomoc. Z kazde z tech ctyr odpovedi sem si neco vzal a neco se naucil. A kdyz se znovu podivate na ty stranky ( http://mytests.xf.cz/ ) a podivate so do "style" tak sem ten problem uz dokazal vyresit. Buttony jsou za sebou a zobrazeny cele diky vyuziti display: block a nasledne upraveni paddingu podle rozmeru buttonu. Barvy uz jsou taky tak jak maji byt.

Ted mam posledni problem s kterym si nevim rady. Po jeho vyreseni uz by bylo menu cele.
Tim problemem je jak mezi jednotlive buttony/odkazy vlozit obrazek. Konkretne na mych strankach "space.bmp" vlozit mezi dva sousedni buttony/linky a "left.bmp" pred prvni button/odkaz a "right.bmp" za posledni button/odkaz. Vysledny efekt si muzete prohlednout na grafickem navrhu ( http://nahrejto.cz/files/b35wtxh7z1pkwzingt12.jpg ). Jak si muzete vsimnout mezi buttony je vzdy obrazek za ucelem mezery. Kdyz sem tam obrazky normalne a logicky nahazel mezi jednotlive polozky seznamu jak si muzete vsimnout ve zdrojovem kodu stranky, tak se tam samozrejme nezobrazili.
Proto Vas moc prosim, jestli nekdo vite jak obrazky vlozit mezi buttony a jeden obrazek pred prvni button a jeden za posledni tak mi prosim poradte.
Predem diky za odpovedi a jeste jednou dekuju za predchozi rady.
panther
Profil
joe
Tady bych volil třeba pozitivní pozicování
můžu se zeptat, co tě k pozicování v tomto případě vede? Zde je úplně zbytečné.
Bubák
Profil
pozitivní pozicování
To čtu poprvé. Doporučil bych žádné pozicování.
zvěřiňák
Profil
Folly
Přidej těm obrázkům float: left;
ul img {
float:left;
}
joe
Profil
Bubák
Samozřejmě absolutní, ale rýpnout sis musel ;)

panther
To je věc názoru, co je zbytečné. Je naprosto jedno, jestli použije floatování nebo pozicování. Proč? S floatováním může pak mít problémy v jiných prohlížečích a to tu nikde řešené nevidím. Takže ono když už bude počítat souřadnice pro obrázek, tak ho neubyde, když napíše i levou pozici pro položku stejnou jako u obrázku a přičte k ní navíc okraj (vše co je vyhlazené, to mám jako obrázek).
Folly
Profil
HOTOVO
Konecne je vechno tak jak sem chtel a jak ma byt. Vsechny obrazky co byli narychlo udelany v .bmp jenom pro ukazku sou prevedeny do .jpg kvuli mensi velikosti. A cely nastaveni style z hlavicky stranky presunuty na externi soubor.
Vsem co jste mne tady poradili patri velky dik. Protoze sam bych to dohromady nedal. Byla to moje prvni stranka kterou sem delal pomoci CSS a ted za ty dva dny sem se toho hodne naucil a pristi CSS si uz snad udelam sam. Jeste jednou dik.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0