Teksta background attēls.

[Eob]

Problēma tāda, ka uzliekot tekstam fonā attēlu (nu šoreiz konkrētāk runa iet par navigācijas linkiem), attēls netiek parādīts pilnībā, bet tiek nogriezts tieši pēc teksta beigām. Googlē atradu ieteikumus fona attēlu likt iekš body nevis tieši elementā, bet tā kā es ar php esmu uztaisījis lai rāda selected lapas linkam savādāku attēlu, hover savādāku un pārējiem savādāku, tāda iespēja īsti nešķiet reāla. Ko iesākt?

[mefisto]

Links uz dzīvu lapu protams noderētu ...

 

Problēmas cēlonis ir tas, ka linki ir inline-level elementi.

Tas nozīmē ka <a> taga augstums ir teksta līnijas augstums.

 

Risinājums: float'o linkus ( navigācijas menu gadījumā tā nav problēma ),

tādā veidā tie tagi kļūs par block-level elementiem un tu varēsi norādīt height atribūtu.

[Grey_Wolf]

neviena Elementa Fona attels neiespaido Dotaa elementa izmerus !!!

 

var dariit ~~ shadi

<a href="?" ><div style="width:1000px ;....">  kautkads Teksts </div></a>

tas ir nelikt enkur taga tiiru tekstu bet gan DIV elementu , kuram protams vari noradiit gan platumu/augstumu utt. vertiabs. tas dos iepeleju Izstiept <a> tagu lidz vajadzigajiem izmeriem ...

--

[Eob]

neviena Elementa Fona attels neiespaido Dotaa elementa izmerus !!!

 

var dariit ~~ shadi

<a href="?" ><div style="width:1000px ;....">  kautkads Teksts </div></a>

tas ir nelikt enkur taga tiiru tekstu bet gan DIV elementu , kuram protams vari noradiit gan platumu/augstumu utt. vertiabs. tas dos iepeleju Izstiept <a> tagu lidz vajadzigajiem izmeriem ...

--

Paldies, būs jāpamēģina. Sanāks gan diezgan daudz pārtaisīt.

Manā gadījumā navigācija izskatās šādi:

<li><a href="?id=01〈=<?echo($_GET['lang'])?>" <?=$curr_id==01 || $curr_id==false ? "class='selected'":""?>>Pirmā lapa</a></li><br>
   <li><a href="?id=02〈=<?echo($_GET['lang'])?>" <?=$curr_id==02 ? "class='selected'":""?>>Otrā lapa</a></li><br>
   <li><a href="?id=03〈=<?echo($_GET['lang'])?>" <?=$curr_id==03 ? "class='selected'":""?>>Trešā lapa</a></li><br>
   <li><a href="?id=04〈=<?echo($_GET['lang'])?>" <?=$curr_id==04 ? "class='selected'":""?>>Ceturtā lapa</a></li><br>
   <li><a href="?id=guestbook〈=<?echo($_GET['lang'])?>" <?=$curr_id==guestbook ? "class='selected'":""?>>Viesu grāmata</a></li><br>

un attiecīgie CSS elememti:

#izvelne {
 display: block;
 float: left;  
 width: 140px;
 height: auto;
 background: none;
}

#izvelne ul {
 list-style-type:none;
 position:relative;
 font-size: 13px;
 font-weight: bold;
 text-align: left;
 line-height: 30px;
 background: none;
}

#izvelne ul li{
 display: inline;
}

#izvelne ul li a {
 color: #000;
 text-decoration: none;
 background: none; /*mainos sho mainaas neaktiivo linku fons*/
 padding: 4px;
}

#izvelne a:hover {
 font-size: 18px;
 color: #000;/*teksta krasa*/
 background-image: url('pics/bgnav.png');
 text-decoration: none;
 font-weight: bold;
}

#izvelne a.selected {
 font-size: 18px;
 color: #000;
 background-image: url('pics/bgnav.png');
 text-decoration: none;
 font-weight: bold;
}

 

Mājaslapu nekur internetā nevar redzēt, tāpēc būtu grūti parādīt.

[Eob]

Ir kāda iespēja panākt to, ko vēlos fona attēlu liekot iekšā tieši hover un selected elementos, netaisot tur apakšā tos DIVus?

[xPtv45z]

<a href="?" ><div style="width:1000px ;....">  kautkads Teksts </div></a>

Lai nepiesārņotu kodu, nav labāk?

<a href="?" style="width:1000px;display:block;...." >kautkads Teksts</a>

Jo manuprāt, lieku tagu lietošana ir tas pats, kas veidot layoutu ar tabulām. :)

[bubu]

<div> iekš <a> nemaz nedrīkst likt. Tb bloka elementu iekš inline elementa.

[Eob]

Mēģināju pēc xPtv45z piemēra - sanāca apmēram tas, ko biju gribējis. Paldies!

Tagad tikai jāatrod kur tur tās liekās atstarpes mētājās, un vajādzētu visam būt kārtībā. :D

 

EDIT: liekās atstarpes izrādījās navigācijā nevajadzīgi salikti <br> tagi. Tagad esmu panācis vēlamo efektu un ar padarīto apmierināts varu iet gulēt.

Edited September 5, 2009 by Eob