• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Stylizacja inputów (radio,checkbox itp)

VPS Starter Arubacloud
0 głosów
591 wizyt
pytanie zadane 11 kwietnia 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)
zmienione kategorie 12 kwietnia 2017 przez Arkadiusz Waluk

Witam. 

Mam oczywiście znów banalny problem, otóż dlaczego wszystko układa się obok siebie?

zlikwidowałem br w html i dodałem do css input checkbox marginesy z góry, a tu nagle całość się przesuwa. Chcę aby wszystko było jedno pod drugim. Czego mi brakuję ?

komentarz 11 kwietnia 2017 przez Karol Loczeski Użytkownik (820 p.)

<div id="container">
    <div class="logo"><img src="img/logo.png" alt="klan non omnis moriar" width="850" height="150">
        <p><strong>Uwaga! Trwa rekrutacja! Wymagana ranga: silver.</strong></p>
    </div>
    <div class="nav">
        <a href="index.html" target="_blank"><div class="link">Strona główna</div></a>
        <a href="register.html" target="_blank"><div class="link">Dołącz do nas</div></a>
        <a href="http://bit.ly/streamy-csgo" target="_blank"><div class="link">Streamy z CS:GO</div></a>
    </div>
    <div class="content">
        <div class="formularz">
        <form action="new.php" method="post"> 
            <label for="nick">Nick:</label>
            <input type="text" id="nick" placeholder="instniejący nick z CS">
             
             
            <label for="haslo">Podaj hasło:</label>
            <input type="text" id="haslo">
             
            <label for="hasloreplay">Powtórz hasło:</label>
            <input type="text" id="hasloreplay">
         
            <label for="rok">Rok urodzenia:</label>
            <input type="number" id="rok">
         
            <label>Płeć:<input type="radio" name="plec" value="m" checked="on">Mężczyzna</label>
            <label>    <input type="radio" name="plec" value="k">Kobieta</label>
            <input type="checkbox" name="reg" checked="on">
            <label for="reg"><i>Akceptuję regulamin</i></label>
            <input type="checkbox" name="zdoda">
            <label for="zgoda"><i>Wyrażam zgodę na otrzymywanie newslettera</i> </label>
     
            <label>Ulubiona broń:</label>
            <select id="bron">
                <option value="a">Five-SeveN</option>
                <option value="b">Desert Eagle</option>
                <option value="c">PP-Bizon</option>
                <option value="d">AWP</option>
                <option value="e">MP9</option>
                <option value="f">AK-47</option>
            </select>
     
            <label>Ulubione mapy:</label>
            <select id="mapa" multiple="">
                <option value="aa">Dust II</option>
                <option value="aa">Mirage</option>
                <option value="aa">Cache</option>
                <option value="aa">Inferno</option>
                <option value="aa">Nuke</option>
                <option value="aa">Train</option>
            </select>
         
            <label>Kilka słów o sobie:</label>
            <textarea rows="3" cols="44" placeholder="Opisz swoją przygodę z CS:GO, dlaczego wybrałeś akurat nasz klan?"></textarea> 
             
            <input type="submit" value="Zarejestruj się">
        </form>
        </div>
    </div>
    <div class="tab">
    <table>
        <thead>
            <tr>
                <th title="ej">Nick</th>
                <th>Płeć</th>
                <th>Ulubiona płeć</th>
            </tr>
        </thead>
        <tbody>
        <tr style="color:red">
            <td>Sn1p3RR</td><td>m</td><td>AWP</td>
        </tr>
        <tr style="color:green">
            <td>Gh0st256</td><td>k</td><td>PP-Bizon</td>
        </tr>
        <tr>
            <td>K4w411</td>
            <td>k</td>
            <td>MP9</td>
        </tr>
        <tr>
            <td>S0l1d$nake</td>
            <td>m</td>
            <td>Desert Eagle</td>
        </tr>
        </tbody>
    </table>
    <small>Legenda: <span class="red">szef klanu</span>, <span class="green">sekretarz drużyny</span></small>
    </div>


body
{
    width: 100%;
    margin:0;
    background-color: #F3EFF2;
}
 
#container
{
margin-left: auto;
margin-right: auto;
}
 
.logo
{   
text-align: center;
}
 
.nav
{
    width: 20%;
    float:left;
    font-size: 20px;
    line-height:50px;
    margin-top: 80px;   
}
 
.nav a
{
    text-decoration: none;
    color:black;
    text-align: center;
}
 
.link
{
    width: 150px;
    margin-top: 5px;
    border: 1px black solid;
    border-radius: 20% 0 20% 0%;
    margin-left: auto;
    margin-right: auto;
 
}
.content
{
    width: 50%;
    float:left; 
}
 
.formularz
{
    background-color: #fff;
    margin:0 auto;
    width:300px;
    padding:50px;
    -webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.57);
    box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.57);
}
 
label
{
    color:red;
    margin-top: 10px;
}
 
input[type=text],
input[type=number]
{
    background-color:#F3EFF2;
    width:300px;
    color:black;
    border:1px solid #G4FGG3;
    border-radius: 5px;
    font-size:15px;
    padding:10px;;
    box-sizing: border-box;
    margin-top:10px;
}
 
input[type=text]:focus,
input[type=number]:focus
{
    -webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.57);
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.57);
    border:1px solid #228A6E;
    border-radius: 5px;
    background-color: #1DAF88;
}
 
input[type=submit]
{
    width: 300px;
    font-size:20px;
    background-color: #1DAF88;
    padding:10px 15px;
    margin-top:20px;
    border:2px solid #228A6E;
    border-radius: 5px;
    cursor: pointer;
}
 
input[type=submit]:hover
{
-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.57);
    -moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.57);
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.57);
}
h1
{
    text-align: center;
    letter-spacing: -1.8px;
}
 
.red { color:red;}
.green { color:green;}
 
.tab
{
    width: 30%;
    float:left;
    margin-top: 80px;
    text-align: center;
     
}
table
{
    margin:0 auto;
    border-collapse: collapse;
}
 
td,th
{
    border: 1px solid black;
    padding: 5px;
    
}
 
.footer
{
    width: 50%;
    clear: both;
    margin:0 auto;
     
    padding-top:10px;
     
}

 

2 odpowiedzi

+1 głos
odpowiedź 11 kwietnia 2017 przez Pietrak Pasjonat (18,850 p.)
https://www.w3.org/TR/CSS21/visuren.html#inline-formatting

Margin może źle działać dla elementów liniowych. Ustaw display:block
komentarz 11 kwietnia 2017 przez prominepl Bywalec (2,440 p.)
Dopkóki nie widać kodu ciezko stwierdzić w czym problem
komentarz 11 kwietnia 2017 przez lateM Pasjonat (17,660 p.)
Akurat w tym przypadku nie jest trudno zgadnąć  (:
komentarz 12 kwietnia 2017 przez Karol Loczeski Użytkownik (820 p.)

Średnio to wyszło tzn z tym checkboxem jak go wyrównać i nie rozumiem dlaczego przy input radio opcja "kobieta" poleciała na dół ? 

0 głosów
odpowiedź 11 kwietnia 2017 przez prominepl Bywalec (2,440 p.)
podaj kod html i css

Podobne pytania

0 głosów
2 odpowiedzi 428 wizyt
pytanie zadane 1 maja 2019 w PHP przez Webmaster123 Początkujący (440 p.)
0 głosów
1 odpowiedź 932 wizyt
pytanie zadane 24 października 2016 w HTML i CSS przez hiper007 Stary wyjadacz (11,270 p.)
0 głosów
3 odpowiedzi 2,213 wizyt

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...