Komenda background-color nie zajmuje całego diva.Przerabiałem kurs 2 CSS po dłuższej przerwie. Na początku trochę na luzie "zgapiałem", ale w pewnym momenice (ok 38 min) zauważyłem, że moje tło menu wyświetla się tylko nad napisami, opcje w menu są na tle głównym. Zacząłem trochę kombinować. W końcu sprawdzałem krok po kroku i to jest finalna, nie działająca wciąż wersja. Podaję najpierw plik css, a potem html
Plik CSS:
body
{
background-color: grey;
color: #ffffff;
font-family: 'Lato', sans-serif;
}
#conteiner{
width: 1200px;
margin-left: auto;
margin-right: auto;
}
#logo{
color: white;
margin-top: 20px;
font-size: 44px;
letter-spacing: 3px;
font-weight: 900;
}
#menu{
background-color: black;
margin-top: 20px;
color: white;
padding: 10px;
}
#topbar{
}
#sidebar{
}
#content{
}
#footer{
}
.option{
float: left;
min-width: 50px;
height: 25px;
font-size: 18px;
padding: 10px;
border-right: 2px dotted #444444;
}
HTML
<!DOCKTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<title>Latina maka</title>
<meta name="keywords" content="Karol, CV, życiorys" />
<meta http-equiv="X-UA-Compatible" content=IE=edge, chrome=1/>
<meta name"description" content="Zrobię dla Ciebie najlepszą stronę"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,900,900i&subset=latin-ext" rel="stylesheet" type='text/css'/>
</head>
<body>
<div id="conteiner" >
<div id="logo">
Dux wulgx
</div>
<br/><br/><br/><br/>
<div id="menu">
<div class="option" >Consequat </div>
<div class="option" >Elementum</div>
<div class="option" >Molestie </div>
<div class="option" >Magnis</div>
<div style="float: both;" width="0" height="0"> </div>
</div>
<br/><br/><br/><br/>
<div id="topbar">
Lorem ipsum dolor sit amet <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet consequat magna, vitae venenatis magna. Nullam sodales, augue sit amet tincidunt consequat, ante orci imperdiet sem, non porttitor ante urna pellentesque dui. Sed imperdiet feugiat ligula non faucibus. In vulputate ac sem euismod condimentum. Nulla vehicula in dolor a imperdiet. Fusce elementum faucibus elit, a molestie justo finibus ut. Curabitur et fermentum erat. Donec egestas facilisis pharetra. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque auctor dictum elit id mollis. Fusce ligula purus, iaculis facilisis vestibulum in, lacinia ut sem. Vestibulum sed efficitur massa, a vulputate mauris. Nunc eget tortor id neque feugiat vestibulum a ut mi. Phasellus tempor orci nec lectus faucibus, iaculis ornare mauris interdum.
</div>
<div id="sidebar">
Strona gøowna<br/> Podstawowka<br/> Gimbaza<br/> O mnie
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi euismod rhoncus mi sed vehicula. Integer vel metus nunc. Duis pharetra aliquet ligula, vestibulum convallis massa finibus eu. Nullam pretium non purus non ultricies. Curabitur nec nunc ante. Cras viverra, ex id porttitor aliquet, massa erat dignissim felis, sed dignissim augue felis eu velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<br/><br/>
Duis fringilla ante id suscipit feugiat. Quisque lectus velit, tincidunt ut molestie sed, consequat in enim. Phasellus lacinia nunc ac vestibulum auctor. Pellentesque gravida lacus eget odio imperdiet sagittis. Integer molestie felis ut risus vehicula hendrerit. Praesent placerat sapien nec leo dictum, eget tempor libero ultricies. Aliquam tristique augue nec leo viverra auctor. Suspendisse tincidunt, lacus vel tristique bibendum, dui massa ultricies urna, ac pellentesque ligula nisi nec sem. Praesent luctus nibh sed arcu gravida vestibulum convallis at urna. Quisque tincidunt erat arcu, nec ultricies sapien dictum id. Nunc eu arcu iaculis, gravida est id, blandit arcu. Pellentesque et sem nibh. Sed interdum suscipit magna, ut sollicitudin lectus lacinia eget. Aliquam erat volutpat.
<br/><br/>
Nullam neque lectus, consectetur vel dignissim sit amet, suscipit at sem. Sed commodo neque massa. Phasellus leo sem, mollis vel consectetur a, facilisis at ex. Aliquam luctus ante vitae scelerisque vestibulum. Suspendisse interdum diam ut magna finibus imperdiet. In varius quam turpis, a dignissim nisi consectetur quis. Quisque ac dolor at dui lobortis gravida at et libero. Aenean fermentum diam nec nunc pellentesque sagittis. Nulla lorem sapien, facilisis sed hendrerit eget, laoreet ac nisi. Curabitur sed varius felis, dignissim dignissim ante. In dapibus non mi id tincidunt. Donec urna tortor, ultricies eget ipsum ullamcorper, venenatis rhoncus diam. Integer vehicula felis quam, et molestie purus molestie ac.
</div>
<div id="footer">
Najlepsza osoba nStrona roku super hupea conetiner ma kakaszu © Wzelkie prawa zastrzezone
</div>
</div>
</body>
</html>