Witam, mam tego rodzaju problem.W lekcji projektowana jest strona o linux.Mam problem z divami topbarL oraz Sidebar.Na filmie graficznie przedstawione są one jako divy o tej samej szerokości, w trakcie filmu dokładnie to widać (51:00). W kodzie jednak nie mają tej samej szerkości ponieważ Sidebar ma 148px a topbarL 138px, padding w obu przypadkach jest taki sam i wynosi 20px.Nie wiem gdzie popełniam bład ,ale po przepisaniu kodu dokładnie z lekcji one mi się nie schodża pionowo ( na filmie się schodzą), dopiero gdzy zmienię szerokość sidebar na 138 px to wszytsko wygląda jak należy...Dlaczego?
To jest mój kod:
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: 44px;
letter-spacing: 3px;
font-weight: 900;
}
#menu
{
background-color: #303030;
margin-top: 20px;
color: #ffffff;
padding: 10px;
}
#topbar
{ background-color:#128870;
color:white;
padding: 10px;
margin-top: 20px;
margin-bottom: 25px;
height:170px
}
#topbar_right
{
float:left;
padding: 20px;
width: 760px;
font-size: 16px;
text-align: justify;
}
#topbar_left
{
float:left;
padding: 20px;
width: 138 px;
text-align:center;
border-right: 2px dotted #cccccc;
}
#sidebar
{
float:left;
width: 138px;
min-height: 620px;
padding: 20px;
background-color: lightgray;
text-align: center;
font-size: 18px;
border-right: 2px dotted #666666;
}
#content
{
float: left;
width: 740px;
min-height: 580 px;
padding: 40px;
background-color: #dedede;
text-align: justify;
}
#footer
{
clear:both;
}
.option
{
float: left;
min-width:50px;
height:25px;
font-size: 18px;
padding: 10px;
border-right:2px dotted #444444;
opacity:0.8;
}
.option:hover
{
background-color: #000000;
cursor:pointer;
}
...na filmie jednak szerokość sidebar wynosi 148px ....jeśli ustawie taką szerokość to strona nie wygląda tak jak w lekcji
...i HTML
<!DOCTYPE HTML>
<html lang="pl">
<html>
<meta charset="utf-8"/>
<title>Poznaj Linuxa :)</title>
<meta name="description" content="Serwis poświęcony systemowi Linux, naucz się wszytkiego co chcesz wiedzieć o systemie Linuxie!"/>
<meta name="keywords" content="linux, kurs, nauka, co to jest linux, ubuntu, debian, mint, instalacj alinux, polecenia, terminal, bash" />
<link rel="stylesheet" href="style.css" type="text/css"
<link href="https://fonts.googleapis.com/css?family=Lato:400,900&subset=latin-ext" 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 pojekcie</div>
<div style="clear:both"></div>
</div>
<div id="topbar">
<div id="topbar_left">
<img src="linux.png"/>
</div>
<div id="topbar_right">
O projekcie słów kilka<br/>
Kiedy mówisz:"Napisałem program, który wywalił Widows, luidzie gapią sie na Ciebie głupkowato i mówią : Hej ja dostałem to wraz z systemem, za darmo" - Linus Torvalds, twórca Linuxa :) Zapraszamy do zapoznania się z witryną dzięki której dowiesz sie co to jest Linux i wybierzesz dystrybucje dla siebie.
</div>
<div style="clear:both"></div>
</div>
<div id="sidebar" >
Strona główna <br/>
Dystrybucje <br/>
Instalacja<br/>
Polecenia<br/>
Linus Torvalds<br/>
O pojekcie
</div>
<div id="content">
Dlaczego Linux </br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis erat eget tortor luctus gravida. Nunc sed auctor metus, in hendrerit lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam interdum est et justo venenatis aliquet. Cras vel libero id velit fermentum condimentum ac eu libero. Donec neque metus, pulvinar at ultrices at, venenatis quis velit. Integer urna libero, gravida ac nulla vel, placerat cursus nibh. Cras in metus eget orci vestibulum aliquam. Curabitur et tempor quam. Quisque pellentesque nulla eleifend tellus sodales posuere. Curabitur nibh mauris, hendrerit malesuada tincidunt vel, semper ut sem. Morbi nec vestibulum justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse feugiat turpis libero, sit amet hendrerit sapien semper id. Aliquam varius lacus quis vehicula eleifend. Fusce suscipit malesuada scelerisque.
</br></br>
Suspendisse congue fermentum urna, ut bibendum risus tristique a. Nullam molestie fringilla arcu quis tristique. Quisque malesuada et lectus sit amet ultrices. Nullam eleifend, orci eget tempus dictum, risus dolor dapibus diam, posuere lacinia urna libero auctor elit. Pellentesque mollis sem vel gravida porttitor. Aliquam commodo, risus a ullamcorper aliquet, odio nulla laoreet dui, at tempor turpis ipsum id leo. Ut a ligula quis felis viverra rutrum et non nunc. In lobortis posuere tellus, sit amet egestas est bibendum in. Nam dignissim sem eu dui commodo tristique. Aliquam consequat mauris sit amet mauris faucibus, ac porttitor ipsum aliquet. Integer dapibus, ex nec blandit placerat, elit eros commodo eros, ac sollicitudin dui quam ut nibh. In at luctus ex.
</br></br>
Mauris iaculis, purus vel accumsan porta, felis ipsum consequat mauris, eu sodales nunc enim ac ipsum. Aliquam tellus massa, blandit ut molestie sodales, sodales nec lectus. Cras facilisis lorem elit. Suspendisse luctus gravida elit ac tempus. Ut eu eleifend dui. Phasellus eget nulla orci. In eu pharetra libero. Sed eu tortor volutpat, volutpat felis id, rutrum nunc.
</div>
<div id="footer">
Poznaj Linuxa - najlepszy darmowy system operacyjny.Strona w sieci od 2016r. © Wszelkie prawa zasrtrzone.
</div>
</body>
</html>
