NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!
Avatar
Maros2470
Člen
Avatar
Maros2470:1.8.2017 13:15

Zdravím.

Dokončil jsem první stránku, ale mám problém s načtením stylů. Při testování vše funguje normálně, ale po nahrání na server se zobrazuje stránka bez stylů.

Můžete mi poradit?
Díky

 
Odpovědět
1.8.2017 13:15
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na Maros2470
Michal Šmahel:1.8.2017 13:21

Jsou v pořádku cesty k *.css souboru??

Nahoru Odpovědět
1.8.2017 13:21
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Maros2470
Člen
Avatar
Odpovídá na Michal Šmahel
Maros2470:1.8.2017 13:25

Už to funguje, bylo zapotřebí soubor stylů uložit do složky css. Teď mi ještě nefunguje obrázek pozadí

 
Nahoru Odpovědět
1.8.2017 13:25
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na Maros2470
Michal Šmahel:1.8.2017 13:27

To bude problém obdobný. Opět cesta k souboru. Když máš *.css soubor ve složce css, musíš pak ještě upravit adresu obrázku přidáním ../ pro přesun o úroveň výš. Pomůže také obrázek dát do složky css.

Nahoru Odpovědět
1.8.2017 13:27
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Maros2470
Člen
Avatar
Odpovídá na Michal Šmahel
Maros2470:1.8.2017 13:34

Vyzkoušel jsem kde co, ale obrázek nevidím

 
Nahoru Odpovědět
1.8.2017 13:34
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Maros2470
Ján Timoranský:1.8.2017 14:17

Skús sem dať link na stránku alebo časť kódu, kde pracuješ s obrázkom spolu s hierarchiou súborov na serveri. Chyba je určite v ceste k obrázku.

Nahoru Odpovědět
1.8.2017 14:17
Find what you love and let it kill you.
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na Maros2470
Michal Šmahel:1.8.2017 14:17

Hmm, to je divné. Můžeš rozepsat, kde je ten obrázek uložený a jak na něm odkazuješ v kódu??

Nahoru Odpovědět
1.8.2017 14:17
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Maros2470
Člen
Avatar
Odpovídá na Michal Šmahel
Maros2470:1.8.2017 14:27

Nenačítá ani písmo ze složky font, ve zkušebním ano.

 
Nahoru Odpovědět
1.8.2017 14:27
Avatar
Maros2470
Člen
Avatar
Maros2470:1.8.2017 14:58

