ugrás a tartalomhoz

Megbízható pontozott aláhúzás hivatkozásainknak

mefi · 2006. Aug. 2. (Sze), 09.21
Sok helyen merülhet fel az igény, hogy pontozott aláhúzással lássunk el linkeket weboldalainkon. A legegyszerűbb megoldás természetesen, ha az erre a célra bevezetett CSS tulajdonságot használjuk, például: border-bottom: 1px dotted #000;. Ez egy egy képpont vastagságú, fekete színű pontozott aláhúzást ad. Sajnos azonban Internet Explorerben a hatás nem pontozott vonal, hanem szaggatott vonal lesz. Egy képen alapuló megoldást szeretnék bemutatni, amit a kezdők haszonnal vethetnek be.

A kép elkészítéséhez én Adobe Photoshop-ot használtam, de bármilyen más rajzolóprogrammal is kivitelezhető.
  1. Készítsünk egy 10x15 képpont méretű képet, melynek a háttere átlátszó (transparent).
  2. Válasszuk ki a ceruzát (Brush tool > pencil tool), és mindig egy képpont kihagyásával, rajzoljunk pontokat. Fontos, hogy ha az első helyen van pont, akkor az utolsónál ne legyen, és ha az elsőnél nincs, akkor az utolsónál legyen.
  3. Ha készen vagyunk, akkor mentsük le a képünket tetszőleges néven. Én a pontozott.gif nevet használtam. Az adott esetben a GIF típus használatát ajánlom, mivel ennek átlátszóságával semmiképpen sem lesz gondja az Internet Explorernek.

Az olyan hivatkozásoknak, melyeknek pontozott aláhúzást szeretnénk adni, adjuk a pontozott class nevet. Ezt a CSS-ben már megfelelő háttérképpel tudjuk ellátni.

<a class="pontozott" href="http://weblabor.hu" title="Weblabor">Weblabor</a>


a.pontozott:link, a.pontozott:active, a.pontozott:visited {
  border: none; 
  text-decoration: none;
  background: transparent url(pontozott.gif) repeat-x left bottom;
}
A hivatkozás, az aktív hivatkozás, és a már látogatott hivatkozás alsó felületén elhelyezzük a képünket, és ezt vízszintesen ismételjük addíg, amíg a hivatkozás tart.

Természetesen különböző aláhúzás színt vagy stílust is megadhatunk, nem vagyunk a szigorú pontozáshoz kötve. A trükkel sokféleképpen lehet játszadozni, például hullámozott aláhúzással. Az eltérő állapotokhoz is köthetünk más tulajdonságokat. Ezzel a módszerrel egyelőre a beépített CSS tulajdonságnál sokkal biztosabb pontozott aláhúzást kapunk, amely biztos, hogy böngészőfüggetlen lesz.
 ■
1

Példa

Benjamin · 2006. Aug. 2. (Sze), 10.14
Mar regebben felmerult bennem, hogy itt a weblabor-on miert nincs pelda file? Amit lekattintva egybol megnezhet a user?
7

így alakult

Hojtsy Gábor · 2006. Aug. 2. (Sze), 22.05
Így alakult, de ez ugye egy új téma, nem kapcsolódik a bejegyzéshez.
2

gg

toxin · 2006. Aug. 2. (Sze), 10.50
én is erre jutottam kb. 1óra IE szívással (márhogy végső elkeseredésemben grafikus programhoz nyúltam) csak nekem menüpontokat kellett pontozott vonallal körbecsinálnom :) , abcug :P IE
3

Miért nagy a kép?

Anonymous · 2006. Aug. 2. (Sze), 12.21
Már csak az a kérdés, hogy az említett példában mi szükség van 10x15 pixeles képre, hiszen a kívánt hatás eléréséhez bőven elegendő egy 2x1 pixeles kép, aminek az egyik pixele valamilyen színű, a másik meg átlátszó.

Gyulus
4

Gond volt vele

attlad · 2006. Aug. 2. (Sze), 13.23
Régebben gond volt a 2x2-es meg hasonlóan kicsi mozaikszerűen beállított hátterek renderelésével. Lehet azóta már megoldották. Meg persze itt nem is egész háttér, de lehet megszokásból vagy a biztonság kedvéért.

Innen: http://www.primeshop.com/html/jump6.htm
We had originally made the black background image very tiny at 2x2 pixels - everyone knows that small images load faster, right? Well, that's true, but we learned that repainting that little image (333bytes) was eating up user's RAM and making their CPU chips work overtime! There were just so many repeats required to cover the page that visitors' computers were overwhelmed.

Consider: At 800x600, a screen displays 480,000 pixels. If we used a 2x2 image for the bg, then the computer was trying to repeat that image 120,000 times - and keep track of the location info for each repeat! Not less than 40mb of information!!
5

Ez igen!

Anonymous · 2006. Aug. 2. (Sze), 16.15
Ez elfogadhatóan hangzik. Persze igaz, hogy a mi esetünkben szóba se jöhet ez a hiba.

Gyulus
10

C.

Anonymous · 2006. Aug. 14. (H), 10.49
Gyorsabb, rendeles szempontjabol kicsit nagyobb kepet ismetelegtni mintsem 1000-szor 1x1-est. Es letoltes meretbeli elteres annyira nem igazan van, jo esetben a bongeszo ugyis csak 1x tolti le.
6

Alistapart kapcsolódó cikke

Jano · 2006. Aug. 2. (Sze), 20.15
CSS Design: Custom Underlines

Kép mérettel egyetértek. Igenis belassítja a sokszor ismétlődő pár pixeles kép a böngészőt.
8

css szabvány

sajt · 2006. Aug. 7. (H), 22.06
Ezt igazán beletehették volna a css szbványba. Vajon miért nincsen benne?
9

Mármint a pontozott aláhúzás?

Jano · 2006. Aug. 8. (K), 01.00
Hagyományos tipográfiában sem használnak szerintem pontozott aláhúzást. Ezért.
11

mi koze van?

Anonymous · 2006. Aug. 15. (K), 16.39
pontosabban.. ertem mi koze van, de muszaj mindig aszerint menni? :)