Diskuze: Lekce 16 - Stylování tabulek a galerie fotek v HTML a CSS

Ladislav Šafránek

Člen

Ladislav Šafránek:6.12.2021 6:58

Zdravím, at to píšu, jak chci, stále mi to nevytvoří rámeček (červená) a ta horní, modrá lišta, se překrývá s těmi třemi ilustracemi.
http://imgway.cz/s/4Fjq

<!DOCTYPE html>
<html lang="cs-cz">

<head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styl.css" type="text/css" />

        <title>Dovednosti</title>
</head>

<body>
        <header>
            <div id="logo"><h1>Křestní <span>Příjmení</span></h1><small>webdeveloper</small></div>
            <nav>
                <ul>
                    <li><a href="index.html">Domů</a></li>
                    <li><a href="omne.html">O mně</a></li>
                    <li><a href="dovednosti.html">Dovednosti</a></li>
                    <li><a href="reference.html">Reference</a></li>
                    <li class="aktivni"><a class="kontakt-tlacitkoq" href="kontakt.html">Kontakt</a></li>
                </ul>
            </nav>
        </header>
        <h1>Dovednosti</h1>

        <table>
                <tr>
                        <td>
                                <img src="source/html.png" alt="HTML" />
                        </td>
                        <td>
                                <img src="source/java.png" alt="Java" />
                        </td>
                        <td>
                                <img src="source/pascal.png" alt="Pascal" />
                        </td>
                </tr>
                <tr>
                        <td>
                                <h2>HTML</h2>
                                <p>S HTML začínám a umím vytvořit jednoduché webové stránky, jako jsou tyto.</p>
                        </td>
                        <td>
                                <h2>Java</h2>
                                <p>Javu se učím z tutoriálů na devbook.cz, dokáži tvořit jednoduché konzolové i okenní aplikace.</p>
                        </td>
                        <td>
                                <h2>Pascal</h2>
                                <p>Pascal nás učí ve škole, ale raději se učím moderní jazyky z devbooku.</p>
                        </td>
                </tr>
        </table>

        <p><a href="index.html">Zpět na hlavní stranu</a></p>
</body>

</html>

@font-face {
  font-family: Poppins;
  src: url(fonty/Poppins-Regular.ttf);
  font-weight: normal;
}
@font-face {
  font-family: Poppins;
  src: url(fonty/Poppins-ExtraBold.ttf);
  font-weight: bold;
}

.centrovany {
  text-align: center;
}

body {
  font-family: "Poppins";
  font-size: 14px;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  color: #0a294b;
}

h2 {
  font-size: 1.7em;
}

article h2 {
  font-size: 2em;
}

article h1 {
  margin: 0;
  font-size: 2.3em;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 4px solid #ef6534;
}

article h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 10px 0;
  color: #00386b;
  width: max-content;
}

article header {
  height: 900px;
  background: none;
}

article section p {
  margin-bottom: 1.5em;
  line-height: 1.8em;
}

article section a {
  color: #ef6534;
}
#centrovac {
  margin: 0 auto;
  max-width: 960px;
}

.domu-article {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 100px max-content;
  border: 3px inherit green;
  box-shadow: 2px 2px 7px #F22609;
}

.domu-article img {
  width: 300px;
  grid-row-start: 1;
  grid-row-end: span 2;
  grid-column: 2;
  filter: hue-rotate(90deg);
}// https://developer.mozilla.org/en-US/docs/Web/CSS/filter

