• 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

VPS Starter Arubacloud
0 głosów
89 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 308 wizyt
0 głosów
3 odpowiedzi 201 wizyt
pytanie zadane 1 października 2017 w HTML i CSS przez Drajvon Bywalec (2,250 p.)
0 głosów
4 odpowiedzi 677 wizyt
pytanie zadane 31 października 2018 w HTML i CSS przez Strugaczka Początkujący (260 p.)

92,453 zapytań

141,262 odpowiedzi

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

...