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

question-closed Tekst pod tekstem bez użycia <br>

VPS Starter Arubacloud
0 głosów
3,340 wizyt
pytanie zadane 21 maja 2017 w HTML i CSS przez niezalogowany
zamknięte 21 maja 2017
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <META name=”Description” content=”opis strony adekwatny do jej zawartości”> -->
  <title>Liverpool FC - Season 16/17</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cinzel:700" rel="stylesheet">
  </head>
<body>
<div id="header">
    
</div>
<div id="main">
    <div id="mane-debut"><img id="sadio" src="images/Sadio%20Man%C3%A9%20-%20Liverpool.png"/><h1>Sadio Mane debut</h1>
    <h3>31 august</h3></div>
    <div>asfasfasfasf</div>
    <div>asfsafasf</div>
</div>
    </body>

 

body
{
    background-color: #A52E2C;
    margin: 0;
}


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

#mane-debut
{
    width: 100%;
    display: flex;
}

#sadio
{
    width: 240px;
    height: 630px;
}

#mane-debut h1
{
    font-family: 'Cinzel', serif;
    color: #D9D9DB;
    letter-spacing: 6px;
}

 

 

Witam. Mam problem chciałbym zeby znacznik <h3> wylądował pod <h1> a ląduje od razu obok h1 jak zrobic zeby <h3> był pod <h1>

 

komentarz zamknięcia: problem został rozwiązany

3 odpowiedzi

+1 głos
odpowiedź 21 maja 2017 przez imklau Nałogowiec (42,090 p.)

Ustawiłeś display: flex dla rodzica, więc dodatkowo ustaw jeszcze flex-direction: column żeby ustawiły się te elementy pod sobą

komentarz 21 maja 2017 przez niezalogowany
Tak, tylko że wtedy tekst jest pod obrazkiem, a ma być obok :)
komentarz 21 maja 2017 przez imklau Nałogowiec (42,090 p.)
więc po co Ci w ogóle to display: flex?
i czym w tej stronie ma być h1? a czym h3?
wywal h3 za diva i po problemie :P
komentarz 21 maja 2017 przez niezalogowany

tzn <h3> ma być takim dopiskiem odrazu pod tym h1 z datą tego wydarzenia

a w drugim divie używam właściwości flex-end bo chce aby całość była do prawej strony

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <META name=”Description” content=”opis strony adekwatny do jej zawartości”> -->
  <title>Liverpool FC - Season 16/17</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cinzel:700" rel="stylesheet">
  </head>
<body>
<div id="header">
    
</div>
<div id="main">
    <div id="mane-debut"><img id="sadio" src="images/Sadio%20Man%C3%A9%20-%20Liverpool.png"/><h1 class="section-titles">Sadio Mane debut</h1>
    <h3>31 august</h3></div>
    <div id="firmino-performance"><h1 class="section-titles">Firmino performances</h1><img id="firmino" src="images/roberto-firmino.png"></div>
    <div id="lallana-playeroftheyear"><img id="lallana" src="images/adam-lallana.png"><h1 class="section-titles">England Player Of The Year</h1></div>
</div>
    </body>
body
{
    background-color: #A52E2C;
    margin: 0;
}


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

#mane-debut
{
    display: flex;
    width: 100%;
    background-color: aqua;
}

#sadio
{
    width: 240px;
    height: 630px;
}

#firmino-performance
{
    display: flex;
    width: 100%;
    background-color: cadetblue;
    justify-content: flex-end;
}

#lallana-playeroftheyear
{
    display: flex;
    width: 100%;
    justify-content: flex-start;
    background-color: darkorange;
    
}

.section-titles
{
    font-family: 'Cinzel', serif;
    color: #D9D9DB;
    letter-spacing: 6px;
}

 

komentarz 21 maja 2017 przez imklau Nałogowiec (42,090 p.)

to raczej <h3> nie powinno być stosowane, jako taki dopisek, bardziej <p>
poza tym nadal nie rozumiem po co Ci w #mane-debut display: flex?
bo do niczego tak naprawdę tego nie używasz

komentarz 21 maja 2017 przez niezalogowany

dobra już usunąłem display:flex. teraz mam tekst pod obrazkiem

komentarz 21 maja 2017 przez imklau Nałogowiec (42,090 p.)
to może po prostu daj to h1 i h3 w osobnym divie?
zawsze też można ustawić na stałe pozycjonowanie w CSS, ale w tym przypadku nie wiem czy by to pasowało
komentarz 21 maja 2017 przez niezalogowany
podzieliłem #mane-debut na dwa divy i obrazek dałem w osobnym a tekst też w osobnym. Temat do zamknięcia.
0 głosów
odpowiedź 21 maja 2017 przez pablop76 VIP (123,240 p.)

Witam. To jest spowodowane

display: flex;

 

komentarz 21 maja 2017 przez niezalogowany
Czyli musiałbym zrezygnować z display:flex w tym divie ?
komentarz 21 maja 2017 przez pablop76 VIP (123,240 p.)
Dodaje odpowiedź na pytanie kiedy nie ma jeszcze żadnych innych odpowiedzi. Zaglądam za kilka minut i okazuje się ,że ktoś już udzielił odpowiedzi przede mną. Irytujące jest to gdy moja odpowiedź jest taka sama lub podobna. To nie pierwszy raz.
komentarz 21 maja 2017 przez imklau Nałogowiec (42,090 p.)
jeśli byś zaglądał faktycznie za kilka minut to by się okazało, że kolejna odpowiedź została udzielona w tej samej minucie, albo góra minutę później. Mnie też się to bardzo często zdarza, ale jakoś nie widzę w tym problemu ;)
0 głosów
odpowiedź 21 maja 2017 przez niezalogowany

Czemu nie chcesz używać <br>? Zamiast kombinować, wstaw br'a i po sprawie... 

komentarz 21 maja 2017 przez niezalogowany
Nie chce robić br'em ponieważ tekst pod <h1> ma być w innym znaczniku i ma mieć inne parametry
komentarz 21 maja 2017 przez imklau Nałogowiec (42,090 p.)
w tym przypadku <br> i tak by chyba nie zadziałał ;)

Podobne pytania

+2 głosów
2 odpowiedzi 722 wizyt
0 głosów
1 odpowiedź 944 wizyt
pytanie zadane 9 maja 2016 w HTML i CSS przez barteku12 Obywatel (1,340 p.)
0 głosów
2 odpowiedzi 206 wizyt
pytanie zadane 13 grudnia 2018 w HTML i CSS przez Q7V Gaduła (4,250 p.)

92,851 zapytań

141,792 odpowiedzi

320,882 komentarzy

62,183 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.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...