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:
  1. <div id="box">  
  2. </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:
  1. <div id="servicesbox">  
  2. <a href="" class="a">Elso szoveg</a>  
  3. <a href="" class="b">Masodik szoveg</a>  
  4. </div>  
  1. #servicesbox .a {  
  2.   background: url(../images/star.png) no-repeat;  
  3.   display: block;  
  4.   padding-left: 10px;  
  5.   line-height: 10px  
  6. }  
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 ? :
  1. <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:
  1. <div id="servicesbox">  
  2.    <span class="download"><a href="">Download quote</a></span>  
  3.    <span class="star"><a href="">Portfolio</a></span>  
  4. </div>  
CSS:
  1. span {  
  2.  padding-left: 40px;  
  3.  display: block;  
  4. }  
  5.   
  6. .download {  
  7.   background: url(../images/download.png) no-repeat;  
  8.   float: right;  
  9.   
  10. .star {  
  11.   background: url(../images/star.png) no-repeat;  
  12. }  
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.
  1. <div id="servicesbox">    
  2.     <a class="download" href="">Download quote</a>    
  3.     <a class="star" href="">Portfolio</a>  
  4. </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.