Zoznamy s obrázkom

kalehit29 · Napísal **kalehit29**: 29.05.2011 0:13

Ahojte mám taký menší problém. Chcem na svojej stránke vytvoriť zoznam s obrázkovými odrážkami.
Ukážka č.1: Takto to chcem mať zapísané pomoc HTML a CSS
HTML

Kód:

<ul>
<li>1.stranka</li>
<li>2.stranka</li>
<li>3.stranka</li>
</ul>

CSS

Kód:

ul{list-style-image: url('folder.png');}

Výsledok:

Ukážka č.2: Takto sa to dá urobiť vo FrontPage
HTML

Kód:

<ul imagesrc="folder.png">
<li>1.stranka</li>
<li>2.stranka</li>
<li>3.stranka</li>
</ul>

Výsledok:

Otázka znie, existuje nejaká vlastnosť v CSS s ktorou by sa dalo zarovnať to písmo s tým obrázkom, tak ako to je v ukážke č.2 na obrázku?

Za pomoc vopred ďakujem!

Ďuri · Napísal **Ďuri**: 29.05.2011 0:25

Kvoli tomuto zarovnaniu sa nepouziva list-style-image, ale obrazok na pozadi, kde si to vies cez background-position perfektne prisposobit. S tym, ze text sa samozrejme odsadi lavym paddingom alebo text-indentom.

kalehit29 · Napísal autor témy **kalehit29**: 29.05.2011 0:30

Mohol by si mi prosím uviesť nejaký príklad? Nejako nechápem ako to myslíš.

johnny04501 · Napísal **johnny04501**: 29.05.2011 9:38

kalehit29 píše:

Mohol by si mi prosím uviesť nejaký príklad? Nejako nechápem ako to myslíš.

Ďuri má pravdu a ak som ho dobre pochopil tak to bude vyzerat takto

Kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body,td,th {
   color: #000;
}
body {
   background-color: #FFF;
}

#folder {
   background-image:url(images/BFBC2design_02.png);
   background-repeat:no-repeat;
   padding-left:26px;
   list-style:none;
}

</style>
</head>


<body>

<ul>

<li id="folder">1.Folder</li>
<li id="folder">2.Folder</li>
</ul>
</body>
</html>

jedno mozne riesenie

kalehit29 · Napísal autor témy **kalehit29**: 29.05.2011 16:31

Aha..Teraz to už chápem.
Ďakujem.

DeaDMan · Napísal **DeaDMan**: 02.06.2011 17:57

az na to, ze id by malo by byt v dokumente pouzite len raz

ale to je len detail

walther · Napísal **walther**: 02.06.2011 18:24

detail, ktorý môže byť raz veľmi podstatný, napr pri používaní javascriptu

DeaDMan · Napísal **DeaDMan**: 02.06.2011 23:48

presne ako vravis

kalehit29 · Napísal autor témy **kalehit29**: 03.06.2011 14:51

ID sa dá, ale samozrejme veľmi jednoducho nahradiť triedou ...teda CLASS...a tried môžeš mať v dokumente koľko chceš..

walther · Napísal **walther**: 03.06.2011 16:32

však to je jasné, len treba na to upozorniť, lebo johnny o tom očividne nevie, inak by to takto nenapísal

kalehit29 · Napísal autor témy **kalehit29**: 03.06.2011 17:43

možno to bral tak ako ty..

"však to je jasné"

walther · Napísal **walther**: 03.06.2011 18:47

prečo to tak potom napísal?

To je jedno, to je už mimo témy.. Pevne verím, že pôvodná otázka je už zodpovedaná.

Zoznamy s obrázkom

Podobné témy