CSS sloupcovy layout, dlouhy text roztahujici layout stranky

**l_iNu$** · 10.03.2008, 15:26

Původně odeslal Jey

dal se chci zeptat.. chapu to spravne ze css vlastnost .. top = margin-top? to same pro left?

Chápeš špatně, margin je vnější okraj elementu(tedy odstup od ostatních elementů), kdežto vlastnosti left, top, right, bottom určují pozici elementu závislou na vlastnosti position (absolute, relative...)

**Jey** · 10.03.2008, 15:49

Původně odeslal l_iNu$

Chápeš špatně, margin je vnější okraj elementu(tedy odstup od ostatních elementů), kdežto vlastnosti left, top, right, bottom určují pozici elementu závislou na vlastnosti position (absolute, relative...)

ano, rozumím. původně jsem chtěl napsat za určitých podmínek. za určitých podmínek lze obojí použít k dosažení stejné věci. právě jsem přemýšlel, zda by mi nepomohlo zrušit celý #middle a namísto toho dát position:relative pro #left a nastavit mu left:5px a pro #right dát také position:relative a nastavit mu right:5px; pak už jen vymyslet onu horizontální mezeru.. například pro #bottom nastavit position:relative a top:5px; a pak dat jeste top:5px pro left i right. zda by toto fungovalo? inu nápady mám, ale nemám ověřenou funkčnost, proto se ptám, než se do něčeho pustím. v momentálním stavu to bohužel není ono.

**visby** · 10.03.2008, 16:33

skus dat za tie dva float divy toto:

<hr style="clear: both; display: none;"/>

casto mi to pomohlo, ked som kombinoval float elementy a normalne...

**Jey** · 10.03.2008, 16:41

visby: jasne to funguje, ale pouze pokud nepouziju display, ale dam namisto toho visibility:hidden. a musim nastavit i parametry te cary, protoze treba explorer ji da rozmery podle sveho. takze to opet nevypada vsude stejne. toto reseni si ponecham v zaloze. verim, ze by to slo vyresit obratneji.

**Rainbow** · 10.03.2008, 18:14

Mozno by sa dal pouzit display: table a display: table-cell. To som na nejakom webe pouzil, ked som chcel bocny panel roztahovat do vysky. Akurat to nefunguje v MSIE, tak na to som tam pridal nejaky hack.

**Smitka** · 10.03.2008, 21:32

Na to by se mozna hodil jiny figl - pomoci background-image.
Zkusim popsat, jak bych to resil.
Do #middle bych dal obrazek na pozadi:

#left asi neplavaci, s marginem na prave menu a jeste do nej na konec nejakej prvek s clear:both, aby kdyby byl #right dlouhy, tak aby se natah...
Melo by to vypadat uplne stejne jako kdybys to ruzne natahoval...
Snad je to pochopitelne, kdyztak udelam nejaky priklad.

**Jey** · 11.03.2008, 16:23

no to bych se z toho... jeste to nemam vyresene.. kdyz me neco napadne, nebo se rozhodnu neco pouzit, vzdy narazim na to, ze to v nejakem prohlizeci nakonec vypada jinak. pak vymyslim hacky a dalsi hacky a stejne jsem se zatim k vysledku nedobral.

promenliva delka #left a #right je resena pomoci parametru min-height, ktery musi mit nastaven i #middle a #page, aby se pripadne vse roztahovalo. + mam tu ten IE podrtzitkovy hack.

pokud chci pouzit clear:both, ktery nastavim prvku #middle, tak OPERA nepochopitelne vynecha margin-bottom prvku middle a neodsadi spodni listu - bottom, obrazek je v prvnim postu. jinde to funguje jak ma.

pokud pouziju samostatny div ktery dam za right, a dam mu vlastnosti clear:both;width:100%;height:1px;, pak to funguje(ale musi mit nastavene minimalne tyto rozmery) vsude krome IE - ten odsadi #bottom o dva radky, protoze pomocny div ma 2 zalomeni.
edit - to same mi dela i vodorovna cara - hr - coz jsem povazoval puvodne za 100% funkcni reseni

smitka: s tim obrazkem to chapu ale myslim ze by to nevyresilo popisovany problem.
nicmene nemuzu nechat float pouze u prvku #right doprava, a u #left ho zrusit, protoze #right pak neobteka prvek #left, jedine ze bych ho dal v kodu pred nej a to nechci/nemuzu.
pokud jsem zrusil float u prvku #right a nechal ho u #left, pak opet #right neobtekal left, ale byl pod nim.

jedine me snad napada zrusit ten margin pro middle, ktery slouzi jako pomocny a dat nejaky div nad nej treba obrazek sirka 100% vyska 5px, ktery tu mezeru proste vzdy udela a stejne tak dalsi stejny takovyto obrazek umistit i pod middle.

jeste pridavam holy kod webu, jestli neni nejaka bota tu, ale validator to bere

Kód:

...
<body>
<div id="page">
<div id="top">
<? include ("top.php"); ?>
</div>
<div id="middle">
<div id="left">
<? include("left.php"); ?>
</div>
<div id="right">
<? include("right.php"); ?>
</div>
</div>
<div id="bottom">
<? include("bottom.php"); ?>
</div>
</div>
</body>
</html>

EDIT: objevil jsem velmi velmi zajimavy clanek s funkcnim resenim. je to sice nejspis opet nejaky druh hacku, protoze ty hodnoty marginu tam nedavaji smysl, ale vypada to ve vsech prohlizecich stejne. snad to bude aplikovatelne pro muj pripad.
http://tvorba-webu.zdarek.com/css/obtekani.php

Téma: CSS sloupcovy layout, dlouhy text roztahujici layout stranky

Nástroje témat

Zobrazení

Hybrid View

Re: CSS sloupcovy layout, dlouhy text roztahujici layout stranky

Re: CSS sloupcovy layout, dlouhy text roztahujici layout stranky

Re: CSS sloupcovy layout, dlouhy text roztahujici layout stranky

Re: CSS sloupcovy layout, dlouhy text roztahujici layout stranky

Re: CSS sloupcovy layout, dlouhy text roztahujici layout stranky

Re: CSS sloupcovy layout, dlouhy text roztahujici layout stranky

Re: CSS sloupcovy layout, dlouhy text roztahujici layout stranky

Informace o tématu

Users Browsing this Thread

Podobná témata

CSS layout

[Css] Css Layout (Graficky tvoreni CSS) WYSIWYG editory CSS

C++ --> Delphi

Pravidla přispívání