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

Strona się rozpada przy zmniejszaniu okna

VPS Starter Arubacloud
0 głosów
391 wizyt
pytanie zadane 21 maja 2017 w HTML i CSS przez sonewbie Użytkownik (690 p.)
Czy można w jakiś sposób zakodować, aby wszystko się na stronie nie rozpadało, tylko skalowało razem ze zmniejszaniem okna? (wszystkie menu, artykuły, itp). Obecnie menu się zawija w dół i traci kolory, a tekst zostaje za ramką.

2 odpowiedzi

0 głosów
odpowiedź 21 maja 2017 przez Dzemtenjem Bywalec (2,660 p.)
wybrane 21 maja 2017 przez sonewbie
 
Najlepsza
Poczytaj o responsywności. W CSS można stosować media-query dzięki czemu ustawisz nieco inny styl dla różnej wielkości ekranów. W przeglądarce możesz testować jak Twoja strona układa się na telefonach/ tabletach za pomocą narzędzi pod F12, w chromie nazywa się to device-toolbar bodajże, taka ikonka dwóch ekranów.
0 głosów
odpowiedź 21 maja 2017 przez Lu Kiss Dyskutant (7,600 p.)
aha

u mnie się chowa ale jak przewijam pojawia się magicznie

stary kod podaj, mam się domyśleć ?
komentarz 21 maja 2017 przez sonewbie Użytkownik (690 p.)

A, sorki, wydawalo mi sie ze nie trzeba :P

index.html

<!DOCTYPE HTML>
<html lang="pl">
<head>
    
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title>XXX</title>
    
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="css/fontello.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Great+Vibes|Playfair+Display:400,700&amp;subset=latin-ext" rel="stylesheet">
	
</head>

