Pomoc s responsivnim html, css kodem

Napište nám o svých webových stránkách, dejte vědět o jakémkoliv jiném zajímavém webu

Moderátoři: Myloš, Mods_senior

shockwave
Level 2.5
Level 2.5
Příspěvky: 308
Registrován: únor 11
Pohlaví: Muž

Pomoc s responsivnim html, css kodem

Příspěvekod shockwave » 06 úno 2019 15:09

Ahoj, mám zhruba tento kod:
-a potřeboval bych prosím poradit, jak prvkům formuláře INPUTům:) řekněme při šířce stránky pod 360px dát menší šířku, aby nebyly tak roztáhlé a nadpisy Label byly pěkně pod sebou nebo nad INPUTy .
A při šířce stránky nad 360px aby se INPUTy formuláře řadily vedle sebe, nevím už jak na to:( když dám width na 50% , tak zase nadpisy nejsou pod sebou a pri vetsi sirce se nic nezmení na normální formulář:( vse je porad pod sebou a ne vedle sebe. Děkuju Vám
css:
<style>>
.container{ padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
height:600px;
}

.content{ text-align: center;
}

@media screen and (max-width:360px){
.container{ padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
height:300px;
}
}

.content{ text-align: center;
}
form label{width: 100%;}
form input{width:100%;
margin-top:5px;
margin-left: auto;}
}
</style>

<html>
<head>
<meta name="viewport content=width=device-width, initial-scale=1.0">
</head>

<body>
<div class="container">
<div class="content">

<form method="POST">
<label><b>Jmeno:</b></label>
<input type="text" id="text" name="jmeno" size="20" placeholder="např. vaše jmeno" />
<label><b>Příjmení:</b></label>
<input type="text" id="text" name="prijmeni" size="20" placeholder="např. vaše příjmení"/>
<label><b>Věk:</b></label>
<input type="text" id="text" name="vek" size="20" placeholder="např. věk"/>
<input type="submit" value="odeslat" name="odeslat">
</form>
</div>
</div>
</body>
</html>



Reklama
Uživatelský avatar
ChrisTaylor
Level 1.5
Level 1.5
Příspěvky: 134
Registrován: duben 14
Pohlaví: Muž

Re: Pomoc s responsivnim html, css kodem

Příspěvekod ChrisTaylor » 06 úno 2019 18:21

Vytvořil jsem vlastní řešení, z něho se můžeš inspirovat:

Kód: Vybrat vše

<!doctype html>
<html lang="cs">
    <head>
        <meta charset="utf-8">
        <title>Formulářové prvky</title>
        <style>
            *
            {
                box-sizing: border-box;
            }
           
            form
            {
                display: flex;
                justify-content: center;
            }
           
            div
            {
                margin: 0 0.5rem;                   
            }

            @media only screen and (max-width: 800px)
            {
                body
                {
                    display: flex;
                    justify-content: center;
                }

                form
                {
                    flex-flow: column;
                }   
               
                div
                {
                    margin: 0.5rem 0;                   
                }

                label
                {
                    display: block;
                }
            }
        </style>       
    </head>
    <body>
        <form>
            <div>
                <label>Jméno</label>
                <input type="text">
            </div>
            <div>
                <label>Přijmení</label>
                <input type="text">
            </div>
            <div>
                <label>Věk</label>
                <input type="text">
            </div>
            <div>
                <input type="submit" value="Odeslat">
            </div>
        </form>
    </body>
</html>

Ohledně bodu zlomu, v mém příkladu jsem použil hodnotu 800 px, 360 px je velmi málo pro to, aby se mohly řadit vedle sebe. Více o flexboxu se dočteš např. na https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – velmi dobře zpracovaný návod ohledně toho, co vše flexbox umí.

Jinak k tebou poskytnutému kódu mám ještě připomínky:
  • dávej si pozor na složené závorky a uvozovky, občas ti někde utekly;
  • styl kódování – bylo by vhodné, aby byl v rámci souboru stejnorodý (odsazení apod.);
  • identifikátor (id) musí být v rámci dokumentu unikátní, tj. může být použit jen a pouze u jednoho elementu;
  • CSS vlastnosti nějaké třídy nemusíš redundantně psát v media queries, do nich piš jen vlastnosti, které opravdu měníš – ostatní budou zděděny.



  • Mohlo by vás zajímat
    Odpovědi
    Zobrazení
    Poslední příspěvek
  • Odstranění odkazu pomocí CSS
    od viett » 28 kvě 2018 01:01 » v Programování a tvorba webu
    7
    1136
    od lamin_cz
    01 čer 2018 16:33
  • Pomoc
    od Fabregas7 » 17 lis 2018 22:28 » v Design a grafické editory
    7
    1693
    od faraon
    18 lis 2018 07:39
  • Pomoc
    od Jirka228 » 06 bře 2019 17:46 » v Vše ostatní (inet)
    1
    351
    od ITCrowd
    06 bře 2019 19:42
  • Pomoc
    od Faffejt » 11 dub 2019 14:20 » v Programování a tvorba webu
    2
    278
    od Faffejt
    11 dub 2019 15:05
  • Zadost o pomoc
    od chesburger » 17 dub 2019 13:17 » v Administrace sítě
    1
    208
    od zeus
    17 dub 2019 18:50

Zpět na “Web-tipy a vaše weby”

Kdo je online

Uživatelé prohlížející si toto fórum: Žádní registrovaní uživatelé a 1 host