» Poradna » Počítačové sítě

Doladění www stránek s tabulkou

 |   |  Microsoft Windows 7 Firefox 12.0

Mám už skoro hotové stránky, dělám to v HTML + CSS.

Ještě bych potřeboval doladit pár věcí.
1) Jsou tři podstránky, dvě se vejdou na obrazovku, jedna je dlouhá, takže se zobrazí vpravo posuvník a roluje se dolů. Na pozadí mám obrázek, obsah je vystředěn (tabulka a v ní align na center), ale když přepínám mezi podstránkami, tak se díky posuvníku ta dlouhá podstránka o pár mm přecentruje. Jde s tím něco udělat?

2) Mám to jako tabulku, první řádek je logo, druhý navigace a pak mám v řádku třikrát div, kde je obsah. První je text, ten je float doleva, pak je sloupec malých fotek, ten má float doprava. Pak je třetí sloupec fotek, ten má float doleva, má navazovat pod textem a měl by sedět dole ve stejné rovině jako pravý sloupec s fotkama, ale nesedí mi to ve všech prohlížečích. Dá se levý sloupec s fotkama nějak přilepit dolů, do úrovně kde končí pravý sloupec s fotkama? Nebo jde nějak udělat druhá vrstva? V první bych měl fotky vpravo a vlevo, vlevo nahoře by bylo místo zabrané průhledným gifem. A do té druhé bych dal jen text, který bych dal vlevo nahoru - samozřejmě by bylo nebezpečí, že kdyby uživatel zvětšoval text, tak by mu to šlo přes fotky, ale to by bylo asi jedno. Napadlo mě jen udělat fotky natvrdo do pozadí a do divu dát jen text, ale to se mi moc nechce.

3) Mám tabulku jen z toho důvodu, že se mi pořádně nepovedlo udělat jednobarevné pozadí v divu, aby sedělo. A navíc tabulka byla na mnoha místech doporučovaná kvůli kompatibilitě s prohlížeči. Mám ještě zkoušet bojovat s divama bez tabulky nebo ji mám nechat?

Díky.

Odpovědi na otázku

 |   |  Microsoft Windows 7 Firefox 12.0

takhle to mám:
#obsah {width: 420px; float: left; margin: 10px; padding: 0px;}
#fotkyvpravo {width: 250px; float: right; margin: 10px;}
#fotkyvlevo {width: 250px; float: left; margin: 10px;}
...




................



.......................




to jsou mezery mezi fotkama, asi by šlo i atributem border?


...

tady asi valign nefunguje, co?




...




A takhle nějak to má vypadat
http://i.imgbox.com/aawhGmOl.png...

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 7 Firefox 12.0
 | Microsoft Windows 7 Firefox 12.0

1) dej zobrazit svislý posuvník furt
2) a 3) tabulkový layout se už moc nepoužívá, proč to neuděláš nomálně

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 7 Firefox 12.0

1) To by bylo dobré řešení. A jak to udělám?
2) a 3) Zkoušel jsem to, ale v každém prohlížeči to pak vypadalo trochu jinak, tabulka je v tomhle lepší. A hlavně to stejně neřeší to přilepení pruhů s fotkama na spodní okraj - se mi to nepovedlo.

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows XP Firefox 12.0

Když už to děláš tabulkou, udělej to tabulkou celé a nematlej do ní floatované DIVy.
Do příkazů dávej jen parametry, které tam být mohou, seznamů máš plný internet... pak si to nech zkontrolovat validátorem třeba online http://validator.w3.org/...
Například:
there is no attribute "VALIGN"

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 7 Firefox 12.0

Ten valign mi tam zůstal z předchozích variant, chtěl jsem to dolaďovat.
Zkouším to předělat celé do divu, bez tabulky, ale nevím, jak to ukotvit dole ve stejné rovině.

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 7 Firefox 12.0

Nerozumím jedné věci: když obsah plus výška fotek vlevo bude větší než výška sloupce fotek vpravo, tak to má vypadat jak? V takovém případě přece nemůžou fotky vlevo a vpravo být dole zarovnány, jedině kdyby fotky vpravo měly nahoře mezeru...

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 7 Firefox 12.0

