Ramka i procentowy podział strony

pytanie zadane 13 listopada 2016 w HTML i CSS przez Dynamic Bywalec (2,910 p.)

Witam mam zadanie na stworzenie strony:

w zadaniu pisze że menu ma zajmować 40% a zawartość podstron 60% jak dodać te ramki w koło elementów żeby się nie przesuneły mój kod:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
    <img src="baner.png" alt="">
    <div class="menu">
        <h1>MENU</h1>
    <ol>
        <li><a href="">Opis</a></li>
        <li><a href="">Jaka to liczba?</a></li>
        <li><a href="">Liczby czałkowite z zakresu</a></li>
    </ol>
    </div>
    <div class="zawartosc">
        <p>PESEL: xxxx</p>
    </div>
    </div>

</body>
</html>

CSS:

*
{
    margin: 0;
    padding: 0;
}
.container
{
    width: 1200px;
    margin: auto;
    background-color: aqua;
	font-size: 18px;
	font-family: Arial;
}
.container img
{
	display: block;
}

.menu
{
    width: 40%;
    height: 350px;

    float:left;
}
.zawartosc
{
    width: 60%;
    height: 350px;

    float:left;
}
.zawartosc p
{
    margin: 10px;
}
.menu ol
{
    list-style-type: none;
    margin: 10px;
}
.menu h1
{
    margin: 10px;
}
.menu ol a
{
    color: black;
    text-decoration: none;
    display: block;
}

3 odpowiedzi

odpowiedź 13 listopada 2016 przez marioosu Dyskutant (9,260 p.)

odpowiedź 13 listopada 2016 przez Pietrak Pasjonat (18,850 p.)

box-sizing: border-box; poczytaj jak działa
ramki dodaj za pomoca border: 1px solid black;
Menu to ul, nie ol
Zamiast div:
- dla class="menu" - nav
- class="zawartosc" - main
dlaczego lang="en" jak to strona po polsku?
menu to nie h1. To powinien być h2, a h1 to baner.jpg z alt="matematyka"

komentarz 13 listopada 2016 przez Dynamic Bywalec (2,910 p.)

dlaczego banner to h1?

w technikum nie uczą mnie systematyki kodu HTML'a 5 Jak używałem np nav lub article to nie wiedieli o co chodzi ;<

komentarz 13 listopada 2016 przez Pietrak Pasjonat (18,850 p.)

Ale po co się uczyć złych praktyk? Za wiedzę chyba nikt Ci oceny nie obniży.

H1 to tylko tytuł strony. Kolejne sekcję powinny mieć nagłówki niższe.

odpowiedź 13 listopada 2016 przez Dynamic Bywalec (2,910 p.)

kolejny problem to:

Mały margines po obu stronach:

CSS

*
{
    margin: 0;
    padding: 0;
}
.container
{
    width: 1200px;
    margin: auto;
    background-color: aqua;
	font-size: 18px;
    box-sizing: border-box;
    border: 1px solid #000;
	font-family: Arial;
}
.container img
{
	display: block;
    width: 100%;
}

.menu
{
    width: 40%;
    height: 350px;
    box-sizing: border-box;
    float:left;
    box-sizing: border-box;
    border: 1px solid #000;
    border-right: none;
    
}
.zawartosc
{
    width: 60%;
    height: 350px;
    box-sizing: border-box;
    border: 1px solid #000;
    float:left;
}
.zawartosc p
{
    margin: 10px;
}
.menu ul
{
    list-style-type: none;
    margin: 10px;
}
.menu h2
{
    margin: 10px;
}
.menu ul a
{
    color: black;
    text-decoration: none;
    display: block;
}

komentarz 14 listopada 2016 przez jaca121212 Nałogowiec (40,760 p.)
edycja 14 listopada 2016 przez jaca121212

Tutaj masz przykładowe rozwiązanie.

http://jsbin.com/mohexiyova/1/edit

komentarz 14 listopada 2016 przez Dynamic Bywalec (2,910 p.)

Mógłbyś wytłumaczyć dlaczego gdy zamknąłem zdjęcie w header i edytowałem kod na taki:

.container
{
    width: 1200px;
    margin: auto;
	font-size: 18px;
	font-family: Arial;
}
header{
  width:100%;
  display:block;
  border:1px solid black;
  box-sizing: border-box;
}
header img{
  width:100%;
}

marginesy znikneły ?

komentarz 14 listopada 2016 przez jaca121212 Nałogowiec (40,760 p.)

Dla container-a ustawiłeś statyczną szerokość tego elementu

w nim masz kolejny element header on za pomocą display:block;

został zablokowany tak abysię nie przemieszczał względem obok elementu w nim ustawioną masz ramkę 1 px , ten element masz na 100% szerokości czyli praktyczne na 1200 px jeśli usuniesz box-sizing:border-box; to do 1200+4 =1204px;

ten element box-sizing: border-box; robi za zadanie aby te 4 px zostały doliczone do tych 1200px.

Tak ja to interpretuje.