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: 459
Registrován: únor 11
Pohlaví: Muž
Stav:
Offline

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ž
Stav:
Offline

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
  • Pomoc se sestavením PC 45-50K
    od Kvp2 » 03 lis 2023 23:27 » v Rady s výběrem hw a sestavením PC
    22
    2624
    od Kvp2 Zobrazit poslední příspěvek
    12 lis 2023 20:39
  • Pomoc s výběrem HW
    od adelafridrichova » 13 dub 2023 20:41 » v Rady s výběrem hw a sestavením PC
    6
    2109
    od Karrex Zobrazit poslední příspěvek
    14 dub 2023 14:09
  • pomoc z vyberom grafiky
    od mandes » 12 úno 2024 14:25 » v Rady s výběrem hw a sestavením PC
    6
    840
    od Vlada47 Zobrazit poslední příspěvek
    13 úno 2024 18:00
  • Pomoc s výběrem Linuxu
    od Luis » 02 pro 2023 14:33 » v LiNuX a ostatní alternativní OS
    5
    3943
    od KubaCZE Zobrazit poslední příspěvek
    20 úno 2024 11:05
  • Pomoc s instalací Windows Příloha(y)
    od volvo1971 » 02 zář 2023 10:00 » v Windows 11, 10, 8...
    8
    1497
    od martin.100 Zobrazit poslední příspěvek
    02 zář 2023 18:33

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 3 hosti