Avatar
*smoky*
Člen
Avatar
*smoky*:

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
Odpovídá na *smoky*
Petr Čech (czubehead):

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
Why so serious? -Joker
Avatar
Pavel Junek
Redaktor
Avatar
Odpovídá na *smoky*
Pavel Junek:

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  +1 12.4.2015 11:00
Avatar
*smoky*
Člen
Avatar
Odpovídá na Petr Čech (czubehead)
*smoky*:

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š
Redaktor
Avatar
Odpovídá na Pavel Junek
Pavel Mareš:

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
Nechci být workoholik. Bohužel někdy musíme být tím, čím nechceme.
Avatar
Odpovídá na *smoky*
Petr Čech (czubehead):

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  -1 12.4.2015 11:12
Why so serious? -Joker
Avatar
Odpovídá na Petr Čech (czubehead)
Michal Žůrek (misaz):

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

Nahoru Odpovědět 12.4.2015 11:38
Nesnáším {}, proto se jim vyhýbám.
Avatar
Odpovídá na Michal Žůrek (misaz)
Petr Čech (czubehead):

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
Why so serious? -Joker
Avatar
Odpovídá na Petr Čech (czubehead)
Michal Žůrek (misaz):

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  +3 12.4.2015 12:10
Nesnáším {}, proto se jim vyhýbám.
Avatar
*smoky*
Člen
Avatar
Odpovídá na Michal Žůrek (misaz)
*smoky*:

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

Nahoru Odpovědět  +1 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.