Diskuze: Formulářové prvky různých velikostí

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

Aktivity

Marek Štěpánek

Člen

Marek Štěpánek:1.2.2020 18:16

Zdravím, vytvořil jsem šedý formulář, ale vyvlézají mi z něho formulářové prvky input, text area a select. Nevíte čím by to mohlo být? Nejspíše to bude banální chyba v kodu ale nemůžu na to přijít. Děkuji za pomoc

Editováno 1.2.2020 18:17

Odpovědět

1.2.2020 18:16

Jaroslav Smrž

Tvůrce

Jaroslav Smrž:1.2.2020 18:25

Když sem dáš kód, určitě ti budeme schopni poradit. Z obrázku výstupu ti mohu jen říct, že máš něco špatně...

Nahoru Odpovědět

1.2.2020 18:25

/* Life runs on code */

Marek Štěpánek

Člen

Marek Štěpánek:1.2.2020 19:40

CSS

* {
        margin: 0;
        padding: 0
}

body {
        margin: 0;
        background: #ffffff;
        font-family: sans-serif;
        font-weight: bold;
}



header {
  background: #17A2B8;
}

.container {
        width: 80%;
        margin: 0 auto;
}



header::after {
  content: '';
  display: table;
  clear: both;
}

.nazev {
  float: left;
  padding: 20px 0;
}

nav {
  float: right;
}

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

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 30px;

  position: relative;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

header h1 {
color: #ffffff;
font-size: 28px;
}

Nahoru Odpovědět

1.2.2020 19:40

Marek Štěpánek

Člen

Marek Štěpánek:1.2.2020 19:40

HTML

<!DOCTYPE html>
<html lang="cs">
        <head>
                <title>Maturitní práce</title>
                <meta charset="UTF-8">
                <link rel="stylesheet" type="text/css" href="css/detail_mp.css">
        </head>
        <body>
<header>
        <div class="container">
                <h1 class="nazev">ŠIS - Školní informační systém</h1>
                <nav>
                        <ul>
                        <li>
                        <a href="#">MAREK ŠTĚPÁNEK</a>
                        </li>
                        <li>
                        <a href="#">DOMŮ</a>
                        </li>
                        <li>
                        <a href="#">ODHLÁSIT</a>
                        </li>
                        </ul>
                </nav>
        </div>
</header>

<form class="form">

<h1 class="form-title">Maturitní práce</h1>

        <div class="form-group">
      <label for="detailprace">Téma maturitní práce</label>
      <input class="form-control input-lg" type="text" value="Fiktivní výstava spojená s kulturní akcí">
    </div>

    <div class="form-group">
      <label for="zadaniapokyny">Zadání a pokyny</label>
      <textarea rows="8" class="form-control text-lg">Zpracujte projekt:
        Výstava na téma "Lucemburkové v českých zemích".
        Uskuteční se ve dnech 4. 5. 2019 až 29. 9. 2019 v prostorách státního hradu Karlštejna.
        Osnova projektu:
        1)  Kulturní program pro zahájení výstavy.
        2)  Logo výstavy.
        3)  Vytvoření plakátu, letáčku a upomínkového předmětu.
        4)  Vytvořte webové stránky výstavy. </textarea>
    </div>

    <div class="form-group">
      <label for="rozsahprace">Rozsah práce</label>
      <textarea class="form-control text-lg">Výsledky práce zpracujte do textu o délce 10 až 15 stran.
Zprávu odevzdejte ve dvou tištěných exemplářích a v elektronické podobě.</textarea>
    </div>

    <div class="form-group">
      <label for="detailnizadani">Detailní zadání</label>
      <textarea rows="8" class="form-control text-lg">Zpracujte:
        1)  Logo výstavy; logo musí odpovídat době Lucemburků a musí být heraldicky správné, logo zakomponujte do plakátu, který bude vylepován na plakátovacích plochách ve formátu A2 na výšku.
    </div>

