Witam,
Jest to mój pierwszy post na tym forum, mimo, że czytam go już od dłuższego czasu, to do tej pory nie było potrzeby zakładania konta.
Zacząłem uczyć się HTML CSS i robię taką prostą stronę z tematyką poczty polskiej, żeby przede wszystkim dobrze nauczyć się podstaw.
Oto mój kod HTML
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Poczta cennik</title>
<meta name="description" content="piekne proste wzory" />
<meta name="keywords" content="poczta, polska, cennik" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href='https://fonts.googleapis.com/css?family=Lato:400,700italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="container">
<div id="logo">
<div id="poczta">
Poczta Polska
</div>
<div id="nawigacja">
<div class="lista">Strona główna</div>
<div class="lista">O firmie</div>
<div class="lista">Centrum Prasowe</div>
<div class="lista">Kontakt</div>
<div class="lista">EN</div>
<div style="clear:both"></div>
</div>
</div>
<div id="menu">
<div class="option">Paczki i listy</div>
<div class="option">Finanse</div>
<div class="option">E-usługi </div>
<div class="option">Filatelistyka</div>
<div class="option">Biznes</div>
<div class="option">Rodzina 500+</div>
<div class="option">Poczta przez internet</div>
<div class="option">eCommerce</div>
<div style="clear:both"></div>
</div>
<div id="sidebar">
<div class="sb">Informacje</div>
<div class="sb">Kalkulator usług krajowych</div>
<div class="sb">Kalkulator usług zagranicznych</div>
<div class="sb">Druki pocztowe</div>
</div>
<div id="content">
<img src="img/poczta.png" alt="Poczta" align="left"/>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Vonsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <br /><br />
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<h1>Cnsectetur adipiscing elit</h1>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="footer">
Poczta Polska Spółka Akcyjna, ul. Rodziny Hiszpańskich 8, 00-940 Warszawa NIP: 525-000-73-13, KRS: 0000334972 Sąd Rejestrowy: Sąd Rejonowy dla m.st. Warszawy kapitał zakładowy: 774.140.000, w całości wpłacony
</div>
</div>
</body>
</html>
CSS:
body{
background-color: lightgrey;
font-family: 'Lato', sans-serif;
font-size: 15px;
color: white;
}
#container{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#logo{
background-color: white;
border: 1px solid black;
height: 50px;
}
#poczta{
float: left;
color: red;
font-size: 40px;
letter-spacing: 5px;
font-weight: 900;
margin-left: 10px;
}
#poczta:hover{
color: blue;
cursor: pointer;
}
#nawigacja{
float: right;
color: green;
padding: 10px;
}
#menu {
background-color: red;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
.option {
float: left;
height: 20px;
font-size: 15px;
padding: 15px;
border-right: 2px dotted white;
}
.option:hover{
background-color: white;
cursor: pointer;
color: red;
}
#sidebar{
background: red;
margin-up: 10px;
float: left;
height: 500px;
}
.sb{
padding: 5px;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}
.sb:hover{
background-color: white;
color: red
}
.lista{
float: left;
padding: 5px;
}
.lista:hover{
color: red;
cursor: pointer;
}
#content{
color: black;
background-color: white;
height: 500px;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
#footer{
clear: both;
border: 1px solid green;
background-color: grey;
text-align: center;
}
Czy mógłby mi ktos pomóc z tym marginesem odstającym od diva "container"? Wczesniej miałem go przylegajacy do "menu" a po dodatniu artykułu z <h1> i <p> przesunął mi się razem z footerem w dół.
Druga sprawa - jak mogę rozciągnąć zawartosć menu na całego diva i usunąć ostatnią kropkowaną linię"dotted"?
Pozdrawiam serdecznie
