Witam,
Rozwiązuję właśnie zadanie z kursu CSS #2. Nie wiem, niestety gdzie robię błąd. Otóż mój plik css, ani html nie różni się od kodu pisanego przez Pana Mirosława (w pliku css napisałem float: left, przy sidebar i content, aby te pudełka były obok siebie, a wychodzi coś takiego:
Div sidebar I div container powinny wyglądać tak:
Kod CSS:
body
{
background-color: #404040;
font-family: 'Lato', sans-serif;
}
#container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo
{
color: white;
margin-top: 20px;
font-size: 48px;
letter-spacing: 3px;
font-weight: 900;
}
#menu
{
background-color: #303030;
margin-top: 20px;
color: white;
padding: 10px;
}
#topbar
{
background-color: #039c36;
color: white;
padding: 10px;
margin-top: 20px;
margin-bottom: 25px;
height: 170px;
}
#topbarL
{
float: left;
padding: 20px;
width: 138px;
text-align: center;
border-right: 2px solid #cccccc
}
#topbarR
{
float: left;
padding: 20px;
width: 760px;
font-size: 16px;
text-align: justify;
}
#sidebar
{
float: left;
width: 150px;
min-height: 620px;
padding: 20px;
background-color: lightgray;
text-align: center;
font-size: 18px;
border-right: 2px solid #666666;
}
#content
{
float: left;
padding: 40px;
width: 730px;
background-color: #dedede;
min-height: 580px;
text-align: justify;
}
#footer
{
clear: both;
}
.option
{
float: left;
min-width: 50px;
height: 25px;
font-size: 18px;
padding: 10px;
border-right: 2px solid #444444;
opacity: 0.8;
}
.option:hover
{
background-color: #202020;
cursor: pointer;
}
Kod HTML:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title> Poznaj Linuxa :) </title>
<meta name="description" content="Serwis poświęcony systemowi Linux. Naucz się wszystkiego , co chcesz wiedzieć o Linuxie!" />
<meta name="keywords" content="linux, kurs, nauka, poznaj" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;900&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="logo">
Poznaj Linuxa :)
</div>
<div id="menu">
<div class="option"> Strona główna</div>
<div class="option">Dystrybucje </div>
<div class="option">Instalacja </div>
<div class="option">Polecenia</div>
<div class="option">Linus Torvalds </div>
<div class="option">O projekcie</div>
<div style="clear:both"></div>
</div>
<div id="topbar">
<div id="topbarL">
<img src="linux.png" />
</div>
<div id="topbarR">
<br/><br/>
O projekcie słów kilka <br/>
Kiedy mówisz: "Napisałem program, który wywalił Windows, ludzie gapią się na Ciebie głupkowato i mówią: "Hej, ja dostastałem to wraz z systemem, za darmo"-Linus Torvalds, twórca Linuxa"
</div>
<div style="clear:both"></div>
</div>
<div id="sidebar">
Strona główna <br/>
Dystrybucje <br/>
Instalacja <br/>
Polecenia <br/>
Linus Torvalds <br/>
O projekcie
</div>
<div id="content">
Dlaczego Linux? <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem mi, venenatis vel laoreet sit amet, congue eu urna. Sed tincidunt sagittis turpis at convallis. Etiam nibh dolor, feugiat vitae hendrerit vitae, varius in eros. Sed mollis scelerisque felis quis ornare. Sed et scelerisque lacus. Integer rhoncus ante enim, et volutpat velit vestibulum maximus. Sed turpis mi, aliquam a imperdiet sit amet, bibendum at lorem. Donec molestie elementum ultrices. Nunc enim tellus, mollis quis volutpat quis, pulvinar sit amet risus.
<br/><br/>
Vestibulum tincidunt rutrum pulvinar. Curabitur mattis, ex sit amet gravida lacinia, enim tortor vehicula augue, ultricies auctor orci eros vitae est. Duis vel malesuada dui. Morbi libero erat, porttitor vitae mi a, tincidunt feugiat turpis. Maecenas sit amet molestie tellus. Vestibulum non lorem ullamcorper nulla ultrices interdum nec aliquam nulla. Donec et urna vel neque dictum tincidunt vitae pharetra purus. Duis consectetur ac est ac gravida. Sed viverra elit feugiat mollis porta. Etiam mattis, nunc sit amet accumsan mattis, felis felis ultricies erat, non semper massa leo nec nibh. In velit nisi, ornare a efficitur in, aliquet quis massa.
<br/><br/>
Nulla suscipit neque sit amet consequat hendrerit. Nam sed metus maximus, gravida velit id, laoreet turpis. Maecenas et dignissim magna. Phasellus at lobortis orci, vitae facilisis ipsum. Vestibulum vehicula pulvinar diam a maximus. Donec at vulputate tortor, at hendrerit eros. Fusce placerat nisl commodo nisi gravida elementum. Suspendisse accumsan urna porta dolor gravida vehicula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
<div id="footer">
Poznaj Linuxa - najlepszy darmowy system operacyjny. 2020 © Wszelkie prawa zastrzeżone
</div>
</div>
</body>
</html>
Wybrałem edytor tekstu Atom.io, gdyż używam macOS'a. Podaje to mimo, że uważam, że to nie ma znaczenia.
Chodzi o to, aby za pomocą float, pudełka sidebar i content były obok siebie.
Proszę o naprowadzenie mnie, w jakim momencie robię błąd.
Pozdrawiam :)
