Что я делаю не так с изображениями на моей странице? - PullRequest
Новая
       8

Что я делаю не так с изображениями на моей странице?

0 голосов
/ 21 мая 2018 

body {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
}


.main-nav {
	display: none;
	font-family: 'Yantramanav', sans-serif;
}

.logo {
	color: #fff;
	font-family: 'Yantramanav', sans-serif;
	position: absolute;
	top: 70;
	left: 15;
	font-size: .5em;
}

.promo {
	position: fixed;
	top: 0;
	z-index: 99;
	padding: 10px;
	width: 100%;
	height: 60px;
	background-color: #000;
	color: #fff;
	font-size: .7em;
	text-align: center;
}


.welcome {
	color: #fff;
	font-family: 'Yantramanav', sans-serif;
	background-color: lightgrey;
	background: 
	linear-gradient(#303030, transparent 90%),
	url('../imgs/camerabg.jpg') no-repeat center;
	background-size: cover;
	height: 100%;
	width: 100%;
	text-align: center;
	margin-top: -10px;
	padding: 200px;
} 

.welcome h1 {
	font-size: 2em;
}

.welcome a {
	text-decoration-style: underline;
	color: lightgrey;
	font-size: 2em;
	display: inline-block;
}

.welcome ul {
	list-style-type: none;
}

.location {
	font-size: 1.5em;
	margin-top: 10px;
	padding: 10px;
	border: 2px solid lightgrey;
	color: lightgrey;
}

.products {
	font-family: 'Raleway', sans-serif;
	height: 150px;
	width: 100%;
	background-color: #000;
	background: linear-gradient(#181818, transparent 90%),
	url('../imgs/oldcamera.jpg') no-repeat center;
	background-size: cover;
	color: #fff;
	text-align: center;
	padding: 150px;
	margin-bottom: 40px;
}

 .products h1 {
 	font-size: 3em;
 }

 .products a {
 	padding: 10px;
 	border: 2px solid lightgrey;
 	color: lightgrey;
 	font-size: 2em;
 }

 /*===============================
 			Intro
==============================*/

.intro1, .intro2 p {
	font-family: 'Yantramanav', sans-serif;
}

.intro1, .intro2 span {
	font-family: 'Yantramanav', sans-serif;
}
<DOCTYPE! html>
<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<link href="https://fonts.googleapis.com/css?family=Raleway|Yantramanav" rel="stylesheet">
	<link rel="stylesheet" href="styles/stylesheet.css">
	<title>TITLE HERE</title>
</head>

<body>

<header>
<div class="promo">
	<p>BUY 1 GET 1 Free 1/2 OFF CLOCK FRAME COMBOS<br>
	*Offer Valid 5/1/18. May not be combined with another offer or promotion. While supplies last.*<p>
</div>

<div class="logo">
<h1> Name Here</h1>
</div>

<div class="main-nav">
	<ul>
		<a href="#"><li>Home</li></a>
		<a href="#"><li>About</li></a>
		<a href="#"><li>Blog</li></a>
		<a href="#"><li> Hire Us</li></a>
	</ul>
</div>

<div class="welcome">
	<h1>Welcome To Our New Site</h1>
	<p>Let us help you with your best moments.</p>
	<ul>
	<li><a href="#">Order Now</a></li>
	<li><a class="location" href="#">Find Our New Location</a></li>
</ul>
</div>
</header>

<div class="intro1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
<span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod</span>
</div>


</body>
</html>

Я работаю над проектом, и я просто не могу привести вещи в центр.

Изображение заголовка заставляет страницу прокручиваться горизонтально, текст не центрируется в заголовке, то же самое происходит с другим изображением позже на странице, и на мобильном устройстве изображения не заполняют весь видовой экран, всенаходится слева от области просмотра.

Я получил метатег, чтобы сделать область просмотра отзывчивой.

HTML: 

<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Raleway|Yantramanav" rel="stylesheet">
<link rel="stylesheet" href="styles/stylesheet.css">
<title>Title</title>

Я скрыл свойство overflow в заголовке, чтобы попытаться помочь этому, но это не решило мои проблемы.

Размеры обоих изображений 640 x 480 пикселей

CSS для ширины и полей для сброса: 

* {box-sizing: border-box;
}

body {
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;
}

html {
overflow-x: hidden;
}

Вот мой CSS для навигации, заголовок (включая фоновое изображение), заголовок, логотип и реклама нав самом верху страницы. 

.main-nav {
display: none;
font-family: 'Yantramanav', sans-serif;
}

.logo {
color: #fff;
font-family: 'Yantramanav', sans-serif;
position: absolute;
top: 70;
left: 15;
font-size: .5em;
}

.promo {
position: fixed;
top: 0;
z-index: 99;
padding: 10px;
width: 100%;
height: 50px;
background-color: #000;
color: #fff;
font-size: .7em;
text-align: center;
}


.welcome {
color: #fff;
font-family: 'Yantramanav', sans-serif;
background-color: lightgrey;
background: 
linear-gradient(#303030, transparent 90%),
url('../imgs/camerabg.jpg') no-repeat center;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
margin-top: -10px;
padding: 200px;
border: 2px red solid;
} 

.welcome h1 {
font-size: 2em;
}

.welcome a {
text-decoration-style: underline;
color: lightgrey;
font-size: 2em;
display: inline-block;
}

.welcome ul {
list-style-type: none;
}

.location {
font-size: 1.5em;
margin-top: 10px;
padding: 10px;
border: 2px solid lightgrey;
color: lightgrey;
}

Вот код CSS для изображения ниже на странице: 

.products {
font-family: 'Raleway', sans-serif;
height: 150px;
width: 100%;
background-color: #000;
background: linear-gradient(#181818, transparent 90%),
url('../imgs/oldcamera.jpg') no-repeat center;
background-size: cover;
color: #fff;
text-align: center;
padding: 150px;
margin-bottom: 40px;
}

.products h1 {
font-size: 3em;
 }

.products a {
padding: 10px;
border: 2px solid lightgrey;
color: lightgrey;
font-size: 2em;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...