Dám to tady postupně celé. Zatím obrázky.

 
Nahoru Odpovědět
1.8.2017 14:58
Avatar
Maros2470
Člen
Avatar
Maros2470:1.8.2017 14:59 
<!DOCTYPE html>
<html lang="cs-cz">

        <head>
                <meta charset="utf-8" />
                <meta name="description" content="Elektroinstalace, opravy a revize" />
                <meta name="author" content="Marek Šimčík" />
                <link rel="shortcut icon" href="grafika/Eli-elektro.ico" />
                <link rel="stylesheet" href="styl.css" type="text/css" />
                <title>eli-elektro</title>
        </head>

        <body>
                <header>
                        <div id="logo">
        <div id="otoc_logo">
          <h1>eli-elektro</h1>
        </div>
      </div>
                        <nav>
                                <ul>
                                        <li class="aktivni"><a href="index.html" data-tooltip="Úvodní stránka">Domů</a></li>
                                        <li><a href="cenik.html" data-tooltip="Ceník prací">Ceník</a></li>
          <li><a href="lhuty.html" data-tooltip="Lhůty periodických revizí">Revizní lhůty</a></li>
                                        <li><a href="kontakt.html" data-tooltip="Kontaktní informace">Kontakt</a></li>
          <li><a href="http://eli-elektro.aspone.cz" target="blank" data-tooltip="Pro smluvní partnery">Zákaznická sekce</a></li>
          <a href="mailto:[email protected]" data-tooltip="Zaslat e-mail"><img src="grafika/email.png"></a>
          <a href="https://www.facebook.com/Marek-%C5%A0im%C4%8D%C3%ADk-eli-elektro-1441303856084914/?fref=ts" target="blank" data-tooltip="Facebook: Marek Šimeli-elektro"><img src="grafika/facebook.png"></a>
          <a href="https://www.toplist.cz/" target="blank" data-tooltip="Toplist"><img src="https://toplist.cz/count.asp?id=1121132&logo=2" border="0" alt="TOPlist" width="88" height="31"/></a>
                                </ul>
                        </nav>
                </header>

                <article>
                        <div id="centrovac">

                                <section>
                                        <p><h2>Vítejte na stránkách eli-elektro.cz</h2></p>
                                        <br>
                                        <br>
                                        <p><h3>Elektroinstalace</h3></p>
          <br>
                                        <p>Provádím nové elektroinstalace, jejich rekonstrukce a opravy v objektech třídy "A", t. j. bez nebezpečí výbuchu.</p>
          <p>Především tyto práce provádím v menších objektech, jako jsou byty, rodinné domky, kanceláře, prodejny a menší firmy.</p>
                                        <p>Provádím výměny hlavních jističů před elektroměry.</p>
          <p>Při výměně hlavního jističe u distributora PRE, a. s., provádím úpravy těchto rozváděčů dle platných připojovacích podmínek společnosti. U většiny starších elektroměrových rozváděčů jsou tyto úpravy nutné, a proto je potřeba uvažovat s vyšší cenou prací a materiálu, než u běžné výměny jističe.</p>
          <br>
          <p class="centrovany"><img src="obrazky/Domek.jpg"/></p>

          <p><h3>Revize</h3></p>
          <br>
                                        <p>Revize elektrických zařízení provádím také v objektech třídy "A", t. j. bez nebezpečí výbuchu.</p>
          <p>U revizí se však neomezuiji pouze na menší objekty, jako u elektroinstalací, ale provádím revize veškerých objetů a zařízení tř. "A". U všech těchto objektů také provádím revize ochran před bleskem a přepětím.</p>
                                        <p>Dále provádím revize ručního elektrického nářadí a spotřebičů dle ČSN 33 1600 ed.2. U těchto revizí vedu evidenci revidovaných zařízení, hlídám termíny periodických revizí a poskytuji přístup do zákaznické sekce. V zákaznicé sekci, po přihlášení zákazníka, má tento možnost ověřit seznam zařízení, lhůty revizí, platnost revizí, zadávat nová zařízení a zadat zařízení určená k lividaci. </p>
          <p>Samozřejmostí jsou revize strojů a zařízení pro obloukové svařování.</p>
          <br>
          <p class="centrovany"><img src="obrazky/Rozvadec1.jpg"/><img src="obrazky/Rozvadec2.jpg"/></p>

          <p><h3>EZS</h3></p>
          <br>
                                        <p>Montáže elektronických zabezpečovacích systémů (EZS) provádím rovněž v menších objektech jako jsou byty, domky, drobné provozovny a pod.</p>
          <p>K montáži využívám především zařízení přední tuzemské firmy Jablotron.</p>
          <br>
          <p class="centrovany"><img src="obrazky/Jablotron.jpg"/></p>

          <p><h3>Ceník</h3></p>
          <br>
          <div class="cistic"></div>
                                        <p>Ceny prací, dopravy a dalších položek najdete v aktuálním <a href="cenik.html">ceníku.</a></p>
          <p>Nejsem plátce DPH.</p>
          <br>
          <p class="centrovany"><img src="obrazky/Kc.jpg"/></p>
                                </section>

        <aside>
          <br>
          <a href="http://www.cruadalach.com" target="blank" data-tooltip="metalová kapela CRUADALACH"><img src="grafika/kapela_1.jpg"/></a>
          <br>
          <hr>
          <br>
          <a href="https://www.facebook.com/Pivn%C3%AD-bar-11-292062671268310/?fref=ts" target="blank" data-tooltip="Pivní bar 11, Brandlova 1599, Praha 4"><img src="grafika/pivní bar11.jpg"/></a>
          <br>
          <hr>
          <br>
          <script type="text/javascript">
            <!--google_ad_client = "ca-pub-5915615977228034"; /* revize */ google_ad_slot = "2814887238"; google_ad_width = 150; google_ad_height = 600; //-->
          </script>
          <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
          </script>
          <br>

        </aside>

                                <div class="cistic"></div>
                        </div>

                </article>

                <footer>
                        Vytvořil &copy; (2017) Marek Šimčík, eli-elektro. Poslední revize: 01. 08. 2017
                </footer>
        </body>
