• 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
408 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 862 wizyt
0 głosów
1 odpowiedź 191 wizyt
0 głosów
1 odpowiedź 127 wizyt
pytanie zadane 11 marca 2018 w HTML i CSS przez ShadoWs Bywalec (2,800 p.)

93,008 zapytań

141,975 odpowiedzi

321,257 komentarzy

62,350 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

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...