Autor Zpráva
yajda
Profil
Zdravím,

kdo by poradil, jak umístit banner skyscraper (120x600px) tesne vedle napravo od horizontalne centrovaneho designu s pevnou sirkou (cca 850px) tak, aby byl i pro zmene rozliseni stale hned vedle designu a pri zmenseni okna (nebo nizsim rozliseni) se objevil dole posuvnik a ne tak, aby banner prekryl design. Doufam, ze jsem se vyjadril srozumitelne :)

Zjednodusene:

body
{
text-align: center;
}
div#box
{
margin: 0 auto;
width: 850px;
}
div#skyscraper
{
width: 120px;
height: 600px;
}

<body>

<div id="box">
<!-- obsah stranky -->
</div>

<div id="skyscraper">
<!-- skyscraper -->
</div>

</body>

Díky,
tiso
Profil
Pokiaľ chceš posuvník tak musíš nadradiť divu s layoutom ďalší široký 850px+šírka baneru a baner umiestniť vedľa layoutu
yajda
Profil
diky, to bych vedel jak, ale pak je ten problem, že bude centrovaný design s sirkou 850+sirka banneru. Ja bych rad design sirky 850 vycentrovany a vedle nej (asymetricky) 120px banner, to asi nepujde, co?

Jde o to, ze banner se bude pridavat jen nekdy a nejradsi bych pridal jen do templatu nejaky div s kodem reklamniho systemu, ktery se bud zobrazi nebo ne. Takhle by muselo byt pokazde vyreseno jeste obalenim celeho layoutu.

Resil to uz nekdo nekdy? Ja nikde nic nenasel..
yajda
Profil
Nikdo by nevěděl, jak to řešit?
Railbot
Profil
yajda
Asi nejlepší řešení, která dá nejméně práce je to obalení ještě celé stránky jedním divem s bannerem. Má to tak většina webů, kde je takový banner použitý.
Dero
Profil
diky, to bych vedel jak, ale pak je ten problem, že bude centrovaný design s sirkou 850+sirka banneru. Ja bych rad design sirky 850 vycentrovany a vedle nej (asymetricky) 120px banner, to asi nepujde, co?

Jde to, jen, jak říká Railbot, to je složité. Ten problém mě zaujal, a tak jsem sestrojil vzorovou stránku s obecným řešením. Malou nevýhodou je, že box #skyscraper musí být v HTML kódu před obsahem stránky. Jinak nejsou žádná omezení.

Funguje to plně v IE5+, FF všechny, Mozilla 1.7+, Opera 9, Netscape Browser 8.1.
Konqueror zatím nezobrazuje vodorovný posuvník, ale teď už se mi tím nechce zabývat. Možná zítra, vím, kde je problém.

http://dero.name/stuff/asymetricky_skyscraper.html

Nikdo by nevěděl, jak to řešit?

Stačí to takhle? :o)
llook
Profil
Možná jsem něco přehlédl, ale mě se zdá řešení jednoduché: skyscraper se prostě umístí v HTML kamkoli do toho divu, který zúžuje stránku na těch 850px. Tomu zužovacímu divu se nastaví position: relative, aby se vyresetily souřadnice a skyscraper se absolutně napozicuje na top: 0; left: 100%. Takhle:

<div style="text-align: center">

<div style="
background: #0ff;
width: 850px;
position: relative;
margin: auto;
text-align: left;
">

Hlavní obsah.

<div style="
background: #ff0;
width: 120px; height: 600px;
position: absolute;
top: 0; left: 100%;
">
Mrakodrap.
</div>
</div>
</div>

Zkusil jsem to v Opeře 9 a Exploreru 6 a funguje to.
Dero
Profil
llook: Takhle to je snadné, ale já jsem se řídil přesně zadáním:


<body>

<div id="box">
<!-- obsah stranky -->
</div>

<div id="skyscraper">
<!-- skyscraper -->
</div>

</body>


