Neregistrovaný Přihlásit Registrovat

Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem 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

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny
Předmět Autor Datum
Zkopíruj kód sem: validace a postupně odstraňuj nalezené chyby. Ovšem vyléčíš tak pouze vadnou syn… nový
hynajs 19.07.2018 00:08
 hynajs
<table> <thead> <tr> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> </tr> </tbody> </table>… nový
Pavel 19.07.2018 12:17
 Pavel
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
Všem moc děkuji problém vyřešen :D, kód jsem opravil takto: .cf:before, .cf:after { content: " ";… nový
Maran Atha 21.07.2018 13:49
 Maran Atha

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