hello I’m creating a form with elements. After creating the elements, I tried to bump the button to the center, but it probably interferes with another command somewhere. do you know anyone where there could be a mistake?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
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;
}
.form {
width: 45%;
margin: 45px auto;
padding: 70px;
border: 1px solid #ccc;
border-radius: 0px;
box-shadow: 0px 0px 8px 5px rgba(0, 0, 0, .2);
background-color: #FFFFFF;
}
.form-title {
font-size: 28px;
text-align: center;
}
.form-group {
margin: 20px 0;
}
.form-group label {
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
}
.input-lg {
padding: 10px 16px;
line-height: 1.3333333;
}
.text-lg {
padding: 10px 16px;
line-height: 1.3333333;
}
.select-lg {
padding: 10px 16px;
xline-height: 1.3333333;
}
.form-control {
font-family: sans-serif;
font-size: 16px;
display: block;
width: 100%;
border: 1px solid #ccc;
margin-top: 5px;
border-radius: 6px;
}
.input-lg:focus {
outline: none !important;
border:1px solid #7aa9f5;
box-shadow: 0 0 6px #4D90FE;
}
.button {
color: #ffffff;
background-color: #17a2b8;
font-family: sans-serif;
font-size: 16px;
font-weight: normal;
text-decoration: none;
letter-spacing: 1px;
padding: 12px 0;
width: 120px;
margin: auto;
text-align: center;
border-style: none;
xborder-radius: 21px;
xdisplay: inline-block;
position: relative;
}
.button:hover {
background: #17b8b3;
font-weight: normal;
}
Hi @marek127523,
Welcome to the fcc forum. Could show us your HTML as well? A jsfiddle or codepen would be helpful.
Hi, yes ofcourse.
<!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.
2) Webové stránky výstavy a zapracujte do nich tři vámi zvolené vhodné výstavní exponáty, navrhněte vhodné emotivní osvětlení pro zvolené exponáty.
3) Navrhněte a vytvořte vhodný dvojjazyčný leták k výstavě v anglickém a českém jazyce, vhodný pro incomingové cestovní kanceláře a agentury.
4) Vytvořte návrh reklamního a upomínkového předmětu ve formě malé oboustranné papírové vlaječky na špejli (o přibližné velikosti A6), s použitím odpovídající heraldické symboliky; vlaječky budou rozdávány kostýmovanými pážaty před příchodem císařského průvodu divákům a těmi budou diváci vítat císaře Karla IV. projíždějícího na koni.
Výsledky práce zpracujte do textu o délce 10 - 15 normostran.
Zprávu odevzdejte ve dvou tištěných exemplářích a v elektronické podobě.
Výstava se uskuteční na státním hradě Karlštejně.
Datum slavnostního zahájení výstavy: sobota 4. 5. 2019 v 10:00 hodin na hlavním nádvoří hradu Karlštejna spojené s bohatým kulturním programem.
Datum předpokládaného ukončení výstavy: neděle 30. 5. 2019
Program zahájení výstavy:
10:00 h Slavnostní zahájení výstavy samotným císařem Karlem IV. za doprovodu středověké hudby.
10:30 - 11:30 h Otevření a prohlídka výstavy.
22:00 h Ukončení programu.</textarea>
</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>
</select>
</div>
<div class="form-group">
<label for="Oponent">Žák</label>
<select class="form-control select-lg">
<option value="0">Vyberte žáka:</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">← Zpět</button>
<button class="button">Uložit</button>
</form>
</body>
</html>
I am not completely sure I understand what you are going for. Maybe something like this could work?
<div class="button-container">
<button class="button">← Zpět</button>
<button class="button">Uložit</button>
</div>
.button-container {
display: flex;
flex-direction: row;
justify-content: space-between;
}