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>
