Autor | Zpráva | ||
---|---|---|---|
Mapak Profil * |
#1 · Zasláno: 12. 1. 2005, 10:09:14
Ahoj, mám problém s tvorbou layoutu v css. Chci vytvořit třísloupcový layout s proměnnou šířkou sloupců. Zadal jsem jim tedy relativní šířku v procentech. Když jim ale přiřadím rámeček, tak již celková šířka přesáhne 100% a bloky se zobrazí pod sebe. Když dám prostřednímu divu šířku např. 63,5% místo 64%, tak je to v pořádku, ale mezera mezi prostředním sloupcem (float: left) a pravým (float right) má mírně proměnnou šířku. Vyřešil jsem to pomocí vnoření těchto divů do třech nadřazených, které žádný rámeček nemají, le zajímalo by mě, jestli neexistuje jednodušší způsob.
adresa: mapak.wz.cz PS: kdyby to šlo bez obtékaných prvků (float), byl bych ještě šťastnější:-) |
||
Leo Profil |
#2 · Zasláno: 12. 1. 2005, 10:39:41
Verte tomu, ze obtekane prvky jsou jeste zdaleka nejjednodussi cesta, jak delat CSS layout. Zadny zazracny prikaz "tohle vysazej do tri sloupcu nasledujicich sirek" neexistuje. Vase problemy nejspis souvisi jednak s tim, ze kazdy prohlizec si jinak vyklada pojem width (v CSS) - nektery to chape jako sirku obsahu a padding, margin a border k tomu pripoocitava (coz je mirne podle normy), jiny (IE) to chape jako sirku celkovou vcetne padding, margin a border. Druhy problem je v tom, ze procentualni sirka se musi prepocitat na pixely a tam muze dochazet k zaokrouhlovacim chybam. Leo
|
||
Mapak Profil * |
#3 · Zasláno: 12. 1. 2005, 10:56:31
Díky!
S různou interpretací šířky by snad neměl být problém, protože mám doctype nastaven na HTML 4.01 strict a tak by měly všechny prohlížeče stránku zobrazovat ve standardním módu (width= šířka obsahu). |
||
Leo Profil |
#4 · Zasláno: 12. 1. 2005, 11:20:36
Vsechny ne :-) Zkuste si to treba v IE5 a 5.5, Leo
|
||
Honza Hučín Profil |
#5 · Zasláno: 12. 1. 2005, 14:01:08
Návod na třísloupcový layout má Pixy na http://www.wellstyled.com.
|
||
Časová prodleva: 1 měsíc
|
|||
Petrav Profil * |
#6 · Zasláno: 23. 2. 2005, 18:59:45
zrovna taky bojuju s layoutem přes css - dva sloupce jsem nějak zvládla, ovšem ten třetí tam nemůžu dostat, na http://www.wellstyled.com jsem našla jenom návod na dva sloupce, poradíte mi někdo, kde mám hledat?
#menu { position: relative; float: left; width: 120px; top: 0; left: 0; border-right: 1px solid #cccccc; padding-left: 1pt; padding-right: 0; padding-top: 2pt; padding-bottom: 0; font-family: "Arial CE", "Verdana", "sans-serif"; font-size: 10pt; color: #cc66cc; } #text { position: relative; top: 0; margin: 0; padding: 1em; border: 0; } #pravy { position: relative; float: right; width: 130px; top: 0; border-left: 1px solid #cccccc; padding-left: 1pt; padding-top: 2pt; } ...v čem je ta chyba, že mi prostředek odskočípod úroveň pravýho sloupce? |
||
Acci Profil |
#7 · Zasláno: 23. 2. 2005, 19:03:02
Tak se podiv třeba na http://www.thenoodleincident.com/tutorials/box_lesson/basic3.html , je to kód CSS, tak si ho uprav podle svých představ
|
||
krteczek Profil |
#8 · Zasláno: 24. 2. 2005, 21:11:23 · Upravil/a: krteczek
dovolil jsem si uplácat třísloupcový layout pro Jak psát web, je to takový kanárek ale to je schválně.
Pár detajlů: 1) musíte oba divy představující pravý a levý sloupeček umístit před div s obsahem stránky, jinak vám to nebude fungovat 2) patička tam musí být a musí mít nastaveno clear:both aby se nalepila až na ten nejdelší sloupeček ( je jedno který to bude ) a neutíkala někam jinam 3) použité doctype je 4.01strict, bud ho dodržujte, nebo použijte jiné vámi preferované ale změnte je na začátku souboru 4) doporučuji použít externí css soubor, a do něj vložit styl, soubor se volá tímhle tagem: <link rel="stylesheet" href="styl.css" > v tom řípadě ale smažte vše od <style type="text/css"> včetně až po </style> včetně.je to označeno v kodu 5)a kod vkládám zde:
ještě se sluší podotknout, že kod je podle standardu W3C 4.01strict validní, taktéž i css krteczek |
||
Honza Hučín Profil |
#9 · Zasláno: 24. 2. 2005, 22:12:11
Petrav
Návodem na dva sloupce se dá dosáhnout libovolný počet sloupců. Uděláš si prostě nejdřív dva: třeba levý a zbytek, a pak v tom zbytku uděláš zase dva atd. |
||
Časová prodleva: 16 let
|
Toto téma je uzamčeno. Odpověď nelze zaslat.
0