</html>
body {
        background: url('grafika/Pozadi5.jpg') blue;
        margin: 73px 0px 0px 0px;
        font: 14px Verdana;
        min-width: 960px;
}

h3, h4, h5, h6 {
        text-align: center;
        color: #0a294b;
        font-family: Arial;
        text-shadow: 3px 3px 7px #666666;
}

h2 {
  text-align: center;
        font-size: 1.7em;
  color: gold;
  font-family: Arial;
        text-shadow: 3px 3px 7px #666666;
}

h3 {
  text-align: left;
        font-size: 1.4em;
  text-decoration: underline;
  color: silver;
  font-family: Arial;
        text-shadow: 3px 3px 7px #666666;
}

h1 {
        font-size: 2em;
        font-weight: normal;
        color: gold;
        text-align: center;
        text-shadow: 2px 2px 1px #0a294b;
}

#logo {

  font: 14px Pismo_Logo;
        width: 250px;
        height: 60px;
        float: left;
        margin: 7px 0px 0px 0px;
}

@font-face
{
        font-family: Pismo_Logo;
        src: url('font/Broadway Engraved BT.ttf');
        font-weight: bolder;
}

#logo h1 {
        margin: 5px 0px 0px 5px;
}

nav ul {
        margin: 0px;
        list-style-type: none;
}

nav ul li {
        float: left;
        padding: 0px 10px;
        margin: 30px 5px;
        font-size: 14px;
  font-weight: bolder;
        height: 25px;
        line-height: 1.8em;
}

nav ul img {
        float: left;
        padding: 0px 5px;
        margin: 30px 5px;
        height: 25px;

}

nav ul li:hover, .aktivni {
        background: -webkit-linear-gradient(bottom, blue, aqua);
  background: -o-linear-gradient(bottom, blue, aqua);
  background: -moz-linear-gradient(bottom, blue, aqua);
  background: -ms-linear-gradient(bottom, blue, aqua);
  background: linear-gradient(bottom, blue, aqua);
        box-shadow: 10px 0px 5px black;
}

nav a {
        color: white;
        text-decoration: none;

}

nav a::before {
        content: attr(data-tooltip);
  background: -webkit-linear-gradient(bottom, blue, aqua);
  background: -o-linear-gradient(bottom, blue, aqua);
  background: -moz-linear-gradient(bottom, blue, aqua);
  background: -ms-linear-gradient(bottom, blue, aqua);
  background: linear-gradient(bottom, blue, aqua);
        box-shadow: 10px 0px 5px black;
  color: yellow;
  padding: 3px 10px;
  position: absolute;
  left: 20px;
  bottom: -40px;
  white-space: nowrap;
  opacity: 0;
  filter: Alpha(opacity=0);
  font-weight: bold;
  font-size: 16px;
}

nav a:hover::before {
        opacity: 1;
  filter: Alpha(opacity=100);
}

#centrovac {
        margin: 0px auto;
        width: 960px;
}

header {
        height: 73px;
        position: fixed;
        top: 0px;
        background: black;
        width: 100%;
}

article {
        background: rgba(0,0,0,0.6);
        padding: 10px 0px;
}

article section {
        width:755px;
  min-height: 920px;
        float: left;
        background: rgba(0,0,0,0.7);
        border: 1px solid silver;
        box-shadow: 2px 2px 3px black;
        padding: 20px;
  color: silver;
  font-size: 14;
  font-weight: bold;
}

section a {
        color: silver;
        text-decoration: none;
  font-style: italic;
  text-decoration: underline;
}

article aside {
        width: 160px;
  height: 950px;
  background: rgba(0,0,0,0.8);
        float: right;
  border: 1px solid silver;
}

