Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.

Horizontalna ul navigacija + još nešto

[es] :: Web dizajn i CSS :: Horizontalna ul navigacija + još nešto

[ Pregleda: 5236 | Odgovora: 11 ] > FB > Twit

Postavi temu Odgovori

Autor

Pretraga teme: Traži
Markiranje Štampanje RSS

sojic
Dalibor Sojic
Makedonija

Član broj: 7051
Poruke: 796
62.220.218.*

Sajt: right-sock.net


+1 Profil

icon Horizontalna ul navigacija + još nešto19.11.2004. u 21:41 - pre 244 meseci
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

routing protocols enable routers to route routed protocols!
 
Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost


+23 Profil

icon Re: Horizontalna ul navigacija + još nešto20.11.2004. u 15:30 - pre 244 meseci
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.
Banned - Not available
 
Odgovor na temu

sojic
Dalibor Sojic
Makedonija

Član broj: 7051
Poruke: 796
62.220.218.*

Sajt: right-sock.net


+1 Profil

icon Re: Horizontalna ul navigacija + još nešto20.11.2004. u 21:54 - pre 244 meseci
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.

routing protocols enable routers to route routed protocols!
 
Odgovor na temu

noviKorisnik
Dejan Katašić
Novi Sad

Član broj: 13216
Poruke: 4533
*.dialup.neobee.net.

Sajt: www.novikorisnik.net


+5 Profil

icon Re: Horizontalna ul navigacija + još nešto21.11.2004. u 01:19 - pre 244 meseci
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.
 
Odgovor na temu

Ilija Studen
Novi Sad

Član broj: 3864
Poruke: 859
*.beotel.net.

Sajt: www.activecollab.com


+1 Profil

icon Re: Horizontalna ul navigacija + još nešto21.11.2004. u 15:17 - pre 244 meseci
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:
<!--[if lte IE 6]>
<style type="text/css">
    body { behavior:url("csshover.htc"); }
</style>
<![endif]-->


csshover.htc je free, pusten pod CC licencom tako da svi mogu da ga koriste. Pokazao se kao i vise nego koristan dodatak.
http://www.activecollab.com - Alat za upravljanje projektima
 
Odgovor na temu

dejan_r
Dejan Ranisavljevic

Član broj: 4359
Poruke: 13
*.panline.net.



Profil

icon Re: Horizontalna ul navigacija + još nešto21.11.2004. u 22:58 - pre 244 meseci
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:
<!--[if lte IE 6]>
<style type="text/css">
body { behavior:url("csshover.htc"); }
</style>
<![endif]-->


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.
 
Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost


+23 Profil

icon Re: Horizontalna ul navigacija + još nešto22.11.2004. u 13:30 - pre 244 meseci
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.
Banned - Not available
 
Odgovor na temu

sojic
Dalibor Sojic
Makedonija

Član broj: 7051
Poruke: 796
62.220.218.*

Sajt: right-sock.net


+1 Profil

icon Re: Horizontalna ul navigacija + još nešto22.11.2004. u 17:02 - pre 244 meseci
Danke bite

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

Videcemo dalje koji problemi ce da iskrsnu.
routing protocols enable routers to route routed protocols!
 
Odgovor na temu

dejan_r
Dejan Ranisavljevic

Član broj: 4359
Poruke: 13
*.panline.net.



Profil

icon Re: Horizontalna ul navigacija + još nešto23.11.2004. u 11:46 - pre 243 meseci
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. :)
 
Odgovor na temu

sojic
Dalibor Sojic
Makedonija

Član broj: 7051
Poruke: 796
62.162.243.*

Sajt: right-sock.net


+1 Profil

icon Re: Horizontalna ul navigacija + još nešto23.11.2004. u 21:05 - pre 243 meseci
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.
routing protocols enable routers to route routed protocols!
 
Odgovor na temu

Br@nkoR
http://localhost

Član broj: 2597
Poruke: 1603

Sajt: localhost


+23 Profil

icon Re: Horizontalna ul navigacija + još nešto24.11.2004. u 08:21 - pre 243 meseci
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.
Banned - Not available
 
Odgovor na temu

sojic
Dalibor Sojic
Makedonija

Član broj: 7051
Poruke: 796
62.162.243.*

Sajt: right-sock.net


+1 Profil

icon Re: Horizontalna ul navigacija + još nešto24.11.2004. u 17:54 - pre 243 meseci
Danke bite, to je to.
routing protocols enable routers to route routed protocols!
 
Odgovor na temu

[es] :: Web dizajn i CSS :: Horizontalna ul navigacija + još nešto

[ Pregleda: 5236 | Odgovora: 11 ] > FB > Twit

Postavi temu Odgovori

Navigacija
Lista poslednjih: 16, 32, 64, 128 poruka.