article {
  padding: 200px 50px;
  flex: 1;
}
.vlevo{
    float:left;
    padding: 10px;
}
.reference-tlacitko {
    background: #F3A30D;
    color: black;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px;
}
body > header {
    height: 100px;
    position: fixed;
    display: flex;
    justify-content: space-evenly;
    top: 0;
    background: #00386B;
    color: white;
    width: 100%;
    z-index: 1;
}
#logo {
    background: url('source/hlavicka.png') no-repeat;
    background-size: 40px 40px;
    height: 40px;
    margin: auto 0 auto 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#logo > * {
    margin: 0 0 0 50px;
}
#logo h1 {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.2em;
}
#logo h1 span {
    font-weight: bold;
    text-transform: uppercase;
}
#logo small {
    text-transform: uppercase;
    font-size: 0.85em;
}
nav ul {
    margin: 0;
    height: 100%;
    align-items: center;
    list-style-type: upper-roman;
    display: flex;
}
nav ul li {
    padding: 0 25px;
    margin: 0 5px;
    font-size: 1em;
    line-height: 4.3em;
}
nav ul a {
    color: orange;
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
}
nav ul a:hover, .aktivni a {
    border-bottom: 2px solid #EF6534;
}
.kontakt-tlacitkoq {
  background: #3783AA;
  padding: 10px 20px;
  border-radius: 20px;
}
.kontakt-tlacitko:hover,
.reference-tlacitko:hover {
  filter: brightness(115%) contrast(85%);
  border: 0;
}
footer {
    box-sizing: border-box;
    text-align: center;
    height: 100px;
    color: white;
    background: #414042;
    padding: 50px 0 0 0;
    clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
}
#centrovac {
    margin: 0 auto;
    max-width: 960px;
}
#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: bottom;
    border: 1px solid gray;
}

Odpovědět

6.12.2021 6:58

Peter Mlich

Člen

Peter Mlich:6.12.2021 8:04

CSS validator https://jigsaw.w3.org/…or/validator rika, ze mas chyby na radcich

83              Chyba : border Příliš mnoho hodnot nebo hodnoty, které nejsou rozpoznány. : 3px inherit green
98              Chyba při analýza }// https://developer.mozilla.org/en-US/docs/Web/CSS/filter article { padding: 200px 50px; flex: 1; }

border: 3px inherit green;  - pravdepodobne to nemas v platnem poradi, css umi rozpoznat text jen ve spravnem poradi, ktere je definovane v dokumentaci
// - neslouzi pro komentar v css a je mozne, ze ti ignoruje zbytek css soubor

Jinak jsem to teda nezkousel, ale mozna mas chybu jeste jinde.

jakpsatweb.cz/css/border.html - takhle se zapisuji ramecky

google = css border inherit
slovo inherit bych tam vubec nepouzival (aspon, ja to nepouzivam), ale muzes se podivat googlem na priklady zapisu
"inherit, zděděná barva rámečku" - jestli to spravne chapu, zastupuje to barvu, v tom pripade mas v zapisu 2 barvy. Spatny zapis css ignoruje.

border: 3px solid #f00 - tloustka, styl, barva
/* kdyz jako styl uvedes barvu a za ni dalsi barvu, nejde o platny zapis pro border */

Ukazky platnych zapisu mas treba v dokumentaci prohlizece, firefox. google = css border
https://developer.mozilla.org/…b/CSS/border

/* style */
border: solid; /*styl*/

/* width | style */
border: 2px dotted; /*tloustka, styl*/

/* style | color */
border: outset #f33; /*styl barva*/

/* width | style | color */
border: medium dashed green;/*tloustka styl barva*/

/* Global values */
border: inherit;
border: initial;
border: unset;

Muzes to zapsat tak, ze nekterou vlastnost vynechas, ale u ostatnich musis zachovat poradi.
tloustka styl barva
tloustka barva
tloustka styl
styl barva
tloustka barva...

Muzes zmenit primo konkretni vlastnosti a nepouzivat zkracene zapisy. To se nekdy taky hodi. V pripade uvedeni dvou barev se barva nahradi tou novou. V takovem pripade na dodrzovani poradi pro zkracene zapisy nezalezi.

border-color: green; /*tato barva je nahrazena ...*/
border-width: 1px;
border-color: inherit; /*.. barvou inherit, coz je barvaramecku neceho nad timto elementem */
border-style: solid;

Ja osobne inherit vubec nepouzivam.

Nahoru Odpovědět

6.12.2021 8:04

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 2 zpráv z 2.