Нужна помощь в верстке
Страницы: 1
Нужна помощь в верстке
Помогите разобраться с тегом div. Нужно сверстать вот такой тип шаблона:
шаб.jpg (41.53 КБ) [ Скачать ]

Прогон по твиттеру, постинг в 1500 аккунтов
Постинг в твиттер аккаунты, для ускорения индексации ваших сайтов, сателлитов, дорвеев.

Код
 <!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;} 
пока только так
а если еще кто-нибудь поможет в этом разобраться, буду очень благодарен!!! За ранее спасибо!!!
<!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% - это и есть кривая верстка...
<!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 рублей
Не знаю актуально или нет, но если нужно могу запилить на флексах или гридах.Если что пиши в лс
могу помощь, пишите
Страницы: 1
Похожие темы:
Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)
Новые темыОбъявленияСвободное общение
18:54 Закрыть фильтры от индексации 
18:38 Кто как борется с РКН и компанией? 
17:24 Бесплатный или платный сертификат HTTPS 
17:03 Монетизируем 100% adult траффика без остатков. 
16:30 Popunder.ru - крупнейшая биржа трафика, стабильные выплаты с 2007 года! 
16:14 CleverAff - умные зарабатывают с нами 
16:02 Обновление поисковой базы Яндекса 12.07.2019. 
17:58 Продвину сайт качественными ссылками. Рост посещаемости, позиций и ИКС. Крауд ссылки недорого + скидки. 
14:31 SocksHub.net - proxy, которые подходят всем 
14:06 Повышение ИКС сайта - Размещение вечных ссылок в Яндекс.Коллекциях 
13:06 Качественный современный дизайн сайтов, логотипов, печатной продукции. Верстка HTML5/CSS3/JS. 
13:03 Ищу вебмастеров 
11:37 Прогоны всегда по свежим качественным трастовым сайтам от 150р 
11:13 Услуги постинга в социальные сети для продвижения, индексации и увеличения социальной активности 
14:48 Как задать размеры у файла iframe? 
13:11 Топик поднятия настроения. Приколы, картинки, видео и пр. 
12:13 Тема для "стесняшек" 
00:42 Plussy - лучшая партнерка для гемблинг 
21:25 Несколько статей по сео-продвижению. 
17:00 Живые подписчики в инстграм за копейки 
10:17 Анонимные посты в вк