Horizontalna ul navigacija + još nešto

[ sojic @ 19.11.2004. 21:41 ] @

Imao sam potrebe od horizontalne ul navigacije, nešto u stilu na FTN sajtu (zaboravio čij beće), i našao:

HTML koc:

Code:

<ul id="nav">
<li><strong>a navigation item</strong>
    <ul>
    <li>a navigation list item</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    </ul>
</li>
<li><strong>a navigation item</strong>
    <ul>
    <li>another navigation list item</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    </ul>
</li>
<li>...</li>
...
</ul>

CSS kod:

Code:

/*** Nav bar styles ***/

ul#nav,
#nav ul{
/*Remove all spacings from the list items*/
    margin: 0;
    padding: 0;
    cursor: default;
    list-style-type: none;
    display: inline;
}

ul#nav{
    display: table;
}

ul#nav>li{
    display: table-cell;
    position: relative;
    padding: 2px 6px;
}

ul#nav>li:hover{
    padding-right: 1px;
}

ul#nav li>ul{
/*Make the sub list items invisible*/
    display: none;
    position: absolute;
    max-width: 40ex;
    margin-left: -6px;
    margin-top: 2px;
}

ul#nav li:hover>ul{
/*When hovered, make them appear*/
    display : block;
}

#nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
    display: block;
    padding: 2px 10px;
}

/*** Menu colors (customizable) ***/

ul#nav,
#nav ul,
#nav ul li a{
    background-color: #fff;
    color: #369;
}

ul#nav li:hover,
#nav ul li a:hover{
    background-color: #369;
    color: #fff;
}

ul#nav li:active,
#nav ul li a:active{
    background-color: #036;
    color: #fff;
}

ul#nav,
#nav ul{
    border: 1px solid #369;
}

#nav a{
    text-decoration: none;
}

Problemi:
1. U principu sve je OK, ali nešto mi ne radi u IE. Problem je što u IE
1. Nije HORIZONTALNI nego VERTIKALNI
2. Pomenija nisu DISPLAY: none

2. Isto, u IE imam drugi problem.

Gore, u HEADER-u, ima jedan div sa slike u pozadini (gore desno), koja je odvojena od levog diva.

3. U svih browsera, imam isti problem, sa zelenog džidži-midži efekta (dizajnerski efekat).

On je u podeljen na dva dela, jedan ide u Menu divu, a drugi u Content divu (top left) se nalazi donji deo. ODVOJENI SU. Zašto? (gde je upitnik na srpskoj tastaturi? Moram da menjam za upitnika).

Ako stavim border (bilo kakav) radi, ali border mi ne vrši posao.

Pretpostavljam da je zbog paragrafa, zbog toga što ima neki padding (ili margin).

4. Kako da VERTICAL-ALIGN:MIDDLE?

Ako stavim display: table-cell radi, ali u IE opet se ne ponaša OK.

5. Nije baš problem, ali ako može neko da objasni u kratko što je razlika među

#nav ul i ul#nav

Šta pretstavlja #nav ul li ul i sl. Ja od prilike kapiram šta označava, ali ipak ako može malo objašnenje.

Evo i linka: http://www.x.net.mk/razvoj/konstrukcija.htm

[ Br@nkoR @ 20.11.2004. 15:30 ] @

1. Da li je to ovaj sajt?
2. A da probas drugacije da odradis ovaj deo. Npr da pozadinu iz #Row2 ubacis u #Header
3. Da problem je zbog paragrafa. Postavi marginu sa paragraf na nulu.
4. Jedino da pomocu padding-a podesis na odgovarajuce mesto.
5. Pogledaj u CSS Specifikaciji Descendant selectors.

[ sojic @ 20.11.2004. 21:54 ] @

1. Da to je taj sajt. Ali pod 1 je problem u navigaciji, radi sam u Mozili. U IE je vertikalni, u Operi, podmenija se ne otvaraju.
2. Recimo, sredio sam
3. Ne svidja mi se resenje. Ako stavim marginu na 0, onda ako imam 2, 3, n paragrafa, bice spojene (pretpostavljam), a ja hocu da budu odvojeni. Takodje, pretpostavljam da tekst ce da zalepen za menu lente.

[ noviKorisnik @ 21.11.2004. 01:19 ] @

Ako se u Operi ne otvara podmeni, to može da znači da pseudoklasa :hover nije prepoznata za li element (verovatno prepoznaje samo za a element).

Čini mi se da fora http://www.w3.org/TR/REC-CSS2/selector.html#child-selectors ide tek od css dvojke, ... ne verujem da to razume IE.

[ Ilija Studen @ 21.11.2004. 15:17 ] @

Ovaj sajt je radilo cetvoro ljudi, a covek koji je uradio meni ne posecuje ES bas redovno :) Nego, poslacu mu mail pa da pogleda ovu temu. On ce najbolje odgovoriti na pitanje.

Ja samo da spomenem da Opera podrzava hover pseudoklasu za LI, tu nema problema. IE je ne podrzava, ali to je reseno csshover.htc JSom.

Code:

csshover.htc je free, pusten pod CC licencom tako da svi mogu da ga koriste. Pokazao se kao i vise nego koristan dodatak.

[ dejan_r @ 21.11.2004. 22:58 ] @

Nemam mnogo vremena, ali evo u najkracem obliku, za pocetak je markup los, znaci neophodno je da navigation item bude link ...

Code:

