» 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, Pravý sloupec, Druhá vrstva, Levý sloupec, Posuvník




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

Vyzkoušeli jsme novou Kuki. Chce zničit prehistorickou lineární televizi

Vyzkoušeli jsme novou Kuki. Chce zničit prehistorickou lineární televizi

** IPTV je dle mnohých budoucnost televize ** K největším českým poskytovatelům patří Kuki ** Nyní spustila uzavřenou betaverzi své nové koncepce

Jakub Čížek | 26

Na čem běží Seznam.cz: Běžný standard už nestačí, přechází na vlastní cloud i servery

Na čem běží Seznam.cz: Běžný standard už nestačí, přechází na vlastní cloud i servery

** Seznam nám prozradil detaily k jeho nové platformě SCIF ** V rámci jednoho privátního cloudu sjednocuje většinu služeb ** Vedle softwaru vyvíjí i vlastní hardware

Karel Javůrek | 14

Šmírovačka kamerami Googlu: Koukněte se, co se dá najít na Street View

Šmírovačka kamerami Googlu: Koukněte se, co se dá najít na Street View

Google stále fotí celý svět do své služby Street View. A novodobou zábavou je hledat v mapách Googlu vtipné záběry. Podívejte se na výběr nejlepších!

redakce | 44

Levný televizor místo drahého 4K HDR monitoru? Na co si musíte dát pozor

Levný televizor místo drahého 4K HDR monitoru? Na co si musíte dát pozor

** 43", 4K, 60 Hz a HDR k tomu za deset tisíc ** Televizor takových parametrů stojí téměř polovinu, co monitor ** Využití televize jako monitoru přináší řadu kompromisů, ale jde to

Tomáš Holčík | 55



Aktuální číslo časopisu Computer

Nejlepší programy pro úpravu fotek zdarma

Externí disky pro zálohu dat

Velký test: herní notebooky

Srovnání 12 batohů