Tekst pod tekstem bez użycia <br>

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

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.

odpowiedź 21 maja 2017 przez pablop76 VIP (123,180 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,180 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 ;)