Nefunguje část css kódu

Zdravím,
Potřeboval bych pomoci s nefunkčním kódem.

<!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></Title>
    <link href="https://fonts.googleapis.com/css?family=News+Cycle|Rum+Raisin" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/styly.css" />
  </Head>
  <Body>
  <Form Action="processorder.php" Method="Post">
    <table>
      <header >
        <tr>
          <div class="polozka" >
            <td>Položka</td>
          </div>
          <div class="mnozstvi" >
            <td style="width: 15px; text-align: center;">Množství</td>
          </div>
        </tr>
      <header>
      <div class="cf" >
        <tr>
          <td>Pneumatiky</td>
          <td><input type="text" name="tireqty" size="3"maxlenght="3" /></td>
        </tr>
        <tr>
          <td>Olej</td>
          <td><input type="text" name="oilqty" size="3"maxlenght="3" /></td>
        </tr>
        <tr>
          <td>Zapalovací svíčky</td>
          <td><input type="text" name="sparkqty" size="3"maxlenght="3" /></td>
        </tr>
        </div>
        <div class="vycentruj-globalne cf">
        <div class="tlacitko" >
        <tr>
          <td colspan="2">
          <td><input type="submit" value="Odeslat objednávku"/></td>
        </tr>
      </div>
      </div>
    </table>
  </Form>
  </Body>
</Html>

Zde je pro zájemce html(v tomto případě ne až tak významné) a zde je css:


.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1; /* pro IE6 a IE7 */
}

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

@media (max-width: 930px) {}
@media (max-width: 730px) {}
@media (max-width: 480px) {}
@media (max-width: 340px) {}

body {
padding: 20px 15px;
font-family: "News Cycle", Arial, Helvetica, sans-serif;
}


header {
position: absolute;
width: 130px;
padding-left: 25px;
font-family: "News Cycle", Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 200px;
}

.polozka {
width: 150px;
text-align: center;
font-family: Arial, Helvetica, sans-serif; 
}

.mnozstvi {
width: 15px;
text-align: center;
border: 1px solid blue;
padding: 5px, 20px;
z-index:3;
font-weight: bold;
color: #ffffff;
background-color: red;

}

.polozky {
background-image: linear-gradient(#6b5139, #2d1e10);
font-size:2px;

}

.tlacitko {
text-align: center;
background-image: linear-gradient(#6b5139, #2d1e10);
padding-right:-1190px;
}

Příliš mnoho se nezměnilo, prohlížeč zaregistroval pouze body{}, nikoli však třídy (class) či <header>. Zajímavé však je, že atribut table{} na zkoušku funguje úplně v pořádku... (pouze cvičně, table{} jsem potom zase vymazal).
Děkuji moc
za pomoc

Popřípadě přeji pěknou dovolenou

Filip

Předmět	Autor	Datum
Ten HTML kód je brutálně nevalidní. To se pak nemůžeš divit, že nefunguje správně. Např. tag <header… Wikan 18.07.2018 21:35	Wikan	18.07.2018 21:35
Zkopíruj kód sem: validace a postupně odstraňuj nalezené chyby. Ovšem vyléčíš tak pouze vadnou syn… hynajs 19.07.2018 00:08	hynajs	19.07.2018 00:08
<table> <thead> <tr> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> </tr> </tbody> </table>… Pavel 19.07.2018 12:17	Pavel	19.07.2018 12:17
No vidíš :-) Ještě si přidej do CSS pravidlo tam, kde zobrazuješ počet (množství): padding-left: 8… poslední Pavel 21.07.2018 17:43	Pavel	21.07.2018 17:43
Všem moc děkuji problém vyřešen :D, kód jsem opravil takto: .cf:before, .cf:after { content: " ";… Maran Atha 21.07.2018 13:49	Maran Atha	21.07.2018 13:49

Ten HTML kód je brutálně nevalidní. To se pak nemůžeš divit, že nefunguje správně.
Např. tag <header> je z HTML5, ale doctype máš pro HTML4. Navíc to vypadá, že místo <header> jsi spíš chtěl použít <th>. Navíc není uzavřený.
Pak tam taky mícháš <div> do <tr> a další věci.

Zkopíruj kód sem:

validace

a postupně odstraňuj nalezené chyby.
Ovšem vyléčíš tak pouze vadnou syntaxi, nikoli sémantiku.

<table>
  <thead>
    <tr>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
    </tr>
  </tbody>
</table>

Uvnitř tabulky nemá <div> co dělat.

No vidíš

Ještě si přidej do CSS pravidlo tam, kde zobrazuješ počet (množství):

padding-left: 8px

Hodnotu si uprav podle sebe. Číslo pak nebude nalepený na levej okraj.

Všem moc děkuji problém vyřešen :D,
kód jsem opravil takto:


.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1; /* pro IE6 a IE7 */
}

* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

@media (max-width: 930px) {}
@media (max-width: 730px) {}
@media (max-width: 480px) {}
@media (max-width: 340px) {}

body {
padding: 20px 15px;
font-family: "News Cycle", Arial, Helvetica, sans-serif;
}

input {
  display: inline-block;
    width: 65.82278481%;
    padding: 10px 0;
    background-color: #6c0733;
    background-image: linear-gradient(hsl(332, 90%, 40%), hsl(332, 80%, 30%) );
    box-shadow: rgba(0, 0, 0, .25) 0 2px 2px 0;
    font-size: 15px;
    color: #fefefe;
    transition: transform. 5s ease-out;
}

table {
  border-collapse: collapse;
}

table, th, td {
    width: 30%;
    border: 0px solid black;
    column-width:inherit;
}

th {
  height: 50px;
  background-image: linear-gradient(#4e0324, #4e0324, #851f49);
    color: white;
}
tr {
text-align: center;
}

tr:hover {
background-color: #f5f5f5;
}

tr:nth-child(even){
background-color: #f2f2f2;
}

th, td {
    border: 1px, 1px solid #ddd;
}

.tlacitko > input {
  display: inline-block;
    width: 65.82278481%;
    padding: 13px 0;
    background-color: #6c0733;
    background-image: linear-gradient(#87053e, #560329);
    box-shadow: rgba(0, 0, 0, .25) 0 7px 2px 0;
    font-size: 20px;
    color: #fefefe;
    transition: transform. 5s ease-out;
}

header {
position: absolute;
width: 130px;
padding-left: 25px;
font-family: "News Cycle", Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-size: 200px;
}

.polozka {
width: 150px;
text-align: center;
font-family: Arial, Helvetica, sans-serif; 
}

.mnozstvi { 
}

.polozky {
background-image: linear-gradient(#6b5139, #2d1e10);
font-size:2px;

}

Vše funguje tak, jak má - tabulky jsem dříve nedělal, tak se jedná o chybu blbého typu :D. Krom vašich rad se mi osvědčil (a dlouhodobě osvědčuje :D) W3 schools (w3schools.com).
Takto vypadá tabulka po opravě: (myslím, že v příloze)
A ještě jednou, děkuji všem!

screenshot-2018-07-21-13-44-37.png 74.72 KiB

Zpět do poradny Odpovědět na původní otázku Nahoru