Нужна помощь в верстке

Михаил Тушинский

Сообщений: 8 Регистрация: Май 2017

7 Июня 2017 21:57

Помогите разобраться с тегом div. Нужно сверстать вот такой тип шаблона:

Прикрепленные файлы

шаб.jpg (41.53 КБ) [ Скачать ]

Михаил Тушинский

Сообщений: 8 Регистрация: Май 2017

7 Июня 2017 22:01

Код

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <link href="css/style.css" type="text/css" rel="stylesheet">
      <title>Тестируем блочные верстки</title>
   </head>
   <body>
   
         <div id="header"></div>
         <div id="left-1"></div>
         <div id="left-2"></div>
         <div id="right">   </div>
         <div id="center"></div>
         <div class="clear"></div>
         <div id="space"></div><!-- распорка -->
         <div id="footer" align="center"></div>
</body>
</html>

Код

html, body {border: 5px solid #000000;}
body {margin: 0 10%; height:auto !importand; height: 100%;}
#header {height:100px; border: 2px solid #0000FF; margin: 5px 5px 0px 5px;}
#center {margin:5px auto; width:65%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify;}
#left-1 {float:left; width:15%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify; margin-top: 5px; height:auto;}
#left-2 {float:left; width:15%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify; margin: 5px; height:auto;}
#right {float:right; width:15%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify; margin-top: 5px;}
#footer {height:30px; margin-top:-100px; border: 2px solid #0000FF; margin-top: 0 0; text-align: center; background-color: #ADD8E6;} /* добавляем отступ */
#footer p {margin: 3px auto 0 auto;}
#space {height: 100px;}
.clear {clear: both;}

Михаил Тушинский

Сообщений: 8 Регистрация: Май 2017

7 Июня 2017 22:03

пока только так

Прикрепленные файлы

2017-06-07_22-03-04.png (202.25 КБ) [ Скачать ]

Михаил Тушинский

Сообщений: 8 Регистрация: Май 2017

7 Июня 2017 22:05

а если еще кто-нибудь поможет в этом разобраться, буду очень благодарен!!! За ранее спасибо!!!

Руслан Пугач

Сообщений: 91 Регистрация: Окт 2012

14 Июня 2017 21:23

<!DOCTYPE html><head>
style
title
</head>
<body>
<header>
style: width: 100%; height: любая высота; clear:both;
</header>
<aside class="left">
style: width: 30%; float:left;
создаем любой див и вставляем туда информацию получится отдельный блок
</aside>
<main>
style: width: 40%; float:left;
создаем любой див и вставляем туда информацию получится отдельный блок
</main>
<aside class="right">
style: width: 30%; float:left;
создаем любой див и вставляем туда информацию получится отдельный блок
</aside>
</body>
</html>

Вы сделали немного не правильно, для блока сначала нужно задать контейнер (родитель) тогда вы можете управлять блоком

#left-2 {float:left; width:15%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify; margin: 5px; height:auto;}

Это лишний код, вам нужно писать все в #left-1, а так вы видите то что написали 15% первый блок и 15% второй блок = 30% + #center 65% и #right 15% в сумме мы получаем 110% - это и есть кривая верстка...

ariys

Сообщений: 106 Регистрация: Авг 2010

16 Августа 2018 08:28

<!DOCTYPE>
<head>
<style>
body {height: 100%;
width: 100%;}
header {display: block;
height: 15%;
width: 100%;
background: #ccc;
border: 1px solid #000;}
foter {display: block; height: 15%; width: 100%; background: #ccc; border: 1px solid #000;}
content { display: flex;
height: 70%;
width: 100%;
background: #ccc;
border: 1px solid #000;}
left {display: block;
width: 25%;
background: #ccc;
border: 1px solid #000;}
right {display: block;
width: 25%;
background: #ccc;
border: 1px solid #000;}
cent {display: block;
height: 100%;
width: 50%;
background: #ccc;
border: 1px solid #000;}
one { display: block;
border: 1px solid #000;
height: 33%}
two { display: block;
border: 1px solid #000;
height: 33%}
free {display: block;
border: 1px solid #000;
height: 33%}
</style>
</head>
<HTML>
<body>
<header>
</header>
<content>
<left>
<one>
</one>
<two>
</two>
<free>
</free>
</left>
<cent>
</cent>
<right>
<one>
</one>
<two>
</two>
<free>
</free>
</right>
</content>
<foter>
</foter>
</body>

</HTML>

с тебя 50 рублей

Dester

Сообщений: 11 Регистрация: Авг 2013

20 Сентября 2018 11:29

Не знаю актуально или нет, но если нужно могу запилить на флексах или гридах.Если что пиши в лс

Никита Кудряшов Сообщений: 3 Регистрация: Сен 2018	#8 24 Сентября 2018 12:12 могу помощь, пишите

Новые темы	Объявления	Свободное общение
18:58 Ходяга(АнтиМинусинск) - программа для проклика ссылок, генерации поискового и соц.трафика, улучшения ПФ 18:46 blacksprut 18:01 Бк Олимп Бет предлагает широкий выбор жестких и интенсивных ставок на спортивные события для настоящих фанатов азарта и адреналина. 18:00 Как установить приложение PINCO и попробовать свою удачу в казино, играя в любимые игры на своем мобильном устройстве. 14:41 Reddit готовится к большим изменениям: пользователи смогут монетизировать свой контент 14:34 Как быстро восстановить сайт в ПС 14:29 Артемий Лебедев: «ВКонтакте» станет «новым поисковиком»	18:55 Продам аккаунт от биржи Кворк, аккаунт от фриланс биржи kwork.ru 21:01 Sectormoney.com - быстрый и удобный обменник 17:40 Sapfirex.com - Современный сервис обмена криптовалют 16:06 A-Parser 1.1 - продвинутый парсер поисковых систем, Suggest, PR, DMOZ, Whois, etc 14:34 Belurk — высокоскоростные анонимные прокси от 0,24 рублей 13:26 BestChange – обменивать электронную валюту можно быстро и выгодно 13:21 Продажа Pia Proxy - Продажа качественных проксей \| CDKey \| Не слетают \| Гарантия 14 дней \|	19:27 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 18:15 Клещи 14:54 Telegram не смог провести различие между требованиями автократических режимов и законными демократическими запросами 13:13 С юмором по жизни! 23:03 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 09:48 Стряхнуть обыденность - об Агасфере 22:49 Точные прогнозы на футбол

Новые темы

Объявления

Свободное общение

18:58 Ходяга(АнтиМинусинск) - программа для проклика ссылок, генерации поискового и соц.трафика, улучшения ПФ
18:46 blacksprut
18:01 Бк Олимп Бет предлагает широкий выбор жестких и интенсивных ставок на спортивные события для настоящих фанатов азарта и адреналина.
18:00 Как установить приложение PINCO и попробовать свою удачу в казино, играя в любимые игры на своем мобильном устройстве.
14:41 Reddit готовится к большим изменениям: пользователи смогут монетизировать свой контент
14:34 Как быстро восстановить сайт в ПС
14:29 Артемий Лебедев: «ВКонтакте» станет «новым поисковиком»

18:55 Продам аккаунт от биржи Кворк, аккаунт от фриланс биржи kwork.ru
21:01 Sectormoney.com - быстрый и удобный обменник
17:40 Sapfirex.com - Современный сервис обмена криптовалют
16:06 A-Parser 1.1 - продвинутый парсер поисковых систем, Suggest, PR, DMOZ, Whois, etc
14:34 Belurk — высокоскоростные анонимные прокси от 0,24 рублей
13:26 BestChange – обменивать электронную валюту можно быстро и выгодно
13:21 Продажа Pia Proxy - Продажа качественных проксей | CDKey | Не слетают | Гарантия 14 дней |

19:27 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко
18:15 Клещи
14:54 Telegram не смог провести различие между требованиями автократических режимов и законными демократическими запросами
13:13 С юмором по жизни!
23:03 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди
09:48 Стряхнуть обыденность - об Агасфере
22:49 Точные прогнозы на футбол

04.01.2020 16:51	Нужна помощь по шаблону ocStore
13.07.2019 17:23	Нужна анимированная открытка
13.07.2019 17:21	Помощь по виду новостей
13.01.2019 14:20	Нужна помощь со спойлером в блоке, движок DLE
18.09.2018 16:02	Нужна доработка простой функции