» 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

zdrojový kód znovu
http://i.imgbox.com/aagVbRtK.png...

Souhlasím  |  Nesouhlasím  |  Odpovědět
 | 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

Vyrobíme si falešný Mac mini za tisícovku. Stačí Raspberry Pi a 3D tiskárna

Vyrobíme si falešný Mac mini za tisícovku. Stačí Raspberry Pi a 3D tiskárna

** Vyzkoušíme Raspberry Pi 4 s iRaspbianem ** Operační systém vypadá skoro jako macOS ** Vše strčíme do vlastní stylové krabice

Jakub Čížek | 31

Velká datová loupež. Proč mají disky nižší kapacitu, než uvádějí?

Velká datová loupež. Proč mají disky nižší kapacitu, než uvádějí?

** Na disk nikdy neuložíte tolik dat, jak tvrdí výrobce ** Ajťáci si vymysleli vlastní jednotky jako mebibajt ** Zmatky vznikají i kvůli různým výjimkám

Lukáš Václavík | 110

Podívejte se na Windows z roku 1990. Před 30 lety přišly Windows 3.0 a líbily se nám

Podívejte se na Windows z roku 1990. Před 30 lety přišly Windows 3.0 a líbily se nám

** 22. května 1990 uvedl Microsoft Windows 3.0 ** Systém z Microsoftu definitivně udělal lídra na desktopu ** Tehdejší Windows byly vlastně grafickou nadstavbou nad MS-DOS

Jakub Čížek | 76

Je lepší hrát na PC, či na konzolích? Nebo jsou i jiné možnosti?

Je lepší hrát na PC, či na konzolích? Nebo jsou i jiné možnosti?

** Jaké jsou výhody a nevýhody hraní na počítači? ** Co mají společného a v čem se liší Xbox One, PS4 a Switch? ** Na čem hrát, když nemáte výkonné PC ani konzoli?

Lukáš Václavík | 122


Aktuální číslo časopisu Computer

Megatest: nejlepší notebooky do 20 000 Kč

Test 8 levných IP kamer

Jak vybrat bezdrátová sluchátka

Testujeme Android 11