NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze – Lekce 15 - Rámeček a boxmodel v CSS

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Tomáš Knor
Člen
Avatar
Tomáš Knor:28.3.2019 15:08

Nevím co dělám špatně ale header a section se my nechtěj zarovnat vedle sebe.

CSS kód:

.centrovany{
text-align: center;
}
body{

font-family: Verdana;
font-size: 14px;
}
h2, h3, h4, h5, h6{
text-align: center;
color:rgb(100, 200,0);
font-family: Arial;
text-shadow: 3px 3px 2px #2e431e;
}
h1{
font-size: 2em;
font-weight: normal;
color: white;
text-align: center;
text-shadow: 2px 2px 1px #0a294b;
}
h2{
font-size: 1.7em;
}

article{
background: url('obrazky/po­zadi.png') #009aca;
}

article header {
width: 250px;
float: left;
border: 2px solid #006797;
}

article section {
width: 706px;
float: left;
background: white;
border: 2px solid #006797;
border-radius: 10px;
}

.cistic {
clear: both;
}

html kód:

<!DOCTYPE html>
<html lang="cs-cz">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styl.css" type="text/css"/>
<title>HoBiho portfolio </title>
</head>

<body>
<article>
<header>
<h1>O mně</h1>
</header>

<section>
<p>Vítejte</p>

<p> <img src="obrazky/a­vatar.png" alt="Programátor HoBi" class="vlevo"/>Učím se programovat v <strong> C# </strong> a teď jsem se ješrě rozhodl přidat <strong> HTML</strong> </p>
<p> Tato stránka je vytvořena za pomocí tutoriálu na <a href="http://­www.itnetwork­.cz" target="_blank"> itnetwork</a>.</p>
<p> Kontkatovat mě můžete na <a href="kontakt­.html">kontak­tní stránce</a>.</p>
<p> Více o mých dovednostech na <a href="Dovednos­t.html">Moje dovednosti</a></p>
</section>
<div class="cistic"></div>
</article>
</body>
</html>

 
Odpovědět
28.3.2019 15:08
Avatar
Tomáš Knor
Člen
Avatar
Odpovídá na Tomáš Knor
Tomáš Knor:28.3.2019 15:15

Teď jsem zjistil, že i když si stáhnu ten Zip pod článkem tak se mi to stejně dá pod sebe. :-(

 
Odpovědět
28.3.2019 15:15
Avatar
Jakub Dykas
Člen
Avatar
Jakub Dykas:29.8.2019 18:26

Ahoj,

lze hodnotu vlastnosti border-radius nějak rovnou zadat do stylu selektoru v tom jednořádkovém zápisu?

article section {
border: 2px solid na toto místo #006797;
}

takže plácnu... něco jako:

article section {
border: 2px solid border 10px #006797;
}

A ještě pro zajímavost. Kolik tam lze zapsat těchto vlastností zapsat? Jak editor chápe, že 5px má být např. právě u zaoblení rohů a ne u tloušťky rámečku?

Díky moc :-)

 
Odpovědět
29.8.2019 18:26
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na Jakub Dykas
Michal Šmahel:30.8.2019 8:16

Ahoj, na to je poměrně jednoduchá odpověď - border-radius do vlastností border v souhrnném jednořádkovém zápisu zapsat nelze. Je tam možné zapsat pouze barvu (border-color), tloušťku (border-width) a styl (border-style) a to v libovolném pořadí. Možné to je, protože každá elementární vlastnost (z těch tří) nabývá jiných hodnot.

Dále viz https://developer.mozilla.org/…b/CSS/border

Editováno 30.8.2019 8:16
Odpovědět
30.8.2019 8:16
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Václav Pekárek
Člen
Avatar
Václav Pekárek:2.1.2020 20:15

Bezva článek. Díky.

Odpovědět
2.1.2020 20:15
Cogito ergo sum
Avatar
Jan Šprta
Člen
Avatar
Jan Šprta:3.4.2020 16:17

