Home › Forum › Programming › Other Programming › Web Languages › Need help

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;
}

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>

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?

.pics {
margin: 0 auto;
}

easiest way, without flex Kappa

//edit don't use float xD

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;
}

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;
}

Originally Posted by Vantos

dunno if I got you right but try

Code:

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

nothing changed mate.

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

Originally Posted by Vantos

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^^

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

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?

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

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

Posts 1–13 of 13 · Page 1 of 1

Post a Reply

Similar Threads

need help with moddingBy BayBee Alyn in Combat Arms Help
0Last post 15y ago
Need help finding a Vindictus injectorBy VpChris in Vindictus Help
2Last post 15y ago
I need help~~!!!!By c834606877 in Alliance of Valiant Arms (AVA) Help
1Last post 15y ago
Need HelpBy shane11 in CrossFire Help
49Last post 15y ago
need help with modBy .:MUS1CFR34K:. in Call of Duty Modern Warfare 2 GSC Modding Help/Discussion
4Last post 15y ago

Tags for this Thread

None

Home › Forum › Programming › Other Programming › Web Languages › Need help

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;
}

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>

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?

.pics {
margin: 0 auto;
}

easiest way, without flex Kappa

//edit don't use float xD

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;
}

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;
}

Originally Posted by Vantos

dunno if I got you right but try

Code:

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

nothing changed mate.

Originally Posted by dawid17

nothing changed mate.

Originally Posted by Vantos

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^^

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

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?

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

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

Posts 1–13 of 13 · Page 1 of 1

Post a Reply

Similar Threads

need help with moddingBy BayBee Alyn in Combat Arms Help
0Last post 15y ago
Need help finding a Vindictus injectorBy VpChris in Vindictus Help
2Last post 15y ago
I need help~~!!!!By c834606877 in Alliance of Valiant Arms (AVA) Help
1Last post 15y ago
Need HelpBy shane11 in CrossFire Help
49Last post 15y ago
need help with modBy .:MUS1CFR34K:. in Call of Duty Modern Warfare 2 GSC Modding Help/Discussion
4Last post 15y ago

Tags for this Thread

None