Broblem z border-image i nagłówkiem

Question

Cześć, ostatnio w ramach ćwiczeń z css grida stworzyłem sobie stronę www

ale mam kilka następujących problemów

1)  Nie wiem jak zmniejszyć rozmiar nagłówka, z zachowaniem czcionki i ramki tak aby kolor nagłówka nie wystawał (patrz zdj)

demo na stronie: https://www.garsc-wiedzy.ml/

 

header {

    grid-column: 1/13;
    grid-row: 1/3;

    margin: 0px;
    padding: 0px;
    /*max-height: 100px;*/



    /*--------------------------*/
    background-color: rgb(227, 243, 1);
 

    /*--------fonts----------------*/

    font-family: 'Eater', cursive;
    font-size: 2.5em;
    /*color: rgb(212, 14, 14);*/
    color: #091AF5;

    /*------------border---------------*/

    border-style: solid;
    border-width: 137px 142px 131px 130px;
    -moz-border-image: url(img/border4.png) 166 183 157 156 repeat;
    -webkit-border-image: url(img/border4.png) 166 183 157 156 repeat;
    -o-border-image: url(img/border4.png) 166 183 157 156 repeat;
    border-image: url(img/border4.png) 166 183 157 156 fill repeat;
    ge: url(img/border4.png) 166 183 157 156 fill repeat round;

    border-image-outset: 70px;

 

 

2) Dlaczego na 2nd stronie h1 jest mniejsze od h2

file.html

 

3)

Teraz takie trochę nietypowe pytanie:

Jak dodać usługę analytics.google.com tym 1 starym sposobem?

 

4)Co można ulepszyć / zmienić na stronie, ?

 

 

Answer 1

Na drugim zdjęciu nie działa 

  border-image-outset: 70px;

Problem jest taki, ze element zewnętrzny jest większy niż wewnętrzny, a ty offsetem poszerzasz tylko ten element wewnętrzny co nie będzie się dobrze skalowało. ustaw mniejszą rozdzielczość tła zamiast stosować sam offset. 

Comments

 

ustaw mniejszą rozdzielczość tła zamiast stosować sam offset. 

background-size:20% 20%; nie działa

 

@a Dodałem nowego diva ale to nie pomogło 

Co teraz

 

---

  <header class="title-border">
                <div class="logo">
                    <img src="img/logo.png" alt="logo- garć widzy">Garść Wiedzy
                </div>
            </header>

header {

    grid-column: 1/13;
    grid-row: 1/3;

    margin: 0px;
    padding: 0px;

    
    /*max-height: 100px;*/



    /*--------------------------*/
    
 

    /*--------fonts----------------*/

    font-family: 'Eater', cursive;
    font-size: 2.5em;
    /*color: rgb(212, 14, 14);*/
    color: #091AF5;

    /*------------border---------------*/

    border-style: solid;
    border-width: 137px 142px 131px 130px;
    -moz-border-image: url(img/border4.png) 166 183 157 156 repeat;
    -webkit-border-image: url(img/border4.png) 166 183 157 156 repeat;
    -o-border-image: url(img/border4.png) 166 183 157 156 repeat;
    border-image: url(img/border4.png) 166 183 157 156 fill repeat;
    ge: url(img/border4.png) 166 183 157 156 fill repeat round;

    border-image-outset: 0px;


}

.logo
{
    background-color: rgb(227, 243, 1);
    width: 100%;
    margin: 0px;
    padding: 0px;

    box-sizing: border-box;
}

.logo img{

    width: 20%;
}

 

Na drugim zdjęciu nie działa 

??Co nie działa   - (drugie zdj bez borde-offfset)

---

@Wiciorny,  Z tym już sobie chyba poradziłem. 

TERAZ odpowiesz ...?

2) h1 [https://garsc-wiedzy.ml/file.html]

i 3 pytanie

Dzięki

---

nie widzę u Ciebie elementu ani h1 ani h2 :) ,,,

---

@Wiciorny, na 2 podstronie  https://garsc-wiedzy.ml/file.html

 <section class="informacje-o-pliku box">

                        <h1 id="file-title">Test-Sprawdzajacy-z-Rozdzialu-Azja</h1>
                        <h2 id="przedmiot">Geografia</h2>
                        <h2>szkoła podstawowa</h2>
                        <h2>klasa 8</h2>
                        <h2>NICK</h2>
                        <h2><i class="icon-download-1"></i>509</h2>
                        <section class="ocena"><i class="icon-star"></i><i class="icon-star"></i><i
                                class="icon-star"></i><i class="icon-star"></i><i class="icon-star-half"></i></section>


                    </section>


                    <section class="thumbail box">
                        <h1>Miniaturka [strona 1/4]</h1>

                        <img src="uploaded-files/sprawdzian/id1.png">


                    </section>

 

---

Domyślnie przeglądarka nakłada inny rozmiar na element h1 i h2, zobacz co Ci pokazuje css 
 

h2 {
    display: block;
    font-size: 1.5em ... 

fragment h2, natomiast  h1 ma taką właściwość 

:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;

Weź na warsztat to że kolejność styli w arkuszu CSS twoim np ma znaczenie.  
Dodatkowo domyślnie h1,h2 jesli nie zdefiniujesz to h2 jako mniej znaczacy "nagłówek" bedzie zawsze mniejszy u Ciebie h1 jest mniejsze gdyż przysłania je coś