Jump to content
php.lv forumi

CSS Navigācija


Sugarfree
 Share

Recommended Posts

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:

 

img142.jpg

 

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 by Sugarfree
Link to comment
Share on other sites

#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 by Mikijs
Link to comment
Share on other sites

-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;

Link to comment
Share on other sites

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 galerijaqu6.png

 

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 by Sugarfree
Link to comment
Share on other sites

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 by Sugarfree
Link to comment
Share on other sites

 Share

×
×
  • Create New...