Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 11.09.2018, 15:37   #1
Максим_maks
Пользователь
 
Регистрация: 18.01.2015
Сообщений: 51
По умолчанию Исправить макет(HTML CSS)

Здравствуйте. Помогите поправить HTML и CSS код. Пока только учусь, пытаюсь переделать страницу по такому примерно макету (во вложении). Пока вот, что получилось https://codepen.io/maks_mkv/pen/xaYoBR , но все кривое и косое. Как поправить? Почему все блоки разъехавшись по сторонам ((( Спасибо.
Изображения
Тип файла: jpg сайт.jpg (61.8 Кб, 121 просмотров)
Максим_maks вне форума Ответить с цитированием
Старый 11.09.2018, 20:58   #2
Javany
Пользователь
 
Регистрация: 15.05.2018
Сообщений: 75
По умолчанию

Во вложении 404 (Page Not Found)
Не задавай вопрос, если не знаешь что делать с ответом...
Javany вне форума Ответить с цитированием
Старый 13.09.2018, 00:26   #3
Максим_maks
Пользователь
 
Регистрация: 18.01.2015
Сообщений: 51
По умолчанию

Выложил локально.
Вложения
Тип файла: 7z main_test.7z (1.3 Кб, 9 просмотров)
Максим_maks вне форума Ответить с цитированием
Старый 13.09.2018, 13:10   #4
Javany
Пользователь
 
Регистрация: 15.05.2018
Сообщений: 75
По умолчанию

Цитата:
Сообщение от Максим_maks Посмотреть сообщение
Помогите поправить HTML и CSS код.
Практически всё переписал, убрал лишние таблицы и блоки. Бордеры и стили текста добавите сами.
Код:
<!DOCTYPE html>

<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>

body {
    font-family: Calibri, Arial, sans-serif;
    font-size: 14px; 
	}

.left_bar{
	text-align: center;
	width: 40%;
	height: 100vh;
	border-right: 1px solid black;
	float: left;
	
}
.big_img{
	width: 70%;
	margin: 2vh;
}

.right_bar{
	width: 40%;
	height: 100vh;
	float: left;
	padding-left: 2%;

}

img{
	width: 18%;
}

div{
	width: 95%;
	margin:0 auto;
	padding: 1%; 
}
.left_bar h1{
	width: 70%;
	margin:2% auto;
}

p{
	overflow:auto;
	border: 1px solid black;
	width: 70%;
	height: 18vh;
	padding:2%;
}


	
</style>
</head>

<body>
	<div class="left_bar">
		<h1> Заголовок</h1>
			<img class="big_img" src="http://picfun.ru/wp-content/uploads/HTxyUcwXfw.jpg">
				<div>
					<img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg">
					<img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg">
					<img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg">
					<img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg">
					<img src="https://bipbap.ru/wp-content/uploads/2017/05/VOLKI-krasivye-i-ochen-umnye-zhivotnye.jpg">
				</div>
	</div>
	<div class="right_bar">
		<h1> Заголовок</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non justo rhoncus, congue tellus ut, ultrices mauris.
 Nulla ultricies, lectus at fringilla maximus, tellus tellus suscipit justo, quis lobortis arcu felis nec felis.
 Mauris bibendum nulla sit amet sem accumsan faucibus at at mauris. Donec eleifend, ipsum consequat convallis tempor, nibh lacus semper lorem, ac tristique libero lectus sed ligula.
 Mauris fringilla leo lectus, at viverra nibh faucibus ut. Fusce eget augue sagittis augue posuere luctus a et urna. Sed rutrum ut orci quis hendrerit. 
Sed in neque sagittis, pretium ex et, euismod augue. Suspendisse maximus feugiat blandit.
			</p>

			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non justo rhoncus, congue tellus ut, ultrices mauris. 
Nulla ultricies, lectus at fringilla maximus, tellus tellus suscipit justo, quis lobortis arcu felis nec felis. Mauris bibendum nulla sit amet sem accumsan faucibus at at mauris.
 Donec eleifend, ipsum consequat convallis tempor, nibh lacus semper lorem, ac tristique libero lectus sed ligula. Mauris fringilla leo lectus, at viverra nibh faucibus ut.
 Fusce eget augue sagittis augue posuere luctus a et urna. Sed rutrum ut orci quis hendrerit. Sed in neque sagittis, pretium ex et, euismod augue. Suspendisse maximus feugiat blandit.
			</p>

			<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non justo rhoncus, congue tellus ut, ultrices mauris.
 Nulla ultricies, lectus at fringilla maximus, tellus tellus suscipit justo, quis lobortis arcu felis nec felis. Mauris bibendum nulla sit amet sem accumsan faucibus at at mauris. 
Donec eleifend, ipsum consequat convallis tempor, nibh lacus semper lorem, ac tristique libero lectus sed ligula. Mauris fringilla leo lectus, at viverra nibh faucibus ut. 
Fusce eget augue sagittis augue posuere luctus a et urna. Sed rutrum ut orci quis hendrerit. Sed in neque sagittis, pretium ex et, euismod augue. Suspendisse maximus feugiat blandit. </p>
			<hr>
				<span>Текст1</span>
				<span>Текст2</span>
				<span>Текст3</span>		
	</div>	
</body>
</html>
Не задавай вопрос, если не знаешь что делать с ответом...
Javany вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
HTML, CSS - Управление CSS анимацией HTML+CSS+JS dobryc HTML и CSS 1 18.11.2014 05:58
макет на css 3-ех колоночный Ol'ga HTML и CSS 0 31.01.2013 11:02
макет в html формате aplomb HTML и CSS 2 12.04.2012 16:44
css. не получается поменять области местами. резиновый макет. sergey_kalinin HTML и CSS 2 09.07.2009 16:48