Obsah fóra
Pravidlá • Registrovať • Prihlásenie

Obsah fóra » Software » Programovanie a tvorba webu » HTML, XHTML, XML, CSS » horizontalne ul menu





Odpovedať na tému Stránka: 1 z 1
 [ Príspevkov: 6 ] 
AutorSpráva
Offline misko16

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 12.11.08
Prihlásený: 25.10.23
Príspevky: 125
Témy: 30
Príspevok NapísalOffline misko16: 29.07.2011 0:49

zdravim,

potrebujem vystajlovat horizontalne menu tak, aby kazda jeho <li> polozka mala rovnaku sirku a spolu zaberali 100% sirky nejakeho parrent divu.

Napriklad ak by boli tie polozky 4, mali by width:25%, ak 5, mali by width:20%.

Problem je vsak v tom, ze to menu je tvorene dynamicky a teda neviem, kolko poloziek bude mat. Da sa to nejak vyriesit bez pouzitia JS?

Kód:
<html>
<head>
<style>
ul
{
margin:0;
padding:0;
}

li
{
display:block;
float:left;
}

div
{
width:500px;
background:yellow;
}

</style>
</head>
<body>
  <div>
    <ul>
      <li style="background:red;">Menu1
      </li>
      <li style="background:blue;">Menu2dsadsaddsa
      </li>
      <li style="background:green;">Menu3dsads
      </li>
/*dalsich X poloziek*/
    </ul>
    <div style="clear:left">
    </div>
  </div>
</body>
</html>


Offline Ďuri

Čestný člen
Čestný člen
horizontalne ul menu

Registrovaný: 11.08.07
Príspevky: 4088
Témy: 34
Bydlisko: Brno
Príspevok NapísalOffline Ďuri: 29.07.2011 11:11

Cau.
Teoreticky by to mozne bolo, kedze tak, ako ty pozadujes, sa standardne spravaju bunky tabulky. Mozes teda nastylovat svoje menu pouzitim tabulkovych hodnot CSS vlastnosti display, ukazka.
Problem -> niektore prehliadace (z pouzivanych menovite IE6 a IE7) nepodporuju tieto hodnoty vlastnosti display. Mas niekolko moznosti:
  • Pouzit v HTML klasicke elementy <table> a spol. => jednoduche, ale semanticke peklo.
  • Pouzit Javascript, tam mas zasa viacej moznosti, ako to riesit.
  • Vyuzit nejake nestandardne chovanie alebo ine "featurky" nekompatibilnych prehliadacov a tak dosiahnut zhodne zobrazenie. Teraz mi napadlo, ze Explorery by si mohol vyriesit expression()om, skusim ti to napisat, pripadne sa ti mozem opytat na stackoverflow.


Offline misko16

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 12.11.08
Prihlásený: 25.10.23
Príspevky: 125
Témy: 30
Príspevok Napísal autor témyOffline misko16: 29.07.2011 13:51

No to tvoje riesenie je dobre, pokial v tych li elementoch nie su texty. Akonahle tam nieco vlozim, rozbije sa to -> http://jsfiddle.net/4urew/7/ . Asi si zabudol na table-layout:fixed, s tym uz to ide aspon vo Firefoxe dobre.

Na JavaScriptoch zasa nechcem mat postavene spravne zobrazenie stranky.

Ak mozes, tak sa teda skus opytat, ale toto sa asi vyriesit ani neda tak, aby to bolo kompatibilne so vsetkymi dnesnymi browsermi. Prinajhorsom upravim tu PHP funkciu generujucu menu, aby to vyplula ako tabulku a nie zoznam.


Offline mitko

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 28.04.11
Prihlásený: 18.04.24
Príspevky: 296
Témy: 27
Bydlisko: Martin/Brno
Príspevok NapísalOffline mitko: 29.07.2011 18:15

Daj PHP spočítať koľko tam toho je potom vydeľ 100% tým číslo a daj to ako parameter style='' ak som to dobre pochopil mohlo by to fungovať ;-)


Offline Ďuri

Čestný člen
Čestný člen
horizontalne ul menu

Registrovaný: 11.08.07
Príspevky: 4088
Témy: 34
Bydlisko: Brno
Príspevok NapísalOffline Ďuri: 29.07.2011 18:25

Dikes za opravu, ten table-layout tam naozaj chybal.
Co sa tyka IE6 a IE7, napisal som ti expressiony. Kod mas patricne okomentovany. Zapis *vlastnost respektuje IE6 a IE7, zapis _vlastnost len IE6. Ak by si z nejakeho divneho dovodu chcel mat validne CSS, pouzi podmienene komentare.
Kód:
div    {
    display: table;
    width: 100%;
    border-spacing: 5px;
    table-layout: fixed;
}
ul    {
    display: table-row;
    /* IE7: prvky budu mat float, takze ich "vycisti" podla http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html */
    *overflow: auto;
    /* IE7: <ul> sa bude stale spravat ako zoznam, pretoze defaultne display hodnoty sa neprepisu. Vykastrovat, zlyncujem ho. */
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    /* IE6: <ul>.clientWidth vracia 0, ak nema prvok explicitne zadanu sirku. Toto neuskodi. */
    width: 100%;
}
li    {
    display: table-cell;
    border: 1px solid black;
    /* IE7: nahrazka border-spacing. Ak border-spacing nepotrebujes, pouzi margin: 0. Expressiona v IE6 nefunguje, ak nezadefinujes lubovolny margin, neviem preco, nevladzem to riesit. */
    *margin: 0 5px;
    /* Umiestni <li> vedla seba */
    *float: left;
    /* Workaround pre bug IE6: http://positioniseverything.net/explorer/doubled-margin.html */
    _display: inline;
    height: 2em;
    /* Let the fun begin ;) */
    *width: expression((function(li){
                var ul = li.parentNode,
                    c = ul.getElementsByTagName('li').length,
                    s = li.currentStyle,
                    uls = ul.currentStyle,
                    ulw = ul.clientWidth - parseInt(uls.paddingLeft) - parseInt(uls.paddingRight);
                return ~~(ulw / c) - (parseInt(s.marginLeft) + parseInt(s.marginRight) + parseInt(s.borderLeftWidth) + parseInt(s.borderRightWidth) + parseInt(s.paddingLeft) + parseInt(s.paddingRight)) + 'px';
            })(this));
}

