• 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

Object Storage Arubacloud
0 głosów
650 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,682 wizyt
pytanie zadane 21 listopada 2017 w C i C++ przez Kabuuz Bywalec (2,820 p.)
0 głosów
1 odpowiedź 494 wizyt
0 głosów
1 odpowiedź 503 wizyt
pytanie zadane 22 października 2017 w C i C++ przez Józef Niecierski Początkujący (440 p.)

92,761 zapytań

141,685 odpowiedzi

320,483 komentarzy

62,105 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

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!

...