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

question-closed rozmiary <p> na zdjęciu

Object Storage Arubacloud
0 głosów
90 wizyt
pytanie zadane 15 czerwca 2019 w HTML i CSS przez Kacper Wyrozumialski Nowicjusz (240 p.)
zamknięte 15 czerwca 2019 przez Kacper Wyrozumialski

Witam jestem początkujący więc prosze o przymknięcie oka na jakośc kodu i błędy. 

mam problem z atrybutem <p> mianowicie chciałbym alby był on na środku zdjęcia a za nim był cień, ale jego rozmiary sa na całą szerokość strony. nie chcę ręcznie ustalać szerokości :/ koś mógł by mi pomóc ?

body
{
    margin: 0px;
    font-family: 'Lato', sans-serif;
    background-color: #111;
}
.baner
{
    position: absolute;
    width: 100%;
    background-image: url(img/baner-unsplash.jpg);
    height: 750px;
    background-size: cover;
    margin-top: 0px;
    background-attachment: fixed;
}
.baner p
{
    position: relative;
    display: block;
    width: auto;
    text-align: center;
    font-size: 48px;
    color: whitesmoke;
    top: 40%;
    -webkit-box-shadow: 10px 10px 37px 34px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 37px 34px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 37px 34px rgba(0,0,0,0.75);
}
<body>
        <section class="baner">
            <p> Witaj na mojej stronie !</p>
        </section>
</body>
</html>

 

komentarz zamknięcia: uzyskanie odpowiedzi
komentarz 15 czerwca 2019 przez xmentor Nałogowiec (49,520 p.)
komentarz 15 czerwca 2019 przez Kacper Wyrozumialski Nowicjusz (240 p.)

@xmentor Sorki jużpoprawiam

 

1 odpowiedź

+1 głos
odpowiedź 15 czerwca 2019 przez rafal.budzis Szeryf (85,260 p.)
wybrane 15 czerwca 2019 przez Kacper Wyrozumialski
 
Najlepsza

Znacznik <p> jest elementem blokowym one zawsze zabierają 100 % szerokości. Możesz to zmienić w css poprzez właściwości display. lub Zmienić na znacznik <span> który jest elementem inline. 

w css do znacznika p możesz dopisać : 

display: inline-block;

lub możesz użyć znacznika <span>

Elementy inline możesz wyrównać właściwością text-align ustawioną w rodzicu.

PS. nie wstawiaj zdjęć kodu bo nic nie widać ;)

Podobne pytania

0 głosów
2 odpowiedzi 312 wizyt
0 głosów
3 odpowiedzi 202 wizyt
pytanie zadane 1 października 2017 w HTML i CSS przez Drajvon Bywalec (2,250 p.)
0 głosów
4 odpowiedzi 684 wizyt
pytanie zadane 31 października 2018 w HTML i CSS przez Strugaczka Początkujący (260 p.)

92,555 zapytań

141,402 odpowiedzi

319,538 komentarzy

61,938 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...