Ahoj, začínám programovat a ve škole jsme dostali úkol udělat s pomocí rámečku esovou kartu, má být černá křížová, na prostředku kříž, a v levém horním rohu a pravém spodním rohu má být A a pod tím znak kříže - entin pro kříž je ♣

Děkuju moc !!!

 
Odpovědět
3.4.2020 16:17
Avatar
Veronika MAREČKOVÁ
Člen
Avatar
Odpovídá na Tomáš Knor
Veronika MAREČKOVÁ :28.1.2021 13:51

Pokud se i Zip pod článkem stejně dá pod sebe tak to znamená že je moc malý monitor. Protože když si moji obrazovku můj prohlížeč zmenčím tak se mi to taky narovná pod sebe místo velde sebe, ale když si prohlížeč zvětším na celou obrazovku tak to funguje mám to vedle sebe.

Zde je kód se stručným popisem:

<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styly.css" type="text/css">
<title>Documen­t</title>
</head>
<body>
<!--toto je naše skupina article-->
<article>
<!--zde je podskupina header tj. pouze nadpis h1 o mně-->
<header>
<h1>O mně</h1>
</header>
<!--zde začíná druhá podskupina section tj. texty a obrázek-->
<section>
<p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p>
<!--osobní poznámka, která nikterat se zadáním nesouvisí, jen vysvětluje co to znamená "class" Třída class nám pomáhá v tom abychom v css stylech specifikovali náš konkrténí požadavek tj. že přesně tato věta, kterou označíme class="..." bude mít např. červenou barvu.-->
<p class="centro­vany"><img src="obrazky/a­vatar.png" alt="Programátor HoBi" class="vlevo" /></p>
<p>Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktovat mě můžete na <a href="kontakt­.html">kontak­tní stránce</a>.</p>
<p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
<p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>progra­mování</stron­g>!</p>
</section>
<!--zde píšem kde chceme "floutování" ukončit. To je ten <div....></div> a nazvali jsme si to: class="cistic"-->
<div class="cistic"></div>
</article>
</body>
</html>

/*** označili jsme třídu kde je nadpis  o mně. Třída se jmenuje: "article header" ***/
article header {
    width: 250px;
    float: left;
}
/*** označili jsme třídu kde je text a obrázek. Třída se jmenuje: "article section" ***/
article section {
    width: 710px;
    float: left;
    background: white;
}
/*celé pozadí "article" je modré, ale protože jsme označili že chceme mít pozadí u textu "article section" bílé tak se v této podskupině "article section" modrá barva nevyskytuje.*/
article {
    background: url(obrazky/pozadi.png) blue;
}
/*ukončuje floutování*/
.cistic {
    clear: both;
}
 /*text-align: left je zarovnání textu doleva pozn. v textu máme obrázek  => obrázek jsme si zarovnali doleva. U obrázku jsme si pojmenovali třídu názvem "centrovany"*/
.centrovany {
    text-align: left;
}
 
Odpovědět
28.1.2021 13:51
Avatar
Martin Pluhař
Člen
Avatar
Martin Pluhař:22.4.2021 0:10

Nevíte někdo proč mi nejde v CSS změnít velikost obrázku ? v Html ve style ano, když zadám bez selektoru jen img {width:256px;} tak to jde taky, ale jakmile si ulozim selektor jako např .profilovka {width: 256px;} tak to nic neuděla. Prosím o radu

 
Odpovědět
22.4.2021 0:10
Avatar
Martin Libich
Člen
Avatar
Martin Libich:23.8.2021 9:00

Mockrát nepíšu komenty pod články, ale už to musím napsat - i diskuse mě často ještě posunou a dovysvětlí některé detaily nebo rovnou celé myšlenky. Díky!

Odpovědět
23.8.2021 9:00
Pokud se ráno probudím, je vše v pořádku
Avatar
Barbora Danihelova
Člen
Avatar
Barbora Danihelova:25.10.2021 15:52

Ahoj. Nezobrazuje sa mi zelene referencne tlacitko, uz to prepisuju asi hodinu a stale nic..som bezradna, niekto pomoc prosim ?

 
Odpovědět
25.10.2021 15:52
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 114.