| Autor | Zpráva | ||
|---|---|---|---|
| adam1993 Profil * |
#1 · Zasláno: 29. 3. 2015, 22:00:55
Ahoj, chtěl bych udělat jednoduchý levý sidebar , problém je v tom, že bych potřeboval mít horní část místo % v pixelech, nejlépe i dolní div v pixelech a prostřední, aby byl ideálně v procentech a vyplňoval tak zbylý prostor mezi dvěma divy tak aby div menu byl přes celou stránku tedy měl height: 100%.
Bohužel nemohu přijít na to, jak to udělat nevěděl by prosím někdo, případně o nějaké stránce, kde bych se mohl inspirovat? Zkoušel jsem to viz. níže funguje mí to pouze když nastavím na na všech divech procenta tak, aby dávali dohromady 100% <div class="menu">
<div class="head"><h1>jméno</h1></div>
<div class="men"><a href="#">sss</a></div>
<div class="foot"></div>
</div>CSS .menu{
width: 290px;
height: 100%;
display: block;
position: absolute;
top:0;
margin:0;
padding:0;
}
.head{
margin: 0;
padding: 0px 0 0px 0;
background-image: url(../img_web/lg5.png);
text-align: center;
color: #A2A2A2;
height: 67px;
}
.men{
position: relative;
margin: 0;
padding: 0px 0 0px 0;
overflow: 100%;
background-image: url(../img_web/men.png);
text-align: center;
height: 100%;
}
.foot{
margin: 0;
padding: 0px 0 0px 0;
background-image: url(../img_web/lg5.png);
text-align: center;
height: 250px;
color: #A2A2A2;
} |
||
| Keeehi Profil |
#2 · Zasláno: 29. 3. 2015, 22:22:58
.foot dostaneš dolů pomocí
position: absoulte; bottom: 0;
.men nemusí přece vyplňovat zbytek. Může být dlouhé jen tak, jak dlouhý je jeho obsah. Vsadím se, že ti jde jen o to, aby to pozadí pokračovalo i tam, kde zkončí. na to je jednoduché řešení. Přidej stejné pozadí i .menu |
||
| adam1993 Profil * |
#3 · Zasláno: 29. 3. 2015, 22:30:48
Keeehi:
Ano to mě napadlo jenže problém je, že pozadí používám transparentní obrázky tím pádem, se vytvoří nežádoucí efekt, při překrytí vznikne jiná barva. |
||
| Keeehi Profil |
#4 · Zasláno: 29. 3. 2015, 22:34:09
adam1993:
Tak pozadí .men vůbec nenastavuj. Pokud ani to nejde, tak by bylo dobré vytvořit ukázku tak, abychom měli představu jak ta obrázky vypadají. |
||
| Tomáš123 Profil |
#5 · Zasláno: 29. 3. 2015, 22:37:09
adam1993:
Prečítaj si tento článok. Myslím, že tam nájdeš to, čo potrebuješ. |
||
| adam1993 Profil * |
#6 · Zasláno: 29. 3. 2015, 22:37:28
Potřeboval bych to přesně takto
www.mzub.eu/develop_05/index.html S tím , že bych ale head a foot nastavil pomocí pixelů, při větším rozlišení je totiž head a foot úplně jinak vysoká |
||
| Keeehi Profil |
#7 · Zasláno: 29. 3. 2015, 22:53:48
adam1993:
Když na tom odkazu pořád něco měníš, jak máme vědět, jak to má vypadat? Každou chvíli je tam něco jiného. |
||
| adam1993 Profil * |
#8 · Zasláno: 29. 3. 2015, 22:57:39
Keeehi:
Už jsem to vyřešil pomocí tvýho nápadu, nepoužiji obrázky udělám to přes normal background a opacity díky. |
||
| Keeehi Profil |
#9 · Zasláno: 29. 3. 2015, 23:00:14
adam1993:
To se ti taky nebude líbit. Kvůli opacity bude průhledný i text a toho se nezbavíš. Musel bys to řešit pozicováním obsahu nad pozadí. Teoreticky proveditelné, ale není hezčí řešení? Já myslím že je. |
||
| adam1993 Profil * |
#10 · Zasláno: 29. 3. 2015, 23:03:01
Keeehi:
Aha tak na to jsem nepomyslel, no horší je že nic jinýho mě moc nenapadá a z toho článku co tu je moc moudrej nejsem. |
||
| Keeehi Profil |
#11 · Zasláno: 29. 3. 2015, 23:05:26
adam1993:
Ale nás napadá. Jen potřebujeme vědět, jak to má ve výsledku vypadat. |
||
| adam1993 Profil * |
#12 · Zasláno: 29. 3. 2015, 23:12:37
Ve výsledku tak jak je to teď:
www.mzub.eu/develop_05/# Tady je Starší verze s obrázkovými pozadí a % www.mzub.eu/develop_04/ |
||
| Keeehi Profil |
A co takto ukázka
.menu má to základní pozadí po celé délce .head a .footer maji vlastní polopůhledné pozadí které v kombinaci s tím z .menu vytvoří požadovaný supeň tmavosti. Jelikož se mi nechtělo vytvářet vlastní poloprůhledný obrázek, tak jsem k tomu využil obrázek z .menu, ale můžete si tam dát cokoli co se vám zlíbí. Aby to nezasahovalo do toho cca 6ti pixelového stínu co je na pravé straně, tak .menu má 6px pravý paddnig. To pomůže u .head. Ovšem .footer je absolutně pozicovaný, takže tam se ta šířka musí dopočítat ručně. Jelikož je šířka v pixelech dána, tak to není problém. |
||
| adam1993 Profil * |
#14 · Zasláno: 30. 3. 2015, 00:19:04
Keeehi:
Super díky vypadá to dobře. Ještě bych se chtěl zeptat dalo by se nějak docílit, aby se ta .foot držela při zmenšování okna vždy pod .men? Napadlo mě to udělat celé ještě přes tabulku, tam by to asi vše fungovalo. Ale vzhledem k tomu, že se již dnes tabulky výhradně na layout nepoužívají jsem toto řešení zavrhl. |
||
| Keeehi Profil |
#15 · Zasláno: 30. 3. 2015, 01:01:00
adam1993:
„Super díky vypadá to dobře. Ještě bych se chtěl zeptat dalo by se nějak docílit, aby se ta .foot držela při zmenšování okna vždy pod .men?“ U .men přidat spodní margin o velikosti 150px (výška footu). A u .menu místo height použít min-height. Min-height funguje až od IE7. Takže záleží na tom, zda je pro tebe důležité IE6. Pokud ano, tak tam by height měl snad fungovat jako min-height. „Napadlo mě to udělat celé ještě přes tabulku, tam by to asi vše fungovalo. Ale vzhledem k tomu, že se již dnes tabulky výhradně na layout nepoužívají jsem toto řešení zavrhl.“ Ano, tabulkou by to řešit šlo a ano, dnes se nepoužívají. Tabulkové chování jde ale vytvořit i u jiných elementů než klasické <table> pomocí display:table;. Ovšem zase až od IE8.
A čím to půjde ještě je flexbox. Ale to je tak nové, že to podporuje jen IE11 a částečně IE10. Ani ostatní prohlížeče to nemají zrovna nejdéle a bude tedy ještě pěknou dobu trvat, než to bude bezpečné používat. |
||
| adam1993 Profil * |
#16 · Zasláno: 30. 3. 2015, 07:22:08
Keeehi:
Díky moc funguje to přesně tak, jak jsem potřeboval. |
||
| adam1993 Profil * |
#17 · Zasláno: 1. 4. 2015, 09:23:59
Tak nakonec při dalším vývoji se mi objevil další problém s menu, který nevim jak vyřešit.
www.mzub.eu/develop_06/fotogalerie.html Jde o to, že menu se mi neroztahuje s obsahem stránky ale zůstane na původní 100% výšce, nevěděl by někdo jak to vyřešit ? Předem díky za pomoc |
||
| adam1993 Profil * |
#18 · Zasláno: 1. 4. 2015, 21:59:12
Zkoušel jsem to vyřešit ale problém přetrvává, prosím po otevření použijte webu F5
|
||
| Tomáš123 Profil |
#19 · Zasláno: 1. 4. 2015, 22:45:46
adam1993:
Skúšal som vytvoriť ukážku, ale pravdepodobne nejde dosiahnuť výsledok tak ako chceš. Je možné roztiahnuť stĺpec na celú výšku (obal height: 100%, stĺpec min-height: 100%). Ty ale požaduješ, aby mal obal inú výšku ako 100%, aby sa mohol stĺpec rozťahovať. On však týmto plní inú úlohu. Myslím si teda, že obidve riešenia spolu nemôžu elegantne fungovať (elegantne preto, lebo by si mohol napríklad nastaviť obrovskú výšku a päta by sa vždy natiahla až na dno, ale vo väčšine prípadov by bola stránky zbytočne dlhá).
Jediným schodným riešením sú asi iba tie Sloupce stejně vysoké. |
||
| Keeehi Profil |
Jiří Ambrož
Je to pořád víceméně stejné řešení jen je to posunuté do jiných elementů. Základem je, nastavit to dlouhé pozadí nějakému elementu, který obaluje všechno. Nashládat pak hlavičku a menu do levého horního rohu není problém. Teo se děje víceméně samo. A pata se jen přilepí dolů pomocí pozicování. |
||
| Tomáš123 Profil |
#21 · Zasláno: 1. 4. 2015, 23:04:16
Keeehi:
Pekne, vôbec mi to nenapadlo... +1 |
||
|
Časová prodleva: 9 let
|
|||
0