Autor Zpráva
krovakus
Profil *
#1 · Zasláno: 6. 6. 2014, 15:37:53
Odpovědět Citovat
Ahoj,
s html teprve začínám a narazil jsem na problém, kdy po kliknutí na odkaz na stránce "index.html" se mi požadovaná stránka "onas.html" sice zobrazí, ale bez CSS stylů. Obě stránky jsou směřovány na "layout.css". Navíc pokud načtu stránky samostatně, vše je v pořádku. Jen když se je snažím zobrazit skrz zmíněný odkaz, z nějakého důvodu se css nenačte. Přikládám HTML kód "index.html" (je stejný i pro "onas.html") i CSS.
Díky. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="generator" content="PSPad editor, www.pspad.com" />
  <title>Taneční studio Grazia Plzeň</title>
  <link rel="stylesheet" href="layout.css" type="text/css">
  </head>
  <body>
    <div id="kontakty">
      <table id="kontakty" width="768px">
        <tr>
          <td><img src="images/phone2_icon.png">&nbsp 723 547 776</td>
          <td><img src="images/mail2_icon.png">&nbsp pavel.mraz@studiograzia.cz</td>
          <td><img src="images/adress2_icon.png">Havlíčkova 18, Plzeň</td>
        </tr>
      </table>
    </div>
    <div id="kontaktyspodek">
    </div>
    <div id="hlavicka">
      <h1>www.VASEFIRMA.cz</h1>
    </div>
    <div id="menu">
      <table>
        <tr>
        <td>
          <ul class="menu">
            <li><a href="index.html/">ÚVOD</a>
            </li>
          </ul>
        </td>
        <td>
          <ul class="menu">
            <li><a href="">STRÁNKY</a>
          <ul>
            <li><a href="onas.html/">o nás</a></li>
            <li><a href="">lekce</a></li>
            <li><a href="">pronájem</a></li>
            <li><a href="">kroužky</a></li>
          </ul>
            </li>
          </ul>
        </td>
        <td>
          <ul class="menu">
            <li><a href="">KONTAKT</a>
          <ul>
            <li><a href="">Kniha návštěv</a></li>
            <li><a href="">Generování formuláře</a></li>
          </ul>
            </li>
          </ul>
        </td>
        </tr> 
      </table> 
    </div>
    <div id="obsah">
      <table class="sloupce" cellspacing="25px">
        <tr>
          <td><h2>Jsme nejlepší!</h2></td>
          <td><h2>Jsme nejlevnější!</h2></td>
        </tr>
        <tr>
          <td width="50%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sodales, risus ut mattis convallis, neque tortor commodo dolor, at molestie odio nisi non enim. Vestibulum sed lacinia nulla, nec semper tellus. In a fermentum tortor, et fermentum ligula. </td>
          <td width="50%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sodales, risus ut mattis convallis, neque tortor commodo dolor, at molestie odio nisi non enim. Vestibulum sed lacinia nulla, nec semper tellus. In a fermentum tortor, et fermentum ligula. </td>
        </tr>
      </table>
      <table class="sloupce" cellspacing="25px">
        <tr>
          <td width="3%"><img src="images/bulb_icon.png"></td>
          <td width="47%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sodales, risus ut mattis convallis, neque tortor commodo dolor, at molestie odio nisi non enim.</td>
          <td width="3%"><img src="images/bag_icon.png"></td>
          <td width="47%">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sodales, risus ut mattis convallis, neque tortor commodo dolor, at molestie odio nisi non enim.</td>
        </tr>
      </table>
      <table class="sloupce" cellspacing="25px">
        <tr>
          <td width="25%"><img src="images/pc_1.png"></td>
          <td width="25%"><img src="images/pc_2.png"></td>
          <td width="25%"><img src="images/pc_3.png"></td>
          <td width="25%"><img src="images/pc_4.png"></td>
        </tr>
      </table>
      <table class="nazvy">
        <tr>
          <td width="200px"><h3>Kurzy pro děti</td>
          <td width="200px"><h3>Základy HTML</h3></td>
          <td width="200px"><h3>Naučte se mailovat</h3></td>
          <td width="200px"><h3>Ovládání tabletu</h3></td>
        </tr>
      </table>
    </div>
    <div id="paticka">
    </div>
  </body>