<div class="form-group">
      <label for="terminodevzdani">Termín odevzdání</label>
      <input class="form-control input-lg" id="inputto" type="text" value="15. 4. 2020 do 12:00 hodin">
    </div>

 <div class="form-group">
      <label for="konzultant">Konzultant</label>
      <input class="form-control input-lg" id="inputk" type="text" placeholder="Konzultant">
    </div>

<div class="form-group">
        <label for="Oponent">Oponent</label>
  <select class="form-control select-lg">
    <option value="0" selected disabled>Vyberte oponenta:</option>
    <option value="238">Adriana Takáčová</option>
        <option value="218">Zdeněk Rygl</option>
        </select>
</div>

<div class="form-group">
        <label for="Oponent">Žák</label>
  <select class="form-control select-lg">
    <option value="0">Vyberte žáka:</option>
    <option value="245">Adam Karnold</option>
        </select>
</div>

<div class="form-group">
      <label for="zadavatel">Zadavatel</label>
      <input class="form-control input-lg" type="text" value="Zdeněk Rýgl" disabled>
</div>


<div class="form-group">
        <label for="rocnik">Ročník</label>
  <select class="form-control select-lg">
    <option value="0">Vyberte ročník</option>
    <option value="238">2015/2016</option>
        <option value="128">2016/2017</option>
        <option value="217">2017/2018</option>
        <option value="333">2018/2019</option>
        <option value="297" selected>2019/2020</option>
        </select>
</div>

<div class="form-group">
        <label for="trida">Třída</label>
  <select class="form-control select-lg">
    <option value="0">Vyberte třídu</option>
    <option value="238">DN2</option>
        <option value="128">ME2Z</option>
        <option value="217">ME4</option>
        <option value="333" selected>MT4</option>
        <option value="297">SE4</option>
        <option value="217">ZT2</option>
        <option value="333">ZT3</option>
        <option value="297">ZT4</option>
        </select>
</div>

    <button class="button">Uložit</button>

</form>
</body>
</html>

Nahoru Odpovědět

1.2.2020 19:40

Marek Štěpánek

Člen

Marek Štěpánek:1.2.2020 19:41

děkuji za připomínku, už jsem ho sem ho dal.

Nahoru Odpovědět

1.2.2020 19:41

Peter Mlich

Člen

Peter Mlich:1.2.2020 20:03

Ten css kod neobsahuje vubec nektere z class zmenene v html kodu ani nic, cim by ovlivnoval vzhled prvku formulare. Pouze resi navigaci, ktera v html kodu ani neni pouzita. Takze jsi sen asi neco nedal. Cau, nazdar, vyreseno, nemas zac.

Podle html kodu pouzivas pravdepodobne jeste neco jako bootstrap. V tom pripade doporucuji zkopirovat html kod z dokumentace a upravit.

zakladni layout

https://getbootstrap.com/…ntroduction/#…

content

Pokud delas obsah body, tak se to obvykle pak uzavira do div.container
https://getbootstrap.com/…ut/overview/#…

formulare

https://getbootstrap.com/…nents/forms/#…
https://getbootstrap.com/…nents/forms/#…
https://getbootstrap.com/…nents/forms/#…
https://getbootstrap.com/…nts/buttons/

Nahoru Odpovědět

1.2.2020 20:03

Peter Mlich

Člen

Peter Mlich:1.2.2020 20:06

Ale jestli chces tip, tak mozna nastav uplne vsemu margin, padding:0. Ten efekt na obrazku je pravdepodobne zpusobem tim, ze mas v nejakem elementu paddind+width:100%. width = padding_left + 100% width above element + padding_right

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

Nahoru Odpovědět

1.2.2020 20:06

Marek Štěpánek

Člen

Marek Štěpánek:2.2.2020 20:48

Díky moc!) Pomohlo

Nahoru Odpovědět

2.2.2020 20:48

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

Zjistit více...

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

Nejčastěji vyhledáváné

Diskuze: Formulářové prvky různých velikostí