@CookieMonster32

Кнопка не на своем месте и не в полном размере. Почему?

Привет ! Эпопея с кнопкой продолжается. Она отказывается становиться выше поближе к тексту над ним и растягиваться на весь размер кнопки(возможно сейчас ничего не понятно, но я предоставлю код и скрины)
HTML :
<!DOCTYPE HTML>
<html>
<head>
	<title>Blog</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="font.css">
</head>
<body>
	<header>
	
	</header>
	<main >	
		<div class='topback'>
			<img class='logo' src="D:\HTML\MyBlog\Foto\logo_795.png">
			<div class="text1"><p>Hi there! We are the new kids on the block<br> and we build awesome websites and mobile apps.
			</p></div>
			<button class="button1">
	 			<img src="D:\HTML\MyBlog\Foto\shape_34_556.jpg">	
			</button>
		</div>
		
	</main>
	<footer>
	
	</footer>
</body>
</html>

Также код с кнопкой в формате SVG:
<!DOCTYPE HTML>
<html>
<head>
	<title>Blog</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="font.css">
</head>
<body>
	<header>
	
	</header>
	<main >	
		<div class='topback'>
			<img class='logo' src="D:\HTML\MyBlog\Foto\logo_795.png">
			<div class="text1"><p>Hi there! We are the new kids on the block<br> and we build awesome websites and mobile apps.
			</p></div>
			<button class="button1">
	 		<svg  xmlns="http://www.w3.org/2000/svg"
				xmlns:xlink="http://www.w3.org/1999/xlink"
				width="296px" height="73px"  viewBox="0 0 296 73">
				<path fill-rule="evenodd"  fill="#eb7d4b"
				d="M6.0,1.9997559 C6.0,1.9997559 290.99994,1.9997559 290.99994,1.9997559 C293.2091,1.9997559 295.0,3.7904053 295.0,5.999634 C295.0,5.999634 295.0,67.99942 295.0,67.99942 C295.0,70.20865 293.2091,71.999664 290.99994,71.999664 C290.99994,71.999664 6.0,71.999664 6.0,71.999664 C3.7907715,71.999664 1.999939,70.20865 1.999939,67.99942 C1.999939,67.99942 1.999939,5.999634 1.999939,5.999634 C1.999939,3.7904053
				3.7907715,1.9997559 6.0,1.9997559 Z"/>
				</svg>	
			</button>
	</main>
	<footer>
	
	</footer>
</body>
</html>

.topback{
	width: 1440px;
	height: 596px;
	background-color: #87509c;
	margin-left: 12%;
}
.back2{
	width: 1440px;
	height: 747px;
	background-color: #17c2a4;
	margin-left: 12%;
}
.back3{
	width: 1440px;
	height: 914px;
	background-color: #e7f1f8;
	margin-left: 12%;
}
.back4{
	width: 1440px;
	height: 655px;
	background-color: #ffffff;
	margin-left: 12%;
}
.back5{
	width: 1440px;
	height: 1423px;
	background-color: #ffdd99;
	margin-left: 12%;
}
.back6{
	width: 1440px;
	height: 895px;
	background-color: #d74680;
	margin-left: 12%;
}
.back7{
	width: 1440px;
	height: 819px;
	background-color: #3c5499;
	margin-left: 12%;
}
.backfooter{
	width: 1440px;
	height: 112px;
	background-color: #344b8e;
	margin-left: 12%;
}
.logo{
	width: 118px;
	height: 37px;
	margin-left: 212px;
	margin-top: 60px;
}
.text1{
	font-family: TitilliumWeb-ExtraLight;
	font-size: 42.2px;
	line-height: 48px;
	font-weight: 700;
	color: #f7f3ea;
    margin-left: 267px;
    margin-right: 267px;
    margin-top: 50px;
	margin-bottom: 240px;
	text-align: center;
}
.button1{
	margin-left: 500px;
	margin-bottom: 50px;
}

5f4261037ee3c921118170.jpeg
Я пробовал множество способов такие как: менял кнопку из расширения SVG, jpg, png, менял текст над кнопкой и его CSS.
  • Вопрос задан
  • 137 просмотров
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Так вы хотите: https://jsfiddle.net/y8sc56go/ ?

Чтобы уменьшить расстояние между кнопкой и текстом изменяйте margin-bottom для .text1, сейчас у вас там написано 240px.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы