MPGHThe Dark Arts
RegisterLog in

Need help

Posts 1–13 of 13 · Page 1 of 1
Need help
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;
}
#1 ·
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>
#2 ·
Quote Originally Posted by MikeRohsoft View Post
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?
#3 ·
.pics {
margin: 0 auto;
}

easiest way, without flex Kappa


//edit don't use float xD
#4 · edited ·
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;
}
#5 ·
Quote Originally Posted by dawid17 View Post
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;
}
#6 · edited ·
Quote Originally Posted by Vantos View Post
dunno if I got you right but try

Code:
.aboutus {
      display: flex;
      align-items: center;
}
nothing changed mate.
#7 ·
Quote Originally Posted by dawid17 View Post
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
#8 · edited ·
Quote Originally Posted by Vantos View Post
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^^
#9 ·
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
#10 · edited ·
Quote Originally Posted by Vantos View Post
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?
#11 · edited ·
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
#12 ·
i might able to help in this in my free time.
#13 ·
Posts 1–13 of 13 · Page 1 of 1

Post a Reply

Similar Threads

Combat Arms Helpneed help with moddingBayBee AlynBayBee Alyn 0 Vindictus HelpNeed help finding a Vindictus injectorVpChrisVpChris 2 Alliance of Valiant Arms (AVA) HelpI need help~~!!!!C8c834606877 1 CrossFire HelpNeed HelpSHshane11 49 Call of Duty Modern Warfare 2 GSC Modding Help/Discussionneed help with mod.:MUS1CFR34K:..:MUS1CFR34K:. 4

Tags for this Thread

None

Need help?