Autor Zpráva
yajda
Profil
#1 · Zasláno: 21. 1. 2007, 13:30:38
Odpovědět Citovat
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
#2 · Zasláno: 21. 1. 2007, 14:26:23
Odpovědět Citovat
Pokiaľ chceš posuvník tak musíš nadradiť divu s layoutom ďalší široký 850px+šírka baneru a baner umiestniť vedľa layoutu
yajda
Profil
#3 · Zasláno: 21. 1. 2007, 15:07:12
Odpovědět Citovat
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..
Časová prodleva: 4 dny
yajda
Profil
#4 · Zasláno: 25. 1. 2007, 17:32:24
Odpovědět Citovat
Nikdo by nevěděl, jak to řešit?
Railbot
Profil
#5 · Zasláno: 25. 1. 2007, 17:53:25
Odpovědět Citovat
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
#6 · Zasláno: 26. 1. 2007, 00:39:55
Odpovědět Citovat
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
#7 · Zasláno: 26. 1. 2007, 08:46:04
Odpovědět Citovat
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
#8 · Zasláno: 26. 1. 2007, 11:01:13
Odpovědět Citovat
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
#9 · Zasláno: 27. 1. 2007, 12:24:59
Odpovědět Citovat
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
#10 · Zasláno: 27. 1. 2007, 12:42:15
Odpovědět Citovat
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
#11 · Zasláno: 27. 1. 2007, 12:45:51
Odpovědět Citovat
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
#12 · Zasláno: 27. 1. 2007, 12:49:58
Odpovědět Citovat
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
#13 · Zasláno: 27. 1. 2007, 13:04:06
Odpovědět Citovat
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
#14 · Zasláno: 27. 1. 2007, 13:07:04
Odpovědět Citovat
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
#15 · Zasláno: 27. 1. 2007, 13:30:30
Odpovědět Citovat
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
#16 · Zasláno: 27. 1. 2007, 13:33:26
Odpovědět Citovat
To overflow:visible je asi zbytečné.
Dero
Profil
#17 · Zasláno: 27. 1. 2007, 14:09:55
Odpovědět Citovat
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
#18 · Zasláno: 27. 1. 2007, 15:14:59
Odpovědět Citovat
Ř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
Časová prodleva: 3 měsíce
yajda
Profil
#19 · Zasláno: 9. 5. 2007, 16:08:02
Odpovědět Citovat
Díky moc, zapomněl jsem poděkovat za rady :-) Ale moc mi diskuse pomohla. Využíl jsem poslední Derovo řešení...
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0