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 3
Level 3
Příspěvky: 404
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 2
Level 2
Příspěvky: 161
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
  • html pomoc s tabulkou
    od showpayne » 30 bře 2021 17:53 » v Programování a tvorba webu
    0
    246
    od showpayne
    30 bře 2021 17:53
  • Modrá obrazovka s QR kódem.
    od Tom77 » 03 bře 2021 19:37 » v BSOD (Blue Screen Of Death)
    3
    340
    od mmmartin
    04 bře 2021 10:59
  • Jak na #kontakt v html
    od ja_nvm » 14 dub 2021 18:39 » v Programování a tvorba webu
    3
    108
    od Arha
    14 dub 2021 20:29
  • Lokální HTML stránky
    od martin.nohejl » 16 bře 2021 06:06 » v Web-tipy a vaše weby
    4
    259
    od martin.nohejl
    16 bře 2021 15:46
  • HTTP authentication html ochrana
    od Akrej » 03 črc 2020 23:08 » v Programování a tvorba webu
    10
    1119
    od Scientific
    07 črc 2020 08:18

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

Kdo je online

Uživatelé prohlížející si toto fórum: CommonCrawl [Bot] a 0 hostů