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

Menu przeskakujące do drugiego wiersza przy zmnijeszeniu okna przeglądarki

Object Storage Arubacloud
+1 głos
364 wizyt
pytanie zadane 12 kwietnia 2016 w HTML i CSS przez Egoist Nowicjusz (220 p.)
Cześć Wszystkim,

Jestem bardzo świeży w temacie programowania. Właściwie to jedyna styczność moja z tym tematem to kurs htmal/css na kanale pasji informatyki, to tak tytułem wstępu.
 Pisząc kod z razem z Panem Mirosławem strony "retrogranie" dobrnąłem do końca leczy przy zmniejszeniu okna przeglądarki menu, które było zrobione w formie listy rozjechało się, tj z jednego wiersza zrobiły się dwa. Im bardziej zwężę okno przeglądarki tym więcej elementów listy przechodzi pod spód. Gdzie powinienem szukać błędu?

2 odpowiedzi

+2 głosów
odpowiedź 12 kwietnia 2016 przez Pietrak Pasjonat (18,850 p.)
wybrane 12 kwietnia 2016 przez Eryk Andrzejewski
 
Najlepsza
W kodzie, którego nie podałeś.
1
 komentarz 12 kwietnia 2016 przez Egoist Nowicjusz (220 p.)
A faktycznie,

 

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    
    <title>Retrogranie </title>
    
    <meta name="description" content="Serwis o starych grach pochodzących z Nintendo Entertaiment System" />
    <meta name="keywords" content="gry, komputerowe, retro, nes, konsole, retrogranie, stare gry" />
    
    <link href="style.css" rel="stylesheet" type="text/css"/>
    
    <link href='https://fonts.googleapis.com/css?family=Lato:300,100,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
    
    <link href="css/fontello.css" rel="stylesheet" type="text/css"/>
    
</head>

