21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
« 1 2 »
Autor Zpráva
Martin j
Profil
Dobrý den/ahoj,

mám problém se zobrazením menu. Odsazení textu je skoro u každého prohlížeče jiné a někdy mi to rozhodí samotný text a já nemám absolutní tušení, co je špatně. Zbytek stránek vypadá v pohodě. Jelikož se jedná o mé první stránky, stáhl jsem si volně dostupnou šablonu a krom barvy písma a pozadí jsem nic neměnil. Přikládám pro ilustraci screeny a samozřejmě zdroják (pouze menu). Díky za jakoukoliv radu.

Martin

HTML :

<div id="container">
<div style="text-align: center;"><img
 style="width: 530px; height: 170px;" alt=""
 src="Banner_logo_Puppy.png" /><br />
</div>
<div style="text-align: center;" id="menu"> <a
 style="font-weight: bold;" href="index.php">NOVINKY</a>
&nbsp; &nbsp;
&nbsp; &nbsp; <a style="font-weight: bold;"
 href="informace.html">INFORMACE</a>
&nbsp; &nbsp; &nbsp; &nbsp; <a
 style="font-weight: bold;" href="instalace.html">INSTALACE</a>
&nbsp; &nbsp; &nbsp; &nbsp; <a
 style="font-weight: bold;" href="kestazeni.html">KE
STAŽENÍ</a> &nbsp; &nbsp; &nbsp; &nbsp; <a
 style="font-weight: bold;" href="odkazy.html">ODKAZY</a>
&nbsp; &nbsp;
&nbsp; &nbsp;<a style="font-weight: bold;"
 href="vzkazy.html">VZKAZY</a>
&nbsp; &nbsp; &nbsp; &nbsp;<a
 style="font-weight: bold;" target="_blank"
 href="http://puppylinux.freeforums.org/index.php">FÓRUM</a><br />
</div>

CSS :

/* Generated by KompoZer */
body {
  margin: 0;
  background: #f4f4f4 none repeat scroll 0% 50%;
}
#container {
  margin: 0 auto;
  background: #ffffff none repeat scroll 0% 50%;
  width: 780px;
}
#header {
  padding: 45px 0 20px 40px;
}
#header a {
  color: #121212;
  text-decoration: none;
  font-size: 30px;
  font-family: "Arial","sans-serif";
}
#menu {
  padding: 6px;
  background-color: #000000;
}
#menu a {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  font-family: "Arial","sans-serif";
}
#menu a:hover {
  color: #3b7687;
}
#sidebar {
  margin: 0;
  padding: 30px 0 0 30px;
  float: left;
  width: 120px;
}
h1 {
  margin: 0px;
  color: #000000;
  font-size: 24px;
  font-family: "Arial","sans-serif";
  font-weight: normal;
}
h2 {
  margin: 20px 0 5px;
  color: #000000;
  font-size: 15px;
}
#main {
  margin: 0 0 0 180px;
  padding: 35px 40px 30px 0;
  color: #444444;
  font-family: "Arial","sans-serif";
  font-size: 13px;
  line-height: 18px;
  text-align: justify;
}
#main a {
  color: #3b7687;
  text-decoration: none;
}
#main a:hover {
  color: #444444;
}
#footer {
  padding: 6px 40px;
  background: #ffffff none repeat scroll 0% 50%;
  font-family: "Arial","sans-serif";
  color: #000000;
  font-size: 11px;
  text-align: right;
}
#footer a {
  text-decoration: none;
  color: #262626;
}
#footer a:hover {
  color: #666666;
}
.separator {
  font-size: 11px;
  color: #ffffff;
}
a:link {
  text-decoration: none;
  color: #869843;
}

SCREENY :

