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

Nav - display:inline-block

Object Storage Arubacloud
0 głosów
364 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,180 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ź 101 wizyt
pytanie zadane 20 maja 2020 w HTML i CSS przez webowyamator Nowicjusz (120 p.)
0 głosów
3 odpowiedzi 1,004 wizyt
pytanie zadane 23 lutego 2017 w HTML i CSS przez Karol Loczeski Użytkownik (820 p.)
0 głosów
1 odpowiedź 622 wizyt
pytanie zadane 2 stycznia 2019 w HTML i CSS przez Strugaczka Początkujący (260 p.)

92,757 zapytań

141,679 odpowiedzi

320,437 komentarzy

62,101 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

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!

...