2 stejně vysoké sloupce s CSSkem, pomozte
Pomozte prosím.
http://johnny.wz.cz/mix/csshelp/
Potřebuju, aby tyhle dva sloupce byly stejně vysoké (aby oba měly automaticky výšku nejvyššího z nich).
Vím, že to nějak jde, ale nedaří se mi :(
http://www.pixy.cz/blogg/clanky/css-3col-layout/
Předem díky, johnny
http://johnny.wz.cz/mix/csshelp/
Potřebuju, aby tyhle dva sloupce byly stejně vysoké (aby oba měly automaticky výšku nejvyššího z nich).
Vím, že to nějak jde, ale nedaří se mi :(
http://www.pixy.cz/blogg/clanky/css-3col-layout/
Předem díky, johnny
style="height: 200px"
Ne, tohle je fixní výška. Já chci, aby se oba sobě navzájem přizpůsobovaly (napodobovaly tabulku o jednom řádku a dvou buňkách = sloupcích).
Tady to funguje : http://www.pixy.cz/blogg/clanky/css-3col-layout/
Tady to funguje : http://www.pixy.cz/blogg/clanky/css-3col-layout/
tak to odtamtud vykopiruj :-)
Tak to vlož jednoduše do tabulky a dej oboum tabulkám 100% výšku
Tabulky zásadně na design nepoužívám. Pokud nikoho nic nenapadá, tak asi ukradnu pixyho dílko a umáznu ho na dva sloupce :/
Proč nepoužíváš tabulky?
Tabulky se mají používat zásadně na zobrazení dat, ne na tvorbu designu. Vedla se o tom spousta diskuzí, spousta článků. (www.pixy.cz, http://djpadak.czechian.net/IVTlog/index.php?show=20030824#tabless-tips) A pokud mám mluvit z praxe - design bez tabulek mnohonásobně zrychlí načítání stránky, ve zdrojovém kódu mi udržuje lepší přehled, a je celkově flexibilnější pro pozdější změny designu.
Sakra to je odpověď. Je fakt, že máš asi pravdu, ale myslim si, že je hodně věcí(v grafice), které bez tabulek neuděláš
http://www.csszengarden.com/
Projeď si tam volitelné designy - všechno bez tabulek, všechno jen výměnou CSS souboru.
Projeď si tam volitelné designy - všechno bez tabulek, všechno jen výměnou CSS souboru.
dkokud se nebuou ve vsech prohlizecich ddrzovat jakesi standarty tak podle me je jistejsi na nktere veci ty tabulky pouzit protoze jim rozumi snad kazdej prohlizec viz Ja jsem jednou delal menu a pomoci css (a js) jem upravoval text a vlastnosti polozky a v ie a oprere to celkem slo ale kdyz jsem si pustil konruktor nebo strsi verzy NN 5 tak jsem se zdesil co to je za hrzu (mozna to ted uz neni tak bezne ale jistota je jistota staci totiz kdyz se nenacte vsoubor s css a je to vsechno v haji )
Věr mi, standardy se dodržují už do velmi slušné míry (starší veze NN někdo používá?), bez tabulek prostě tvoří všichni zkušení webdesignéři. Jistě, kdo je zvyklý na tabulky, nevidí důvod na css+div přecházet. Já bych třeba ale něco udělat pomocí tabulek asi nezvládl (psychicky i technicky).
"taci totiz kdyz se nenacte vsoubor s css" - staci kdyz se nenacte html a je to jeste vic v haji ;), takze to neni argument, neni duvod proc by se nenacital.
"taci totiz kdyz se nenacte vsoubor s css" - staci kdyz se nenacte html a je to jeste vic v haji ;), takze to neni argument, neni duvod proc by se nenacital.
http://www.maxdesign.com.au/presentation/listamatic/
Projdi všechna menu - opět bez tabulek (bez ošklivého JavaScriptu), jen css.
Projdi všechna menu - opět bez tabulek (bez ošklivého JavaScriptu), jen css.
Do pr...!
Psal jsem tady asi 5 minut příspěvek na téma CSS a omylem jsem si ho smazal :-(
Tak aspoň stručně:
> Johnny
Musím tě pochválit za tvé názory ;-) Naprosto s nimi souhlasím a jsem jejich zastáncem. Vždy mě potěší, když najdu někoho, kdo z mého pohledu správně pochopil, o čem webové stránky jsou!
> tvůj dotaz
Proč teda nepoužiješ to Pixyho řešení?!
Psal jsem tady asi 5 minut příspěvek na téma CSS a omylem jsem si ho smazal :-(
Tak aspoň stručně:
> Johnny
Musím tě pochválit za tvé názory ;-) Naprosto s nimi souhlasím a jsem jejich zastáncem. Vždy mě potěší, když najdu někoho, kdo z mého pohledu správně pochopil, o čem webové stránky jsou!
> tvůj dotaz
Proč teda nepoužiješ to Pixyho řešení?!
napsal jem na NEKTERE věci NE na VSE pozivat tabulky
To, co jsem psal a omylem ztratil, popisovalo že 95% tabulkového layoutu lze nahradit CSS. Vznikne tak daleko čistější a sémantický dokument, který může být navíc "bezbariérový". Zbývajích 5% jsou blbosti, bez kterých se jde obejít.
Tabulky by neměly být zneužívány a měly by sloužit jen k tomu, k čemu v html jsou. Tedy pro výpis tzv. tabulkových dat.
Tabulky by neměly být zneužívány a měly by sloužit jen k tomu, k čemu v html jsou. Tedy pro výpis tzv. tabulkových dat.
Já věděl, že už jsem někdy něco podobného dělal...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Pokus</title>
<style type="text/css">
body { margin: 0; border: none; padding: 0; font-family: Verdana, sans-serif; font-size: 75% }
#body { width: 760px; margin: 15px auto; border: 1px solid red; padding: 0 }
.menul, .menur { width: 130px; margin: 0; border: none; border-bottom: 1px solid blue; padding: 0.25em 0 }
.menul { clear: left; float: left }
.menur { clear: right; float: right }
#main { margin: 0 130px; border: none; border-left: 1px solid green; border-right: 1px solid green; padding: 10px 15px }
h1 { margin: 0; border: none; padding: 0.2em 0.5em; font-size: 200%; color: #998; text-align: center }
h2 { margin: 0; border: none; padding: 0.2em 0.5em; font-size: 170% }
p { margin: 0; border: none; padding: 0.5em; text-align: justify }
a { color: #33a; background-color: transparent }
a:hover { color: #fff; background-color: #33a }
.menul a, .menur a { display: block; margin: 0; border: none; padding: 0 0.5em 0 1.5em }
.menul h2, .menur h2 { font-size: 125% }
</style>
</head>
<body>
<div id="body">
<div class="menul">
<h2>Menu1</h2>
<a href="#">Menu11</a>
<a href="#">Menu12</a>
<a href="#">Menu13</a>
<a href="#">Menu14</a>
<a href="#">Menu15</a>
</div>
<div class="menul">
<h2>Menu2</h2>
<a href="#">Menu21</a>
<a href="#">Menu22</a>
<a href="#">Menu23</a>
</div>
<div class="menul">
<h2>Menu3</h2>
<a href="#">Menu31</a>
</div>
<div class="menul">
<h2>Menu4</h2>
<a href="#">Menu41</a>
<a href="#">Menu42</a>
<a href="#">Menu43</a>
<a href="#">Menu44</a>
</div>
<div class="menul">
<h2>Menu5</h2>
<a href="#">Menu51</a>
<a href="#">Menu52</a>
</div>
<div class="menur">
<h2>Menu6</h2>
<a href="#">Menu61</a>
<a href="#">Menu62</a>
<a href="#">Menu63</a>
<a href="#">Menu64</a>
</div>
<div class="menur">
<h2>Menu7</h2>
<a href="#">Menu71</a>
<a href="#">Menu72</a>
<a href="#">Menu73</a>
<a href="#">Menu74</a>
<a href="#">Menu74</a>
</div>
<div class="menur">
<h2>Menu8</h2>
<a href="#">Menu81</a>
<a href="#">Menu82</a>
<a href="#">Menu83</a>
</div>
<div id="main">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce felis nibh,
consequat ac, feugiat eu, molestie non, lectus. In tortor ante, dapibus at,
molestie vel, scelerisque eget, odio. Aliquam faucibus, enim in molestie
vulputate, nulla justo pretium dolor, ac porttitor justo est non lorem.
Curabitur vestibulum augue id leo. Curabitur dolor mi, aliquet ut, vestibulum
vel, sodales a, justo. Praesent iaculis. Aliquam risus. Sed dapibus facilisis
lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Pellentesque convallis arcu nec elit. Maecenas ut erat.</p>
<p>Fusce arcu erat, viverra sed, posuere vel, sagittis ac, ligula. Proin
sollicitudin wisi at urna. Nullam tristique adipiscing lorem. Praesent enim.
Fusce ornare luctus urna. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Etiam eget arcu. Suspendisse potenti. Vestibulum
ullamcorper eros non felis. Phasellus consectetuer ligula ut massa. Aliquam
volutpat tellus.</p>
<p>In purus. Phasellus porta tristique libero. Maecenas in sapien non lectus
pellentesque dignissim. Ut nonummy tellus sed turpis. Nullam mi diam, feugiat
quis, sodales eu, luctus sed, orci. Nulla adipiscing. Maecenas cursus risus.
Vestibulum id justo sit amet nibh fringilla euismod. Quisque consequat lacus ac
mauris. Integer nonummy. Morbi a wisi id nulla condimentum cursus.</p>
</div>
</div>
</body>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<title>Pokus</title>
<style type="text/css">
body { margin: 0; border: none; padding: 0; font-family: Verdana, sans-serif; font-size: 75% }
#body { width: 760px; margin: 15px auto; border: 1px solid red; padding: 0 }
.menul, .menur { width: 130px; margin: 0; border: none; border-bottom: 1px solid blue; padding: 0.25em 0 }
.menul { clear: left; float: left }
.menur { clear: right; float: right }
#main { margin: 0 130px; border: none; border-left: 1px solid green; border-right: 1px solid green; padding: 10px 15px }
h1 { margin: 0; border: none; padding: 0.2em 0.5em; font-size: 200%; color: #998; text-align: center }
h2 { margin: 0; border: none; padding: 0.2em 0.5em; font-size: 170% }
p { margin: 0; border: none; padding: 0.5em; text-align: justify }
a { color: #33a; background-color: transparent }
a:hover { color: #fff; background-color: #33a }
.menul a, .menur a { display: block; margin: 0; border: none; padding: 0 0.5em 0 1.5em }
.menul h2, .menur h2 { font-size: 125% }
</style>
</head>
<body>
<div id="body">
<div class="menul">
<h2>Menu1</h2>
<a href="#">Menu11</a>
<a href="#">Menu12</a>
<a href="#">Menu13</a>
<a href="#">Menu14</a>
<a href="#">Menu15</a>
</div>
<div class="menul">
<h2>Menu2</h2>
<a href="#">Menu21</a>
<a href="#">Menu22</a>
<a href="#">Menu23</a>
</div>
<div class="menul">
<h2>Menu3</h2>
<a href="#">Menu31</a>
</div>
<div class="menul">
<h2>Menu4</h2>
<a href="#">Menu41</a>
<a href="#">Menu42</a>
<a href="#">Menu43</a>
<a href="#">Menu44</a>
</div>
<div class="menul">
<h2>Menu5</h2>
<a href="#">Menu51</a>
<a href="#">Menu52</a>
</div>
<div class="menur">
<h2>Menu6</h2>
<a href="#">Menu61</a>
<a href="#">Menu62</a>
<a href="#">Menu63</a>
<a href="#">Menu64</a>
</div>
<div class="menur">
<h2>Menu7</h2>
<a href="#">Menu71</a>
<a href="#">Menu72</a>
<a href="#">Menu73</a>
<a href="#">Menu74</a>
<a href="#">Menu74</a>
</div>
<div class="menur">
<h2>Menu8</h2>
<a href="#">Menu81</a>
<a href="#">Menu82</a>
<a href="#">Menu83</a>
</div>
<div id="main">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce felis nibh,
consequat ac, feugiat eu, molestie non, lectus. In tortor ante, dapibus at,
molestie vel, scelerisque eget, odio. Aliquam faucibus, enim in molestie
vulputate, nulla justo pretium dolor, ac porttitor justo est non lorem.
Curabitur vestibulum augue id leo. Curabitur dolor mi, aliquet ut, vestibulum
vel, sodales a, justo. Praesent iaculis. Aliquam risus. Sed dapibus facilisis
lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Pellentesque convallis arcu nec elit. Maecenas ut erat.</p>
<p>Fusce arcu erat, viverra sed, posuere vel, sagittis ac, ligula. Proin
sollicitudin wisi at urna. Nullam tristique adipiscing lorem. Praesent enim.
Fusce ornare luctus urna. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Etiam eget arcu. Suspendisse potenti. Vestibulum
ullamcorper eros non felis. Phasellus consectetuer ligula ut massa. Aliquam
volutpat tellus.</p>
<p>In purus. Phasellus porta tristique libero. Maecenas in sapien non lectus
pellentesque dignissim. Ut nonummy tellus sed turpis. Nullam mi diam, feugiat
quis, sodales eu, luctus sed, orci. Nulla adipiscing. Maecenas cursus risus.
Vestibulum id justo sit amet nibh fringilla euismod. Quisque consequat lacus ac
mauris. Integer nonummy. Morbi a wisi id nulla condimentum cursus.</p>
</div>
</div>
</body>
Zase to zpolykalo <html> a </html>!
(2Admin)
Poví mi někdo, čím to je? Nikdy předtím se mi to nestávalo.
(2Admin)
Poví mi někdo, čím to je? Nikdy předtím se mi to nestávalo.
K dokonalosti chybí už jen XHTML 1.0 Strict deklarace a opravení jediné chybičky která by tím vznikla :) Jinak trochu off-topic no. Já čekal, že se na tu moji stránku někdou koukne, hned pozná čím to je a poradí.
XHTML:
> Já věděl, že už jsem někdy něco podobného DĚLAL...
Off-topic to myslím není. Na tu tvoji stránku jsem se díval, ale co s ní? Čistě natáhnout dva divy na stejnou délku NELZE, musíš to obejít nějakým trikem. Např. ten můj využívá ohraničení několika divů dohromady tak, že se zdá, jakoby byly stejně dlouhé.
Teď jsem se podíval na to Pixyho řešení a je úplně stejné. On zase využívá triku s pozadím.
> Já věděl, že už jsem někdy něco podobného DĚLAL...
Off-topic to myslím není. Na tu tvoji stránku jsem se díval, ale co s ní? Čistě natáhnout dva divy na stejnou délku NELZE, musíš to obejít nějakým trikem. Např. ten můj využívá ohraničení několika divů dohromady tak, že se zdá, jakoby byly stejně dlouhé.
Teď jsem se podíval na to Pixyho řešení a je úplně stejné. On zase využívá triku s pozadím.
Aha, momentík, takže vlastně to co vypadá, že se na krajích natahuje nejsou divy, ale pozadí divu hlavního?
Přesně tak...
Ztáhni si ten příklad, poměň si v něm barvy, rozeber si ho a přijdeš na to.
V tom mém jde zase o ohraničení - cílem je aby web vypadal jako "rámečkový" a obě menu by měla "sahat" až dolů. Výsledku docílíš kombinací rámečků několika divů.
Ta ukázka, kterou jsem ti em dal má úmyslně jiné barvy u každého divu. Normálně je mám ale všechny v barvě designu.
Jedinná skulinka je v případě, že prostřední <div> je kratší než boční menu. Však to vyzkoušej. Taková situace nastane ale málokdy a z mého pohledu se dá oželet.
Ztáhni si ten příklad, poměň si v něm barvy, rozeber si ho a přijdeš na to.
V tom mém jde zase o ohraničení - cílem je aby web vypadal jako "rámečkový" a obě menu by měla "sahat" až dolů. Výsledku docílíš kombinací rámečků několika divů.
Ta ukázka, kterou jsem ti em dal má úmyslně jiné barvy u každého divu. Normálně je mám ale všechny v barvě designu.
Jedinná skulinka je v případě, že prostřední <div> je kratší než boční menu. Však to vyzkoušej. Taková situace nastane ale málokdy a z mého pohledu se dá oželet.
Jo, už je mi to jasné (ten tvůj příklad by taky šel vyřešit obrázkem v pozadí - se dvěma zelenými čárami).
Všechna řešení zatím ale trpí tím problémem, že hlavní obsah je až na konci. Tenhle problém jsem vcelku rychle vyřešil na webu saturn.aktualne.cz/
Všechna řešení zatím ale trpí tím problémem, že hlavní obsah je až na konci. Tenhle problém jsem vcelku rychle vyřešil na webu saturn.aktualne.cz/
Nové příspěvky
Smazani stranek
index.html )
HTML Tabulky
Zalamování textu pomocí CSS
Přesměrování
Arduino - 400 Bad Request
Nastavení českých písmen
POMOC! po druhé!
Pozicování (obrázek na střed).
Jak vycentrovat obrazek, ktery je v prikazu absolute ?
Použití tvůrce webu
katalog
async functions' is only available in es8 (use 'esversion: 8')
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
Problém s načítáním
Div pro reklamu překrývá prvky webové stránky
Nezobrazuje se mi lišta s reklamou
ako nahrám na môj web favicon?
JavaScript - nečitelný soubor *.js - jak prohlížet/editovat
Problém s textem
videostream
index.html
GB///refresh///JS
Total Commander - server nenalezen
Mobilní verze webu
Další témata
STATUS
FTP
HTTP
SQL
PHP
© 2002 - 2024 Web zdarma s.r.o. — zvládnete to sami