| Autor | Zpráva | ||
|---|---|---|---|
| HeWeR Profil |
#1 · Zasláno: 21. 5. 2006, 14:39:38
Potřebuju:
- dva sloupce (dole patička, která následuje až za nima) - pravý sloupec má fixní šířku s je přilepen na pravý okraj - levý sloupec se roztahuje podle rozlišení Už jsem tento problém řešil dříve, ale nepodařilo se mi to vyřešit na všech prohlížečích. Poloviční řešení jsem našel v: .sloupec1 {} .sloupec2 {float: right; margin-right: 0px; width: 300px; } .paticka {clear: both; width: 100%; } Jenomže v tomto případě by musel být sloupec2 v HTML před sloupcem 1, což je nežádoucí. Nikde na internetu jsem nenaše řešení a také jsem nenarazil na stránku, kde by to bylo a já se mohl "inspirovat". Děkuju za vaše postřehy |
||
| Plaváček Profil |
#2 · Zasláno: 21. 5. 2006, 15:20:05
Nelze, pokud trváš na tom, že sloupec 2 má být v kódu až za sloupcem 1. Určité řešení skýtá absolutní pozicování (čili sloupec 2 umístíš do pravého okraje sloupce 1 o šířce 300px), ale zase narazíš na problém s patičkou, pokud sloupec 2 bude delší než sloupec 1.
|
||
| Dero Profil |
#3 · Zasláno: 21. 5. 2006, 15:54:41
No, je to smontované na koleni, ale zkus si poladit tohle:
<style type="text/css"> * { margin: 0; padding: 0; box-sizing: content-box; } body { text-align: center; } #wrap { width: 100%; margin: 0 auto; text-align: left; float: left; overflow: hidden; } #sl1 { background: yellow; float: left; padding-right: 310px; } #sl2 { background: gray; width: 300px; float: left; margin-left: -300px; margin-right: -300px; padding-right: 50px; } * html #sl2 { width: 350px; } #paticka { background: green; clear: left; } </style> <body> <div id="wrap"> <div id="sl1"> Lorem ipsum dolor sit amet... </div> <div id="sl2"> Lorem ipsum dolor sit amet... </div> </div> <div id="paticka"> Lorem ipsum dolor sit amet... </div> </body> Funguje v IE5+, Opeře 7+ i ve FF, o starších prohlížečích však vzhledem k povaze kódu pochybuji. Moc šancí nedávám starým Mozillám a Operám, protože ty měly s pozicováním obecně problémy a text ořezávaly. |
||
| HeWeR Profil |
#4 · Zasláno: 21. 5. 2006, 17:16:37
Dero
Dík moc. Poněkud jsem ten CSS zkrátil: #sl1 {background: yellow; float: left; padding-right: 299px; } #sl2 {background: gray; width: 300px; float: left; margin-left: -299px; } #paticka {background: green; clear: left; } Funguje to i bez wrap. Wrap ovšem na IE způsoboval problémy – nezobrazoval absolutně pozicované prvky před sloupcama. Ten 1px rozdíl tam je, protože v Opeře se dělala vpravo právě 1px mezírka. Testované: IE 6, IE 5.5; Opera 8, 9; FireFox. IE 5 to podivuhodně zalamuje, Opera 7 si tam vymýšlí mezery (ale jinak ok). |
||
| llook Profil |
#5 · Zasláno: 21. 5. 2006, 17:21:09
Nějak jsem to nestudoval, ale jestli je to ten trik se záporným marginem, tak ten funguje dokonce i v Amaye. Viz http://llook.wz.cz/weblog/spot/layout-se-stejnou-vyskou-sloupcu.php
|
||
| Dero Profil |
#6 · Zasláno: 21. 5. 2006, 17:22:42
Rádo se stalo.
Ten 1px rozdíl tam je, protože v Opeře se dělala vpravo právě 1px mezírka. Napříč prohlížeči se setkáš s vícero mezírkami, některé prohlížeče odsazují přetékající floatované prvky o pouze jim známý počet pixelů, proto jsem původně nasadil toleranci. Funguje to i bez wrap. Wrap ovšem na IE způsoboval problémy – nezobrazoval absolutně pozicované prvky před sloupcama. Možná by pomohlo umístění patičky do wrapu, případně čachry s pozicováním wrapu samotného. Myslím, že s tím layoutem budeš mít ještě drobné problémy a pomaličku se přiblížíš té mé původné verzi. Jen takové tušení. :o) Každopádně hezkou zábavu. |
||
| HeWeR Profil |
#7 · Zasláno: 21. 5. 2006, 17:26:19
llook
nn, jedná se o problém s plovoucí šířkou a fixně širokým pravým sloupcem :) |
||
|
Časová prodleva: 18 let
|
|||
Toto téma je uzamčeno. Odpověď nelze zaslat.
0