Problem z divami i ich wyśrodkowaniem

pytanie zadane 15 sierpnia 2018 w Sieci komputerowe, internet przez Marcin Ficek Obywatel (1,090 p.)
edycja 15 sierpnia 2018 przez Marcin Ficek

Cześć,

Robię stronę internetowę według tych poradników:

https://www.youtube.com/watch?v=2nWSCxIpHfc&index=3&list=PLOYHgt8dIdox9Qq3X9iAdSVekS_5Vcp5r

https://www.youtube.com/watch?annotation_id=annotation_134540271&feature=iv&src_vid=2nWSCxIpHfc&v=RJEKMbD_kEk

Niestety mi coś nie wychodzi. Z jakiegoś powodu divy się nie stosują do tego by być na środku... Ech, trudno to wyjaśnić, może wkleję mój kod:

<!DOCTYPE HTML>
<html lang="pl">
 
<head>
         <meta charset = "utf-8" /> 
         <title> TOP 5 technologii webowych </title>
         <meta name ="description" content="TOP 5 obowiązkowych technologii przy tworzeniu strony internetowej. Jeśli zaczynasz naukę, musisz tu zajrzeć!" />
         <meta name ="keywords" content="js, java, script, html, html5, web, website, site, strona, css, php, mysql, sql, java script, javascript, internetowa, technologia, bootstrap" />
         <meta http-equiv ="X-UA-Compatible" content="IE=edge, chrome=1" />
         <link rel="stylesheet" href="style.css" type="text/css" />
          
</head>
 
 
<body>
 
<div id="container">
 
    <div id="logo">
    <h1>TOP 5 technologii webowych</h1>
    </div>
     
    <div id="nav">
        <h3> 
        <a target="_blank" href="https://www.youtube.com/watch?v=k2IydkL3EOs&list=PLOYHgt8dIdox9Qq3X9iAdSVekS_5Vcp5r&index=2">HTML</a>
        <br>
        <a target="_blank" href="https://www.youtube.com/watch?annotation_id=annotation_134540271&feature=iv&src_vid=2nWSCxIpHfc&v=RJEKMbD_kEk">CSS</a>
        <br>
        <a target="_blank"  href="https://www.youtube.com/watch?v=OcwON22ctYc&list=PLOYHgt8dIdoxTUYuHS9ZYNlcJq5R3jBsC">JavaScript</a>
        <br>
        <a target="_blank" href="https://www.youtube.com/watch?v=tD0Q5QwoQJI&index=2&list=PLOYHgt8dIdox81dbm1JWXQbm2geG1V2uh">PHP</a>
        <br>
        <a target="_blank" href="https://www.youtube.com/watch?v=99JAI24Zd24&list=PLOYHgt8dIdoymv-Wzvs8M-OsKFD31VTVZ">MySQL</a>
        </h3>
     
    </div>
 
    <div id="content">
        Wymienię na tej stronie 5 najważniejszych i potrzebnych technologii webowych. Każdy szanujący się webmaster powinien je znać. Dodam przy nich również odpowiednie tutoriale i opisy. Zaczynajmy!
    </div>
     
    <div id="ad">
        <img src="reklama.jpg"/>
     
    </div>
     
    <div id="footer">
        Najważniejsze technologie webowe - TOP 5 &copy; Wszelkie prawa zastrzeżone
    </div>
     
</div>
 
 
<!-- 
<h1>TOP 5 technologii webowych</h1>
 
<h3> 
<a target="_blank" href="https://www.youtube.com/watch?v=k2IydkL3EOs&list=PLOYHgt8dIdox9Qq3X9iAdSVekS_5Vcp5r&index=2">HTML</a>
<br>
<a target="_blank" href="https://www.youtube.com/watch?annotation_id=annotation_134540271&feature=iv&src_vid=2nWSCxIpHfc&v=RJEKMbD_kEk">CSS</a>
<br>
<a target="_blank"  href="https://www.youtube.com/watch?v=OcwON22ctYc&list=PLOYHgt8dIdoxTUYuHS9ZYNlcJq5R3jBsC">JavaScript</a>
<br>
<a target="_blank" href="https://www.youtube.com/watch?v=tD0Q5QwoQJI&index=2&list=PLOYHgt8dIdox81dbm1JWXQbm2geG1V2uh">PHP</a>
<br>
<a target="_blank" href="https://www.youtube.com/watch?v=99JAI24Zd24&list=PLOYHgt8dIdoymv-Wzvs8M-OsKFD31VTVZ">MySQL</a>
 