<div id="#nav">
<ul>
    <li><a href="#">navigation item</a></li>
    <li><a href="#">navigation item</a>
      <ul>
        <li><a href="#">navigation list item</a></li>
        <li><a href="#">navigation list item</a></li>
        <li><a href="#">navigation list item</a></li>
      </ul>
    </li>
    <li><a href="#">navigation item</a>
      <ul>
        <li><a href="#">navigation list item</a></li>
        <li><a href="#">navigation list item</a></li>
        <li><a href="#">navigation list item</a></li>
        <li><a href="#">navigation list item</a></li>
      </ul>
    </li>
</ul>
<div>

Zatim sledi CSS, kod tebe ima dosta nebuloza, ali evo kako bih to ja uradio :

Code:

#nav ul {
    margin: 0;
    padding: 0;
}

#nav ul li {
  position: relative;
  display: inline;
}

#nav ul li a {
  display: inline;
  border:0;
  margin:0;
  padding: 2px;
  color: Black;
}

#nav ul li a:hover {
  color: Silver;
}

#nav ul li ul {
  position: absolute;
  margin:0;
  padding: 1px;
  left: 5px;
  top: 13px;
  width: 160px;
  display: none;
}

#nav ul li ul li {
  display: block;
}

#nav li ul li a {
  margin-left:0;
  border:0;
  padding:0;
  display: block;
}

#nav ul li ul li a:hover{
  display: block;
  margin-left:0;
  padding:0;

}

/* Ovo resava problem u IE-u, oko velicine blokova*/

* html ul li {height: 1%; }
* html ul li a { height: 1%;}

/* End */

#nav ul li:hover ul {
  display: block;
}

Citat:

Ja samo da spomenem da Opera podrzava hover pseudoklasu za LI, tu nema problema. IE je ne podrzava, ali to je reseno csshover.htc JSom.

Code:


csshover.htc je free, pusten pod CC licencom tako da svi mogu da ga koriste. Pokazao se kao i vise nego koristan dodatak.

Kao sto rece Ilija, bez htc-a nece da fercera u IE-u, zato je neophodno ovo ubaciti, koje ce da se izvrsi samo kada se stranica ucitava u IE-u .... i naci htc fajl koji ces postaviti na root sajta. To se nadam da mozes sam.

Ako te vec mrzi da trazis hover.htc koji odlicno resava posao, probaj ovaj neproveren JS, koji ce isto tako naterati u IE-u da radi hover.

Code:

startList = function() {
   if (document.all&&document.getElementById) {
      navRoot = document.getElementById("nav");
      for (i=0; i<navRoot.childNodes.length; i++) {
         node = navRoot.childNodes[i];
         if (node.nodeName=="LI") {
            node.onmouseover=function() {
               this.className+=" over";
            }
            node.onmouseout=function() {
               this.className=this.className.replace»("over", "");
            }
         }
      }
   }
}
window.onload=startList;

Drago mi je sto vec sada sajt fakulteta biva jedna od referenci, za one koji pocinju da se bave web-om, kada nije zvanicno ni pusten u rad. A sigurno ce tako biti i na dalje, jer sa ovakvom ekipom je moguce sve uraditi. Pozdrav.

[ Br@nkoR @ 22.11.2004. 13:30 ] @

Citat:

sojic:
3. Ne svidja mi se resenje. Ako stavim marginu na 0, onda ako imam 2, 3, n paragrafa, bice spojene (pretpostavljam), a ja hocu da budu odvojeni. Takodje, pretpostavljam da tekst ce da zalepen za menu lente.

Radeći sebi nešto došao sam do rešenja ovog problema:
Lajeru #Content dodaj float: left;. A da ne bi došlo do raspada sajta usled ovoga dodaj jedan lajer ispod lajera #content koji će imati clear: both;.
Takodje dodaj neki padding-top lajeru #Content kako text ne bi bio zaljepljen za meni.
Pozdrav.

[ sojic @ 22.11.2004. 17:02 ] @

Danke bite

.htc sam skidao sa sajta fakultet (nadam se da vam ne smeta)

Videcemo dalje koji problemi ce da iskrsnu.

[ dejan_r @ 23.11.2004. 11:46 ] @

Nema nikakvih problema, a ako slucajno uzimas ceo meni, samo ostavi komentarisan deo o autoru menija, mislim da zasluzujemo barem toliko, pogledaj dobro strukturu css-a na fakultetu tehnickih nauka, zato sto mozes dosta nauciti.

Pozdrav. :)

[ sojic @ 23.11.2004. 21:05 ] @

Jos nesto.

http://www.x.net.mk/razvoj/www.monroe.com.mk/

Meni u IE i Mozili i Operi nije bas isto (malo me nervira). U IE pozicija je OK (vertikalno u centar), dok u ostale browsere je gore i link pocinje iznad predvidjeno mesto za meni (ako fatis u tackice iznad).

Pokusao sam da se igram sa margine i pading, ali ako nastelujem Moz+Operu onda IE ide dole.

[ Br@nkoR @ 24.11.2004. 08:21 ] @

Uf, pa da počnemo:

U "#nav ul" dodaj:

Code:
padding-top: 8px;

Iz "#nav ul li a" ukloni:

Code:
padding-top: 9px;

i tu isto promeni:

Code:
background-position: 0px -4px;

U "#nav ul li a:hover" promeni:

Code:
background-position: 0px -34px;

U "#nav ul li ul" dodaj:

Code:
padding-top: 8px;

I to je valjda to.
Probao sam u IE i FF-u, nisam testirao u Operi jer mi nije pri ruci.

Pozdrav.

[ sojic @ 24.11.2004. 17:54 ] @

Danke bite, to je to.