Kazdopadne mozem sa ti aj tak spytat na SO, ci cirou nahodou neexistuje alternativne riesenie (tipujem, ze neexistuje, a ak ho niekto pozna, nezabija cas na SO :rolleyes: ), lebo toto riesenie s expressionmi prinasa napriklad take obmedzenie, ze vlastnosti padding, border a margin pre <li> plus padding pre <ul> nemozes specifikovat inak, ako v pixeloch; plus samozrejme tie nevyhody automaticky plynuce z expressionov. Inak ale myslim, ze je to dobre riesenie; malo by fungovat stale, aj s vypnutym Javascriptom, okrem pripadu, ked ti na stranku pride niekto s IE6/7 + vypnutym Javascriptom + vysokou urovnou zabezpecenia (to sa nastavuje v Moznostiach internetu); takyto navstevnik ti myslim na stranku nikdy nezavita, kedze by mu s takouto konfiguraciou nefungovala velka cast webov.
Samozrejme nezabudni, ze kvoli najlepsej kompatibilite musis mat na uplnom zaciatku kodu platny doctype, ktory spusti standardny mod, najjednoduchsie <!doctype html>.


Offline misko16

Užívateľ
Užívateľ
Obrázok užívateľa

Registrovaný: 12.11.08
Prihlásený: 25.10.23
Príspevky: 125
Témy: 30
Príspevok Napísal autor témyOffline misko16: 30.07.2011 23:19

diky, vyzera to v pohode ;)

tolko novych veci je v tom kode pre mna, ze sa tomu zatial ani nesnazim pochopit, hlavne ze to ide


Odpovedať na tému Stránka: 1 z 1
 [ Príspevkov: 6 ] 

Obsah fóra » Software » Programovanie a tvorba webu » HTML, XHTML, XML, CSS » horizontalne ul menu


Podobné témy

 Témy  Odpovede  Zobrazenia  Posledný príspevok 
V tomto fóre nie sú ďalšie neprečítané témy. Horizontalne Hover menu

v HTML, XHTML, XML, CSS

2

619

18.10.2008 18:20

arno Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Vysuvne menu - horizontalne a dalsia pomoc

v JavaScript, VBScript, Ajax

6

1559

17.11.2007 16:33

mylan Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. joomla top horizontálne menu s mootools ?

v Redakčné systémy

0

548

03.03.2010 16:11

snow23 Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Dva monitory - horizontálne čiary

v Monitory, televízory a projektory

0

624

02.01.2017 12:55

Webess Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. rusive horizontalne pasy na kablovke

v TV

5

679

24.02.2010 23:05

dsljohn Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. V sync / horizontálne čiary na monitore.

v nVidia grafické karty

9

582

07.02.2020 21:13

kllr007 Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Vertikalne aj horizontalne zarovnanie na stred

v HTML, XHTML, XML, CSS

2

556

07.10.2016 9:52

17mark Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Horizontálne pásiky na obrazovke pri štarte

v Monitory, televízory a projektory

3

510

21.12.2018 17:39

patro16 Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Horizontalne pasy v hornej casti obrazovky

v ATI/AMD grafické karty

7

748

14.09.2014 0:11

p3can Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Systém nejde spustiť - modré čiary horizontálne na displeji

[ Choď na stránku:Choď na stránku: 1, 2 ]

v nVidia grafické karty

49

1561

29.03.2016 17:09

Jos3phX Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Horizontalne čiary cez display - iba pri hrani hry.

v nVidia grafické karty

2

390

13.12.2014 22:15

coregamer Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. navigacne menu - sek.menu

v HTML, XHTML, XML, CSS

2

494

15.10.2013 21:54

newbie99 Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. Menu

v Video programy

2

769

20.04.2008 15:39

Dzin Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. menu

v HTML, XHTML, XML, CSS

2

764

04.04.2009 16:00

DeiDaro Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. MEnu

v HTML, XHTML, XML, CSS

20

505

21.05.2014 22:42

lukyno010 Zobrazenie posledných príspevkov

V tomto fóre nie sú ďalšie neprečítané témy. menu

v HTML, XHTML, XML, CSS

8

917

22.08.2008 10:00

Maron Zobrazenie posledných príspevkov


Nemôžete zakladať nové témy v tomto fóre
Nemôžete odpovedať na témy v tomto fóre
Nemôžete upravovať svoje príspevky v tomto fóre
Nemôžete mazať svoje príspevky v tomto fóre

Skočiť na:  

Powered by phpBB Jarvis © 2005 - 2024 PCforum, webhosting by WebSupport, secured by GeoTrust, edited by JanoF
Ako väčšina webových stránok aj my používame cookies. Zotrvaním na webovej stránke súhlasíte, že ich môžeme používať.
Všeobecné podmienky, spracovanie osobných údajov a pravidlá fóra