Element nav obejmuje inne elementy

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ź

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ź 571 wizyt

Po najechaniu na przyciski nav rusza element pod spodem

pytanie zadane 9 lipca 2020 w HTML i CSS przez gmcode Gaduła (3,140 p.)

0 głosów

1 odpowiedź 135 wizyt

Pojawiający się span na stronie, gdy inne elementy są ukryte

pytanie zadane 16 października 2022 w HTML i CSS przez jasper93 Obywatel (1,310 p.)

0 głosów

1 odpowiedź 230 wizyt

Inne elementy oparte o pozycjonowanie float:left przejmują animację pierwszego elementu

pytanie zadane 6 listopada 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

Element nav obejmuje inne elementy

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

Advent of Code 2024

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci