Need help

**dawid17** · 11-03-2018

So i have this
https://i.imgur.com/1srOGtb.png

I want the pictures to be centered and have bigger spaces between eachother, how can I do it?
Here's the code.

Code:

				<div class="transformations">
<h1>Transformations</h1>
<div class="pics">
<img src="images/1.png">
<img src="images/2.png">
<img src="images/3.png">
</div>
				
 </body>

Code:

.transformations {
	padding-top: 80px;
	margin: 0 auto;
	width: 100%;
	height: 600px;
	background-color: #f1f1f1;
	overflow: hidden;
}
	
.transforamtions h1 {
    padding-top: 190px;
	padding-bottom: 9px;
	font-size: 30px;
	
}

.pics {
	padding-top: 80px;
    float: center;
}

**MikeRohsoft** · 11-03-2018

use the flex property

Code:

<!doctype HTML>
<HTML>
	<head>
		<title>Test</title>
		<meta charset="utf8" />
		<style>
		html, body {
			height: 100%;
		}
		body {
			margin: 0;
		}
		.flex-container {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.row {
			width: auto;
			border: 1px solid #0000FF;
		}
		.flex-item {
			color: #FFFFFF;
			background-color: #FF0000;
			padding: 5px;
			margin: 10px;
			width: 140px;
			line-height: 140px;
			font-weight: bold;
			font-size: 2em;
			text-align: center;
			float: left;
		}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="row"> 
				<div class="flex-item">1</div>
				<div class="flex-item">2</div>
				<div class="flex-item">3</div>
				<div class="flex-item">4</div>
			</div>
		</div>	
	</body>
</HTML>

**dawid17** · 11-03-2018

Originally Posted by MikeRohsoft

use the flex property

Code:

<!doctype HTML>
<HTML>
	<head>
		<title>Test</title>
		<meta charset="utf8" />
		<style>
		html, body {
			height: 100%;
		}
		body {
			margin: 0;
		}
		.flex-container {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.row {
			width: auto;
			border: 1px solid #0000FF;
		}
		.flex-item {
			color: #FFFFFF;
			background-color: #FF0000;
			padding: 5px;
			margin: 10px;
			width: 140px;
			line-height: 140px;
			font-weight: bold;
			font-size: 2em;
			text-align: center;
			float: left;
		}
		</style>
	</head>
	<body>
		<div class="flex-container">
			<div class="row"> 
				<div class="flex-item">1</div>
				<div class="flex-item">2</div>
				<div class="flex-item">3</div>
				<div class="flex-item">4</div>
			</div>
		</div>	
	</body>
</HTML>

Thanks i got it, but for some reason it shows me the same picture in every box.
https://i.imgur.com/4z40cdf.png

Code:

<div class="flex-container">
			<div class="row"> 
				<div class="flex-item"></div>
				<div class="flex-item2"></div>
				<div class="flex-item3"></div>
				<div class="flex-item4"></div>
			</div>

Code:

.flex-item {
			color: #FFFFFF;
			background-image: url(images/1.png);
			background-size: cover;
			padding: 10px;
			margin: 50px;
			width: 350px;
			line-height: 250px;
			font-weight: bold;
			font-size: 2em;
			text-align: center;
			float: left;
		}

		.flex-item2 {
			color: #FFFFFF;
			background-image: url(images/2.png);
			background-size: cover;
			padding: 10px;
			margin: 50px;
			width: 350px;
			line-height: 250px;
			font-weight: bold;
			font-size: 2em;
			text-align: center;
			float: left;
		}
		
		.flex-item3{
			color: #FFFFFF;
			background-image: url(images/3.png);
			background-size: cover;
			padding: 10px;
			margin: 50px;
			width: 350px;
			line-height: 250px;
			font-weight: bold;
			font-size: 2em;
			text-align: center;
			float: left;
		}
		
		.flex-item4{
			color: #FFFFFF;
			background-image: url(images/4.png);
			background-size: cover;
			padding: 10px;
			margin: 50px;
			width: 350px;
			line-height: 250px;
			font-weight: bold;
			font-size: 2em;
			text-align: center;
			float: left;
		}

do you know what might be the issue?

**Vantos** · 11-03-2018

.pics {
margin: 0 auto;
}

easiest way, without flex Kappa

//edit don't use float xD

**dawid17** · 11-04-2018

Hello, having another issue.

https://i.imgur.com/eqCYSuq.png

How can I make this space gaps to be exactly the same? One leaves too much gap from top and one doesnt.

Code:

.aboutus {
    padding: 80px;
    background: #ffff;
	height: 200px;
}

.aboutus h1 {
	margin-top: 0px;
	margin-left: 100px;
	font-size: 30px;
	margin-bottom: 30px;
}

.aboutus p {
	margin-left: 100px;
	font-weight: strong;
	margin-bottom: 0px;
	width: 700px;
}

**Vantos** · 11-04-2018

Originally Posted by dawid17

Hello, having another issue.

https://i.imgur.com/eqCYSuq.png

How can I make this space gaps to be exactly the same? One leaves too much gap from top and one doesnt.

Code:

.aboutus {
    padding: 80px;
    background: #ffff;
	height: 200px;
}

.aboutus h1 {
	margin-top: 0px;
	margin-left: 100px;
	font-size: 30px;
	margin-bottom: 30px;
}

.aboutus p {
	margin-left: 100px;
	font-weight: strong;
	margin-bottom: 0px;
	width: 700px;
}

dunno if I got you right but try

Code:

.aboutus {
      display: flex;
      align-items: center;
}

**dawid17** · 11-04-2018

Originally Posted by Vantos

dunno if I got you right but try

Code:

.aboutus {
      display: flex;
      align-items: center;
}

nothing changed mate.

**Vantos** · 11-04-2018

Originally Posted by dawid17

nothing changed mate.

ye, now I looked closely to your code, you have 1 parent with 2 childrens? left and right? paste html and css.

//edit nie widziałem że masz tam h1 i p, myślałem że podzielony na lewy i prawy segment xd

**dawid17** · 11-04-2018

Originally Posted by Vantos

ye, now I looked closely to your code, you have 1 parent with 2 childrens? left and right? paste html and css.

//edit nie widziałem że masz tam h1 i p, myślałem że podzielony na lewy i prawy segment xd

Code:

<!DOCTYPE html>
<html lang="pl-PL">

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="ism/css/my-slider.css"/>
<script src="ism/js/ism-2.2.min.js"></script>
<meta charset="UTF-8">
<title>Firma Transportowa</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
</head>
<body>

<nav class="navigation">
<img src="images/bg.png">
<ul>
<li><a href="#">O nas</a></li>
<li><a href="#">Dane Firmy</a></li>
<li><a href="#">Referencje</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>

<div class="header">
  <div class="firma">
    <h1>HIT TRANSPORT</h1>
    <p>Przewóz ładunków na terenie Europy</p>
<a href="#"><button class="button">WIĘCEJ INFORMACJI</button></a>
</div>
</div>
<div class="aboutus">
<h1>We Deliver Quality</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<div class="zdjecie">
</div>
</div>

<div class="galeria">

</div>

</body>
</html>

Code:

body {
	background-color #000;
    margin: auto;
    bottom: 0;
	font-family: Montserrat;
}

.navigation {
	width: 100%;
	height: 60px;
	background-color: #000000;
	top: 0;
	left: 0;
	position: fixed;
	transition: top 0.3s;
	overflow: hidden;
}

.navigation ul {
	margin-left: 1200px;
}

.navigation ul li {
	display: inline;
	line-height: 30px;
	padding: 30px;
}

.navigation ul li a {

	text-decoration: none;
	font-family: Montserrat;
	color: #fff;
	
}

.navigation ul li a:hover {
	color: #ff0000;
}


.navigation img {
	float: left;
	margin-left: 120px;
	margin-top: 23px;
	width: 186px;
	height: 16px;
}


.header {
	height: 860px;
	background-image: url(images/header.png);
	position: static;
}


.firma {
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.firma h1 {
	color: fff;
	font-weight: strong;
	font-size: 50px;
	font-family: Montserrat;
}

.firma p {
	font-family: Montserrat;
	margin-top: -30px;
	font-size: 30px;
}

.aboutus {
    padding: 80px;
    background: #ffff;
	height: 200px;
	display: flex;
align-items: center;
}

.aboutus h1 {
	margin-top: 0px;
	margin-left: 100px;
	font-size: 30px;
	margin-bottom: 30px;
	position: fixed;
}

.aboutus p {
	margin-left: 100px;
	font-weight: strong;
	margin-bottom: 0px;
	width: 700px;
}

.button {
    background-color: #7e040a;
	font-family: Montserrat;
    border: none;
    color: white;
    padding: 20px 25px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
	transition: transform .4s;
}

.button:hover {
    background-color: #8d080f;
	transform: scale(0.8);
}

.zdjecie {
	width: 523px;
	height: 196px;
	background-image: url(images/zdjecie.png);
	margin-left: 1100px;
	position: relative;
	bottom: 170px;
}

.galeria {
    padding: 80px;
    background: #000;
	height: 200px;
}

jestem totalnym poczatkujacym dopiero sie ucze^^

**Vantos** · 11-04-2018

Spróbuj tak

Code:

<div class="aboutus">
<div class="left">
<h1>We Deliver Quality</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="right"></div>
</div>

Code:

.aboutus {
display:flex;
align-items:center;
}

W skrócie zrób parenta i podziel go na 2 części, lewą i prawą, potem dajesz parentowi flexa i align-items: center;

//edit sprawdziłem na szybko i działa

html

Code:

<div class="aboutus">
<div class="left">
<h1>We Deliver Quality</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="right"></div>
</div>

css

Code:

.aboutus {
  width: 100%;
  display: flex;
  align-items: center;
  
}
.right {
  width: 50%;
  height: 200px;
  background-color: red;
}
.left {
  width: 50%;
}

tylko zamiast background-color daj zdjęcie

**dawid17** · 11-04-2018

Originally Posted by Vantos

Spróbuj tak

Code:

<div class="aboutus">
<div class="left">
<h1>We Deliver Quality</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="right"></div>
</div>

Code:

.aboutus {
display:flex;
align-items:center;
}

W skrócie zrób parenta i podziel go na 2 części, lewą i prawą, potem dajesz parentowi flexa i align-items: center;

//edit sprawdziłem na szybko i działa

html

Code:

<div class="aboutus">
<div class="left">
<h1>We Deliver Quality</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="right"></div>
</div>

css

Code:

.aboutus {
  width: 100%;
  display: flex;
  align-items: center;
  
}
.right {
  width: 50%;
  height: 200px;
  background-color: red;
}
.left {
  width: 50%;
}

tylko zamiast background-color daj zdjęcie

Nice thx.

****** www.mojadom3ena.cba.pl/ , wiesz moze czemu 2 takie zdjecia sie pojawiaja zamiast 1?

I jeszcze coś zwalilem z kodem ze button i tekst z headera uciekł mi na góre w lewo, wiesz moze jak to naprawic?

**Vantos** · 11-04-2018

Nie działa mi ta strona. w <div class="right"> daj jeszcze inne div'y np image1, image2 itd. Z tym buttonem to nie pomogę bo nie widzę nic

jak chcesz to możesz napisać na popularny komunikator na literkę S xd nick: mixaliux1

**War1ock86** · 09-18-2019

i might able to help in this in my free time.

Thread: Need help

Thread Tools

Display

Need help

The Following User Says Thank You to MikeRohsoft For This Useful Post:

The Following User Says Thank You to Vantos For This Useful Post:

Similar Threads

[Help Request] Need Help

[Help Request] Need help finding a Vindictus injector

[Help Request] need help with mod

[Help Request] I need help~~!!!!

[Help Request] need help with modding