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

Jeden z bloków nie skaluje się

VPS Starter Arubacloud
0 głosów
63 wizyt
pytanie zadane 12 lutego 2019 w HTML i CSS przez Teito Nowicjusz (120 p.)
edycja 12 lutego 2019 przez Teito

Witam, przy skalowaniu okna strona się rozsypuje. środkowy blok nie zachowuje się tak jak pozostałe, co może być nie tak? Jakich praktyk unikać żeby tak się nie działo ? Błąd zaznaczyłem czerwonym kwadratem, poniżej zdj:

 

Link z plikami: https://drive.google.com/open?id=1darOFcQCdy6IHOeznRi9-FXaXro7pCxS.

Z góry dziękuję za pomoc i jakiekolwiek wskazówki :d

 


HTML: 

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="utf-8">
        <title>Strona testowa flex</title>
        <link rel="stylesheet" href="styl.css" type="text/css">


    </head>
    <body>
        <div class="main">

                <div class="header">

                    <div class="logo">
                        <img src="logo.png" alt="Logo Firmy">
                    </div>
                    <div class="menubar">

                        <ul class="menu">
                            <li class="selected"><a href="index.html">Index</a></li>
                            <li><a href="drugastrona.html">Druga strona</a></li>
                            <li><a href="trzeciastrona.html">Trzecia strona</a></li>
                            <li><a href="formularz.html">Formularz</a></li>
                        </ul>

                    </div>

                </div>

                <div class="container">

                    <div class="sidebar">
                        <h1>Informacje</h1>

                        <h3>Przykładowy text</h3>
                        <h4>8 Luty, 2020</h4>

                            <p>
                                Jak co roku obchody lanego poniedziałku w Bełchatowie wywołują wiele emocji. Święto to jest, co prawda, uświęcone tradycją, jednakże są ludzie, którzy zdecydowanie przesadzają z hołdowaniem tej jednej tradycji. 
                                <br>
                                <a href="">Cały artykuł</a>
                            </p>
                            

                        <h3>Przykładowy text</h3>
                        <h4>10 Luty, 2017</h4>

                            <p>
                                „Świństwo, kiedyś to dziewczyny się perfumami lało, a nie tak, jak teraz, wiadrami; tałatajstwo!!!”, oburza się starszy pan, zapytany o opinię na temat nadchodzącego poniedziałku.
                                <br>
                                <a href="">Cały artykuł</a>
                            </p>
                            

                        <h1>Przydatne linki</h1>
                            <ul>
                                <li> <a href="https://google.pl">Google</a> </li>
                                <li> <a href="https://facebook.pl">Facebook</a> </li>
                                <li> <a href="https://wikipedia.pl">Wikipedia</a> </li>
                                <li> <a href="https://youtube.pl">Youtube</a> </li>
                            </ul>

                        <h1>Szukaj</h1>
                            <div class="search">
                                 <input type="text" name="Search_field" value="Wpisz słowo" style="color: initial;">
                                 <input name="search" type="image" src="search.png" alt="Szukaj" style="margin: 0 0 -5px 5px;">
                            </div>

                            



                    </div>
                    <div class="content">
                        <h1>Tutaj zawartość tej przykładowej strony:</h1>
                        <p>W ubiegłym roku śmigus- dyngus okazał się wyjątkowo mokry i wyjątkowo brzemienny w skutkach. W wyniku „niewinnych” igraszek z wodą doszło do wypadku samochodowego, w wyniku którego jedna osoba doznała poważnych obrażeń kręgosłupa. Było to na szczęście jedyne tak tragiczne wydarzenie owego dnia. </p>
                        <p>Wczoraj o godzinie osiemnastej odbyło się zebranie Stowarzyszenia Bełchatowskich Rodzin, na którym omawiano drażniący problem lanego poniedziałku.</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex molestiae rem officiis sapiente illo, architecto fugit eos tempore incidunt sed fuga quis alias cumque accusantium? Recusandae totam cumque tempora velit!</p>

                        <h2>Przykładowa lista nienumerowana:</h2>
                            <ul>
                                <li>Pierwszy punkt</li>
                                <li>Drugi punkt</li>
                                <li>Trzeci punkt</li>
                                <li>Czwarty punkt</li>
                                <li>Piąty punkt</li>
                            </ul>

                        <h2>Przykładowa lista numerowana:</h2>
                            <ol>
                                <li>Pierwszy punkt</li>
                                <li>Drugi punkt</li>
                                <li>Trzeci punkt</li>
                                <li>Czwarty punkt</li>
                                <li>Piąty punkt</li>
                            </ol>                            

                        <img src="zdjecie.png" alt="zdjecie" class="pierwszezdj"> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Explicabo sapiente, nostrum provident ex illum repellendus ad numquam doloribus odit sequi impedit eum animi commodi recusandae quaerat voluptate, accusantium, excepturi quod. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque eveniet sunt, reiciendis ipsum laborum eum similique incidunt vel ducimus aut. Deleniti facere fugiat tempore totam id, sapiente quod, nemo dicta incidunt velit voluptates nihil in aliquam eligendi asperiores blanditiis error distinctio praesentium unde molestias ipsum magnam placeat! Explicabo eum saepe est deserunt atque iste vero ut cupiditate numquam? Eaque culpa maiores adipisci voluptates molestias voluptatem? Voluptatum eligendi consectetur quam ipsum quibusdam. At quaerat nihil, itaque omnis, culpa ipsa blanditiis ducimus ut cupiditate maxime asperiores tenetur voluptate maiores minus commodi, sunt esse repudiandae a iure earum eos odit! Unde, esse quasi. lorem200</p>
                        <img src="zdjecie.png" alt="zdjecie" class="drugiezdj"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit tempore adipisci explicabo rem error optio ex molestiae, consequuntur quaerat et reprehenderit eius a temporibus magni. Voluptates est aliquam cupiditate quo alias laudantium facere maxime debitis architecto. Necessitatibus unde dolorem ducimus possimus eos eveniet neque ex, quis labore laboriosam dicta. Dicta iure vero sequi nemo velit, earum aliquid debitis placeat odio mollitia aspernatur minima repudiandae officia distinctio fugiat perferendis. Quam iste adipisci inventore enim iure quis nostrum fugit aliquam facere quidem. Deleniti, qui doloribus, dolor minus saepe odio eaque illum aspernatur, explicabo tenetur in pariatur dolorum repudiandae. Sequi quae cumque odio facilis soluta, velit libero in reprehenderit ipsum ipsa sapiente, excepturi eligendi dolores id sint earum architecto vitae porro perferendis provident sit modi consectetur doloribus officiis? Odio nam voluptatibus ipsam! Provident commodi amet eos voluptates quo reprehenderit placeat nihil itaque, perspiciatis eius consequuntur harum quas necessitatibus animi adipisci veritatis. At quibusdam similique deserunt dolorem consequatur omnis esse suscipit culpa iure? Quae magnam recusandae quibusdam odio impedit voluptates officia at alias. Magni nihil in quas eveniet quaerat eos quos tempore nesciunt vero quia et animi rem pariatur deserunt maxime facilis, nisi enim repudiandae esse fuga itaque beatae! Fuga officiis odit dicta vel.</p>

                    </div>

                </div>

                <div class="footer">
                    Strona testowa |
                    <a href="https://facebook.pl"> Facebook</a>  |
                    <a href="https://google.pl"> Google</a> |
                    <a href="https://youtube.pl"> YouTube</a>

                </div>
        </div>

    </body>
