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

Doladění www stránek s tabulkou

Odpovědět  |  Zobrazit bez stromu  |  Upozornit redakci  |  nových odpovědí: 12/12
 |   |  Microsoft Windows 7 Firefox 12.0  |  [80.188.47.---]

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  |  [80.188.47.---]

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  |  [80.188.47.---]
 | 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  |  [80.188.47.---]

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  |  [80.188.47.---]

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  |  [80.188.47.---]

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  |  [89.173.153.---]

body {overflow:-y:scroll;}

Souhlasím  |  Nesouhlasím  |  Odpovědět
 |   |  Microsoft Windows 7 Firefox 12.0  |  [80.188.47.---]

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  |  [188.122.212.---]

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  |  [80.188.47.---]

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



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


Tesla chce změnit nákladní dopravu. Její elektrický náklaďák má ohromující parametry

Tesla chce změnit nákladní dopravu. Její elektrický náklaďák má ohromující parametry

** Tesla představila elektrický kamion ** Má obdivuhodný výkon i dojezd ** Prodávat by se měl už za dva roky

17.  11.  2017 | Vojtěch Malý | 229

Black Friday 2017: Přehled slev na elektroniku a počítače

Black Friday 2017: Přehled slev na elektroniku a počítače

** Začala slevová mánie zvaná Black Friday ** Pozor, ne všechny slevy jsou opravdu výhodné ** Průběžně sledujeme slevové akce v počítačových e-shopech

Dnes | David Polesný | 23

Nejlepší notebooky do 10 tisíc, které si teď můžete koupit

Nejlepší notebooky do 10 tisíc, které si teď můžete koupit

** I pod hranicí desíti tisíc korun existují dobře použitelné notebooky ** Mohou plnit roli pracovního stroje i zařízení pro zábavu ** Nejlevnější použitelný notebook koupíte za pět a půl tisíce

16.  11.  2017 | Stanislav Janů | 55

Google Mapy mají nový design. Líbí se vám víc než předchozí? Tady je srovnání

Google Mapy mají nový design. Líbí se vám víc než předchozí? Tady je srovnání

** Nový design Google Map přijde na počítače i mobilní telefony. ** Zaměřuje se na zvýraznění konkrétních míst, mapové podklady jsou mnohdy upozaděné. ** Lépe pracuje s chráněnými oblastmi a parky.

20.  11.  2017 | Vladislav Kluska | 29