Diskusia – 15. diel - Rámček a boxmodel v CSS

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Posledné komentáre sú na spodnej časti poslednej stránky.

Tomáš Knor

Člen

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/pozadi.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>

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

<p> <img src="obrazky/avatar.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">kontaktní stránce</a>.</p>
<p> Více o mých dovednostech na <a href="Dovednost.html">Moje dovednosti</a></p>
</section>
<div class="cistic"></div>
</article>
</body>
</html>

Odpovedať

Tomáš Knor

Člen

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. :-(

Odpovedať

Jakub Dykas

Člen

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 :-)

Odpovedať

Michal Šmahel

Člen

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

Editované

Odpovedať

Nejdůležitější je motivace, ovšem musí být doprovázena činy.

Václav Pekárek

Člen

Václav Pekárek:2.1.2020 20:15

Bezva článek. Díky.

Odpovedať

Cogito ergo sum

Jan Šprta

Člen

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 !!!

Odpovedať

Veronika MAREČKOVÁ

Člen

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>Document</title>
</head>
<body>

<article>

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

<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>

<p class="centrovany"><img src="obrazky/avatar.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">kontaktní 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>programování</strong>!</p>
</section>

<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;
}

Odpovedať

Martin Pluhař

Člen

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

Odpovedať

Martin Libich

Člen

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!

Odpovedať

Pokud se ráno probudím, je vše v pořádku

Barbora Danihelova

Člen

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 ?

Odpovedať

Posledné komentáre sú na spodnej časti poslednej stránky.

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 115.

Najčastejšie vyhľadávané

Diskusia – 15. diel - Rámček a boxmodel v CSS