Skocz do zawartości
Pecetowicz Forum komputerowe

Rozmieszczenie elementów w nawigacji CSS


Rekomendowane odpowiedzi

Hejka wszystkim.

Mam pewne pytanko dotyczące CSS'a. W jaki sposób mogę rozmieścić elementy w nawigacji, które są zamieszczone w liście np. aby logo znajdowało się po prawej stronie, Strona Główna oraz Oglądaj na środku a Rejestracja z Logowaniem po prawej stronie. Dołączam zdjęcie oraz kod źródłowy. Pozdrawiam i dziękuje za zainteresowanie

Kod html :


<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Strona poświęcona rozgrywką piłkarskim. Udostępniony strumień w czasie rzeczywistym z aktualnym meczem.">
    <meta name="keywords" content="piłka nożna, mecze, rozgrywki, piłkarskie, stream, na żywo">
    <meta name="author" content="Rafał Podraza">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow" rel="stylesheet">
    <title>MY SPORT</title>
</head>
    <body>
        <div id="container">
            <div id="nav">
                <ol>
                    <li><img src="img/logo.png" alt="Logo"></li>
                    <li><a href="#">Strona Główna</a></li>
                    <li><a href="#">Oglądaj</a></li>
                    <li></li>
                    <li class="right"><a href="#">Zaloguj</a></li>
                    <li><a href="#">Zarejestruj</a></li>
                </ol>
            </div>
            <div class="section1"></div>
            <div class="section2"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

Kod CSS:


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Slabo 27px', serif;
}
body {
    font-size: 20px;
}
#container {
    max-width: 100%;
    max-height: auto;
    margin-left: auto;
    margin-right: auto;
}
#nav {
    width: 100%;
    height: auto;
    background-color: #10253D;
    padding: 24px 18px;
    text-align: center;
}
#nav > ol {
    display: inline-block;
    list-style-type: none;
    margin: 0 auto;
}
#nav > ol > li {
    float: left;
    margin-right: 20px;
    line-height: 130px;
}
#nav > ol > li.right {
}
#nav > ol > li img {
    width: 40%;
}
#nav > ol > li > a {
    display: block;
    text-decoration: none;
    font-family: 'PT Sans Narrow', sans-serif;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
}

Odnośnik do odpowiedzi
Udostępnij na innych stronach

Znajdź:

<div id="container">
            <div id="nav">
                <ol>
                    <li><img src="img/logo.png" alt="Logo"></li>
                    <li><a href="#">Strona Główna</a></li>
                    <li><a href="#">Oglądaj</a></li>
                    <li></li>
                    <li class="right"><a href="#">Zaloguj</a></li>
                    <li><a href="#">Zarejestruj</a></li>
                </ol>
            </div>

zmień na:

<div id="container">
  <img src="img/logo.png" alt="Logo">
            <div id="nav">
                <ol>
                    <li></li>
                    <li><a href="#">Strona Główna</a></li>
                    <li><a href="#">Oglądaj</a></li>
                    <li></li>
                    <li class="right"><a href="#">Zaloguj</a></li>
                    <li><a href="#">Zarejestruj</a></li>
                </ol>
            </div>
Edytowane przez ShanonWEB
  • Lubię to! 1
Odnośnik do odpowiedzi
Udostępnij na innych stronach

Problem wciąż nierozwiązany? Dodaj swoją odpowiedź

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto. Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • Podobna zawartość

    • Przez SupremumSEO
      czesc, mam pytanko do was - mam problem z moja nowa stronka. wgralem ja na serwer, ale pozniej zorientowalem sie ze copywriter odbebnil swoja robote byle jak i teksty po czesci byly splagiatowane. zajelo mi tydzien ich poprawienie, wgralem nowe, ale google nie reaguje i strona spada. co moge z tym zrobic?
    • Gość
      Przez Gość
      Witam. Postanowiłem uczyć się PHP itd., a najlepiej wg mnie uczyć się w praktyce, więc zacząłem pisać sobie stronę. Część HTML i CSS skończyłem, więc teraz zaczynają się niewiadome i czarna magia. 
      Zawsze mnie zastanawiało jak wygląda struktura strony gdzie są skrypty PHP wczytywane z bazy danych i zewnętrznych plików (newsy, komentarze itd.). Więc, nie wiedząc kompletnie nic, przerobiłem index.php na stronę gdzie wszystko jest includowane z zewnętrznych plików (header.php, navigation.php, news.php [co obecnie robi za treść strony głównej] i footer.php). I w zasadzie nie wiem jak to poprawnie rozwiązać. Myślałem, by może czymś co znam pod nazwą $_GET przeładowywać treści index.php, że np. kliknięcie w link "Regulaminy" zamieni include news.php w include regulamin.php czy coś, ale tak jak mówię, niewiele się na tym znam. 
    • Przez Marves
      Witam. Mam takie pytanie, chciałbym aby cała tabelka, czyli nawigacja, licznik prędkości, zbiornik paliwa itp. znajdował się na górze ekranu w poziomej tabelce. Szukałem takowej opcji w ustawieniach, ale za nic nie mogę tego znaleźć. Byłbym wdzięczny za każdą pomoc. 

    • Przez paulinkkaa
      Chcialabym najlepiej jakiś konkretny kurs Wordpressa odnosnie SEO i pozycjonowania w Google.
      Mozecie cos prosze polecic?
×
×
  • Dodaj nową pozycję...