</html>
body {
background-image: url('images/pozadi.jpg');
background-attachment: fixed;
background-color: black;
margin: 0;
padding: 0;
text-align: center;
}
h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
}
h1 {
color: #315788;
}
h2 {
color: #2c2c2c;
}
#menu a:hover {
position: relative; top: 2px;
}

#kontakty {
width: 768px;
height: 34px;
margin-left: auto;
margin-right: auto;
background-color: white;
text-align: center;
font-size: small;
font-family: verdana;
color: grey; 
}
#kontaktyspodek {
background-image: url('images/contacts_bottom.png');
width: 768px;
height: 20px;
margin-left: auto;
margin-right: auto;
} 
#hlavicka {
background-image: url('images/background_header.jpg');
background-repeat: no-repeat;
background-position: center;
background-color: grey;
width: 648px;
height: 60px;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 60px;
margin-top: 20px;
}
#menu {
background-image: url('images/menu2.png');
background-color: white;
width: 768px;
height: 34px;
margin-left: auto;
margin-right: auto;
}
#obsah {
background-color: white;
width: 768px;
height: 600px;
margin-left: auto;
margin-right: auto;
}
.sloupce {
margin-left: auto;
margin-right: auto;
text-align: justify;
color: grey;
}
.nazvy {
margin-left: auto;
margin-right: auto;
text-align: center;
color: grey;
}
#paticka {
background-color: grey;
width: 768px;
height: 30px;
margin-left: auto;
margin-right: auto;
clear: 0;
}


.menu {color: #d7a34d; padding: auto; margin: auto; list-style-type: none; display:block; font-family: verdana; font-size: 14px;}
.menu ul {margin-top: 0px; position: absolute; visibility: hidden; background-color: white; margin: 0; padding: 0; list-style-type: none;}
.menu li {float: left; padding: 4px 2px 0 2px; width: 200px; white-space: nowrap;}
.menu a {padding: 2px; text-align: left; padding-left: 15px; color: black; background-color: none; display: block; text-decoration: none;}
.menu ul a:link {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px; font-weight: 100;}
.menu ul a:visited {color: blue; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:hover {color: #3a3a3a; background-color: white; font-weight: bold}
.menu li:hover ul, ul.menu li.hover ul { visibility: visible;}
.menu li li {float: none; border: none; padding: 0; margin: 0;}
Trejpa
Profil
#2 · Zasláno: 6. 6. 2014, 15:41:44
Odpovědět Citovat
krovakus:
Co dělá lomítko v adrese za názvem souboru?

Označuje, že onas.html není soubor, ale adresář onas.html/. V zanořeném adresáři samozřejmě nefunguje relativní cesta ke stylům.
krovakus
Profil *
#3 · Zasláno: 6. 6. 2014, 16:32:05
Odpovědět Citovat
Trejpa:
Já se picnu. Dík moc. Už funguje. :-) A mohl by jsi se prosím podívat celkově na ten kód? Je něco jak by být nemělo?
Dík.
Tomáš123
Profil
#4 · Zasláno: 6. 6. 2014, 16:46:44
Odpovědět Citovat
krovakus:
Môžem aj ja? :-)

1.) Používaš viackrát jedno id. identifikátor by mal byť na stránke jediný;
2.) Všetko usporadúvaš cez tabuľku. Existuje aj vlastnosť float či position (skôr ten float);
3.) Po novom sa do hlavičky píše iba <!DOCTYPE html>;
4.) Atribút type elementu link nie je povinný;
5.) Rozhodni sa, či používaš HTML alebo XTML; 
<meta name="generator" content="PSPad editor, www.pspad.com" />
<link rel="stylesheet" href="layout.css" type="text/css">
6.) Element <h3> slúži na nadpisy, nie položky v menu...Keď tak, použi neutrálny element span.
krovakus
Profil *
#5 · Zasláno: 6. 6. 2014, 16:54:25
Odpovědět Citovat
Tomáš123:
Určitě můžeš. Díky. :-)
Na začátku jsem měl tendenci psát v xhtml, ale nakonec jsem se na to vyprdnul a zapomněl jsem to změnit.
Jinak ostatní body jsou přínosné postřehy. Zkusím přepracovat, kdybych se na něčem zakousnul, znovu bych se sem obrátil. :-)
Plaváček
Profil
#6 · Zasláno: 6. 6. 2014, 16:56:42
Odpovědět Citovat
krovakus:

