• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Problem z divami i ich wyśrodkowaniem

VPS Starter Arubacloud
0 głosów
429 wizyt
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ź

+1 głos
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ł :\

komentarz 15 sierpnia 2018 przez smokolisz Mądrala (6,340 p.)
wstaw aktualny kod
komentarz 15 sierpnia 2018 przez Marcin Ficek Obywatel (1,090 p.)
Już zaktualizowany.

Podobne pytania

0 głosów
1 odpowiedź 300 wizyt
0 głosów
2 odpowiedzi 155 wizyt
pytanie zadane 21 lipca 2022 w HTML i CSS przez NetSavage Nowicjusz (120 p.)
+1 głos
1 odpowiedź 233 wizyt
pytanie zadane 1 maja 2016 w HTML i CSS przez koder12345 Obywatel (1,570 p.)

92,417 zapytań

141,222 odpowiedzi

318,983 komentarzy

61,831 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...