aside a::before{
  content: attr(data-tooltip);
  background: -webkit-linear-gradient(bottom, blue, aqua);
  background: -o-linear-gradient(bottom, blue, aqua);
  background: -moz-linear-gradient(bottom, blue, aqua);
  background: -ms-linear-gradient(bottom, blue, aqua);
  background: linear-gradient(bottom, blue, aqua);
        box-shadow: 10px 0px 5px black;

  color: yellow;
  padding: 3px 10px;
  position: absolute;
  right: 20px;

  white-space: nowrap;
  opacity: 0;
  filter: Alpha(opacity=0);
  font-weight: bold;
  font-size: 16px;
}

aside a:hover::before {
        opacity: 1;
  filter: Alpha(opacity=100);
}

footer {
  background: black;
  width: 100%;
        height: 40px;
        color: white;
  text-align: center;

}

.cistic {
        clear: both;
}


#otoc_logo{
    margin: 0 auto 30px auto;
    background: -webkit-linear-gradient(bottom, blue, aqua);
  background: -o-linear-gradient(bottom, blue, aqua);
  background: -moz-linear-gradient(bottom, blue, aqua);
  background: -ms-linear-gradient(bottom, blue, aqua);
  background: linear-gradient(bottom, blue, aqua);

    float: left;
    text-align: center;
    width: 200px;
    height: 50px;
    text-shadow: 3px 3px 0px black;

    -webkit-transition: all 0.4s ease-out;  /* Saf3.2+, Chrome */
    -moz-transition:    all 0.4s ease-out;  /* FF4+ */
    -ms-transition:     all 0.4s ease-out;  /* IE10 */
    -o-transition:      all 0.4s ease-out;  /* Opera 10.5+ */
    transition:         all 0.4s ease-out;
}

#otoc_logo:hover {
    -webkit-transform:  rotate(-360deg);  /* Saf3.1+, Chrome  */
    -moz-transform:     rotate(-360deg);  /* FF3.5+  */
    -ms-transform:      rotate(-360deg);  /* IE9  */
    -o-transform:       rotate(-360deg);  /* Opera 10.5  */
    transform:          rotate(-360deg);
}
 
Nahoru Odpovědět
1.8.2017 14:59
Avatar
Maros2470
Člen
Avatar
Maros2470:1.8.2017 15:18

Link: www.eli-elektro.cz

 
Nahoru Odpovědět
1.8.2017 15:18
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na Maros2470
Michal Šmahel:1.8.2017 15:28

Nejprve uprav cestu k *.css souboru:

<link rel="stylesheet" href="css/styl.css" type="text/css" />
Nahoru Odpovědět
1.8.2017 15:28
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Michal Šmahel
Člen
Avatar
Odpovídá na Michal Šmahel
Michal Šmahel:1.8.2017 15:32

A poté cesty v CSSku:

/* Před: */
background: url('grafika/Pozadi5.jpg') blue;

/* Po: */
background: url('../grafika/Pozadi5.jpg') blue;

Tímto způsobem u všech. Dostaneš se tak na vyšší úroveň adresáře, kde ty složky jsou.

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
1.8.2017 15:32
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Maros2470
Člen
Avatar
Odpovídá na Michal Šmahel
Maros2470:1.8.2017 15:38

Díky. Už to běhá.

 
Nahoru Odpovědět
1.8.2017 15:38
Avatar
Maros2470
Člen
Avatar
Odpovídá na Michal Šmahel
Maros2470:1.8.2017 16:09

Můžu ještě jeden dotaz? Na té stránce mám reklamu. Při rolování stránky mi překrývá header. Nevíš co s tím?
Díky.

 
Nahoru Odpovědět
1.8.2017 16:09
Avatar
Ján Timoranský
Tvůrce
Avatar
Odpovídá na Maros2470
Ján Timoranský:1.8.2017 16:14

Nastav headeru vyšší z-index v css. V tvojom prípade postačí z-index: 1; .

Nahoru Odpovědět
1.8.2017 16:14
Find what you love and let it kill you.
Avatar
Maros2470
Člen
Avatar
Odpovídá na Ján Timoranský
Maros2470:1.8.2017 16:25

Díky

 
Nahoru Odpovědět
1.8.2017 16:25
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 17 zpráv z 17.