» 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, Posuvník




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

Velká jarní aktualizace Windows 10: Co přináší April 2018 Update

Velká jarní aktualizace Windows 10: Co přináší April 2018 Update

** Po necelém půl roce je tu další aktualizace Windows ** Přináší časovou osu nebo sdílení souborů jako na mobilu ** A také Application Guard, který umí virtualizovat Edge

Jakub Čížek | 143

Jak dopadl velký den Applu s náloží novinek: Sledujte, co letos připravil

Jak dopadl velký den Applu s náloží novinek: Sledujte, co letos připravil

** Apple večer představil novinky ** Ukáže nové operační systémy, ale čekala se i nová zařízení ** Začíná vývojářská konference Applu WWDC 2018

Karel Javůrek | 86

Blíží se Juno. Jeden z nejhezčích Linuxů pro normální lidi

Blíží se Juno. Jeden z nejhezčích Linuxů pro normální lidi

** Ubuntu a Fedora patří k nejpopulárnějším linuxovým OS pro desktop ** A pak je tu zástup dalších nebo jejich odvozenin ** Jedním z nich je Elementary OS, který se brzy dočká novinek

Jakub Čížek | 71

15 věcí, které umí Windows 10, ale možná o nich vůbec nevíte

15 věcí, které umí Windows 10, ale možná o nich vůbec nevíte

** Systém Windows 10 umí spoustu užitečných drobností ** O mnoha praktických funkcích pravděpodobně ani nevíte ** Poznejte užitečné tipy, které se vám mohou hodit každý den

Vladislav Kluska | 30


Aktuální číslo časopisu Computer

Kdy necháme řídit chytrá auta?

6 Wi-Fi Mesh systémů ve velkém testu

Srovnali jsme 7 sportovních kamer

Znáte pravidla pro létání s drony?