| Autor | Zpráva | ||
|---|---|---|---|
| Atten Profil |
#1 · Zasláno: 17. 12. 2012, 10:39:50
Zdravím,
existuje možnost jak vložit prvek za hranici rozlišení pro které je stránka optimalizovaná, ale bez zobrazení posuvníku? Jednodušše - web je optimalizovaný na 1000px a obsahuje několik objektů. A chci, aby speciální objekt byl za hranicí stránky (tzn. v pravo za těmi 1000px) a byl viditelný jen v případě, že má uživatel větší rozlišení. Bez toho, že by se zobrazily posuvníky. Jak na to? |
||
| peta Profil |
#2 · Zasláno: 17. 12. 2012, 10:42:33
|
||
| margin Profil * |
#3 · Zasláno: 17. 12. 2012, 10:55:29
Pak ještě media Media Queries, ale smysl by to mělo, pokud bys chtěl něco nad rámec toho, co jsi tu napsal.
|
||
| Atten Profil |
Position je fakt rada nad zlato. Ale tim samotným to těžko vyřešim. Prostě v prostoru stránky mám oddíl se statistikama uživatele. Tabulka, kde v levým sloupci je popis a v pravým jsou proměnlivý hodnoty. Je to na pravým kraji stránky. A já chci za okraj rozlišení (1000px), vedle týhle tabulky, vložit ještě prostor pro avatar, kterej si uživatel zvolí. Tenhle prostor by byl vidět jen v případě většího rozlišení, než 1024 bla bla... Ale nechci, aby se zobrazily posuvný lišty. Protože když tomu nastavim např. "right: -50px", tak se stránka rozšíří a zobrazí se posuvná lišta.
Vim, že to nějak jde, ale nemám ani nejmenší tušení jak. Viděl jsem to u uloz.to, kde v hlavičce vedle loga je sekundární background. Při malým rozlišení je z něj vidět jen půlka, ale při větším rozlišení je vidět kompletní. Media Queries mi vůbec nic neřiká... |
||
| peta Profil |
Atten:
Position + Overflow To se pouziva spolecne, preci. Udelas si div, nastavis mu absolute, overflow. Do nej das dalsi div, nastavis absolute a zleva 1000. Pod to das ten dalsi obsah. Protoze je to absolutne, tak se to zhora nikam neposune. Protoze je tam overflow, tak se ti tam nezobrazi vpravo scroll, protoze div ma sirku jako okno. Bez javascriptu ti tam ale buse zobrazovat i pulku todo druheho divu. |
||
| Fisir Profil |
#6 · Zasláno: 17. 12. 2012, 21:14:51
Reaguji na petu [#5]:
„Bez javascriptu ti tam ale buse zobrazovat i pulku todo druheho divu.” Ale, ale. K tomu se přece dají použít již zmíněné Media Queries, přestože podpora není úplně dokonalá. |
||
| Petr ZZZ Profil |
#7 · Zasláno: 17. 12. 2012, 22:00:59
Reaguji na [#1] Attena:
Obrázek na pozadí prvku <html> je vidět jen tehdy, když je šířka prvku <body> menší než šířka monitoru, a posuvník se nezobrazuje. Nevýhodou je, že pokud má být na stránce avatarů víc, je toto řešení nepoužitelné.
|
||
| Atten Profil |
peta:
#1 {
position: absolute;
overflow: hidden
}
#2 {
position: absolute;
left: 1000px;
}
<div id="1">
<div id="2">
<table>
<tr>
<td> blabla</td>
</tr>
</table>
</div>
</div>Takhle? To totiž nefunguje. Fisir: Nemám tušení jak použít Media Queries. A pokud jsem správně pochopil informace, co jsem našel, tak je to spíš k vytvoření mobilní verze stránek. To je mi úplně na nic. Petr ZZZ: Vůbec nerozumim, promiň :/ _____ Pořád mám pocit, že se nechápeme (i když pravděpodobně nechápu jen já...), tak jsem udělal grafickou ukázku... Potřebuju tam dostat ten AVATAR. Bez toho, aby se dole zobrazil posuvník... 
|
||
| peta Profil |
<!DOCTYPE html>
<style>
div {
border:2px solid #080;
padding:2px;
}
#a {/*position:relative;*/}
#b {
position: absolute;
overflow:hidden;
/* width:1200px;*/
width:100%;
height:200px;
}
#c {
position: absolute;
left: 1000px;
width:200px;
height:200px;
}
#d {max-width:1000px;}
</style>
<div id="a">
<div id="b">
<div id="c">
Vpravo
</div>
</div>
<div id="d">
Bezny text
</div>
</div>Edit: Tak, jeste uprava, to width musi byt 100% nebo mensi. |
||
| Petr ZZZ Profil |
#10 · Zasláno: 18. 12. 2012, 11:24:34
Reaguji na Attena:
html { background-image: url("avatar.jpg"); background-repeat: no-repeat; background-position: right top; }
body { width:960px; }Protože prvek <html> obaluje celou stránku, nelze takto umístit více různých avatarů.
|
||
| Fisir Profil |
#11 · Zasláno: 18. 12. 2012, 16:30:36
Reaguji na Attena [#8]:
V reakci na petu to bylo míněno tak, že to (zabránění zobrazení třeba půlky avataru) lze provést i bez JavaScriptu. Díky Media Queries můžeme v případě, že bude stránka menší než 1200px avatar skrýt. |
||
| Atten Profil |
[#10] Petr ZZZ
Což o to, tohle funguje, ale když to nastavim, tak se mi stránka přitáhne na levou stranu (místo aby byla vycentrovaná) a v pozadí v prvku HTML (kterým je avatar) "zastíní" pozadí v <body>, kterým je to "repeat-x", jaký je vidět v grafickým příkladu. Respektive ho technicky vzato zastaví v bodě, kde pozadí v html začíná. [#9] peta Tohle vypadá velice nadějně. Zkusim to zapracovat do stránky a dám vědět. :) [#11] Fisir Aha. Ale mě tam částečný překrytí nevadí. Nebo aspoň doufám, že to vadit nebude. Krom toho to budu chtít použít ještě i na další prvky ve stránce. :) |
||
| Petr ZZZ Profil |
#13 · Zasláno: 18. 12. 2012, 22:52:24
Reaguji na Attena:
Takhle to bude vycentrované (jak vycentrovat stránku sis mimochodem mohl zde v diskusi vyhledat): <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
html { background-image: url("avatar.jpg"); background-repeat: no-repeat; background-position: right top; }
body { margin: 0 auto; width:960px; background-color:yellow; }
div { margin: 0; padding: 0; background-color:blue; }
p { margin:0 20px 1.5em; background-color:red; }
</style>
</head>
<body>
<div>
<p>bla bla
<p>babla...
</div>
<h2>Nějaký nadpis</h2>
</body>
</html> |
||
| Atten Profil |
#14 · Zasláno: 19. 12. 2012, 05:53:31
[#13] Petr ZZZ
Já vim jak vycentrovat stránku. To ale nic nemění na tom, že pokud vložím jakýkoliv obrázek, tak (lajcky řečeno) pod ním není původní pozadí, ale jen bílo. A to ani v základním kódu zaslaném tebou. Natož když to zkouším dostat k sobě. [#9] peta Tvůj kód funguje bezchybně samostatně. A přesně tak, jak jsem si představoval. Ale už to zkoušim několik hodin a pořád se mi nedaří to implementovat ke mě. Začínám z toho šedivět. Ať udělám cokoliv, vždycky je z objektu "avatar" vidět jen desetina a zbytek je useknutý. Je to tím, že nadřazený div má width jen 1000px. Ale když mu nastavím víc, pak je stránka vlastně optimalizovaná pro větší rozlišení. Jsem už bezradný... Nejraději bych sem rovnou dal odkaz, kde by bylo snazší vidět jakou dělám chybu, ale není to zrovna stránka, kterou by bylo dobré uveřejňovat na této diskusi. Bude to znít otravně, ale mohl bych poslat odkaz soukromě? Je mi líto, ale vážně už nevím kudy kam... |
||
| margin Profil * |
#15 · Zasláno: 19. 12. 2012, 07:41:05
Atten:
„není to zrovna stránka, kterou by bylo dobré uveřejňovat na této diskusi“ To známe, Povídání o živých ukázkách Takže místo tajných textů dej Lorem ipsum a místo dechberoucích obrázků dej třeba jednobarevné obdélníky. U pozicování jde o vnořenou pozici. Media Queries je implementačně pro tvůj případ ještě jednodušší, zapomeneš na mobily a prostě tam dáš podmínku, že při šířce viewportu 1200 bude šířka obalu 1180px, rozdíl 20px je kvůli vertikálnímu scrollbaru. |
||
| Atten Profil |
margine mě je to fuk... Je to p2p web. V části mnou uveřejněné není warez, porno, ani jiný, zdánlivě pohoršující či pravidla porušující obsah, každopádně je můj kód uložen na jejich serveru. Ale pro mě za mě...
http://helltracker.cz/atten/cosakradelamspatne.html Situace se ovšem změnila a mě už se konečně podařilo dosáhnout daného výsledku (jak jsem do toho čuměl už moc dlouho, zamotali se mi jednotlivé divy). Bohužel teď mám problém stránku vycentrovat. Je to vlastně ten samý problém, i když na jiném místě v kódu. Ano, vím jak funguje centrování pomocí pozicování, ale v tomto případě je problém právě s šířkou webu a já jsem opět v -> (_|_). / Tedy přesněji - abych mohl vycentrovat stránku pomocí pozicování, musím určit šířku. Což ořízne objekt avatar... A pořád dokola. |
||
| Petr ZZZ Profil |
Reaguji na Attena:
„Já vim jak vycentrovat stránku.“ Tak to jsem rád, to jsem nevěděl. :-) „...pod ním není původní pozadí, ale jen bílo“ Černo může být? html { background-color:#000; background-image: url("avatar.jpg"); background-repeat: no-repeat; background-position: right top; } |
||
| Atten Profil |
#18 · Zasláno: 19. 12. 2012, 13:03:58
[#17] Petr ZZZ
Nemá tam být vůbec jen barva samotná. Proto má prvek pod tím nastavený bg image: repeat x. A stránku jsem měl vycentrovanou i předtím. Jen se mi to "vyrušilo", když jsem použil tvou část kódu. A už se v tom motám tak, že se ztrácim... |
||
| Petr ZZZ Profil |
#19 · Zasláno: 19. 12. 2012, 13:32:10
Reaguji na Attena:
„Nemá tam být vůbec jen barva samotná.“ Toho jsem se obával. Zkoušel jsem tam dát ještě jeden obrázek, ale nešlo to, zobrazí se jen ten poslední, kombinovat to jde jen s barvou. „Jen se mi to "vyrušilo", když jsem použil tvou část kódu.“ Nechci být hnidopich, ale jestli víš, jak vycentrovat stránku, tak bys neměl mít problém zabudovat do ní kus kódu, aniž se tím to vycentrování zruší. Obecně zde předpokládáme, že tazatel nějaké základy zná a stačí mu napovědět. Jestli ti funguje petovo řešení, ale nedaří se ti ho zabudovat do tvého kódu, možná to zkus naopak – zabudovat tvůj obsah do jeho kódu. |
||
| Atten Profil |
#20 · Zasláno: 19. 12. 2012, 13:46:58
[#19] Petr ZZZ
,,...ale jestli víš, jak vycentrovat stránku, tak bys neměl mít problém zabudovat do ní kus kódu..." Ano, řikám že se v tom už motám a ztrácim se. Už toho mám plnou hlavu... ,,Jestli ti funguje petovo řešení..." Už se mi to povedlo, jak jsem psal. Ztratil jsem se v <div>ech, proto mi to nešlo. Ale nakonec vzniknul další problém. Paradoxně s tim centrováním, co umim... :D Ale to nešlo ani v jeho verzi kódu. Přemejšlim jak to překombinovat, ale ať zkusim cokoliv, nepomůže to. Jde totiž o to, že petův systém je založen na tom, že stránka není centrovaná, ale je vlevo. Nadřazený div nemá totiž nastavenou pevnou šířku a tak obsah nejde centrovat. A pokud nastavím pevnou šířku, tak zase nemůžu vložit ten objekt za hranicí... Snad jsem to napsal srozumitelně. Vážně z toho začínám magořit... |
||
| Atten Profil |
#21 · Zasláno: 19. 12. 2012, 22:06:29
A tedy co to Media Queries? Byl by nějaký jednoduchý návodek? Nebo šikovná stránka, jako JPW :D
|
||
| Davex Profil |
Nějak jsem se ztratil v tom, co nejde, ale nehledáš čirou náhodou něco jako Skyscraper u centrovaného designu?
„A tedy co to Media Queries?“ Například zobrazit něco při šířce větší jak 1280px. .neco {
display: none;
}
@media screen and (min-width: 1280px) {
.neco {
display: block;
}
} |
||
| Atten Profil |
Reaguji na [#22] Davex:
Pokud to správně chápu, tak tazatel v tom vlákně chce, aby se přizpůsoboval banner a nezužoval stránku. Místo toho, aby se zobrazil posuvník. Můj problém je jiný. Potřebuju, aby se posuvník nezobrazil, stránka zůstala centrovaná pro optimalizovanou šířku 1000px a objekt byl za hranicí těchto rozměrů. Takto:
Díky petovu návodu se sice povedlo dostat objekt za hranici a bez posuvníku, ale bohužel není stránka už centrovaná, protože nadřazený <div> nemůže mít nastavený pevný rozměr. Když nastavím pevný rozměr, tak stránka odmítne zobrazit cokoliv za jeho hranicí. Začarovaný kruh. http://helltracker.cz/atten/cosakradelamspatne.html Fungující příklad je třeba Facebook, kde při malém rozlišení je v pravo skrytý objekt - sloup s akcemi uživatelů (tj. "Kája Lůzr Nowák přidal tuhle krávovinu"... "Mařena Zlatíííí Czexová lajknula a okomentovala krávovinu Kája Lůzr Nowák"...). Nebo na uloz.to, kde je za hranicí obrazovky skrytá půlka pozadí vedle loga či vedle obsahové části ukrytá reklama... |
||
| margin Profil * |
#24 · Zasláno: 20. 12. 2012, 01:41:14
FB mám zakázaná, aby mě nešmíroval a uloz-to to řeší obrázkem na pozadí: http://img24.eu/images/s99vib7.jpg
Kdybys použil Media Queries, tak máš dávno hotovo. Je něco, co ti ještě není na použití Media Queries pro tvůj případ jasné? |
||
| Atten Profil |
Reaguji na [#24] margin:
Atten: „A tedy co to Media Queries? Byl by nějaký jednoduchý návodek? Nebo šikovná stránka, jako JPW :D“ - Nevim jestli jsi to nečetl nebo jsem se špatně zašklebil... Ale "tenhle tón" nebude potřeba, viď? :) Hledal jsem o tom co nejvíc, ale nikdy jsem se s tím nesetkal. Nevím co použít a především -> kde to najít. ... Každopádně i ten obrázek na pozadí uloz-to musí být řešený tím způsobem, co já hledám. Že tam mají bg obrázek vlastně nic neznamená. |
||
| peta Profil |
#26 · Zasláno: 20. 12. 2012, 08:28:41
Atten: Centrovani nebylo soucasti zadani. Bude to treba oddelit od obsahu, zkombinovat margin a padding a treba to pujde vyresit.
|
||
| margin Profil * |
#27 · Zasláno: 20. 12. 2012, 08:50:40
peta:
„Centrovani nebylo soucasti zadani.“ To je fakt, požadavek na centrování se objevil mnohem později. A myslím si, že vycentrovat to nebude jednoduché. Jedno jednoduché řešení využívající vnořenou pozici mě napadá, ale tam se plýtvá místem a zrovna u nejpoužívanějších rozlišení. Atten: „Hledal jsem o tom co nejvíc, ale nikdy jsem se s tím nesetkal. Nevím co použít a především -> kde to najít.“ Jednoduchý příklad tu dal [#22] Davex. Prostě budeš mít dva vzhledy (styly), výchozí styl a styl pro větší rozlišení. Styl pro větší rozlišení se ve tvém případě bude lišit jenom zobrazením avatarů a větší šířkou obalu, více ve stylu pro větší rozlišení mít nemusíš. Syntaxe je prakticky stejná, jako zápis pro @media Odlišné formátování tisku.
Malá ukázka: http://jsfiddle.net/t8a2p/ |
||
| Atten Profil |
[#26] peta
Centrovani nebylo soucasti zadani. [#27] margin To je fakt, požadavek na centrování se objevil mnohem později... Jo, nebylo to v prvním příspěvku, ale až v grafické ukázce, ve třetím... Hodně podstatný. [#27] margin Jednoduchý příklad tu dal [#22] Davex. OK, zdá se, že tohle je celkem jednoduchý, podle příkladu Davex. Akorát v té malé ukázce na jsfiddle nechápu vůbec o co jde. Nevim co tam mám hledat. |
||
|
Časová prodleva: 11 let
|
|||
0