http://postimg.org/image/rg76x69qv/ -špatně
http://postimg.org/image/h1dnb8dr3/ -špatně
http://postimg.org/image/9r7v4df7x/ - OK
Chamurappi
Profil
Reaguji na Martina j:
já nemám absolutní tušení, co je špatně
Špatně je předpoklad, že budou prohlížeče vykreslovat písmo vždy a všem stejně. Nebudou. Nikdy. Zvykni si. Přizpůsob se.
Webová stránka není papírový plakát, musí být pružná a počítat s proměnlivostí prostředí. Uživatel si písmo může i zvětšit. Žádný zázračný kód, který by tuto volnost zakázal, neexistuje. (Možnost udělat celý web jako obrázek nepočítám.)
Martin j
Profil
Dobře, ale můžete mi poradit na co se zaměřit, abych tento jev co nejvíce eliminoval ? Je to otázka fontu, nebo css ? Chápu, že písmo může vypadat jinak, ale pokud mi to rozhodí celé menu viz obr. 1, je celá moje práce k ničemu.

Jinak připomínám, že ty prohlížeče byly testovány na tom samém stroji se stejným rozlišením.
smitka
Profil
Martin j:
Přijde mi trochu úsměvná kombinace "šablonu a krom barvy písma a pozadí jsem nic neměnil" a "je celá moje práce k ničemu", ale to je jedno :-)

Ale k věci, hlavní problém jsou ty nedělitelné mezery, kterými jsou položky v menu odsazené, stejně jako když někdo odsazuje ve Wordu mezerama.

Lepší (ale rozhodně né nejlepší) postup je nastavit těm "a" display: block; width: XYpx; float: left; text-align: center; a hodnota XY bude 780/(počet položek v menu) - 1-2px jako rezerva pro lehké rozdíly mezi prohlížeči.
Martin j
Profil
smitka:
Přijde mi trochu úsměvná kombinace "šablonu a krom barvy písma a pozadí jsem nic neměnil" a "je celá moje práce k ničemu", ale to je jedno :-)

Měl jsem na mysli obsah, tedy mojí práci, přiznávám, že tak jak jsem to napsal, to vyznělo blbě, sorry.
Díky za tip, zkusím to a pak dám vědět, jak jsem dopadl. Každopádně uvítám jakoukoliv další radu, která vyřeší můj problém.


@ smitka

Tak tahle metoda nedopadla úplně dobře viz

http://postimg.org/image/u9via5s7x/
Yuff.3
Profil
A k veci - ja by som to riešil cez div - nastavil float center a malo by to byť podľa predstáv nie?

Moderátor juriad: Odmazána reakce na smazaný příspěvek.
Martin j
Profil
Yuff.3:
A k veci - ja by som to riešil cez div - nastavil float center a malo by to byť podľa predstáv nie?

Teď nerozumím. Takhle ? <div style="text-align: center;" "float: center" id="menu">
smitka
Profil
Martin j:

Ještě koukám, že tam máš #menu {padding:6px;}, takže reálná šířka není 780px, ale 768px => takže bezpečná šířka by mohla být kolem 107px:

#menu a {
  display:block;
  width: 107px;
  float: left;
  text-align:center;
}

Pozor, ten float "vythrne" ty prvky ze stránky, takže nebude fungovat automatické dopočítání výšky #menu a bude třeba ji nastavit ručně, nebo to ošetřit prvky s clear:both.
Martin j
Profil
Díky, už to vypadá líp, teď ještě vyřešit, aby jednotlivé položky měly stejný rozestup.
Tomáš123
Profil
smitka:
display: block netreba deklarovať. Každý plávajúci prvok túto vlastnosť nadobudne automaticky.

Martin j:
teď ještě vyřešit, aby jednotlivé položky měly stejný rozestup
Každá bunka má rovnakú šírku, ale slová vo vnútri nie. Ako si predstavuješ kód, ktorý by prepočítaval šírku medzier? Čo ak budeš potrebovať nejaké slovo zmeniť? Je veľmi pravdepodobné, že keď budeš stránku približovať, neudržia sa medzi položkami rovnaké medzery.

Nerozumiem, prečo riešite šírku aj vnútorný okraj naraz... O zvislé zarovnanie sa postará line-height a o vodorovné odsadenie text-align.
Martin j
Profil
text-align:center; právě nefunguje

viz : http://postimg.org/image/7pptwov8p/

Zkrátka můj cíl byl toto, bez ohledu na to, jestli stránku přibližuji, nebo oddaluji : http://postimg.org/image/oucdbzvqt/

