Diskuze: Špatné nastavení pravého okraje stránky.

Naučíme tě pracovat na home-office.

Zjistit více...

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

7cezar97

Člen

7cezar97:23.1.2019 20:54

Na boku stránky mám slabý proužek barvy z pozadí.A header a footer přečuhuje proto mi jde posunovat stránku na šířku.

<!doctype html>
<html lang="cs">

<head>
<title>Programové a datové soubory</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="CSS/style.css">
</head>

<body class="bg-primary">

<header class=" text-center bg-primary-header">
<h1>Programy a data </h1>
</header>

<h2 class="display-2 text-warning">Aplikační software</h2>
<main class="bg-primary">
<p class="odstavec">Aplikace jsou uživatelské programy určené pro jeden nebo více speci-
fických účelů. Pro spouštění aplikací je nezbytná přítomnost základní-
ho software - operačního systému.</p>
<h2>ZÁKLADNÍ SKUPINY APLIKACÍ</h2>
<div class="sloupce">
<p class="odstavec">Kancelářské balíky. Symbolický „balík“ programů obvykle tvoří textový pro-
cesor, tabulkový procesor, nástroj na tvorbu prezentací, databázový systém,
někdy i groupwarové nástroje (systémy organizování času, zajišťování schů-
zek), grafické editory apod. Vedle komerčních Microsoft Office či Apple iWork
existují také balíky OpenOffice nebo WPS Office, dostupné zdarma a pro řadu
platforem.
</p>
<p class="odstavec">Grafické aplikace. Oblast grafiky je velmi široká; grafické programy
umožňují
vytvoření grafických dokumentů přímo v počítači, skenování papírových před-
loh i zachycení obrazu digitálním fotoaparátem. Dominantní postavení v této
oblasti zaujímá profesionální software firmy Adobe (např. Adobe Photoshop,
Adobe Illustrator aj.). Mezi oblíbené multiplatformní opensource grafické ap-
likace patří např. rastrový editor GIMP nebo vektorový Inkscape. Svébytné
oblasti počítačové grafiky tvoří programy pro tvorbu animací, rozsáhlé kon-
strukční systémy CAD (Computer Aided Design) nebo programy DTP (Desktop
Publishing) určené pro tvorbu tiskovin.
</p>
<p class="odstavec">Multimediální programy. Umožňují vytváření, zpracování a prezentaci mul-
timediálních, tedy především audiovizuálních dat na počítači. Kromě nejrůz-
nějších multimediálních přehrávačů zde můžeme zařadit řadu programů pro
editaci digitálního zvuku nebo videa, programy pro tvorbu multimediálních pre-
zentací, výukové programy, ale také rozsáhlou oblast počítačových her.
</p>
</div>
<div class="sloupce">
<p class="odstavec">Programy pro komunikaci v počítačové síti. Slouží pro správu počítačo-
vých sítí, vzdálené řízení počítače, přenos a přístup ke vzdáleným souborům a
vzdálený tisk, pro připojení vnitřní podnikové sítě (intranet) na síť celosvětovou
(Internet) přes poskytovatele Internetu. K základním uživatelským (klientským)
aplikacím patří webové prohlížeče, klienty elektronické pošty a groupware
(software pro skupinovou práci), prostředky online komunikace (IM - Instant
Messaging) a jiné.
</p>
<p class="odstavec">Informační a databázové systémy. Informační systémy (IS - information sys-
tems) představují komplexní programové vybavení určité instituce nebo firmy.
Základem IS jsou obvykle tzv. datové sklady (data warehouse) založené na
databázových systémech. Podnikové informační systémy bývají označovány
zkratkou ERP (Enterprise Resource Planning) a jsou tvořeny celou řadou díl-
čích programových modulů (např. moduly pro výrobu, logistiku, správu ma-
jetku, účetnictví ...) K lídrům v oblasti informačních i databázových systémů
patří velké firmy jako Oracle, Microsoft, IBM, SAP. Kromě komplexních IS jsou
vyvíjeny mnohé specializované aplikace pro podporu výrobních procesů, eko-
nomických transakcí a nejrůznějších jiných pracovních činností.
</p>
<p class="odstavec">Malware a antivirové programy. Zatímco malware je počítačový program
určený ke vniknutí nebo poškození počítačového systému, cílem antivirových
programů (např. AVG, AVAST, ESET, Kaspersky Antivirus atd.) je chránit počí-
tačové systémy před tímto nežádoucím softwarem
</p>
</div>
<p class="odstavec">Integrovaná vývojová prostředí. Obvykle jsou označována zkratkou IDE (In-
tegrated Development Environment) a používají je programátoři k vývoji aplika-
cí. Tradičně je tvoří editor s různými pomůckami pro psaní programového kódu,
ladicí prostředky, překladače a další nástroje zefektivňující práci vývojářů.
</p>
</main>

<footer>
<p><a class="linka" href="https://validator.w3.org">Validator na W3C</a></p>
<p>© 2018 Tomáš Kuča IT1</p>
</footer>

</body>

