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

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