Autor Zpráva
Camo
Profil
Pozdravujem vás zo Slovenska z malebnej dedinky pod horami!
Vážený webmasteri,
potreboval by som čosi osvetliť, tak sa vraciam k tejto téme.
Bubák nám tam predviedol, ako nastavovať pozadie a padding riadkovým elementom(odkazom).
Ako som zistil v striktnom doctype to nefunguje.
Je to tak, alebo som zase niečo nepochopil?
Používam totiž na str. CSS - ,,white-space:pre,, a to potrebuje strict. Zároveň tam potrebujem vycentrované a nastylované odkazy v jednom riadku. Ide len o padding. Ani to nepotrebujem mať na vertikálne v strede, len zväčšiť spodný padding.
Ak dám display:block neviem ich vycentrovať horizontálne (to by som tam potreboval), ak nechám inline neviem im zase nastaviť padding (najmä spodný, line-height to teda nerieši).
Ako sa to dá urobiť?

Ďakujem za pomoc!

Editujem:/asi blbé predsudky zariadili, že som to neskúsil s tagom pre, ale aj tak by ma zujímalo, prečo mi tie odkazy padding neberú?
Camo
Profil
No tak som vyskúšal Strict DTD, span, FPI, a inline-block. Ešte upresním, že problém bol v IE7. IE8 to už zobrazil normálne.
Inline-block tomu pomohol, ale pridal mi medzi odkazy margin, ktorého sa neviem zbaviť.
Dal som to na sieť, aby sa to dalo vidieť.
Je to sekcia fotogaléria a ide o tie tlačítka ,,next,, a ,,prew,,.
Odkaz
Môžte pridávať aj iné pripomienky, ale ide hl. o ten margin a stylovanie inline odkazov.
habendorf
Profil
S inline prvky se takto pracuje dost blbě. V těchto situacích vždy floatuju.
Camo
Profil
habendorf:
Nechcem to floatovať, lebo to chcem mať v strede. Preto celý tento problém mám.
Nakoniec som tam musel pridať záporný margin, čo by som teda uvítal, keby sa to dalo riešiť inak. Niesom žiadny profík, a so strictom nemám moc skúseností, ale čakal by som práve od strict módu ,,normálnejšie chovanie,,.
habendorf
Profil
Camo:
Nechcem to floatovať, lebo to chcem mať v strede.

To se nevylučuje.
Camo
Profil
habendorf:
Ale iba s pevnými rozmermi ak sa nemýlim a to je zase ďalšia vec ktorá mi to znemožňuje.
habendorf
Profil
Camo:
Ale iba s pevnými rozmermi ak sa nemýlim

Mýlíš :o)
Camo
Profil
habendorf:
Tak jedine v tabuľke, alebo Javasriptom, ale sme v sekcii CSS, takže to je neprípustné.
Alebo ma ešte napadá, urobiť odkazy obrázkové, ale to nechcem.
Str4wberry
Profil
Jde to skoro čistě pomocí CSS, zkus zde trochu pohledat.
Camo
Profil
display:inline-block?
Ten som vlastne použil, len som to zabudol napísať, lebo riešim hlavne ten margin, čo mi tam strict mód pridáva a musel som tam dať -4px, čo tomu strict módu dosť zazlievam.
Str4wberry
Profil
Viz Centrování menu s neznámou šířkou
Camo
Profil
To vlákno som už čítal, ale nechápem ho.
Ak je to teda tak zložité, ako je možné, že som to ja vycentroval len s pomocou inline-block pre IE aj FF a Op.
Niečo mi uniká?
Lebo všetky tie riešenia sú dosť krkolomné.
habendorf
Profil
Camo:
Tak jedine v tabuľke, alebo Javasriptom, ale sme v sekcii CSS, takže to je neprípustné.
Tak ještě jednou: „V těchto situacích vždy floatuju.“ Je float tabulka, nebo snad JS?

ako je možné, že som to ja vycentroval len s pomocou inline-block pre IE aj FF a Op
Pokud jsi to vycentroval, pak nechápu, v čem máš problém a na co se vlastně ptáš.
Camo
Profil
habendorf:
:-DDDDDD
Na margin čo sa mi tam dostal so strictným doctype.
musel som tomu pridať -4px margin.
A chcel som vedieť, či to je normálne takto riešiť.
Mne sa záporné marginy moc nepozdávajú. Stále čakám, že sa mi to v nejakom brovseri rosype.
habendorf
Profil
Vlákno od Str4wberryho jsi četl, takže na http://pokusy.1-webdesign.cz/centrovany-float.html jsi narazil. Co se ti na tom nezdá? Funguje to korektně ve všech prohlížečích. Žádné záporné marginy tam njesou.
Camo
Profil
habendorf:
<!--[if lte IE 7]>
<style>
div {
text-align: center;
}
ul {
display: inline-block;
}
ul {
display: inline;
}
ul li {
float: left;
}
</style>
<![endif]-->

Ja som nič také použiť nemusel a vŕta mi v hlave či mi niečo neuniklo.


EDIT:/ a okrem toho je tam display:table, takže to je skoro tabuľka a ten margin bude asi tým vyriešený.
habendorf
Profil
Camo:

OMG, to je furt dokolečka. Pokud sis s tím tedy poradil lépe, tak na co se zde vlastně ptáš? A podělíš se o své řešení?
habendorf
Profil
Camo:
display:table, takže to je skoro tabuľka

To není tabulka ani skoro tabulka. Sémantika a stylování jsou dvě věci. Leda že bys talíř s nakresleným řízkem považoval za večeři, nebo skoro večeři ;o)
Camo
Profil
Moje riešenie je prosté inline-block, len mi to tam pridáva ten margin a v tom je celý problém.
DIV-text-align:center /*lebo to nieje menu
A-display:inline-block
to je celé, snáď som nič nevynechal. Nájdete to v tej fotogalérii, sú to tlačítka pod hl. obrázkom.
Keby ste v tom videli nejaký problém tak dajte vedieť.
habendorf
Profil
Hm, v některých browserech je nad těmi odkazy mezera. Při zvětšení písma se začnou od sebe rozlézat (margin -4px ti pomůže jen při základní velikosti písma a na tu se spolehnout nemůžeš).
Camo
Profil
habendorf
No áno, v safari to pridáva aj horný margin a ešte neviem čo spraví tá veľkosť písma, ale to už nechám na zajtra.
Možno to bude nakoniec nepoužiteĺné, škoda.....:-(
Tak prejdem asi na to display:table....
habendorf
Profil
Camo:
No áno, v safari to pridáva aj horný margin

+ Chrome, IE6, IE7
Camo
Profil
Ešte sa tým stále prehrýzam ale už mi začína svitať.
No ale stále nechápem pár vecí. Napr. ako môže v tomto prípade, fungovať to relatívne pozicovanie o +/-50%?
Z čoho tých 50% počíta?

No a teda chápem tosprávne, že ak dám display:table, tak napriek floatovanému li si ul zachová rozmery, ako keby tam float nebol? Normálne predsa pri floate nadradený element stratí rozmery.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: