NOVINKA - Online rekvalifikační kurz Java programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
*smoky*
Člen
Avatar
*smoky*:12.4.2015 10:50

Zdravím, chci mít na webu logo přes celou stránku o 8% a nalevo černý sloupec o šířce 20% a zbytku výšky stránky, tudíž 92%, nicméně u žádného prvku mi nefunguje zadání výšky v procentech, pomůžete mi prosím?

<!DOCTYPE HTML>
<html>
<head>

<style>
body {margin:0;pad­ding:0}
.logo {position:rela­tive;width:100%;he­ight:8%}
.logo img {width:100%;he­ight:8%}
.menu {position:rela­tive;float:lef­t;width:20%;he­ight:92%;backgrou­nd-color:black;}
</style>

</head>
<body>
<!--logo-->
<div class="logo">
<img src='logo.png'>
</div>
<!--menu-->
<div class="menu">
</div>
</body>
</html>

Odpovědět
12.4.2015 10:50
Pít, žít, umřít.
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na *smoky*
Petr Čech:12.4.2015 10:57

V CSS se výška v procentech, alespoň jak si ty představuješ, zadávat nedá. Tady si o tom můžeš něco přečíst: http://stackoverflow.com/…-height-work
Jinak by neuškodilo použít nejdříve Google...

Nahoru Odpovědět
12.4.2015 10:57
the cake is a lie
Avatar
Pavel Junek
Tvůrce
Avatar
Odpovídá na *smoky*
Pavel Junek:12.4.2015 11:00

Pokud chceš zadávat výšku v procentech, musíš mít v procentech výšku všech nadřazených prvků.

html, body{
height: 100%;
}
 
Nahoru Odpovědět
12.4.2015 11:00
Avatar
*smoky*
Člen
Avatar
Odpovídá na Petr Čech
*smoky*:12.4.2015 11:02

Aha, děkuji.
Lze toto nějak obejít a nebo tento design stránky není vůbec reálný?

Nahoru Odpovědět
12.4.2015 11:02
Pít, žít, umřít.
Avatar
Pavel Mareš
Tvůrce
Avatar
Odpovídá na Pavel Junek
Pavel Mareš:12.4.2015 11:06

No to asi těžko. Už jen proto, že například bootstrap je založen na dané šířce + procentuální šířce některých prvků vevnitř.

*smoky* - Jde o to, že musíš mít nastavený prvek rodiče, ono když nemáš zadáno k čemu se těch tvých 100 a 8 % týká, tak prohlížeč to nebude tipovat. Prostě rodič musí mít nějakou šířku nastavenou ... je fuk jestli v %, px, em ...

Editováno 12.4.2015 11:08
Nahoru Odpovědět
12.4.2015 11:06
Však ono půjde ...
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na *smoky*
Petr Čech:12.4.2015 11:12

Jde o to, jestli chceš 92 procent okna nebo stránky. Kdybys chtěl okno, dá se to vyřešit jako

$.(".menu").css("height",($(window).height()*0.92).ToString());

pomocí JS

Editováno 12.4.2015 11:13
Nahoru Odpovědět
12.4.2015 11:12
the cake is a lie
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Petr Čech
Michal Žůrek - misaz:12.4.2015 11:38

stylovat velikost pomocí JavaScriptu je přinejmenším dost divné.

 
Nahoru Odpovědět
12.4.2015 11:38
Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na Michal Žůrek - misaz
Petr Čech:12.4.2015 12:00

To je sice pravda, ale tak navrhni lepší řešení. Předpokládám, že chce udělat to, že přes 92% výšky okna bude menu a to podle mně nejde v čistém CSS.

Nahoru Odpovědět
12.4.2015 12:00
the cake is a lie
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Odpovídá na Petr Čech
Michal Žůrek - misaz:12.4.2015 12:10

proč by to nešlo? Začne tím, že si nastaví elementům body a html stoprocentní výšku.

body, :root {
    width:100%;
    height:100%;
}

pak a když pak má v body element, kterému nastaví height:65%; element bude skutečně vysoky 65% z okna prohlížeče. Pokud to nemá přímo v body, tak musí nastavovat velikost rodičovských elementů. Height se bere z předka, který má explicitně nastavený location.

Akceptované řešení
+5 Zkušeností
Řešení problému
 
Nahoru Odpovědět
12.4.2015 12:10
Avatar
*smoky*
Člen
Avatar
Odpovídá na Michal Žůrek - misaz
*smoky*:12.4.2015 13:21

Michal Žůrek-mockrát děkuji, jednoduché a stylové řešení :D

Nahoru Odpovědět
12.4.2015 13:21
Pít, žít, umřít.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 10.