V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Ahoj, pokud chceš aby ti někdo pomohl pošli odkaz na projekt a určitě se
bude hodit zdroják.Jinak ti asi nikdo nepomůže 
A pokud nejsi úplný začátečník, tak by ti mohl pomoci CSS framework
Bootstrap...Nemusíš si aspoň lámat hlavu nad tím, proč ti tam nedrží
patička .
nemelo to byt fixed? https://www.jakpsatweb.cz/…osition.html
Ale, pak tam musis dat na spodek margin vysky te paticky.
Jinak bych sel taky do Bootstrap. css kod je hotovy a html kod staci kopirovat z
dokumentace, classy.
Já mám ten problém, že když na stránce je méně obsahu, tak footer jsem schopný dát na konec stránky. Ale když tam je více obsahu, než je výška okna, tak footer zůstane na uprostřed textu a neposune se pod všechen text na stránce.
S Bootstrap úplně neumím a když jsem viděl jak to vypadá, tak se mi do
toho moc nechce. 
Ono tez zalezi, vuci kteremu elementu pozicujes a jakou ma vysku. min-width,
flex layout.
Pouzitim bootstrapu by sis usetril spoustu problemu. Daji se k nemu vygooglovat
priklady. Hlavne resi spoustu veci kolem stranky a tobe pak staci resit barvicky
a obrazky, pokud se nechces drbat se vzhledem tabulek, formularu a pod.
google = footer alway bottom bootstrap
https://stackoverflow.com/…er-bootstrap
Bootstrap 3.x
<div class="navbar navbar-fixed-bottom"></div>
Bootstrap 4.x
<div class="navbar fixed-bottom"></div>
Don't forget to add body { padding-bottom: 70px; }
<div id="wrap">
<div id="main" class="container clear-top">
<p>Your content here</p>
</div>
</div>
<footer class="footer"></footer>
CSS:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
}
---
HTML
<div class="container"></div>
<div class="footer"></div>
CSS
body,html {
height:100%;
}
.container {
min-height:100%;
}
.footer {
height:40px;
margin-top:-40px;
}bootstrap 2.3.2 - Sticky footer example
https://getbootstrap.com/…-footer.html
HTML
<body>
<!-- Part 1: Wrap all page content here -->
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Sticky footer</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
</div>
</div>
</body>
The relevant CSS code is this:
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -30px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 30px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}Si to muzes z bootstrapovych class vykopirovat, co potrebujes. Najdes spravny
example, ktery dela, co chces. Najdes spravnou verzi bootstrap css a vykopirujes
si vsechno, kde je zminena ta class. Neco podobne jsem udelal tady u toho
projektu.
https://mlich.zam.slu.cz/…g4-pokus.htm
libili se mi ty karticky, tlacitka start. A z jine verze jsem vytahl
svg-tlacitka + a - , sipecku nahoru dolu /\ \/
Jeste to eni hotove, ale prepisuji tohle. https://mlich.zam.slu.cz/…sorting3.htm
Ty examples jsem si našel. Jenže předpokládám, že abych je mohl použít, tak musím použít i bootstrap.min.css. Ale to mi pak rozdrbe design té stránky. Takže pak musím dát druhý css file s custom barvami atd? Pardon za stupidní dotazy ale s bootstrapem moc neumím..
Desing stranky postav na bootstrapu. Odkaz jsi neuvedl, tezko ti poradit.
Si to testuj bokem na pokusne strance.
https://getbootstrap.com/…ntroduction/#…
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>a misto hello word H1 si tam das layout stranky a upravis si sirky, max je
col-12
https://getbootstrap.com/…layout/grid/#…
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>sticky-footer pomoci BT4
https://getbootstrap.com/….1/examples/#…
==> Sticky footer https://getbootstrap.com/…icky-footer/
a vedle je Sticky footer navbar
Zobrazeno 9 zpráv z 9.