Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 15 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

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

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

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

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

Цитата:
Сообщение от Максим_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 вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
HTML, CSS - Управление CSS анимацией HTML+CSS+JS dobryc HTML и CSS 1 18.11.2014 06: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


15:14.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru