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

Nav - display:inline-block

VPS Starter Arubacloud
0 głosów
353 wizyt
pytanie zadane 5 lipca 2018 w HTML i CSS przez Jarver Użytkownik (820 p.)

Witam :) To znów ja ze swoimi problemami. Tym razem problemy z navigacją. Odwzorowuje stronę w ramach nauki i mam problem z nav'em, tą navigacją aby ją odwzorować tak jak tam jest. Inspektor mowi że zrobili to flexem, ale ja nie chce go używać, ani grida. Zrobiłęm własną siatkę (albo raczej skopiowałem jej wartości z przykładu) i z niej korzystam przy odwzorowywaniu strony (w ramach treningu). Ale nie wiem jak mam zrobić tego nava żeby był taki jak u nich czyli: opcje wyboru rozciągnąć w tym navie aby były na całej szerokości, zrobić między kolejnymi opcjami odstęp, nie wiem jak by też zrobić height tego nava inaczej niż przez podanie dokładnej wartości (np.height:50px). A to przy skalowaniu strony psuje responsywność (chyba odpada), co więcej jezeli nie dodam dokładnego heightu, mam problem jak ustawić potem wartość dla a:hover tych linków wewnątrz menu, aby background-color podświetlenia był wysoki na wysokość navu. :/

Przepraszam jeżeli będzie coś niezrozumiałe... Kiepski ze mnie opisywator :) W razie pytań, o co mi chodzi pytajcie :D Pozdrawiam MIchał ;)

Wklejam header + jego formatowanie, może łatwiej bedzie zobaczyc jak to wyglada :)

<header> <!-- Struktura zaczynam od hedera w kotrym umieszcze tytul strony+logo i nawigacje  -->
    <div class="about"> <!--Czesc hedera górna z nazwa strony mottem i linkami -->
        <h1>
            <a href="/Grid">Grid by Example</a>
        </h1>
        <p>Everything you need to learn CSS Grid Layout</p>
    </div>
    <div class="twitter">
        <div class="TwitterLink">Ptoszek Follow @rachelandrew </div>
        <div class="TwitterInfo">36.4k followers</div>
    </div>
    <nav>
        <ul>
            <li><a href="">Start Here</a></li>
            <li><a href="">Examples</a></li>
            <li><a href="">Patterns</a></li>
            <li><a href="">Video Tutorial</a></li>
            <li><a href="">Resources</a></li>
        </ul>
    </nav>
</header>
header {
  position:relative;
  color: white;
  background-color: rgba(0, 0, 0, 0.98);
  background-image: url("/img/tlo.png");
  h1 {
    a {
      color: white;
      text-decoration: none;
    }
    a:hover{
      color:white;
      text-decoration:none;
    }
  }
  .about{
    line-height: 1.2;
    padding: 100px 10% 40px;
  }
  .twitter{
    position:absolute;
    top:20px;
    right:15px;
    .TwitterLink{
      background-color:#1b95e0;
      border-radius:10px;
      padding:5px;
      display:inline-block;
    }
    .TwitterInfo{
      background-color:white;
      color:black;
      padding:5px;
      border-radius:10px;
      display:inline-block;
    }
  }
  nav {
    background-color:  rgba(207, 205, 205, 0.6);
    ul {
      list-style-type: none;
      text-align:center;
      li {
        padding:10px 20px;
        display:inline-block;
        a {
          display:block;
          font-weight:bold;
          color: black;
          text-decoration: none;
          transition: background-color .5s;
          -webkit-transition: background-color .5s;
          &:hover{
            background-color:rgba(219, 219, 219, 0.6);
          }
        }
      }
    }
  }
}

Ps. Sorrcia za formatowanie CSSa ale SCSSa używam no i zagnieżdżam jak tylko się da :P 

2 odpowiedzi

+1 głos
odpowiedź 5 lipca 2018 przez Konrad Fx Mądrala (6,910 p.)

Najpierw dodaj do elementu li wartość float:left ustawi to inne pozycjonowanie i wszystkie elementy będą po tym w jednej linji. Jeśli chodzi o równomierne rozmieszczenie elementów bez użycia flexboxa to od razu przestrzegam że jest to uciążliwe, trzeba wtedy wszystkie używane przez nas wartości liczyć w głowie tak aby wszystkie paddingi, marginy i width ze sobą pięknie współgrały. Użył bym tu bez dwóch zdań flexboxa ale jeśli jakimś cuden woliś się pomęczyć proszę bardzo ;) 

Po dodaniu float zauważysz zapewne że position ze static zmieniła się na absolutną i elementy nie zostaną już pokkryte backgroundem, musisz tylko ustawić wysokość elemenu nav

Poniżej kod który dodałem a pod nim link do twojego przerobionego cedepena

ul{
  list-style-type: none;
}
li{
  float:left;
  margin: 10px;
  padding: 5px;
}
nav {
  height: 50px;
  background-color: #333;
}
a{
  text-decoration:none;
  color: white;
}

 

Codepen

https://codepen.io/anon/pen/Yvbmrv

 

Pozdro :)

+1 głos
odpowiedź 5 lipca 2018 przez pablop76 VIP (123,060 p.)
edycja 6 lipca 2018 przez pablop76
<nav>
<ul>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
  <li>a</li>
</ul>
</nav>
body{
  background-color: #000;
  color: #fff;
}
nav{
   background-color: grey;
}
ul{
  width: 80%;
  margin: 0 auto;
  padding: 0px;
  list-style-type: none;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  font-size: 0px;
}
ul:after {
  content: "";
  width: 100%;
  display: inline-block;
}
li{
  padding: 10px 20px;
  border: 1px solid red;
  display: inline-block;
  font-size: medium;
  text-align: center;
}

justowanie ma miejsce dla każdego wiersza z wyjątkiem ostatniego, równanego do lewej. Stąd potrzeba posiadania dodatkowej linii, którą zapewnia :after

Podobne pytania

0 głosów
1 odpowiedź 94 wizyt
pytanie zadane 20 maja 2020 w HTML i CSS przez webowyamator Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 870 wizyt
pytanie zadane 23 lutego 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)
0 głosów
1 odpowiedź 587 wizyt
pytanie zadane 2 stycznia 2019 w HTML i CSS przez Strugaczka Początkujący (260 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 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!

...