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

Broblem z border-image i nagłówkiem

0 głosów
61 wizyt
pytanie zadane 6 listopada 2020 w HTML i CSS przez fff Gaduła (3,950 p.)

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, ?

 

 

1 odpowiedź

0 głosów
odpowiedź 6 listopada 2020 przez Wiciorny Mędrzec (186,250 p.)

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. 

komentarz 6 listopada 2020 przez fff Gaduła (3,950 p.)

 

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)

komentarz 6 listopada 2020 przez fff Gaduła (3,950 p.)

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

TERAZ odpowiesz ...?

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

i 3 pytanie

Dzięki

komentarz 6 listopada 2020 przez Wiciorny Mędrzec (186,250 p.)
nie widzę u Ciebie elementu ani h1 ani h2 :) ,,,
komentarz 6 listopada 2020 przez fff Gaduła (3,950 p.)

@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>

 

komentarz 6 listopada 2020 przez Wiciorny Mędrzec (186,250 p.)

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ś 

Podobne pytania

0 głosów
2 odpowiedzi 115 wizyt
+2 głosów
2 odpowiedzi 82 wizyt
pytanie zadane 12 kwietnia w HTML i CSS przez Nearr Obywatel (1,860 p.)
0 głosów
3 odpowiedzi 1,333 wizyt
pytanie zadane 20 października 2016 w HTML i CSS przez kieryk123 Początkujący (300 p.)

85,805 zapytań

134,588 odpowiedzi

298,788 komentarzy

56,698 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 494p. - rucin93
  2. 482p. - CC PL
  3. 463p. - nidomika
  4. 385p. - Whistleroosh
  5. 379p. - ScriptyChris
  6. 372p. - adrian17
  7. 340p. - TheLukaszNs
  8. 339p. - WhiskeyTaster
  9. 321p. - Argeento
  10. 318p. - Dagohar
  11. 287p. - Anonim 1794483
  12. 281p. - Klaudia
  13. 278p. - B4mbus
  14. 269p. - b0mbix
  15. 246p. - tokox
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...