ugrás a tartalomhoz

CSS: Ötletekre lenne szükség

zoliky · 2009. Szep. 12. (Szo), 16.49
Van egy kep: Klik ide
HTML-be kell atirni. Nem boldogulok az alul lathato dobozal amelyben 2 kep van (See my portfolio es Download). Letrehoztam egy DIV-et sarga hatterel:

<div id="box">
</div>
A div alatt ti milyen modszert hasznalnatok? Egy listat letrehozni es mindegyik lista elemnek (LI) megadni egy kulon kepet?

Koszonom!
‹ readyState = 1 folyamatosan Űrlap, legördülő hivatkozás ›
 ■
1

Minek lista

Max Logan · 2009. Szep. 12. (Szo), 17.24
Csinálsz két <a> elemet, amibe teszel egy-egy képet (alt-ot beállítod). A pozicionálást pedig margin-nal megoldod. Minek ide lista?

Szerk.: Ha a szövegek szövegek, akkor pedig háttérnek megadod a kis ikonokat és background-position a barátod.
2

Koszonom! Igen, a szovegek

zoliky · 2009. Szep. 12. (Szo), 18.43
Csinálsz két <a> elemet, amibe teszel egy-egy képet (alt-ot beállítod). A pozicionálást pedig margin-nal megoldod. Minek ide lista?

Koszonom!

Nem a padding-ra gondoltal veletlenul?
Letrehoztam az elemeket:

<div id="servicesbox">
<a href="" class="a">Elso szoveg</a>
<a href="" class="b">Masodik szoveg</a>
</div>


#servicesbox .a {
  background: url(../images/star.png) no-repeat;
  display: block;
  padding-left: 10px;
  line-height: 10px
}
A kepek kulon vannak (star.png es arrow.png), a szovegek pedig maguk a linkek.
4

Nem padding ...

Max Logan · 2009. Szep. 12. (Szo), 19.30
... mert ha padding-ot adsz az a-nak, akkor növeled a kattintható területet, amit nem szeretnél. De ha már padding, akkor a konténer elem padding-ját állítva is tudod pozicionálni a benne lévő elemeket.
6

Igy erted ? : <a href=""><img

zoliky · 2009. Szep. 12. (Szo), 20.16
Igy erted ? :

<a href=""><img src="" alt=""/></a>
Nem lehet ezeket az IMG tagokat elkerulni, eppen drupalal dolgozok es nehez mindig ilyen hosszu path-okat megadni. Nem szebb CSS-el egy kepet behozni?
7

Attól függ, mint csinálsz

Max Logan · 2009. Szep. 12. (Szo), 20.32
Ha a link szövege is a képen van, akkor célszerű a kép, ha csak az ikont akarod kitenni, akkor background-ot adjál meg az <a> elemnek, amiben ott a szöveg.
8

a link szovege nincs a kepen

zoliky · 2009. Szep. 12. (Szo), 22.22
Ha a link szövege is a képen van, akkor célszerű a kép, ha csak az ikont akarod kitenni, akkor background-ot adjál meg az <a> elemnek, amiben ott a szöveg.

A link szovege nincs a kepen.

Ha background-ot adok az A elemnek es paddingolom (padding nelkul a szoveg a kepre csuszik) akkor a katinthato terulet is megno! Ezt pedig el akarom kerulni. Mutatom is a kovetkezmenyt (a hover egy hatter szin, a padding miatt ramaszik a kepre is): http://dl.getdropbox.com/u/1924024/hiba.jpg

Egy megoldast talaltam. A kepeket a container DIV-re rakom, es backround-positional beallitom oket.

Letezik jobb megoldas?
9

remelem, hogy most vilagos

zoliky · 2009. Szep. 12. (Szo), 22.26
remelem, hogy most vilagos amit fent irtam.
10

Ez is egy megoldás

Max Logan · 2009. Szep. 12. (Szo), 23.05
Az itcafe-n van egy hasonló megoldás. Alul a nyomtatóbarát verzió, stb. így van megoldva ahogyan írtad utóbb.
3

float

Ajnasz · 2009. Szep. 12. (Szo), 18.51
markupban a "downloadot" a "see my portfolio" ele teszed, majd downloadot floatolod jobbra, a containernek pedig beallitod a paddingot.
5

Csak a downloadot floatolom?

zoliky · 2009. Szep. 12. (Szo), 19.58
Ok, floatoltam az A elemet, amely tulajdonkeppen a download szoveg.
11

Talaltam egy jobb megoldast

zoliky · 2009. Szep. 13. (V), 12.01
Itt van egy megoldas:

HTML:

<div id="servicesbox">
   <span class="download"><a href="">Download quote</a></span>
   <span class="star"><a href="">Portfolio</a></span>
</div>
CSS:

span {
 padding-left: 40px;
 display: block;
}

.download {
  background: url(../images/download.png) no-repeat;
  float: right;

.star {
  background: url(../images/star.png) no-repeat;
}
Ez mukodik. Mondjuk a SPAN-t block tipusra alakitom igy lehet, hogy egy DIV-el is ugyanazt az eredmenyt kapom.
12

Felesleges span

Grandmaster · 2009. Szep. 13. (V), 12.46
Nincs szukseg a plusz SPAN elemre, az A-nak is ugyanugy adhatsz class attributumot.

<div id="servicesbox">  
    <a class="download" href="">Download quote</a>  
    <a class="star" href="">Portfolio</a>
</div>
Egy tipp: a class nevet pedig funkcio alapjan valaszd es ne a kinezet alapjan. (star helyett portfolio)
13

Szerintem nem felesleges

zoliky · 2009. Szep. 13. (V), 19.36
Ha nincs span (:hover elott es :hover utan): http://dl.getdropbox.com/u/1924024/hiba.jpg

Ha paddingolom az A elemet megno a katinthato terulet es vele egyutt a background-color is. Ezert inkabb a SPAN-t paddingolom.

Egy tipp: a class nevet pedig funkcio alapjan valaszd es ne a kinezet alapjan. (star helyett portfolio)

Koszonom a tanacsot. Az ikont felhasznalnam tobb helyen, ezert nincs funkcio alapjan.