| Autor | Zpráva | ||
|---|---|---|---|
| Lukas_h Profil |
#1 · Zasláno: 16. 6. 2010, 14:57:59
Zdravím,
dělám své první "velké stránky" a narazil jsem na problém. V mém screenu je 9 "dlaždic" s popiskem, popisky mám umístěné ne příliš profesionálně ( ). Já bych potřeboval aby všech 9 dlaždic (vycentrované) a všech 9 popisků (každý popisek nad obrázkem) mělo stejnou polohu při jakémkoliv rozlišení monitoru. Můžete mi prosím poradit? Díky 
|
||
| roberta Profil |
#2 · Zasláno: 16. 6. 2010, 15:01:08 · Upravil/a: roberta
na takéto veci je vhodná tabuľka <table>...</table>
kde jednotlivé texty/obrázky budú zarovné pomocou CSS do stredu každej bunky v tabuľke |
||
| panther Profil |
#3 · Zasláno: 16. 6. 2010, 15:03:13 · Upravil/a: panther
Lukas_h:
všechno to obal elementem, který vycentruj. Každá dlaždice bude jeden další element (tys to udělal asi celé pomocí divů, dal by se místo nich použít třeba seznam, tedy UL jako obal, LI pro každou dlaždici (podle kontextu - je to seznam čehosi nebo není?)). Textové popisky budou mít normálně text-align: center roberta: „na takéto veci je vhodná tabuľka <table>...</table>“ těžko říct. Na mě to působí dost jako textovo-obrázkové menu, takže jak píši výše: záleží na kontextu. Ten by nám mohl Lukas_h prozradit. |
||
| Lukas_h Profil |
#4 · Zasláno: 16. 6. 2010, 15:10:33
Jedná se o menu, kde má obrázek i text stejný odkaz.
Já to udělal dost prasácky... <center> VideoCulture AČV MEDIALOG Festival <br> <a href="pages/videoculture/videoculture.html"><img src="images/ico/videoculture.jpg" height ="95" width ="95" alt= "VideoCulture"></a> <a href="pages/acv/acv.html"><img src="images/ico/onas2.jpg" height ="95" width ="95" alt= "AČV MEDIALOG o.s"></a> <a href="pages/fest/fest.html"><img src="images/ico/festival2.jpg" height ="95" width ="95" alt= "Festival"></a> <br> Vzdělávání Spolupráce Kontakt <br> <a href="pages/vzdelavani/vzdelavani.html"><img src="images/ico/vzdelavani1.jpg" height ="95" width ="95" alt= "Vzdělávání"></a> <a href="pages/spoluprace/spoluprace.html"><img src="images/ico/spoluprace1.jpg" height ="95" width ="95" alt= "Spolupráce"></a> <a href="pages/kontakt/kontakt.html"><img src="images/ico/vernisaze1.jpg" height ="95" width ="95" alt= "Kontakt"></a> <br> Aktuality Galerie Naše filmy<br> <a href="pages/aktuality/aktuality.html"><img src="images/ico/metodyprace.jpg" height ="95" width ="95" alt= "Aktuality"></a> <a href="pages/aktuality/fotogalerie.html"><img src="images/ico/poslani1.jpg" height ="95" width ="95" alt= "Galerie" ></a> <a href="pages/aktuality/filmy.html"><img src="images/ico/filmykestazeni.jpg" height ="95" width ="95" alt= "Naše Filmy"></a> </center> |
||
| panther Profil |
#5 · Zasláno: 16. 6. 2010, 15:21:16 · Upravil/a: panther
Lukas_h:
tak v tom případě bude HTML vypadat takhle: <menu>
<li id="video"><a href="video.html">VideoCulture</a></li>
<li id="acv"><a href="acv.html">ACV Medialog</a></li>
...
</menu>a v CSS bude (náznak): menu {width: 315px; margin: 0 auto;} /* vycentrujeme */
menu li {width: 95px; height: xxxpx; text-align: center; background: 0 20px no-repeat; float: left; margin-right: 10px;} /* pozice pozadi: zleva */
menu li a {color: #0ff; display: block;}
/* za xxx si dopln rozmery */
menu li#video {background-image: url('images/video.png');}
menu li#acv {background-image: url('images/acv.png');} |
||
| Lukas_h Profil |
#6 · Zasláno: 16. 6. 2010, 15:37:37
Jde u {background-image: url('images/video.png');} změnit velikost obrázku?
|
||
| panther Profil |
#7 · Zasláno: 16. 6. 2010, 15:44:18
Lukas_h:
„Jde u {background-image: url('images/video.png');} změnit velikost obrázku?“ nejde, obrázky si ořízni. Je blbost je zmenšovat ať pomocí CSS, nebo v HTML, zbytečně načítáš obrázky větší, než je třeba. |
||
| DoubleThink Profil * |
#8 · Zasláno: 16. 6. 2010, 15:47:54 · Upravil/a: DoubleThink
roberta:
„na takéto veci je vhodná tabuľka <table>...</table>“ Není, tabulka je vhodná na data s vodorovnou a svislou souvztažností. A to není tento případ. |
||
| roberta Profil |
#9 · Zasláno: 16. 6. 2010, 16:03:19
DoubleThink:
smiem sa opýtať, prečo to nie je tento prípad? kde je porušená v tomto príklade „vodorovná a svislá souvztažnost“? |
||
| panther Profil |
#10 · Zasláno: 16. 6. 2010, 16:16:02
roberta:
tabulka se používá na křížově závislá data. Jak spolu uvedených 9 položek souvisí? Je to menu, jak bylo řečeno v [#4], tak není co řešit. Na menu je daný tag <menu>, nikoliv tabulka. Nesmíš dát na první pohled, že ty obrázky tvoří jakousi tabulkovou mřížku. Podle vizuální stránky nemůžeš posuzovat (ne)vhodnost použití tabulky. |
||
| roberta Profil |
#11 · Zasláno: 16. 6. 2010, 16:21:20
už chápem. ak je to menu, tak tam tabuľka nemá čo hľadať. to je mi jasné.
ospravedlňujem sa za flame ;) |
||
| Lukas_h Profil |
#12 · Zasláno: 16. 6. 2010, 18:55:40
panther:
Tak sem to nějak udělal, ale mám problémy: 1) Udělá se mi jeden řádek (9 dlaždic vedle sebe) 2) Nejde mi to celé zarovnat na střed |
||
| panther Profil |
#13 · Zasláno: 16. 6. 2010, 19:03:51
Lukas_h:
dej sem odkaz na stránku, bez ní ti můžu dát jen obecné rady: - <menu> vycentruj, přidej mu margin: auto;, jak jsem psal - nastav <menu> coby rodiči šířku, položkám <li> taky. Položek bude na řádku tolik, kolik se jich vejde, tzn. podle nastavených rozměrů. |
||
| Lukas_h Profil |
#14 · Zasláno: 16. 6. 2010, 19:12:43 · Upravil/a: Lukas_h
|
||
| panther Profil |
#15 · Zasláno: 16. 6. 2010, 19:25:36 · Upravil/a: panther
Lukas_h:
- přebývají ti tam odrážky, tedy list-style: none; - menu nemá nastavené rozměry, takže potřetí: menu {width: 300px;}. Za těch 300px si dosaď, co potřebuješ. - <font size="2" color="orange"> vyhoď. Barvu nastavíš v menu li a {color: orange;} - v <menu> by měly být jen položky <li>, tedy žádné <b>. Vyhoď je. Tučnost zajístíš taky CSS, a sice menu li a {font-weight: bold;} - menu má, stejně jako ostatní seznamy, levé odsazení, 40px. Některé prohlíže odsazují (levým) marginem, jiné (levým) paddingem, přidej tedy menu {margin: 0; padding: 0 /* pripadne margin-left: 0; padding-left: 0; */} Když to shrnu, tak: <menu>
<li id="video"><a href="video.html">Video</a></li>
<li id="acv"><a href="acv.html">ACV</a></li>
...
</menu>CSS: menu {margin: 0; padding: 0; width: 350px;} /* zrusim defaultni odsazeni, pridam sirku kvuli zalomeni polozek */
menu li {list-style: none} /* zruseni defaultnich odrazek u polozek menu */
menu li a {color: orange; font-weight: bold} /* oranzova, tucna. Davam to odkazu, teoreticky by to slo i k menu li, tedy polozkam. Jejich obsah jsou jen odkazy, je to tedy jedno */Všimni si, že v HTML mám jen tři elementy: <menu>, <li> a <a>. Tučnost a barvu zajistí CSS, nic víc v HTML tedy nepotřebuješ. |
||
| Lukas_h Profil |
#16 · Zasláno: 16. 6. 2010, 21:01:31
panther:
Mě tam nejde dostat ta šířka :( |
||
| panther Profil |
#17 · Zasláno: 16. 6. 2010, 21:09:12
Lukas_h:
„Mě tam nejde dostat ta šířka :(“ jak nejde? Normálně do CSS přidej řádek menu {width: 300px; margin: 0 auto;}Jen tak mimochodem. V tomto kousku CSS máš několik zásadních chyb (zrušil jsem prázdné řádky, aby to nebylo zbytečně dlouhé). //horní menu
#nav {background-color: #orange;}
#nav ul {
width: 605px; width: "635px";
text-align: left;
margin: 0 auto;}1. CSS komentář se zapisuje /* komentar */, tedy je obalen z obou stran lomítkem vně a hvězdičkou uvnitř. Může být i víceřádkový. Tvůj zápis se dvěma lomítky je špatně. 2. barva, je-li zapsána názvem barvy, uvádí se bez „#“. Ten se uvádí při hexadecimálním zápisu barvy. 3. width: "635px" se nepoužívá (asi je i špatně, důsledky jsem nezkoumal) |
||
| Lukas_h Profil |
#18 · Zasláno: 16. 6. 2010, 21:32:25
panther:
Moc dík (byla tam navíc závorka), fakt jsi mi pomohl a jsem rád že si to vydržel :) Ty ostatní chyby v CSS (i HTML) o těch vím, projedu to pak validátorem. Dík |
||
| panther Profil |
#19 · Zasláno: 16. 6. 2010, 21:35:52
Lukas_h:
případně ještě můžeš přidat odkazům display: block (anebo float) a rozměry, aby byla klikatelná celá položka, včetně obrázku a ne jen samotný text. |
||
| Lukas_h Profil |
#20 · Zasláno: 16. 6. 2010, 21:48:03
panther:
To už fakt nevím kam přidat... Teď mám CSS takto: menu {margin: 0 auto; padding: 0 auto; width: 400px;} menu li {width: 100px; height: 115px; text-align: center; background: 0 16px no-repeat; float: left; margin-right: 10px;} menu li a {color: orange; font-weight: bold;} a velikosti obrázků jsou 95px na 95px |
||
| panther Profil |
#21 · Zasláno: 16. 6. 2010, 21:49:41
Lukas_h:
menu li a {color: orange; font-weight: bold; display: block; width: 100px; height: 115px;}Rozměry si případně uprav, vzal jsem je z menu li. |
||
| Lukas_h Profil |
#22 · Zasláno: 16. 6. 2010, 22:01:06
panther:
Díky moc, všechno funguje :) |
||
|
Časová prodleva: 14 let
|
|||
0