Až budeš mít příležitost se sem znovu obrátit, dodej raději živou ukázku. Ta řekne víc, než tisíc řádků vloženého zdrojového kódu. To jen na okraj.
krovakus
Profil *
#7 · Zasláno: 6. 6. 2014, 17:01:42
Odpovědět Citovat
Tomáš123:
Ještě k tomu bodu 1) Znamená to tedy, že i když je ID určeno jedno pro tabulku a druhý pro divizi, i tak nesmí být stejné?
Plaváček:
Ok.
Tomáš123
Profil
#8 · Zasláno: 6. 6. 2014, 17:10:45
Odpovědět Citovat
krovakus:
„Znamená to tedy, že i když je ID určeno jedno pro tabulku a druhý pro divizi, i tak nesmí být stejné?“
Presne tak!

Správne by sa malo rovnaké id vyskytovať na stránke iba raz (hoci sa nič nepokazí aj keď sa bude v kóde vyskytovať rovnaký identifikátor viackrát). Je jedno, či je to id pre tabuľku, span, div či paragraf. Stále musí byť na danej HTML stránke jedinečné.
rafej
Profil
#9 · Zasláno: 7. 6. 2014, 00:14:05
Odpovědět Citovat
Tomáš123:
„...hoci sa nič nepokazí aj keď sa bude v kóde vyskytovať rovnaký identifikátor viackrát)...“
To není tak uplně pravda, jsou minimálně 2 situace, kdy to problém je:
a) pokud se na to id v html kódu odkazuju z javascriptu => nemusí fungovat vůbec nebo to dělá nepředpokládané věci
b) pokud id patří prvku formuláře a chci přidružit label
Tomáš123
Profil
#10 · Zasláno: 7. 6. 2014, 08:17:16
Odpovědět Citovat
rafej:
Na to som nepozeral, ďakujem za upresnenie. :-)
pcmanik
Profil
#11 · Zasláno: 7. 6. 2014, 15:27:20 · Upravil/a: pcmanik o 7 minut později
Odpovědět Citovat
rafej:
a) metóda getElementById vyberie prvý prvok na stránke so zadaným id, teda ten ktorý bude vyššie v DOMe bude vybraný. Je to pevne dané správanie takže nič nepredpokladané a čo viem tak to funguje všade.
rafej
Profil
#12 · Zasláno: 9. 6. 2014, 16:54:14 · Upravil/a: rafej o minutu později
Odpovědět Citovat
pcmanik:
„metóda getElementById vyberie prvý prvok na stránke so zadaným id, teda ten ktorý bude vyššie v DOMe bude vybraný. Je to pevne dané správanie takže nič nepredpokladané a čo viem tak to funguje všade.“

Nepředpokládané nebylo uvedeno ve smyslu, že by se prohlížeč choval jinak, ale spíš ve smyslu uplně jiného chování, než tvůrce očekává. ;-)
A např. v IE ve spojení s odstraňováním a přidáváním položek to skutečně někdy dělá divné chyby.
krovakus
Profil *
#13 · Zasláno: 10. 6. 2014, 00:28:16
Odpovědět Citovat
Tak jsem se pokusil pozicovat text a obrázky pomocí tagu "float" a jde to, ale poměrně složitě. Proto otázka k zamyšlení, respektivě asi spíš k vysvětlení. :-) Proc používat spíše "float" a "position", než tabulky? Přijdou mi mnohem jednodušší a tím pádem rychlejší na napsání.

Díky.
Časová prodleva: 10 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0