Chápu, proč to yajda chce právě takto. Často je potřeba do nějakého RS přidat skyscraper. Vzhledem k tomu, že se layouty mohou různit, musí být tento skyscraper zcela nezávislý na obsahu. Musí být tedy na stejné úrovni jako celý obsah stránky. A to je už výzva.

Samozřejmě, kdyby mohl skyscraper být uvnitř obsahu, existuje nespočet řešení.
habendorf
Profil
Podle mě na to jdete strašně složitě, vždyť je to hrozně jednoduchý. Nebo ne?

Dero: Malou nevýhodou je, že box #skyscraper musí být v HTML kódu před obsahem stránky.

Proboha proč?

Já to asi napíšu.
Dero
Profil
habendorf: Běžně opomíjím snadná řešení, takže by mě nijak nepřekvapilo, kdyby mi něco uniklo. Zkus to napsat. Když je to jednoduché, tak to nebude dlouho trvat. Já už mám v hlavě to svoje řešení a tudíž nic jiného "na čisté plátno" nevymyslím.
habendorf
Profil
No jasně že to funguje: http://stuff.1-webdesign.cz/skyscraper.html

html nechávám přesně jak bylo

<body>
<div id="box">
<!-- obsah stranky -->
</div>
<div id="skyscraper">
<!-- skyscraper -->
</div>
</body>

Jen jsem na konec samozřejmě přidal cleaner.

css:
body {width:970px;margin:0 auto;padding-left:120px;}
#box {width:850px;background:yellow;float:left;}
#skyscraper {width:120px;height:600px;background:green;float:right;}
.cleaner {clear:both;}

yajda: Pokud by ti kvůli případnému pozadí vadilo, že je body užší, dej pozadí na html. A dodělej si mezeru mezi boxem a skyscraperem, s tou jsem se nepatlal, jde jen o princip řešení.
Dero
Profil
habendorf: To neodpovídá zadání. Hlavní box má být vycentrovaný až do šířky okna 850px, skyscraper má být umístěný asymetricky vpravo od něj a když se nevejde, má se zobrazit posuvník.

Tvoje řešení má pevný levý padding, který nechává nehezkou mezeru při zmenšení okna pod 970px.
habendorf
Profil
Dero: Čtu to původní zadání a nejsem si jist, co vlastně chce. Pokud se sem ještě vrátí, vybere si sám.
Dero
Profil
Jde o to, ze banner se bude pridavat jen nekdy a nejradsi bych pridal jen do templatu nejaky div s kodem reklamniho systemu, ktery se bud zobrazi nebo ne.

To je podle mě dost pádný důvod si myslet, že centrovat se má oněch 850px, a to až po hranici 850px širokého okna. Ale jak říkáš, počkáme si na vyjádření zadavatele.
habendorf
Profil
Dero: Dobře, v tom případě http://stuff.1-webdesign.cz/skyscraper.html

HTML zcela dle zadání, CSS:

body {width:850px;margin:0 auto;overflow:visible;position:relative;}
#box {background:yellow;}
#skyscraper {width:120px;height:600px;background:green;margin-left:850px;position: absolute;top:0;}
habendorf
Profil
To overflow:visible je asi zbytečné.
Dero
Profil
habendorf: Souhlasím, ve standardním režimu je to jednoznačně lepší řešení.

Pokud není třeba podpora IE5 a IE5.5, na moje řešení v quirku můžete s klidem zapomenout.
Dero
Profil
Řešení v quirku jsem upravil tak, že teď není o mnoho složitější než ve standardu. Navíc má širší podporu v prohlížečích (namátkou Opera 7.5+) a drží se striktně zadání.

http://dero.name/stuff/asymetricky_skyscraper.html
yajda
Profil
Díky moc, zapomněl jsem poděkovat za rady :-) Ale moc mi diskuse pomohla. Využíl jsem poslední Derovo řešení...
Toto téma je uzamčeno. Odpověď nelze zaslat.