doufám, že je to možné.
Yuff.3
Profil
Martin j:
->
Tomáš123:
Nerozumiem, prečo riešite šírku aj vnútorný okraj naraz... O zvislé zarovnanie sa postará line-height a o vodorovné odsadenie text-align.

#11 - editol to, tak môj príspevok je zase na zmazanie.. Pardon
Tomáš123
Profil
Martin j:
text-align:center; právě nefunguje
Ale funguje. Jeho úlohou je iba vycentrovať obsah prvku. Skús si ho dať preč a uvidíš. Neviem, čo viac by si chcel.
Martin j
Profil
Chtěl jsem, aby obsah byl vycentrovaný, jako u každé jiné webové stránky, viz můj předchozí příspěvek.
Yuff.3
Profil
Martin j:
skús si ma pridať na skype: michalzahorec - niečo by som chcel prekonzultovať po prípade ti stým pomôžem.
smitka
Profil
Pokud jde o to, aby mezera mezi texty v menu byla vždy stejná, tak to je poměrně složitá úloha. Tímto způsobem jsou všechna tlačítka stejně široká a obsah je v nich vycentrovaný, což je podle mě ok.

Pokud chci stejné mezery, tak mám 2 možnosti:

a) každému prvku v menu nastavit ručně jinou width/margin - to bude vyžadovat poměrně hodně hraní a když se změní i jediné písmeno v menu, tak se to může rozpadnout
b) použít nějaký javascript, který spočítá opravdovou šířku textu a spočítá správné odsazení
Fisir
Profil
Reaguji na Yuff.3:
Yuffe.3, myslím, že to není poprvé, co ti připomínám, že není vhodné řešit dotazy z Diskuse prostřednictvím soukromých komunikačních kanálů. Pokud už jste se ale dobrali řešení, prosím, abys ho sem poslal.
Yuff.3
Profil
Fisir:
áno viem, o riešení tohto problému som komunikovať nechcel. Keby sa tak aj stalo - samozrejme to sem doplním.
Martin j
Profil
Yuff.3:
áno viem, o riešení tohto problému som komunikovať nechcel. Keby sa tak aj stalo - samozrejme to sem doplním.

Nezlob se, ale o čem jiném, než o tom problému jsi chtěl komunikovat ? Jestli mi chceš nabídnout nějaké placené řešení, tak se nezlob, ale nemám zájem. Jinak Skype nepoužívám, leda Jabber.


smitka:
Ano o to mi šlo, tvoje řešení mi každopádně pomohlo v tom, že teď už mi prohlížeče zobrazují stránku stejně. Takže můj jediný problém je momentálně to vycentrování. Ve smyslu, aby byl text zároveň i stejně odsazený od okrajů (např. 10px) po obou stranách.
Martin j
Profil
Kdyby měl ještě někdo nějaký nápad, jak to vystředit, přikládám zdroják

#menu a {
  display:block;
  width: 107px;
  float: left;
  color: #ffffff;
  text-align: center;
  line-height: 18px;
  text-decoration: none;
  font-size: 14px;
  font-family: "Arial","sans-serif";
}
Martin j
Profil
Může mne prosím někdo alespoň odkázat na jiný web, kde najdu odpověď na svou otázku ?

Díky Martin
lionel messi
Profil
Martin j:
Může mne prosím někdo alespoň odkázat na jiný web, kde najdu odpověď na svou otázku ?
Nie. Zdá sa, že prejavuješ málo vlastnej iniciatívy. Google poznáš?
Martin j
Profil
lionel messi:
Nie. Zdá sa, že prejavuješ málo vlastnej iniciatívy. Google poznáš?

Samozřejmě znám. Čekal jsem, že mi někdo napíše "Vystředíš to pomocí XY" snad by to nebyl takový problém.
Pokud to tady funguje stylem : "kup si knížku, jak psát web", "nebo najdi si to sám" pak mi uniká smysl tohoto webu. Schválně jsem to dal do kategorie pro začatečníky. Hledal jsem v různých zdrojích, každopádně všichni radí to samé, abych použil text-align:center;, což právě nefunguje.

