HTML i CSS na firefox, a chrome

pytanie zadane 29 kwietnia 2018 w HTML i CSS przez Bartocho Nowicjusz (120 p.)

Witam serdecznie i cieszę się że zechciałeś mi pomóc :D

Robię stronę podobną do tej z poradnika HTML odcinek 5 i będąc gdzieś tak w połowie postanowiłem zrobić margin-bottom dla menu na górze. Jak się okazuje na firefox wszystko elegancko się obniżyło jednak na chromie bez zmian. Co więcej po zmianie nazwy diva zarówno w szablonie html jak i css w chromie wszystko się wysypuje, a na firefox działa elegancko. Czy ktoś może wie, w czym tkwi problem?

2 odpowiedzi

odpowiedź 29 kwietnia 2018 przez Paweł123 Nałogowiec (33,540 p.)

Pokaż kod źródłowy ;)

komentarz 29 kwietnia 2018 przez Bartocho Nowicjusz (120 p.)

To tylko do pasku nawigacji:

#nawigacja
 {
     width: 100%;
     padding: 10px 0;
     background-color: #A52A2A;
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     height: 40px;
     text-align: center;
     margin-bottom: 20px;





 }

ol
{
    padding: 0;
    margin: 0;
    list-style-type: none; /*usuwa kropki i kwadraty w liście*/
    font-size: 18px;
    height: 35px;
    line-height: 200%;
    display: inline-block;
    cursor: pointer;

}

ol a /*hiperłącza do ol*/
{
    color: white;
    text-decoration: none;
    display: block; /*zachowuj się jak div*/
}

ol > li
{
    float: left;
    width: 150px;
    height: 40px;
}

ol > li:hover > a
{
    color: black;
}


ol > li > ul
{
    list-style-type: none; /*usuwa kropki, cyfry*/
    padding: 0;
    margin: 0;
    height: 40px;
    display: none; /*niewyświetlanie listy ul*/
}

ol > li > ul > li
{
    background-color: #A52A2A;
    position: relative; /*elementy listy zasłaniają treść*/
    z-index: 100; /*zasłania wszystko, obrazki, inne divy itp*/
    opacity: 0.9;
}

ol > li > ul > li:hover > a
{
    color: black;
}

ol > li:hover > ul /*odkrywa listę po najechaniu*/
{
    display: block; /*pozuje jako element blokowy*/
}

Index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Obiektywni.pl</title>
    <meta name="description" content="wiadomości, sport, sztuka, muzyka, piłka nożna, gry, koszykówka, fakty, plotki, polityka, wydarzenia">
    <meta name="author" content="Bartosz Stachowski i Konrad Faliński">
    <!-- aby działało na szystkich przeglądarkach: -->
    <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">


    <link rel="stylesheet" href="Index.css">
    <link rel="stylesheet" href="nawigacja.css">

</head>
<body>

    <header>

        <h1 class="logo">obiektywni.pl</h1>

        <nav>
            <div id="nawigacja">
                <ol>
                    <li><a href="Index.html">Strona główna</a></li>
                    <li><a href="#">Opcja 1</a>
                        <ul>
                            <li><a href="#">Opcja 1.1</a> </li>
                            <li><a href="#">Opcja 1.2</a> </li>
                            <li><a href="#">Opcja 1.3</a> </li>
                            <li><a href="#">Opcja 1.4</a> </li>
                        </ul>
                    </li>
                    <li><a href="#">Opcja 2</a>
                        <ul>
                            <li><a href="#">Opcja 2.1</a> </li>
                            <li><a href="#">Opcja 2.2</a> </li>
                            <li><a href="#">Opcja 2.3</a> </li>
                            <li><a href="#">Opcja 2.4</a> </li>
                        </ul>
                    </li>
                    <li><a href="#">Opcja 3</a>
                        <ul>
                            <li><a href="#">Opcja 3.1</a> </li>
                            <li><a href="#">Opcja 3.2</a> </li>
                            <li><a href="#">Opcja 3.3</a> </li>
                            <li><a href="#">Opcja 3.4</a> </li>
                        </ul>
                    </li>
                    <li><a href="#">Opcja 4</a>
                        <ul>
                            <li><a href="#">Opcja 4.1</a> </li>
                            <li><a href="#">Opcja 4.2</a> </li>
                            <li><a href="#">Opcja 4.3</a> </li>
                            <li><a href="#">Opcja 4.4</a> </li>
                        </ul>
                    </li>
                </ol>
            </div>
        </nav>

        <main>
            <article>
                <section>
                    <div class="polecane"> <!--  diw z wpisami    -->





                        <div class="glowny"> <!--największy-->
                            <figure>
                                <a href="#"><img src="img/diament.jpg"> </a>
                            </figure>
                        </div>


                        <div class="glowne"> <!--pozostałe-->
                            <figure>
                                <a href="#"><img src="img/devops.jpg"> </a>
                            </figure>
                        </div>

                        <div class="glowne"> <!--pozostałe-->
                            <figure>
                                <a href="#"><img src="img/milo.jpg"> </a>
                            </figure>
                        </div>

                        <div class="glowne"> <!--pozostałe-->
                            <figure>
                                <a href="#"><img src="img/polityk1.jpg"> </a>
                            </figure>
                        </div>

                        <div class="glowne"> <!--pozostałe-->
                            <figure>
                                <a href="#"><img src="img/polityk2.jpg"> </a>
                            </figure>
                        </div>

                        <div class="glowne"> <!--pozostałe-->
                            <figure>
                                <a href="#"><img src="img/skarbonka.jpg"> </a>
                            </figure>
                        </div>

                        <div class="glowne"> <!--pozostałe-->
                            <figure>
                                <a href="#"><img src="img/ukraina.jpg"> </a>
                            </figure>
                        </div>

                        <div class="glowny"> <!--pozostałe-->
                            <figure>
                                <a href="#"><img src="img/agent.jpg"> </a>
                            </figure>
                        </div>



                    </div>
                </section>
        </main>
    </header>



</body>
</html>

No i index.css, jeśli to też potrzebne:

body
{
    margin: 0;
    background: #191d21;
    color: #efefef;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
}

h1.logo
{
    font-size: 44px;
    font-weight: 700; /*pogrubienie czcionki*/  /**/
    color: #ddd;
    text-align: center;
    text-transform: uppercase; /*duże litery*/
    letter-spacing: 10px; /*odstęp między literami*/
    margin-top: 50px;
    margin-bottom: 40px;
}



.polecane
{
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    text-align: center;
    padding: 0;
}


.glowny
{
    display: inline-block;
    width: 750px;

}

.glowne
{
    display: inline-block;
    width: 360px;
    padding-right: 12px;
    padding-left: 12px;

}