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

Element nav obejmuje inne elementy

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
160 wizyt
pytanie zadane 19 czerwca 2016 w HTML i CSS przez Skory Początkujący (290 p.)

Element nav obejmuje inne elementy - section i aside. Możecie wskazać mi błąd? Bo już nie wiem o co może chodzić..

body {
    background:silver;
    }

header {
    background:yellow;
    text-align:center;
    }

nav {
    float:auto;
    border:1px solid black;
    }

nav ul {
    list-style-type:none;
    background:blue;
    }

nav li {
    display:block;
    float:left;
    }

nav a {
    color:olive;
    }

nav ul .inner {
    padding:10px;
    text-align:center;
    }

nav .inner li {
    padding:10px;
    width:40px;
    height:20px;
    }

#wrapper {
    width:100%;
    }

section {
    float:left;
    width:75%;
    background:dimgray;
    }

section .inner {
    padding:10px;
    }

aside {
    float:left;
    width:25%;
    background:green;
    }

aside .inner {
    padding:10px;
    }

 

1 odpowiedź

0 głosów
odpowiedź 19 czerwca 2016 przez hasket11 Użytkownik (770 p.)
Dodaj kod HTML, ale z tego co widzę to nie masz zdefiniowanych wysokości
komentarz 19 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)
A po co ustawiać na sztywno wysokość?
komentarz 19 czerwca 2016 przez Skory Początkujący (290 p.)

HTML wydaje mi się być ok pod tym względem, ale proszę bardzo.. :) jak z tym ustawianiem wysokości?

<DOCTYPE html>
<html lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
    <h1>Tekst...</h1>
</header>
<nav>
    <ul class="inner">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
        <li><a href="#">Link4</a></li>
        <li><a href="#">Link5</a></li>
    </ul>
</nav>
<div class="wrapper">
<section>
    <article class="inner">
    <p>Lorem ipsum dolor sit amet magna. Etiam vulputate, arcu vel libero. Etiam volutpat eu, sem. Nam at turpis. Duis gravida, eros et posuere eget, aliquam ut, eleifend nunc sit amet felis. Maecenas pretium, diam ac dignissim tempor, sapien sed enim porttitor dui. Morbi tincidunt. Fusce porttitor, quam at mauris et ultrices tincidunt, velit malesuada dolor. Nam ipsum. Pellentesque habitant morbi tristique magna. Integer hendrerit tellus tortor, pretium eget, dapibus sit amet, nonummy diam neque sollicitudin leo at urna tellus dolor libero et magnis dis parturient montes, nascetur ridiculus mus. Curabitur interdum. Suspendisse fermentum laoreet, lacus non adipiscing quam placerat semper, enim quis lectus urna dapibus tellus. Donec interdum mi porttitor elementum. Mauris magna lectus, vel tortor. Donec elementum at, volutpat aliquam vehicula est. Maecenas interdum mi at magna porttitor vel, arcu. Etiam vel sollicitudin vitae, tempus dignissim. Donec adipiscing vitae, vestibulum sapien, non dolor. Sed ut lobortis cursus aliquet. In arcu ac pede. Cras a odio. Nullam ut justo vel sodales tempor. Phasellus a metus. Vestibulum ut felis. Quisque ut justo sem, lobortis volutpat. Praesent quis mauris. Nullam luctus, enim.</p>
</section>
<aside>
    <p class="inner">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum.</p>
</aside>
</div>
</body>
</html>

 

komentarz 19 czerwca 2016 przez hasket11 Użytkownik (770 p.)
Kto powiedział, że na sztywno?

Jaki efekt Ty chcesz uzyskać, żeby ta nawigacja była na żółtym tle?
komentarz 19 czerwca 2016 przez Skory Początkujący (290 p.)
Chodzi mi o ułożenie (od góry):

nagłówek (żółte tło) -> nawigacja ->

section i aside (obok siebie).

Nie mam jakiegoś konkretnego planu, chciałbym tylko załapać robienie poziomego nav'u
komentarz 19 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)
edycja 19 czerwca 2016 przez xmentor

Usuń to:

nav ul .inner {
    padding:10px;
    text-align:center;
}
 
nav .inner li {
    padding:10px;
    width:40px;
    height:20px;
}

I to z: nav li

    display:block;
    float:left;

następnie dla: nav ul nadaj

display:flex;
justify-content:center;

Jak chcesz ogarnąć flexbox, wejdz tu: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

edit:

Jak używasz float to musisz później wyczyścić to opływanie by następne elementy układały się właściwie - wygoogluj "clearfix"

komentarz 19 czerwca 2016 przez Skory Początkujący (290 p.)
Dzięki :)

Podobne pytania

0 głosów
1 odpowiedź 586 wizyt
pytanie zadane 9 lipca 2020 w HTML i CSS przez gmcode Gaduła (3,140 p.)
0 głosów
1 odpowiedź 139 wizyt
pytanie zadane 16 października 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)
0 głosów
1 odpowiedź 230 wizyt

93,191 zapytań

142,206 odpowiedzi

322,042 komentarzy

62,518 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 3053p. - dia-Chann
  2. 2998p. - Łukasz Piwowar
  3. 2993p. - Łukasz Eckert
  4. 2970p. - CC PL
  5. 2930p. - Tomasz Bielak
  6. 2907p. - Łukasz Siedlecki
  7. 2890p. - rucin93
  8. 2584p. - Adrian Wieprzkowicz
  9. 2536p. - Mikbac
  10. 2485p. - Marcin Putra
  11. 2418p. - Michal Drewniak
  12. 2239p. - Michał Telesz
  13. 2156p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1650p. - Mariusz Fornal
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...