<body>

    <div class="wrapper">
    
      <div class="header">
        
        <div class="logo">
        
          <img src="nes.png" height="70px" width="70px"
           style="float: left;" />
           
          <span style="color: #c34f4f;">
          retro</span>granie.com
          <div style="clear:both;"></div>
        </div>
        
      </div>
      
      <div class="nav">
      
        <ol>
            <li><a href="#"> Strona Główna </a></li>
            <li><a href="#"> Klasyki NES </a></li>
            <li><a href="#"> Gry filmowe </a></li>
            <li><a href="#"> Bijatyki </a></li>
            <li><a href="#"> Gry Sportowe </a></li>
            <li><a href="#"> O autorach </a></li>
        </ol>
        
      </div>
      
      <div class="content">
      

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis pharetra sollicitudin. Aliquam sit amet odio risus. Maecenas dolor justo, egestas quis euismod dapibus, efficitur eget dui. Aliquam accumsan eros sit amet metus viverra, in facilisis massa vulputate. Sed orci lorem, egestas id odio id, tristique pharetra tellus. Aenean et placerat erat, eu euismod velit. Nulla diam erat, vulputate eu libero non, lobortis posuere magna. Suspendisse pharetra ex neque, id porta tortor aliquam quis. Morbi justo mi, tristique non dui quis, lobortis condimentum nisl. Quisque a elementum mauris. Nullam ultricies urna at magna auctor pellentesque. Suspendisse auctor varius libero, eget vestibulum augue tincidunt sit amet. Suspendisse ultrices venenatis ligula, a efficitur mauris commodo sit amet. Sed sollicitudin faucibus risus. Nullam ut finibus neque. Donec semper nulla nec feugiat porta.</p>

        <p>Curabitur fringilla auctor arcu eget varius. Vestibulum eros neque, pharetra efficitur sem at, tristique auctor turpis. Donec nec dignissim lacus. Aliquam egestas, nisi varius maximus placerat, nunc mauris lobortis nulla, ut faucibus velit enim et velit. Nulla eget risus ut nibh mattis suscipit. Mauris quis luctus risus. Duis sit amet sapien sagittis lectus lobortis mattis quis id lorem.</p>

        <p>Sed eget eros urna. Maecenas nunc nisl, molestie non condimentum vel, rutrum sed orci. Nam aliquam ultrices enim, at feugiat lectus tincidunt vel. Praesent sit amet sapien posuere, aliquam nulla eu, luctus turpis. Cras sodales ex orci, at tincidunt turpis bibendum vel. Ut dignissim tortor fringilla massa rhoncus, in fringilla ante tristique. Cras vel ex arcu. Nam molestie lorem a purus ornare finibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent aliquam fringilla nisl. Aliquam erat volutpat. Curabitur a porta leo. Donec nec faucibus neque. Duis convallis vulputate mi in pharetra. In leo dui, elementum ut lacus eget, vulputate cursus mauris. Fusce vulputate, tellus non euismod vestibulum, orci elit porta libero, nec pellentesque libero risus sollicitudin justo.</p>

        <p>Nunc luctus consectetur ligula, nec aliquam dui accumsan et. Vivamus vehicula augue dui, ac malesuada eros molestie eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam pharetra, ligula non porta dictum, purus tellus consectetur lorem, ullamcorper molestie justo nisl vitae diam. Phasellus convallis lorem eget metus vestibulum dictum. Duis porta dignissim dapibus. Vivamus lobortis vehicula tempor. Nulla placerat vestibulum purus, a feugiat velit convallis eu. Fusce ac sodales massa, at vulputate quam. Donec vestibulum, lacus at sollicitudin tempor, dolor diam iaculis neque, vitae rutrum libero nisi sit amet nunc. Proin ligula mi, commodo non arcu et, pulvinar suscipit dolor. Ut venenatis vitae risus vitae laoreet. Sed eu massa est.</p>

        <p>Nunc faucibus, orci sit amet eleifend maximus, lectus nulla dapibus orci, quis hendrerit lorem ipsum vel velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pulvinar lacus metus, eget aliquam ipsum consectetur at. In hac habitasse platea dictumst. Sed pharetra, magna non egestas tempus, sem sapien interdum felis, vel finibus dolor risus vel metus. Maecenas fermentum lacus sem, quis sollicitudin ante sagittis quis. Sed semper, ligula ac tempor cursus, ex justo facilisis lorem, sed cursus odio ex vitae mauris. Vestibulum non leo eget sem laoreet porttitor. Sed nec purus sed velit auctor rhoncus. Suspendisse vulputate sollicitudin nulla eu laoreet. Ut aliquam elit sed porta fermentum. Nunc sed facilisis nibh, quis pretium lorem. </p>
      </div>
      
      <div class="socials">
        <div class="socialdivs">
            
            <div class="fb">
                <i class="icon-facebook-1"></i>
            </div>
            
            <div class="yt">
                <i class="icon-youtube"></i>
            </div>
            
            <div class="tw">
                <i class="icon-twitter-bird"></i>
            </div>
            
            <div class="gplus">
                <i class="icon-gplus"></i>
            </div>
            
            <div style="clear:both;"></div>
        </div>
      
      </div>
      
      <div class="footer">
        Retrogranie.com &copy; Thank you for your visit Mario! But our princess is in another castle!
      </div>
    
    </div>

    <script href="jquery-2.2.3.min.js"></script>  <-- to zaniechałem, js to jeszcze dla mnie zbyt wiele

</body>

</html>
 komentarz 12 kwietnia 2016 przez Pietrak Pasjonat (18,850 p.)
Prosimy na http://codepen.io/
 komentarz 12 kwietnia 2016 przez Egoist Nowicjusz (220 p.)
Nie wiem czy robie to poprawnie, próbuję.
http://codepen.io/Egoiste/pen/yOvWjg
 komentarz 12 kwietnia 2016 przez jpacanowski VIP (101,940 p.)
Wiedziałem, że po prostu RWD nie ma...
 komentarz 12 kwietnia 2016 przez Tnifey Pasjonat (24,190 p.) 
/* nie używaj tego */
body
{
    overflow-x: scroll;
    width: 1000px;
}

sobie pomyśl że każdy element w menu jest takim bloczkiem który ma określoną szerokość i może się nie mieścić w oknie przeglądarki.

To też może być problemem że nie robisz strony responsywnej (@media) tylko pracujesz tylko na % lub co gorsza! ale co ja się tam znam :)

 

 komentarz 12 kwietnia 2016 przez jpacanowski VIP (101,940 p.) 
body
{
    overflow-x: scroll;
    width: 1000px;
}

