HTML, CSS - posouvání divu až za hranice při zmenšování okna – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

HTML, CSS - posouvání divu až za hranice při zmenšování okna – CSS – Fórum – Programujte.comHTML, CSS - posouvání divu až za hranice při zmenšování okna – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Luk
~ Anonymní uživatel
45 příspěvků
10. 2. 2015   #1
-
0
-

Dobrý den,

prosím vás, mám jednoduchou stránku s obrázkem na pozadí a jedním blokem. Pozadí se při změně velikosti okna přizpůsouje.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    <title>Test pozadí</title>
  </head>

  <body>
    <div id="pozadi">
      <div id="blok">
          Testovací text
      </div>    
    </div>

  </body>
</html>

CSS:

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}

#pozadi {
  height: 100%;
  min-height: 600px;
  width: 100%;
  min-width: 1024px;
  background-image: url('bg05.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border: 1px solid transparent;
}

#blok {
  margin: 0 auto;
  width: 700px;
  height: 70px;
  text-align: center;
  color: white;
  background-color: red;

  margin-top: 50%
}

Ten malý červený obdelník "blok" bych rád umístil ke spodnímu okraji obrazovky na střed.

Dal jsem mu tedy jednoduše margin-top: xx%. Myslel jsem, že výsledná hodnota se bude brát % z výšky okna. Ale ono se to počítá ze šířky okna a to je problém. Protože při zmenšení výšky okna se "blok" posouvá více dolů, za hranici okna.

Chtěl bych, aby se "blok" držel stále spodního okraje, tedy aby se hodnota margin-top zmenšovala při zmenšení výšky okna.

Je nějak možné nastavit, aby se výsledná hodnota margin-top počítala z výšky okna?

Děkuji.

Nahlásit jako SPAM
IP: 89.190.62.–
Reklama
Reklama
Marek Šloser
~ Anonymní uživatel
9 příspěvků
10. 2. 2015   #2
-
0
-

   

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: black;
}

#pozadi {
  height: 100%;
  min-height: 600px;
  width: 100%;
  min-width: 1024px;
  background-image: url('bg05.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: relative;
  border: 1px solid transparent;
}

#blok {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 700px;
  height: 70px;
  text-align: center;
  color: white;
  background-color: red;
}
Nahlásit jako SPAM
IP: 80.188.28.–
Luk
~ Anonymní uživatel
45 příspěvků
10. 2. 2015   #3
-
0
-

Děkuju !

Nahlásit jako SPAM
IP: 89.190.62.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 20 hostů

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý