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

CSS wyrównanie tekstu do górnej granicy sekcji

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
795 wizyt
pytanie zadane 17 lutego 2020 w HTML i CSS przez j.cob_21 Początkujący (350 p.)

Witajcie,
Robię stronę internetową dla siebie, i mam problem z wyrównaniem tekstu do górnej granicy sekcji.
Wstawię obrazek i od razu zrozumiecie o co mi chodzi :D
A więc, te tytułu artykułów czyli:
Projekt mechaniczny,
Automatyka,
Budowa maszyn, nie są wyrównane do górnej granicy sekcji przez co powstają nie ładne odstępy jak wydać zresztą.
Generalnie chciałbym aby te tytuły oraz teksty "łączyły się ze sobą w pionie, żeby były to takie jakby trzy bloczki z odstępami miedzy sobą.
Polom tekstowym i obrazkom nadałem odpowiednie wymiary aby granice się licowały.
Poniżej załączam również kod HTML or CSS do tej sekcji:

HTML (wyrywek)

<article id="Toferta">
<img class="ofertaimg" src="projekt mechaniczny.jpg" alt="Projekt Mechaniczny.jpg"/>
<img id="automatyka" class="ofertaimg" src="automatyka.jpg" alt="Automatyka.jpg"/>
<img class="ofertaimg" src="maszyna.png" alt="Maszyna.png"/>

    
<!--
<p class="undertitle1">Projekt Mechaniczny</p>
<p class="undertitle1">Automatyka i Sterowanie</p>
<p class="undertitle1">Budowa i Uruchamianie Maszyn</p>
<p class="text1">Dzięki wykwalifikowanemu personelowi z dziedziny mechaniki i materiałoznawstwa oraz dbaniu o poziom wiedzy z zakresu nowatorskich rozwiązań jesteśmy w stanie zaprojektować dowolną maszynę.</p>
<p class="text1">W dzisiejszych czasach podstawą działania każdej maszyny jest jej serce, czyli napędy oraz sterowanie, dzięki doświadczeniu naszej kadry modernizujemy wymagające tego urządzenia.</p>
<p class="text1">Dzięki połączeniu wysiłku naszych projektantów, automatyków oraz kadry menadżerskiej z roku na rok budujemy i wdrażamy nowoczesne maszyny.</p>
-->
<article id="tytuł" class="insidearticle">
<p class="undertitle1">Projekt Mechaniczny</p>
<p class="undertitle1">Automatyka i Sterowanie</p>
<p id="Budowa" class="undertitle1">Budowa i Uruchamianie Maszyn</p>

</article>

<article id="tekst" class="insidearticle">

<p class="text1">Dzięki wykwalifikowanemu personelowi z dziedziny mechaniki i materiałoznawstwa oraz dbaniu o poziom wiedzy z zakresu nowatorskich rozwiązań jesteśmy w stanie zaprojektować dowolną maszynę.</p>
<p class="text1">W dzisiejszych czasach podstawą działania każdej maszyny jest jej serce, czyli napędy oraz sterowanie, dzięki doświadczeniu naszej kadry modernizujemy wymagające tego urządzenia.</p>
<p class="text1">Dzięki połączeniu wysiłku naszych projektantów, automatyków oraz kadry menadżerskiej z roku na rok budujemy i wdrażamy nowoczesne maszyny.</p>

</article>

</article>



CSS (wyrywek):
 

#Toferta
{
    
    
   
   
text-decoration: none;
    background-color:white;
    
    text-align: center;
    padding-top:40px;
    

}

#Toferta img{
    display:inline-block;
    margin-left:50px;
    margin-right:50px;
    
}

/*
p.undertitle1{
    width:15%;
    margin-left:70px;
    margin-right:70px;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:30px;
    padding-right:30px;
    text-align:center;
    float:center;
    display:inline-block;
    background-color:#EAECEE;
}

p.text1
{
    width:15%;
    float:center;
    text-align:left;
    display:inline-block;
    margin-left:50px;
    margin-right:50px;
     vertical-align: text-top;
    background-color:#EAECEE;
    padding-top:10px;
    padding-right:60px;
    padding-bottom:40px;
    padding-left:20px;
}
*/

p.undertitle1{
    text-align:left;
    display:inline-block;
    width:300px;
    margin-left:50px;
    margin-right:50px;
    padding: 40 40 0 40;
    background-color:#EAECEE;
    font-size:25px;

    
    
    
}


p.text1{
    
    display:inline-block;
    width:300px;
    height:200px;
    padding: 40 40 40 40;
    background-color:#EAECEE;
    Font-size:20px;
    text-align:left;
    float:top;
    margin-left:50px;
    margin-right:50px;
}



Poniżej wstawiam zdj. jakbym chciał aby to wyglądało:


A poniżej to jest "to samo" tylko, że z kreatora do stron.


Dodatkowo umieszczam ss, na którym podzieliłem stronę na sekcje w paintcie, czarne linie oznaczają granice sekcji, w tym wypadku, od góry:
Duży napis oferta:
osobny article,

Od zdjęć do końca białego backgroundu (napiszę w skrócie):
<article>
img
img 
img


<article> ....tytuły.. </article>


<article> ..... teksty.....</article>


</article>

1 odpowiedź

0 głosów
odpowiedź 17 lutego 2020 przez Landu Stary wyjadacz (11,880 p.)

Musisz napisać to w taki sposób:

<article>
    <img src="projekt.jpg" />
    <p>Projekt mechaniczny</p>
    <p>Dzięki wykwalifikowanemu [...]</p>
</article>

Podobne pytania

0 głosów
1 odpowiedź 3,837 wizyt
pytanie zadane 21 listopada 2017 w C i C++ przez Kabuuz Bywalec (2,820 p.)
0 głosów
1 odpowiedź 507 wizyt
0 głosów
1 odpowiedź 598 wizyt
pytanie zadane 22 października 2017 w C i C++ przez Józef Niecierski Początkujący (440 p.)

93,176 zapytań

142,187 odpowiedzi

321,982 komentarzy

62,508 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 1637p. - dia-Chann
  2. 1614p. - Łukasz Piwowar
  3. 1599p. - CC PL
  4. 1597p. - Łukasz Eckert
  5. 1572p. - Tomasz Bielak
  6. 1545p. - Michal Drewniak
  7. 1537p. - Łukasz Siedlecki
  8. 1531p. - rucin93
  9. 1509p. - rafalszastok
  10. 1506p. - Marcin Putra
  11. 1380p. - Adrian Wieprzkowicz
  12. 1356p. - ssynowiec
  13. 1341p. - Mikbac
  14. 1169p. - Grzegorz Aleksander Klementowski
  15. 1155p. - Piotr Aleksandrowicz
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 polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...