</html>

 

CSS: 

 


*
{
  color: white;
  box-sizing: border-box;

}

body
{
    background: url(tlo.png) repeat;
    font-family: sans-serif;
    font: normal .90em 'trebuchet ms', arial, sans-serif;
}

.main
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo
{
    padding: 2.5rem 0 1.87rem 5rem;
}

.menubar
{
    width: 70vw;
    background: url(tlo2.png) repeat;
    display: flex;
}

.container
{
    width: 70vw;
    display: flex;
}

.sidebar
{
    flex-basis: 25%;

}

.content
{
    flex-basis: 75%;
}

.sidebar, .content , .footer
{
    background: url(tlo2.png) repeat;
    padding: 1.25rem;

}



h2,h3{
    margin: 0;
}

h4, h5{
    font: italic 95% arial, sans-serif;
    padding: 0 0 0.3rem 0;
    margin: 0;
}



img
{
    margin: 1rem;
}


                /* ----MENU---- */


ul.menu, ul.menu li
{ float: left;
  margin: 0; 
  padding: 0;
  list-style: none;

}

ul.menu li a
{
    text-decoration: none;
    text-transform: uppercase;
    padding: 1.25rem 1.55rem 1.25rem 1.55rem;
    letter-spacing: 0.1em;
    display: block;

}

ul.menu li a:hover, ul.menu li.selected a
{
    background: url(menu2.png) repeat;
}

                /* ----CONTENT---- */



.content ul, ol
{
    list-style-position: inside;
    padding: 0 0 2.5rem 0;
}

.pierwszezdj
{
    float: left;
    display: block;
    max-width: 35%;
    
}

.drugiezdj
{
    float: right;
    display: block;
    max-width: 35%;
}

                /* ----SIDEBAR---- */


.sidebar ul,li
{
    list-style-position: inside;
    padding: 0 0 .6rem 0;

}

.search
{
    display: flex;
    width: 100%;
}


                /* ----FOOTER---- */

.footer
{
  width: 70vw;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  padding: 5rem 0 2.5rem 0;
}

.footer a
{
    text-decoration: none;
}

.footer a:hover
{
    text-decoration: underline;
}


 

komentarz 12 lutego 2019 przez lateM Pasjonat (17,660 p.)
Wolimy kod w bloczku jednak (: jest szybciej i wygodniej.
komentarz 12 lutego 2019 przez Teito Nowicjusz (120 p.)
Wybacz, juz edytowałem :)

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
1 odpowiedź 216 wizyt
0 głosów
1 odpowiedź 606 wizyt
pytanie zadane 7 marca 2018 w HTML i CSS przez Jayix Użytkownik (680 p.)
0 głosów
3 odpowiedzi 612 wizyt
pytanie zadane 4 lutego 2019 w HTML i CSS przez GaryNJ Nowicjusz (240 p.)

92,454 zapytań

141,262 odpowiedzi

319,099 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!

...