Jeśli chcesz aby strona była responsywna to zamiast width:1000px powinno być np. max-width:1000px

 komentarz 12 kwietnia 2016 przez jpacanowski VIP (101,940 p.) 
overflow-x: scroll;

a to wtedy wywal.

0 głosów
odpowiedź 12 kwietnia 2016 przez jpacanowski VIP (101,940 p.)
edycja 12 kwietnia 2016 przez jpacanowski 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

To jest już niepotrzebne, możesz to usunąć. Dotyczy to bardzo starych wersji IE.

<meta name="description" content="Serwis o starych grach pochodzących z Nintendo Entertaiment System" />

Plus za meta description

<img src="nes.png" height="70px" width="70px"
           style="float: left;" />

Nie dodawaj jednostki "px" do wartości atrybutów [width] i [height], bo to HTML, a nie CSS. Prawie każdy tu robi to samo. Gdzie to widziałeś? :)

<div class="nav">

Używaj nowych tagów HTML5, tutaj: <nav>

      <div class="socials">
        <div class="socialdivs">
            
            <div class="fb">
                <i class="icon-facebook-1"></i>
            </div>
            
            <div class="yt">
                <i class="icon-youtube"></i>
            </div>
            
            <div class="tw">
                <i class="icon-twitter-bird"></i>
            </div>
            
            <div class="gplus">
                <i class="icon-gplus"></i>
            </div>
            
            <div style="clear:both;"></div>
        </div>
      
      </div>

To powinna być lista.

I nie używaj <div style="clear:both;"></div>
Po prostu wystarczy do klasy .socials dodać overflow:hidden;

<div class="footer">
        Retrogranie.com &copy; Thank you for your visit Mario! But our princess is in another castle!
      </div>

A tu użyj tagu <footer>

<script href="jquery-2.2.3.min.js"></script>  <-- to zaniechałem, js to jeszcze dla mnie zbyt wiele

Hehe, nie ma to jak na zapas, szablonowo, dodawać bibliotekę jQuery, jakby bez tego strona nie miała prawa zadziałać ;D

Polecam tutorial Semantyczny blog w HTML5
http://tutorials.comandeer.pl/html5-blog.html

 komentarz 12 kwietnia 2016 przez Egoist Nowicjusz (220 p.)
Dziękuję Panowie, robiłem to krok po kroku za kursem yt, przy jv odpuściłem bo to było za wiele stąd ta biblioteka :)
Pan Mirosław nie stosował oznaczeń z 5 dlatego użyte te divy.
Tnifey nie wiem co tam było nie tak, ale dzięki i pewnie jak poczytam to zrozumiem co miałeś na myśli.
Panowie możecie mi powiedzieć jak skutecznie uczyć się programowania? Z jaką kolejnością zabierać się za języki. Czytam te kursy, coś próbuję ale bez nauczyciela ciężko. Etap szkoły i studiów mam za sobą, pozostaje droga samouka. Jakieś sugestie? Książki itd, czy to bez sensu na początku?
Pozdrawiam, świeżak
 komentarz 12 kwietnia 2016 przez jpacanowski VIP (101,940 p.)
Jeśli interesuje ciebie webdev to najpierw dobrze opanuj HTML5 i CSS3. Daj sobie chwilę czasu, a potem bierz się za JavaScript ;)
 komentarz 12 kwietnia 2016 przez jpacanowski VIP (101,940 p.)

http://forum.pasja-informatyki.pl/19205/jak-sie-uczyc-html5-css3-i-js?show=122385#a122385

1
 komentarz 12 kwietnia 2016 przez Egoist Nowicjusz (220 p.)
Super, dzięki! Materiałów aż nadto. W pracy dużo czasu wolnego to będę miał co robić, miło trafić na forum z uprzejmymi ludźmi. Dobrej nocy!

Podobne pytania

+1 głos
1 odpowiedź 979 wizyt
html-css przyklejony pasek menu do przeglądarki.
pytanie zadane 12 września 2018 w HTML i CSS przez ZbyszekB Nowicjusz (150 p.)
0 głosów
1 odpowiedź 127 wizyt
Przy powiekszaniu okna przeglądarki powiększa się całe menu
pytanie zadane 29 listopada 2021 w HTML i CSS przez TheDarkSide Użytkownik (930 p.)

92,579 zapytań

141,432 odpowiedzi

319,664 komentarzy

61,964 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...