CSS Navigācija

[Sugarfree]

Izveidoju ar PS navigācijas "pogas", bet saskāros ar tādu problēmu, ka nezinu kā īsti tās ielikt web lapā, iepriekš pogu vietā biju lietojis parastu background.

 

Piemērs:

 

 

Mani interesē konkrēti trīs klikojamo navigācijas attēlu "stāvokļi" - a | a:hover | a:active

 

Kā to panākt?

 

Hmm... vēl viena problēma. Nekādīgi nesanāk nocentrēt

Edited March 6, 2008 by Sugarfree

[Mikijs]

kads tev TABLE vai DIV?

[Mikijs]

#navigacija {
text-align : center;
vertical-align : middle !important;
vertical-align : none;
padding-top : 3px;
padding-left : 10px;
background-image : url("menu_bg.png") !important;
background-image : url("");
color: black !important;
color: red;
}
#navigacija a {
color : black;
font-weight : normal;
white-space: pre;
font-size: 10px;
text-decoration: none;
padding: 3px;
-moz-border-radius: 3px; /*Sitas baigi labais;) man patik*/
}

#navigacija a:hover {
color : #3162A6;
border-bottom : 1px solid #8AD;
border-right : 1px solid #8AD;
border-top : 1px solid #7c95b9;
border-left : 1px solid #7c95b9;
padding : 2px;
-moz-border-radius : 5px;
}
/* Sito vari izmantot menucim ka esosais links piem ja esi foruma sadala tad menucim pieliec klani "current" */
#navigacija a.current {
background-color : white;
border-bottom : 1px solid #8AD;
border-right : 1px solid #8AD;
border-top : 1px solid #79D;
border-left : 1px solid #79D;
padding : 2px;
-moz-border-radius : 5px;
}

 

nu un tad kada vaidzetu but tip

 

<div class='navigacija'>
<a href='bla bla bla'>bla bla bla</a> | 
<a href='bla bla bla'>bla bla bla</a> | 
<a href='bla bla bla'>bla bla bla</a> | 
<a href='bla bla bla' class='current'>bla bla bla</a> | 
<a href='bla bla bla'>bla bla bla</a>
</div>

Edited March 7, 2008 by Mikijs

[andrisp]

-moz-border-radius: 3px; /*Sitas baigi labais;) man patik*/

Un strādā tikai uz FF.

 

Kāpēc šitā?

background-image : url("menu_bg.png") !important;
background-image : url("");

 

Un šitā?

vertical-align : middle !important;
vertical-align : none;

 

Un šitā?

color: black !important;
color: red;

[Sugarfree]

Hmm... Mikijs, manuprāt tu nesaprati, ko īsti es vēlos. Turklāt, navigāciju vajadzētu veidot ar <ul> <li> tagiem nevis vienkārši linkus samest iekš div.

 

Tas ko vēlējos ir 90% done. Intensīvāk pagooglēju, un atradu vienu veidu, pēc kura, tad nu taisa šāda veida navigācijas. Nezinu gan vēl kā ir ar pārlūkiem, uz Firefox un IE7 viss strādā bez problēmām, nezinu pagaidām kā ir ar IE6

 

Bet nu, ja nu kāds šī portāla meklēšanā uzdurās uz šo postu, tad te būs kods:

 

HTML:

<div id="navigation">
 <ul id="nav">
  <li id="nav-1"><a href="index.html"></a></li>
  <li id="nav-2"><a href="produkcija.html"></a></li>
  <li id="nav-3"><a href="cenas.html"></a></li>
  <li id="nav-4"><a href="jaunumi.html"></a></li>
  <li id="nav-5"><a href="galerija.html"></a></li>
  <li id="nav-6"><a href="kontakti.html"></a></li>
  <li id="nav-7"><a href="partneri.html"></a></li>
  <li id="nav-8"><a href="rekviziti.html"></a></li>
 </ul>
</div>

 

CSS:

#navigation {
 width: 100%;
 height: 42px;
}

ul#nav {
padding: 0;
margin: 0;
list-style: none;
background: url(../images/nav_bg.png) repeat-x;
text-align: center;
vertical-align: middle;
height: 42px;
}
#nav li {
height: 42px;
float: left;
}
#nav li a {
height: 42px;
display: block;
}

/* 
Sheit sakas pogas...

*/

#nav-1 a {
background: url(../images/par_mums.png) no-repeat;
width: 98px;
}
#nav-1 a:hover {
background-position:-98px;
}
#nav-2 a {
background: url(../images/produkcija.png) no-repeat;
width: 100px;
}
#nav-2 a:hover {
background-position: -100px;
}
#nav-3 a {
background: url(../images/cenas.png) no-repeat;
width: 68px;
}
#nav-3 a:hover {
background-position: -68px;
}
#nav-4 a {
background: url(../images/jaunumi.png) no-repeat;
width: 85px;
}
#nav-4 a:hover {
background-position: -85px;
}

#nav-5 a {
background: url(../images/galerija.png) no-repeat;
width: 81px;
}
#nav-5 a:hover {
background-position: -81px;
}

#nav-6 a {
background: url(../images/kontakti.png) no-repeat;
width: 88px;
}
#nav-6 a:hover {
background-position: -88px;
}

#nav-7 a {
background: url(../images/partneri.png) no-repeat;
width: 85px;
}
#nav-7 a:hover {
background-position: -85px;
}

#nav-8 a {
background: url(../images/rekviziti.png) no-repeat;
width: 86px;
}
#nav-8 a:hover {
background-position: -86px;
}

 

Aptuveni šādām jāizskatās vienas pogas attēlam, kas izpilda a | a:hover

 

Vēl ir divas, tā teikt nepilnības... Izmēģināju dažādi, bet nu nekādīgi nevaru dabūt tās pogas pa vidu iekš div, varbūt kāds var kaut ko ieteikt? Vienīgais, kas man sanāca tas ir ar padding dzīt uz priekšu no kreisās puses, bet nu, manuprāt, tas ir galīgi garām.

Otra lieta, gribētos, lai tā "over poga" paliktu redzama arī pēc linka nospiešanas, bet nu to es aptuveni nojaušu kas un kā...

Edited March 7, 2008 by Sugarfree

[Sugarfree]

Ak es muļķis... acīmredzot dēļ tā, ka nebiju noteicis ul#nav width, nevarēju to nocentrēt iekš div.

Kaut kā nebiju ievērojis... pievienojam dažas rindiņas un lieta darīta, navigācija ir vidū.

ul#nav {

margin: 0px auto;

width: 692px;

}

 

P.S.

Tāda sajūta, it kā es pats ar sevi sarunātos... :D

Edited March 7, 2008 by Sugarfree

[Aleksejs]

P.S.

Tāda sajūta, it kā es pats ar sevi sarunātos... :D

Dažreiz jāpaļaujas sajūtām un tām jātic ;)