Diskuze: Seznam článků
V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Tvůrce
Jan Lupčík:7.3.2018 21:27
Jednoduché. Vyhoď tenhle float: left a podobné "hacky" a
rodičovskému elementu přiřaď:
display: flex;
flex-wrap: wrap;A prvkům uvnitř nastav:
display: block;
width: xy%;
margin: xy%;Pro více informací mrkni na flexbox. Zde je třeba takový začátečnický
článek:
https://www.itnetwork.cz/…nich-layoutu
Akceptované řešení
+20 Zkušeností
+2,50 Kč
+20 Zkušeností
+2,50 Kč
Nocik:8.3.2018 18:28
Doufám že mi ještě poradíte pánové prosím...:)
Včera večer jsem si vůbec nevšiml tohoto problému (viz. obrázek) - button
Více nechce a nechce jít dolů... vertical-align taky nefunguje, ikdyž
<a>Více</a> dostalo display:inline a vůbec netuším jak jej
dostat natrvalo dolů, tak aby tam bylo pokaždé když změním výšku
obsahem..
Předem děkuji za radu 
Nocik:8.3.2018 19:08
Editováno 8.3.2018 19:11
Ani se nehne, ale je to logické.. element je úplně na spodu divu, jediné
co mě teď napadlo, tak ten element vytrhnout z toho divu a vložit jej pod
něj... vyzkouší a uvidím, ale pochybuji 
když by někdo přišel s
řešením tak se bránit vůbec nebudu
Edit: můj nápad také ztroskotal
Nocik:8.3.2018 19:23
Když by s chtěl někdo hrát, tak přikládám zdroják..:)
HTML
<!-- aktuality -->
<section class="aktuality">
<div class="content vcontent">
<h1 class="nadpis">Aktuality</h1>
<ul>
<li>
<img src="img/foto_clanek.png" />
<div class="aktuality_content content">
<h3>Vylovení potopené popelnice z rybníku za krásného letního dne mm mmmm mm mmm mm mm</h3>
<em class="date">Publikováno 18.02.2018</em>
<p>V časných ranních hodinách 15. února vandalové posprejovali a vhodili popelnici bezdůvodně do Pístovického rybníka...</p>
<a class="prechod" href="#">Více</a>
</div>
</li>
<li>
<img src="img/foto_clanek.png" />
<div class="aktuality_content content">
<h3>Vylovení potopené popelnice z rybníku za krásného letního dne</h3>
<em class="date">Publikováno 18.02.2018</em>
<p>V časných ranních hodinách 15. února vandalové posprejovali a vhodili popelnici bezdůvodně do Pístovického rybníka...</p>
<a class="prechod" href="#">Více</a>
</div>
</li>
<li>
<img src="img/foto_clanek.png" />
<div class="aktuality_content content">
<h3>Vylovení potopené popelnice z rybníku za krásného letního dne</h3>
<em class="date">Publikováno 18.02.2018</em>
<p>V časných ranních hodinách 15. února vandalové posprejovali a vhodili popelnici bezdůvodně do Pístovického rybníka...</p>
<a class="prechod" href="#">Více</a>
</div>
</li>
<div class="cistic"></div>
</ul>
<div class="vsechno">
<a href="#">Všechny aktuality</a>
</div>
</div>
</section>CSS
/* aktuality - mobile ver. */
.aktuality{width:100%; background:#dbdbdb;}
.aktuality ul li{margin:10%; width:80%; background:white;
-moz-box-shadow: 0px 0px 10px #4a4a4a;
-webkit-box-shadow: 0px 0px 10px #4a4a4a;
box-shadow: 0px 0px 10px #4a4a4a;
}
/* aktuality - tablet ver. */
@media screen and (min-width:510px)
{
.aktuality ul li{width:45%; margin:10% 27.5%;}
}
/* aktuality - desktop ver. */
@media screen and (min-width:960px)
{
.aktuality ul {display:flex; flex-wrap:wrap;}
.aktuality ul li{width:25.333333333333333333%; display:block; margin:4%;}
}
/* aktuality - obsah */
.aktuality img{height:210px; width: 100%; display:block;}
.aktuality_content{padding-top:1em; padding-bottom:1em; }
.aktuality h3{font-size:1.8em; font-weight:800; line-height:1.3em;}
.date{font-style:italic; display:block; padding:1em 0; font-size:1.2em;}
.aktuality p{margin-bottom:2.5em;}
.aktuality_content a{text-decoration:none; width:100%; display: inline-block;
text-align:center; padding:0.5em 0; font-size:1.75em; font-weight:600; }
/* button na všechny aktuality a galerie */
.vsechno{text-align:center; margin-top:3em;}
.vsechno a{text-decoration:none; background:transparent; color:#e52239; font-size:2.2em; padding:0.45em 1.3em; border:2px solid #e52239; }
.vsechno a:hover{background:#e52239; color:white;}
@media screen and (max-width:580px){.vsechno a{font-size:1.8em; padding:.45em 1em;}}
/* content */
.content {padding-left:7.083333333333333%; padding-right:7.083333333333333%;}
.vcontent {padding-top: 7em; padding-bottom: 7em;}
Honza Bittner:8.3.2018 19:23
Ukaž kód včetně CSS pro ten daný boxík.
EDIT: tak akoráts vložil
)
Nocik:9.3.2018 15:50
Vkládám řešení v podobě CSS... jeden hodný pán na internetu poradil a
zadařilo se moc hezky
CSS
/* aktuality - desktop ver. */
@media screen and (min-width:960px)
{
.aktuality ul { display: flex; flex-wrap: wrap;}
.aktuality ul li{width:25.333333333333333333%; display: flex;
flex-direction: column; margin:4%;}
}
/* aktuality - obsah */
.aktuality img{height:210px; width: 100%; display:block;}
.aktuality_content{padding-top:1em; padding-bottom:1em;display: flex; flex-direction: column; flex: 1 1 auto;}
.aktuality h3{font-size:1.8em; font-weight:800; line-height:1.3em;}
.date{font-style:italic; display:block; padding:1em 0; font-size:1.2em;}
.aktuality p{margin-bottom:2.5em; flex: 1 1 auto;}
.aktuality_content a{text-decoration:none; width:100%; display: inline-block;
text-align:center; padding:0.5em 0; font-size:1.75em; font-weight:600; }
/* button na všechny aktuality a galerie */
.vsechno{text-align:center; margin-top:3em;}
.vsechno a{text-decoration:none; background:transparent; color:#e52239; font-size:2.2em; padding:0.45em 1.3em; border:2px solid #e52239; }
.vsechno a:hover{background:#e52239; color:white;}
@media screen and (max-width:580px){.vsechno a{font-size:1.8em; padding:.45em 1em;}}
/* content */
.content {padding-left:7.083333333333333%; padding-right:7.083333333333333%;}
.vcontent {padding-top: 7em; padding-bottom: 7em;}
/* přechod barev - button(aktuality, galerie) */
.prechod{background: #ed253d; border-radius:5px; color:white;
background-image: -webkit-linear-gradient(top, #ed253d, #d1263f);
background-image: -moz-linear-gradient(top, #ed253d, #d1263f);
background-image: -ms-linear-gradient(top, #ed253d, #d1263f);
background-image: -o-linear-gradient(top, #ed253d, #d1263f);
background-image: linear-gradient(to bottom, #ed253d, #d1263f); }
.prechod:hover{background: #d1263f;
background-image: -webkit-linear-gradient(top, #d1263f, #ed253d);
background-image: -moz-linear-gradient(top, #d1263f, #ed253d);
background-image: -ms-linear-gradient(top, #d1263f, #ed253d);
background-image: -o-linear-gradient(top, #d1263f, #ed253d);
background-image: linear-gradient(to bottom, #d1263f, #ed253d); }
/* nadpisy + doplňky */
.nadpis{color:#000; font-size:3.5em; padding-bottom:5px; position:relative; margin-bottom:2em; text-align:center; z-index:1; }
.nadpis:before{content: ""; position:absolute; width:8%; height:1px; bottom:0; left:46%; border-bottom:1px solid #ce3d4e;}
Zobrazeno 12 zpráv z 12.