No právě, to je trochu problém, je tam tedy rezerva asi 120pixelů, ale když si uživatel v prohlížeči hodně zvětší písmo, tak to přelejzá. Udělal jsem to tedy tak, že mám dole blok s fotkama po obou stranách a sloupec s fotkama vpravo je vysoký jen tak jako text. A když je text větší, tak se zobrazuje mezera mezi těma dvěma blokama s fotkama. Takže jsou fotky zarovnané nahoru a dolu a "dýchá" to uprostřed, což je nejméně rušivé.

Nebo to udělat tak, aby případně zvětšený text přelejzal přes fotky? To by asi nebylo ono, nebo jo?

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 7 Firefox 13.0

body {overflow:-y:scroll;}

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 7 Firefox 12.0

Dík. Ale máš tam chybu, přesně je to body {overflow-y: scroll;}

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 7 Firefox 13.0

Tabulky jsou mrtvý jako Zed.

Zkus se optat strýčka Googla na "fluid design" či "resposive design", mrknout se po "css media queries"
http://coding.smashingmagazine.com/2009/06/09/smart-fixes-fo... ...
http://designwoop.com/2012/03/15-detailed-respo... ...

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 7 Firefox 12.0

To je pravda, ale je to škoda, dělalo se v nich sice složitě, ale byla skoro stoprocentní kontrola nad vzhledem nezávisle na prohlížečích. Dělal jsem v nich i docela složité věci a když se člověk neztratil v kódu a pohlídal okraje, tak to vždycky nějak šlo udělat. Div je čistší řešení, ale úplně ideální asi také není.
Budu dělat na stránky jednu tabulku z excelu, prostě klasika osm sloupců a dvacet řádek s různými texty a čísly, to jinak než tabulkou v html nejde, ne? Nebo i tohle se dá udělat jinak?

Souhlasím  |  Nesouhlasím  |  Odpovědět

Související témata: Sloupec, Levý sloupec, Druhá vrstva, Posuvník




Určitě si přečtěte

Na Zemi je nejtepleji za posledních více než 100 tisíc let. Co nám hrozí?

Na Zemi je nejtepleji za posledních více než 100 tisíc let. Co nám hrozí?

** Letošní červenec byl třetím nejteplejším měsícem od roku 1880 ** Teplota naší planety roste raketovým tempem ** Co lidstvu hrozí v období, které v minulosti nemá obdoby?

Karel Kilián | 68

eObčanka: Jak a proč si zřídit elektronický občanský průkaz s čipem

eObčanka: Jak a proč si zřídit elektronický občanský průkaz s čipem

** Občanka s čipem už je standardně vydávaným osobním dokladem v Česku ** Umožní využívat Portál občana a funkce elektronické státní správy ** Pokud ji chcete naplno využívat, musíte si čip aktivovat

David Polesný | 94

Porno insider: Jak virtuální realita vstupuje do filmů pro dospělé

Porno insider: Jak virtuální realita vstupuje do filmů pro dospělé

** Pornografie údajně představuje třetinu internetové obsahu a je technologický tahounem ** Do erotického obsahu postupně zasahuje i virtuální realita ** Kromě vizuálního vjemu se pracuje také na virtuálním uspokojení toho hmatového

Jan Dudek | 29

Xiaomi Yeelight: Wi-Fi LED žárovka za pár stovek, kterou můžete ovládat i hlasem

Xiaomi Yeelight: Wi-Fi LED žárovka za pár stovek, kterou můžete ovládat i hlasem

** Na eBayi aspol. ji koupíte za čtyři stovky ** Má Wi-Fi a povedenou appku ** Spojíte ji s Googlem, Amazonem, IFTTT i vlastním systémem

Jakub Čížek | 42

Nová zbraň proti hackerům: obrovské množství chyb v softwaru

Nová zbraň proti hackerům: obrovské množství chyb v softwaru

** Vědci vymysleli nový systém obrany proti hackerům ** Pomocí speciálního systému implementují do softwaru spoustu chyb ** Tyto chyby nejsou zneužitelné, což útočník zjistí až po čase

Karel Javůrek | 28


Jízdní řády Bileto
Aktuální číslo časopisu Computer

Megatest: 13 grafických karet

Srovnání 7 dokovacích stanic s USB-C

Jak na perfektní noční fotografie

Kvalitní zdroje informací pro sebevzdělávání