Problem z rozmieszczeniem w scc

pytanie zadane 16 października 2016 w HTML i CSS przez Wejder0107 Początkujący (280 p.)

Witam mam problem z rozmieszczeniem elementów na stronie.
chcę żeby Strona Główna, Postacie, Ataki, Triki, Tryby gry, Zagraj były na środku manu.Logo było trochę oddalone od góry i brzegu.

<!DYCTYPE HTML>
   <html lang="pl">
    <head>
        <title>Wikipedia "Little Fighter"</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Wikipedia, little fighter, lf, gra"/>
        <meta name="description" content="Strona poświęcona grze little fighter"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <link rel="shortcut icon" href="https://3.bp.blogspot.com/-SJBybLT91Bg/WAJ2eNCjLUI/AAAAAAAAA30/guAAbmJPptUm_4dl3XBSyurHGwBswj--ACLcB/s1600/566843.png" />
        <link rel="stylesheet" href="style.css" type="text/css" />
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    </head>
    <body>
        <div id="menu">
         <div id="logo">
            <img src="img/logo.png"/>
         </div>
         <div id="linki">
           <div class="option"><a href="x">Strona Główna</a></div>
           <div class="option"><a href="x">Postacie</a></div>
           <div class="option"><a href="x">Ataki</a></div>
           <div class="option"><a href="x"> Triki</a></div>
           <div class="option"><a href="x">Tryby gry</a></div>
           <div class="option"><a href="Zagraj.html">Zagraj</a></div>
         </div>
        </div>
        <div id="pojemnik">
            
           
        </div> 
         <div id="podloga">
               
            </div>
    </body>
</html>

body
{
    background-image: url(img/tlo.png);
    margin: 0px !important;
    color:#ffffff;
    font-family: 'Lato', sans-serif;
}

#menu
{
    background-image: url(img/pasek.png);
	width: 100%;
	height: 50px;
    text-decoration: none;
    -webkit-box-shadow: 0px 0px 42px 14px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 42px 14px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 42px 14px rgba(0,0,0,0.75);
}

.logo
{
    border: 5px;
    float: left; 
    margin-left: 10px;
}

a
{
    text-decoration: none; 
    color: #ffffff;
}

.linki
{
    float: left;
    margin:0 auto;
    text-align:center;
}

.option
{
    height: 30px;
    text-align: center;
	float: left;
	min-width: 100px;
	font-size: 22px;
    padding: 3px;
}

.option:hover
{
	background-color: #098fed;
    width= 100%;
    height= 100%;
	cursor: pointer;
}

komentarz 16 października 2016 przez Ehlert Ekspert (212,670 p.)

Jestem fanem tego co robisz

2 odpowiedzi

odpowiedź 16 października 2016 przez lateM Pasjonat (17,660 p.)

Włącz sobie jakiś kurs, poczytaj. To są podstawy podstaw. Jak poznasz odpowiedź, jak rozmieścić te elementy, to za kilka minut znów będziesz potrzebował pomocy, bo nie będziesz potrafił rozmieścić kontenerów...

Do dzieła! http://webkod.pl/

Poczytaj o marginesach i paddingu.

1	komentarz 16 października 2016 przez Wejder0107 Początkujący (280 p.) Dzięki za pomoc! Znając życie jak byś napisał jak to zrobić tylko bym skopiował a tak nauczyłem się więcej.

komentarz 16 października 2016 przez lateM Pasjonat (17,660 p.)

Cieszy mnie to!

odpowiedź 16 października 2016 przez pablop76 VIP (123,180 p.)

Menu zbuduj za pomocą listy Kurs CSS odc. 3: Rozwijane, przyklejane menu główne (sticky), Kurs HTML odc. 4: Listy, automatyczne przewijanie strony. Jeżeli chodzi o rozmieszczenie elementów Kurs HTML odc.2: Budowanie struktury strony www Potem wróć do tematu.