</html>
=============CSS==============================================
header {
font-size: 10em;
top: 0px;
left: 0;
margin: 0px;
margin-bottom: 30px;
height: 200px;
width: 100vw;
}

footer {
background-color: #002D2D;
color: white;
padding: 0.1em;
margin-top: 25px;
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100vw;
}
html {
position: relative;
min-height: 100%;
}

body {
margin: 0 0 150px;
}

h1 {

color:white;
font-size: 0.8em;
font-family: Calibri, 'Arial Narrow';
text-align: center;
padding: 25px;
margin-top:0px;
}
h2{
color: white;
font-size: 3em;
margin: 0px;
}

/================class===================/

.odstavec {
border-top: 5px solid #394800;
font-size: 1.2em;
margin-bottom:2em;
background-color: #B8E900

}
.sloupce {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 20px;
}

/background/

.bg-primary {
background-color: #009292 !important;

}
.bg-primary-header {
background-color: #002D2D;
}

/Obrazky/
.obr {
width: 50px;
height: 50px;
}

/odkazy/
a {
color: #394800;

}

a:hover {
background-color: #576d00;
color: white;

}

.linka {
color: #8C57E4;

}

.linka:hover {
background-color: #4409A6;
color: white;

}

Zkusil jsem: Zkušel jsem nastavit okraje, odsazení a margin.

Chci docílit: Aby footer a header nepřesahoval stranku a při menšim objemu textu byl footer na konci stranky.

Odpovědět

23.1.2019 20:54

7cezar97

Člen

7cezar97:23.1.2019 21:24

Jo tady mam lepe čitelný kod omylem se to neposlal jako kod

<!doctype html>
<html lang="cs">

<head>
        <title>Programové a datové soubory</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="CSS/style.css">
</head>

<body class="bg-primary">
        <!-- Záhlaví stránky -->
        <header class=" text-center bg-primary-header">
                <h1>Programy a data </h1>
        </header>
        <!-- Hlavní část stránky -->
        <h2 class="display-2 text-warning">Aplikační software</h2>
        <main class="bg-primary">
                <p class="odstavec">Aplikace jsou uživatelské programy určené pro jeden nebo více speci-
                        fických účelů. Pro spouštění aplikací je nezbytná přítomnost základní-
                        ho software - operačního systému.</p>
                <h2>ZÁKLADNÍ SKUPINY APLIKACÍ</h2>
                <div class="sloupce">
                        <p class="odstavec">Kancelářské balíky. Symbolický „balík“ programů obvykle tvoří textový pro-
                                cesor, tabulkový procesor, nástroj na tvorbu prezentací, databázový systém,
                                někdy i groupwarové nástroje (systémy organizování času, zajišťování schů-
                                zek), grafické editory apod. Vedle komerčních Microsoft Office či Apple iWork
                                existují také balíky OpenOffice nebo WPS Office, dostupné zdarma a pro řadu
                                platforem.
                        </p>
                        <p class="odstavec">Grafické aplikace. Oblast grafiky je velmi široká; grafické programy
                                umožňují
                                vytvoření grafických dokumentů přímo v počítači, skenování papírových před-
                                loh i zachycení obrazu digitálním fotoaparátem. Dominantní postavení v této
                                oblasti zaujímá profesionální software firmy Adobe (např. Adobe Photoshop,
                                Adobe Illustrator aj.). Mezi oblíbené multiplatformní opensource grafické ap-
                                likace patří např. rastrový editor GIMP nebo vektorový Inkscape. Svébytné
                                oblasti počítačové grafiky tvoří programy pro tvorbu animací, rozsáhlé kon-
                                strukční systémy CAD (Computer Aided Design) nebo programy DTP (Desktop
                                Publishing) určené pro tvorbu tiskovin.
                        </p>
                        <p class="odstavec">Multimediální programy. Umožňují vytváření, zpracování a prezentaci mul-
                                timediálních, tedy především audiovizuálních dat na počítači. Kromě nejrůz-
                                nějších multimediálních přehrávačů zde můžeme zařadit řadu programů pro
                                editaci digitálního zvuku nebo videa, programy pro tvorbu multimediálních pre-
                                zentací, výukové programy, ale také rozsáhlou oblast počítačových her.
                        </p>
                </div>
                <div class="sloupce">
                        <p class="odstavec">Programy pro komunikaci v počítačové síti. Slouží pro správu počítačo-
                                vých sítí, vzdálené řízení počítače, přenos a přístup ke vzdáleným souborům a
                                vzdálený tisk, pro připojení vnitřní podnikové sítě (intranet) na síť celosvětovou
                                (Internet) přes poskytovatele Internetu. K základním uživatelským (klientským)
                                aplikacím patří webové prohlížeče, klienty elektronické pošty a groupware
                                (software pro skupinovou práci), prostředky online komunikace (IM - Instant
                                Messaging) a jiné.
                        </p>
                        <p class="odstavec">Informační a databázové systémy. Informační systémy (IS - information sys-
                                tems) představují komplexní programové vybavení určité instituce nebo firmy.
                                Základem IS jsou obvykle tzv. datové sklady (data warehouse) založené na
                                databázových systémech. Podnikové informační systémy bývají označovány
                                zkratkou ERP (Enterprise Resource Planning) a jsou tvořeny celou řadou díl-
                                čích programových modulů (např. moduly pro výrobu, logistiku, správu ma-
                                jetku, účetnictví ...) K lídrům v oblasti informačních i databázových systémů
                                patří velké firmy jako Oracle, Microsoft, IBM, SAP. Kromě komplexních IS jsou
                                vyvíjeny mnohé specializované aplikace pro podporu výrobních procesů, eko-
                                nomických transakcí a nejrůznějších jiných pracovních činností.
                        </p>
                        <p class="odstavec">Malware a antivirové programy. Zatímco malware je počítačový program
                                určený ke vniknutí nebo poškození počítačového systému, cílem antivirových
                                programů (např. AVG, AVAST, ESET, Kaspersky Antivirus atd.) je chránit počí-
                                tačové systémy před tímto nežádoucím softwarem
                        </p>
                </div>
                        <p class="odstavec">Integrovaná vývojová prostředí. Obvykle jsou označována zkratkou IDE (In-
                                tegrated Development Environment) a používají je programátoři k vývoji aplika-
                                cí. Tradičně je tvoří editor s různými pomůckami pro psaní programového kódu,
                                ladicí prostředky, překladače a další nástroje zefektivňující práci vývojářů.
                        </p>
        </main>
        <!-- Zápatí stránky -->
        <footer>
                <p><a class="linka" href="https://validator.w3.org">Validator na W3C</a></p>
                <p>&copy; 2018 Tomáš Kuča IT1</p>
        </footer>

