Diskuze: Stejný prohlížeč, rozhozene zobrazení
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Ahoj, tak vkládám zdrojový kód, znovu jsem se na to ráno koukala a netuším, kde jsem udělala chybu. Asi to bude něco triviálního, ale jelikož se učím metodou pokus omyl, tak budu vděčná za jakoukoliv připomínku. Obrázky jsou jak mi to vyhazuje po vložení loga na mém prohlížeči v opeře, když jsem si upravovala zdroj v notepadu a průběžně kontrolovala. A další pak jak se mi to zobrazilo po nahrání na web, otevřeno ve stejném prohlížeči v opeře.
zdroj - logo:
<body>
<img class="logo img-fluid rounded-circle clearfix" src="img/logo.png"
alt="logo">
<h1 class="site-heading text-center text-white d-none d-lg-block">
<span class="site-heading-upper text-primary mb-3">Kavárna, obchod a
e-shop</span>
<span class="site-heading-lower">Cafe Kalahari</span>
</h1>
<h1 class="text-center text-white d-lg-none d-block">
<span class="site-heading-small mb-3 d-lg-none">Kavárna, obchod a
e-shop</span>
</h1>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark py-lg-4" id="mainNav">
<div class="container">
<img class="logomale img-fluid rounded-circle clearfix d-lg-none"
src="img/logomale.png" alt="logo">
<a class="navbar-brand text-uppercase text-expanded font-weight-bold
d-lg-none" href="#">Cafe Kalahari</a>
css:
@media (min-width: 992px) {
.logo {
position: absolute;
margin-left: 80px;
margin-top: -10px;
}
}
@media (min-width: 992px) {
.logomale {
display: none;
}
}
@media (max-width: 992px) {
.logomale {
padding-top: 5px;
}
}
@media (max-width: 992px) {
.logo {
display: none;
}
}
zdroj galerie:
<section class="page-section">
<div class="container">
<div class="row">
<div class="col-xl-9 col-lg-10 mx-auto">
<div class="bg-faded rounded p-5">
<h2 class="section-heading mb-4">
<span class="section-heading-upper">Fotogalerie</span>
</h2>
<div id="album">
<a href="img/foto1.jpg" title="Kavárna"><img
src="img/foto1_nahled.jpg" alt="Kavárna" /></a>
<a href="img/foto2.jpg" title="Kavárna"><img
src="img/foto2_nahled.jpg" alt="Kavárna" /></a>
<a href="img/foto3.jpg" title="Kavárna"><img
src="img/foto3_nahled.jpg" alt="Kavárna" /></a>
<a href="img/foto6.jpg" title="Soška"><img
src="img/foto6_nahled.jpg" alt="Soška" /></a>
<a href="img/foto4.jpg" title="Káva"><img
src="img/foto4_nahled.jpg" alt="Káva" /></a>
<a href="img/foto5.jpg" title="Zákusek"><img
src="img/foto5_nahled.jpg" alt="Zákusek" /></a>
<a href="img/foto7.jpg" title="Zákusek"><img
src="img/foto7_nahled.jpg" alt="Zákusek" /></a>
<a href="img/foto8.jpg" title="Zákusek"><img
src="img/foto8_nahled.jpg" alt="Zákusek" /></a>
</div>
</div>
</div>
</div>
</div>
</section>
css:
#album img {
border: 1px solid gray;
padding: 6px;
box-shadow: 3px 3px 6px #999999;
margin-right: 6px;
margin-bottom: 6px;
}
Ještě jednou děkuju za jakoukoliv radu:-)
Zobrazeno 10 zpráv z 10.