Horizontalna ul navigacija + još neštoHTML 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>
<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;
}
/*** 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!