<body>
    
	<div class="container">
        <div class="header">
            
            <div class="logo">
                <img src="kolo.png" style="vertical-align: middle;"/> 
                XYZ
                <div style="clear:both;"></div>
            </div>
        </div>
    
    <div class="nav">
    
        <ol>
        
            <li>Menu 1
                <ul>
                    <li>Podstrona 1</li>
                    <li>Podstrona 2</li>
                </ul>
            </li>
            
            <li>Menu 2
                <ul>
                    <li>Podstrona 3</li>
                    <li>Podstrona 4</li>
                </ul>
            </li>
            
            <li>Menu 3
                <ul><li>Podstrona 5</li>
                    <li>Podstrona 6</li>
                    <li>Podstrona 7</li>
                    <li>Podstrona 8</li>
                </ul>
            </li>
            
            <li>Menu 4
            </li>
            
            <li>Menu 5
            
            </li>
            <li>Menu 6
            </li>
            <li>Menu 7
            </li>
            
        </ol>
    
    </div>
    
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nibh neque, id pellentesque elit fermentum id. Nulla id arcu auctor, malesuada ipsum eu, varius diam. Duis aliquam aliquet tortor. Maecenas sagittis eget lacus quis faucibus. Praesent venenatis pellentesque metus, sed facilisis nisi ullamcorper non. Vivamus viverra eget mi ut ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam at interdum sem. Mauris in tortor ultrices, consectetur mauris vel, venenatis ipsum. Duis tempus, felis ac mollis commodo, quam purus consectetur nunc, eu egestas lacus libero in elit.</p>
        
            <p>Phasellus et tristique justo, id imperdiet mauris. Mauris felis ipsum, commodo ut lorem laoreet, vulputate finibus sapien. Sed luctus purus commodo nisi dapibus, at tristique ipsum aliquam. In ullamcorper, eros sed maximus gravida, risus ante accumsan ipsum, non mattis nisl libero a nunc. Suspendisse efficitur neque ac ullamcorper facilisis. Vestibulum vel condimentum turpis, in pellentesque arcu. Fusce non pulvinar lectus. Aliquam leo turpis, aliquam ut lobortis eu, accumsan et magna. In at fringilla neque. Aliquam aliquam ultrices leo convallis laoreet. Vestibulum mollis quis sapien ac vehicula. Mauris venenatis, elit ac pulvinar pretium, odio libero maximus tortor, non hendrerit mi tortor eu nisi. Quisque non quam orci. Curabitur quis nulla id neque commodo dignissim id sed sem. Curabitur rhoncus tellus ut lectus scelerisque, eget cursus leo ultrices. Cras id auctor eros. Curabitur imperdiet augue nec dictum scelerisque. Proin nec neque vitae orci porttitor porttitor. Quisque nec varius mauris. Duis luctus nec orci ac pharetra. Sed auctor semper metus, eget blandit tellus cursus vitae.</p>
        
            <p>Integer pretium orci ac massa bibendum congue in laoreet tortor. Mauris ac leo lacus. Donec vitae magna ligula. Quisque ligula nisi, consectetur tempor porta eu, laoreet id metus. Etiam ac lacinia lacus. Proin vitae porttitor turpis, sed pellentesque neque. Maecenas finibus tincidunt molestie. Donec consequat nibh blandit magna rhoncus venenatis.</p>

            <p>Phasellus pulvinar ante fermentum odio porttitor condimentum. Nulla sapien est, posuere ac molestie at, accumsan ut mauris. Suspendisse auctor tortor vitae mi maximus suscipit. Aenean bibendum est at mi gravida, tincidunt feugiat risus ultrices. Suspendisse posuere porta mauris, ut porttitor massa interdum et. Mauris at porta nisi, eget imperdiet nunc. Nam scelerisque, orci venenatis facilisis interdum, nulla est scelerisque eros, et tincidunt odio libero et nibh. Sed consequat rhoncus tellus, a porttitor metus elementum vitae. Sed tortor est, tristique nec nisl non, dignissim venenatis augue. Nulla pretium dapibus sapien sed dapibus. Ut a lectus vitae risus varius porttitor. Quisque vel lacinia dui. Cras porta viverra dui eu vulputate. Quisque vel lacinia purus.</p>
    </div>
    
	<script src="jquery-3.2.1.min.js"></script>

    <script>
        $(document).ready(function() {
        var NavY = $('.nav').offset().top;

        var stickyNav = function(){
        var ScrollY = $(window).scrollTop();

        if (ScrollY > NavY) { 
            $('.nav').addClass('sticky');
        } else {
            $('.nav').removeClass('sticky'); 
        }
        };

        stickyNav();

        $(window).scroll(function() {
            stickyNav();
        });
        });
    </script>
    
</body>
    
</html>

style.css

body
{
    background-color: bisque;
    color: #000000;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    margin: 0 !important;
    
}

.container
{
    width: 100%;
}

.header
{
    width: 100%;
    padding: 20px 0;
}

.logo
{
    width: 450px;
    font-size: 50px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: 'Great Vibes', cursive;
}

.nav
{
    width: 100%;
    padding: 10px, 0;
    background-color: burlywood;
    text-align: center;
    border-top: 1px solid brown;
    border-bottom: 1px solid brown;
}

.content
{
    width: 1000px;
    margin-left: auto; 
    margin-right: auto;
    text-align: justify;
    padding-top: 10px;
}

.sticky
{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
}

ol
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 18px;
    height: 35px;
    line-height: 200%;
    display: inline-block;
    
}

ol > li
{
    float: left;
    width: 170px;
    height: 40px;
    border-right: 1px dashed blue;
}

ol > li:first-child
{
    border-left: 1px dashed blue;
}

ol > li:hover
{
    background-color: sandybrown;
}

ol > li > ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    height: 40px;
    display: none;
}

ol > li:hover > ul
{
    display: block;
}

ol > li > ul > li
{
    background-color: blanchedalmond;
    position: relative;
    z-index: 100;
    border-top: 1px dashed blue;
}

ol > li > ul > li:hover
{
    background-color: blanchedalmond;
}

Podobne pytania

0 głosów
2 odpowiedzi 585 wizyt
0 głosów
1 odpowiedź 172 wizyt
0 głosów
1 odpowiedź 118 wizyt
pytanie zadane 11 marca 2018 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)

92,452 zapytań

141,262 odpowiedzi

319,079 komentarzy

61,854 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!

...