</h3>*/
-->
 
</body>
 
         
</html>

body
{
        background-color: white;
        font-family: Verdana;
        font-size: 20px;
        color: white;
         
}
 
 
/*divy*/
 
<style>
 
#container
{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
     
}
 
#logo
{
        background-color: black;
        color: white;
        text-align: center;
        width: 1000px;
         
}
 
#nav
{
        background-color: lightgray;
        color: white;
        text-align: center;
        float: left;
        min-height: 620px;
        padding: 10px;
        width: 120px;
}#content
{
        background-color: white;
        color: black;
        text-align: center;
        float: left;
        min-height: 620px;
        padding: 20px;
        width: 640px;
}#ad
{
        background-color: lightgray;
        color: white;
        text-align: center;
        float: left;
        padding: 10px;
        min-height: 620px;
        width: 160px;
}
 
#footer
{
        clear: both;
        background-color: black;
        text-align: center;
         
        width: 1000px;
         
}
 
/*link nieodwiedzony*/
 
a:link
{
    color: yellow;
}
 
/*link odwiedzony*/
 
a:visited
{
    color: yellow;
}
 
/*link na którym jest kursor*/
 
a:hover
{
    color: red;
}

W teorii powinno działać. Wszystkie divy znajdują się w divie "container" i powinny być po nim wyśrodkowane, ale nie są. Widać to dobrze na załączonym scrrenshot'cie:

Jak na to poradzić? Z góry dziękuję za pomoc :)

komentarz 15 sierpnia 2018 przez niezalogowany

o matko, masz coś takiego jak elementy do wstawiania kodu w edytorze tutaj...

komentarz 15 sierpnia 2018 przez Marcin Ficek Obywatel (1,090 p.)

Oj, nie zauważyłem. Już poprawione.

1 odpowiedź

odpowiedź 15 sierpnia 2018 przez smokolisz Mądrala (6,340 p.)
wybrane 15 sierpnia 2018 przez Marcin Ficek

Najlepsza

Po usunięciu <style> na początku i domknięciu ostatniego nawiasu u mnie jest wyśrodkowane
Spróbuj wyczyścić dane przeglądanie w chrome więcej narzędzi > wyczyść dane przeglądania. Może przeglądarka nie zaczytuje świeżego css?
Pozdrawiam

komentarz 15 sierpnia 2018 przez Marcin Ficek Obywatel (1,090 p.)

Nie dokońca. Ten <style> to fakt, błąd, ale niestety ostatni nawias w CSS to poprostu niedokładnie skopiowałem. Teraz wygląda to jeszcze gorzej:

komentarz 15 sierpnia 2018 przez smokolisz Mądrala (6,340 p.)

Bo elementy nie mieszą ci się w kontenerze, kliknij sobie zbadaj element i najeżdżaj na poszczególne elementy, zobaczysz wtedy, że container ma 1000px szerokości, a samo logo ma 1030px, stało się tak przez źle ustawione padding, czyli jak masz width 1000px na logo i 15px z obu stron padding to razem daje 1030px i się nie mieści. Tak jest ze wszystkimi elementami. Dla zobrazowania tego usuń padding z tego elementu który powinien być po prawej, ten z reklamą. Zobaczysz, że wskoczy na swoje miejsce :)

komentarz 15 sierpnia 2018 przez Marcin Ficek Obywatel (1,090 p.)

Rzeczywiście! Wielkie dzięki! Kopiowałem szerokość z kursu, ale może się trochę pomyliłem oraz wiem już w jaki sposób. Jeszcze raz wielkie dzięki i pozdrawiam

komentarz 15 sierpnia 2018 przez smokolisz Mądrala (6,340 p.)

Jak chcesz, żeby jakiś element miał padding to musisz mu odjąć piksele z szerokości pamiętając, że jeżeli ustawisz padding dla jakiegoś elementu 50px to ten element tak naprawde będzie o 100px "grubszy"

komentarz 15 sierpnia 2018 przez Marcin Ficek Obywatel (1,090 p.)
edycja 15 sierpnia 2018 przez Marcin Ficek

Ech... to chyba jednak nie to. W końcu obliczyłem dokładnie i wszystko ma 1000 px. Zdaje mi się, że chyna te "divy" nie są w divie "container", ponieważ mniejsze divy, jeśli nie mają ograniczenia to rozrastają się na całą stronę i do siebie nie przylegają.

Tak to teraz wygląda:

Dobrym przykładem będzie to, że pan Mirosław użył paddingu na logu i nie przekroczył 1000px, mój przekroczył :\