I tak všem zúčastněným děkuji a já si půjdu koupit tu knížku. Bude to tak pro mě lepší, zdá se.
lionel messi
Profil
Martin j:
Všetky spôsoby centrovania nájdeš tu: Centrování na webových stránkách
smitka
Profil
Nepředpokládám, že v knížce najdeš řešení.

Nejde ti o centerování, to funguje správně - máš šířku menu rozdělenou do 7 stejně velkých částí a v každé z těchto částí máš vycenterovaný text => přesně takto to správně funguje.

Tobě se (pokud chápu správně) nelíbí, že mezera mezi jednotlivými texty menu je rozdílná, což je dáno počtem znaků v každé položce. Pokud bude ve všech 7 položkách stejný text, budou stejné i mezery.

Na to aby mezery byly stejně velké nemá CSS nástroje, je třeba použít javascrip, který spočítá šíři vyrenderovaného textu a podle toho spočítá správné rozměry a umístění.

Druhý způsob je že si to prostě ručně změříš (budeš si s tím hrát např. v developerské konzoli Chrome a budeš zkoušet měnit width/margin jednotlicýh položek). Jakmile se ti však změní nějaká položka, budeš to moci dělat znovu.


lionel messi:

Tvůj odkaz by také mohl pomoci ke zdárnému řešení - natavit položkám display: inline-block (bez floatu) a potřebný padding/margin a obalujícímu prvku nastavit centerování textu na střed.
Davex
Profil
Martin j:
Pokud to tady funguje stylem : "kup si knížku, jak psát web", "nebo najdi si to sám" pak mi uniká smysl tohoto webu.
Nenapsal jsi, o jaký typ vystředění a čeho ti jde. Většinu lidí také nebaví opakovaně odpovídat na stále stejné dotazy a dřívější odpovědi asi nikdo nechce hledat za tebe.

všichni radí to samé, abych použil text-align:center;, což právě nefunguje
Protože je to určeno na zarovnání řádkových prvků a ty máš plovoucí bloky.

Jsou asi tři základní způsoby horizontálního centrování:
[CSS] horizontální menu - vycentrování UL/LI
Centrování menu s neznámou šířkou
Centrování menu

Pokud ti jde o vertikální centrování, tak to najdeš podobným způsobem jako jsem hledal já.
Martin j
Profil
smitka:
Tobě se (pokud chápu správně) nelíbí, že mezera mezi jednotlivými texty menu je rozdílná, což je dáno počtem znaků v každé položce. Pokud bude ve všech 7 položkách stejný text, budou stejné i mezery.

Ano, přesně tak, ale zároveň mi jde o to, aby na šířku bylo stejné odsazení zleva i zprava, pro jistotu sem ještě dám ten odkaz, aby to bylo zřejmé : http://postimg.org/image/9r7v4df7x/ - To je cíl, kterého bych rád dosáhl ve všech (alespoň těch nejpoužívanějších) prohlížečích.

Takže JS je jedno řešení.

Davex:
Jsou asi tři základní způsoby horizontálního centrování:

Kouknu na to, díky pánové.
anonymníí
Profil *
Martin j:
Podívej se na tabulkové vlasnosti display, měly by ti pomoci.
Martin j
Profil
Tak nakonec pomohla úplně jednoduchá věc. Stačilo vymazat jen jednu nedělitelnou mezeru. Testoval jsem to ve dvaceti prohlížečích a až na Dillo, které z nějakého důvodu ignorovalo container to vypadá v pohodě. Ale ruku na srdce, kolik uživatelů používá Dillo. Každpoádně vaše rady se mi budou hodit do budoucna, až to budu psát od píky. Zatím to ale nechám, jak to je. Nemá cenu se šťourat v něčem, co funguje.
Chamurappi
Profil
Reaguji na Martina j:
A zkusil sis zvětšit písmo? Ne celkový zoom, jen písmo.

Ale ruku na srdce, kolik uživatelů používá Dillo.
Dillo skoro nikdo nezná, ale jinou velikost písma má každý dvacátý.
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0