</body>

</html>

a css

header {
  font-size: 10em;
  top: 0px;
  left: 0;
  margin: 0px;
  margin-bottom: 30px;
  height: 200px;
  width: 100vw;
}

footer {
  background-color: #002D2D;
  color: white;
  padding: 0.1em;
  margin-top: 25px;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100vw;
}
html {
  position: relative;
  min-height: 100%;
}

body {
  margin: 0 0 150px;
}

h1 {

  color:white;
  font-size: 0.8em;
  font-family: Calibri, 'Arial Narrow';
  text-align: center;
  padding: 25px;
  margin-top:0px;
      }
h2{
  color: white;
  font-size: 3em;
  margin: 0px;
}

/*================class===================*/

.odstavec {
  border-top: 5px solid #394800;
  font-size: 1.2em;
  margin-bottom:2em;
  background-color: #B8E900

  }
.sloupce {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
}

/*background*/

.bg-primary {
  background-color: #009292 !important;

  }
.bg-primary-header {
  background-color: #002D2D;
}

/*Obrazky*/
.obr {
  width: 50px;
  height: 50px;
}


/*odkazy*/
a {
  color: #394800;

}

a:hover {
  background-color: #576d00;
  color: white;

}

.linka {
  color: #8C57E4;

}

.linka:hover {
  background-color: #4409A6;
  color: white;

}

Nahoru Odpovědět

23.1.2019 21:24

Peter Mlich

Člen

Peter Mlich:24.1.2019 8:14

Cele to mas divne. Ja bych do tagu html, body (margin, pading 0) vubec nezasahoval a pouzil dovnitr div. Nevim, co je sirka vw, prepsal jsem to na %. A dos problemu tam delal jeden, ted zakomentovany, padding. Aspon FF teda pocita padding do sirky. Takze, kdyz das width 100% + padding, tak se dostavas nad 100%.

<body class="bg-primary">
<div  class="layout">
...

<style>
html {
/*
  position: relative;
  min-height: 100%;
*/
}

body {
/*
  margin: 0 0 150px;
*/
}

html, body
{margin:0; padding:0;}

.layout
{
  width: 100%;
}

header {
  font-size: 10em;
/*
  top: 0px; - pokud to nemas napozicovane, tak ti to bude top, left ignorovat
  left: 0;
  margin: 0px;
*/
  margin-bottom: 30px;
  height: 200px;
  width: 100vw;
  width: 100%;
}

footer {
  background-color: #002D2D;
  color: white;
/*  padding: 0.1em;*/
  margin-top: 25px;
/*
  position: absolute;
  left: 0;
  bottom: 0;
*/
  height: 100px;
  width: 100vw;
  width: 100%;
}


h1 {

  color:white;
  font-size: 0.8em;
  font-family: Calibri, 'Arial Narrow';
  text-align: center;
  padding: 25px;
  margin-top:0px;
      }
h2{
  color: white;
  font-size: 3em;
  margin: 0px;
}

/*================class===================*/

.odstavec {
  border-top: 5px solid #394800;
  font-size: 1.2em;
  margin-bottom:2em;
  background-color: #B8E900

  }
.sloupce {

  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;

}

Editováno 24.1.2019 8:15

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

24.1.2019 8:14

7cezar97

Člen

7cezar97:24.1.2019 15:23

Děkuji ti za řešení.

Nahoru Odpovědět

24.1.2019 15:23

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

Nejčastěji vyhledáváné

Diskuze: Špatné nastavení pravého okraje stránky.