Блочная верстка

@evilcockroach · Регистрация: 29.07.2013

Author24 — интернет-сервис помощи студентам

Просьба не судить строго. Изучаю HTML и CSS неделю. Когда писал сайт на табличной верстке все было отлично, но вот сейчас пробую на блочной, и все очень плохо. Понимаю что суть моей проблемы в непонимании мною, как правильно расчертить, и то что на данный момент у меня имеется - смех для опытных веберов, но так уж получилось.
Хочу я создать сайт примерно такой схемы:
Схема
И что бы на деле это выглядело схоже с этим:
Пример
То-есть чего я хочу добиться:
что бы имелась резиновая модель, и какое бы разрешение монитора не было, она все равно будет эстетично растягиваться и покрывать все и в ширину и в длину;
при маленьком разрешении что бы блоки не наезжали друг на друга.
То что я создал:

Кликните здесь для просмотра всего текста

HTML5

<!doctype html>
 
<html>
 
<head>
<meta charset="utf-8">
<title>Football Stars</title>
<link rel="stylesheet" href="un1.css" type="text/css" />
</head>
 
<body>
 
<div id="General">
 
    <div>
        <div id="BD"><img src="1.jpg"> </div>
        <div id="Head"><img src="2.jpg"></div>
        <div id="Social"><img src="3.jpg"></div>
        
    </div>
    <div id="VertMenu"><img src="4.jpg"></div>
    
    <div>
        <div id="HorMenu"><img src="5.jpg"></div>
        <div id="Content"><img src="6.jpg"></div>
        <div id="Multi"><img src="7.jpg"></div>
    </div>
    
    <div id="Footer"><img src="8.jpg"></div>
    
</div>
 
</body>
 
</html>

Кликните здесь для просмотра всего текста

CSS

#General, #BD, #Head, #Social, #VertMenu, #HorMenu, #Content, #Multi, #Footer {
    float:left;
    border: 0px solid Green;
}
 
#General {
    width:100%;
    height:100%;
}
 
#BD {
    width:10%;
    height:10%;
}
 
#Head {
    width:80%;
    height:10%;
}
 
#Social {
    width:10%;
    height:10%;
}
 
#VertMenu {
    width:100%;
    height:10%;
}
 
#HorMenu {
    width:20%;
    height:70%;
}
 
#Content {
    width:60%;
    height:70%;
}
 
#Multi {
    width:20%;
    height:70%;
}
 
#Footer {
    width:100%;
    height:10%;
}

Добавлено через 6 минут
Ну на деле, ясное дело, у меня: по горизонтали блоки друг друга съедают, а по вертикали внизу пустое место остается.
Печальный исхол

Stopy · 13.09.2014, 22:33

структурируй свой код. раздели на header,main,footer. давай им ширину 100%, а длину фиксированную (например 100px). внутри блокам стоящие в одной строке прописывай float: left; и не нужно всем блокам делать размер в %. некоторым можно оставить фиксированный, чтобы растягивались только отдельные. и почитай про @media (медиа-запросы в css3)

@evilcockroach · 14.09.2014, 00:08 **[ТС]**

Можешь переделать пожалуйста css? А то я переделал код, в итоге у меня теперь блоки не помещаются, как я хочу.

Stopy · 14.09.2014, 00:29

учатся на пробах и ошибках, я тебе дал направление, а ты пробуй. тебе же все равно не в продакшен пилить

@evilcockroach · 14.09.2014, 01:23 **[ТС]**

Мне этот чертов сайт на рейтинг пилить надо будет.

Stopy · 14.09.2014, 01:46

evilcockroach, во первых зачем там вот это
border: 0px solid Green;

CSS

#general{
width: 1000px;
height: 1500px;
margin: 0 auto;
}
#vertmenu{
float: none;
}
#footer{
float: none;
}

отсюда и пляши. f12 в помощь

@evilcockroach · 14.09.2014, 02:05 **[ТС]**

border: 0px solid Green; - для теста
Спасибо за труды, но при пляске от выше указанного варианта я получаю стандартную верстку, где:
слева и справа заполняются фоном, что зачастую и делается. Я выше указывал, что хочу более сложный вариант, где подобная вещь отсутствует, а ее место покрывают те же самые блоки. От этого у меня пляска с процентами и идет.

Stopy · 14.09.2014, 02:15

короче, не засовывай в блоки картинки. а сделай фон блоков картинкой. типа:

CSS

#bd{
background-image: url(imgs/1.jpg);
    width:80%;
    height:10%;
}

@Amestigon · 14.09.2014, 13:29

evilcockroach, Вы ставите нереальную задачу, которая к тому же не имеет практического применения.

Сообщение от evilcockroach

То-есть чего я хочу добиться:
что бы имелась резиновая модель, и какое бы разрешение монитора не было, она все равно будет эстетично растягиваться и покрывать все и в ширину и в длину;

Если с резиновой шириной все понятно и проблем нет, то вот с высотой все не так просто. В первую очередь никогда контент не зависит от высоты. Всегда высота зависит от контента. Ведь чаще всего высота контента больше высоты окна браузера. И это нормально и правильно. То есть блоки должны растягиваться по высоте. Поэтому тем блокам, в которых находится изменяемый контент высоту или не задают вообще или задают минимально-необходимую. Для этого используют свойство min-height. А тем блокам где контент не изменяется (это как правило шапка сайта, подвал, горизонтальная навигационная панель и т.д.) высоту задают фиксированную.
Но бывает когда высота сайта меньше окна браузера. В этом случае подвал будет не в самом низу, а может находится в любом месте, в зависимости от того, какой высоты ваш контент. Многим это не нравится. Поэтому используют способ для прижатия подвала к низу страницы. В табличной верстке этого делать не надо, а вот в блочной приходится. Так же в блочной верстке есть проблема с одинаковой высотой колонок. Ведь на стандартных макетах высота колонок будет зависеть от контента. В табличной верстке с этим опять же нет никаких проблем. Все колонки строго одинаковой высоты.
Все эти задачи вполне решаемы и в блочной верстке, но вариантов решения существует несколько. И выбор их зависит в первую очередь от реального макета.
Для начала попробуйте воспользоваться вот этим генератором макетов.
P.S И кстати, никогда не вставляйте оформление в html код. Для этого есть CSS.

@evilcockroach · 14.09.2014, 14:23 **[ТС]**

Всем спасибо за советы, и последний вопрос. В самом первом сообщении я выкладывал пример блочной верстки, в целом интересная штука, но я так и не понял каким образом там задается то, что при маленьком разрешении текст и меню начинают трансформироваться в несколько полос, как убрать этот эффект?

@Amestigon · 14.09.2014, 15:01

Сообщение от evilcockroach

В самом первом сообщении я выкладывал пример блочной верстки, в целом интересная штука, но я так и не понял каким образом там задается то, что при маленьком разрешении текст и меню начинают трансформироваться в несколько полос, как убрать этот эффект?

Задать меню фиксированную ширину. Тогда при размере экрана меньше этой заданной ширины,появится полоса горизонтальной прокрутки. Меню в примере кстати реализовано не лучшим образом. Попробуйте-ка на малом разрешении выбрать у пункта 2 подпункт 1.

У меня не получилось. Поэтому повторюсь, дивная верстка хороша в первую очередь тем, что в зависимости от реального макета можно использовать различные, наиболее подходящие для данного макета, решения для одинаковых задач.

@Amestigon 33 / 32 / 15 Регистрация: 12.06.2014 Сообщений: 119
	14.09.2014, 15:01	11
	Сообщение было отмечено evilcockroach как решение Решение Сообщение от evilcockroach В самом первом сообщении я выкладывал пример блочной верстки, в целом интересная штука, но я так и не понял каким образом там задается то, что при маленьком разрешении текст и меню начинают трансформироваться в несколько полос, как убрать этот эффект? Задать меню фиксированную ширину. Тогда при размере экрана меньше этой заданной ширины,появится полоса горизонтальной прокрутки. Меню в примере кстати реализовано не лучшим образом. Попробуйте-ка на малом разрешении выбрать у пункта 2 подпункт 1. У меня не получилось. Поэтому повторюсь, дивная верстка хороша в первую очередь тем, что в зависимости от реального макета можно использовать различные, наиболее подходящие для данного макета, решения для одинаковых задач. 1

Stopy 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 26
	13.09.2014, 22:33	2
	структурируй свой код. раздели на header,main,footer. давай им ширину 100%, а длину фиксированную (например 100px). внутри блокам стоящие в одной строке прописывай float: left; и не нужно всем блокам делать размер в %. некоторым можно оставить фиксированный, чтобы растягивались только отдельные. и почитай про @media (медиа-запросы в css3) 0

@evilcockroach 14 / 14 / 5 Регистрация: 29.07.2013 Сообщений: 138
	14.09.2014, 00:08 [ТС]	3
	Можешь переделать пожалуйста css? А то я переделал код, в итоге у меня теперь блоки не помещаются, как я хочу. 0

Stopy 0 / 0 / 0 Регистрация: 13.09.2014 Сообщений: 26
	14.09.2014, 00:29	4
	учатся на пробах и ошибках, я тебе дал направление, а ты пробуй. тебе же все равно не в продакшен пилить 0

@evilcockroach 14 / 14 / 5 Регистрация: 29.07.2013 Сообщений: 138
	14.09.2014, 01:23 [ТС]	5
	Мне этот чертов сайт на рейтинг пилить надо будет. 0

@evilcockroach 14 / 14 / 5 Регистрация: 29.07.2013 Сообщений: 138
	14.09.2014, 02:05 [ТС]	7
	border: 0px solid Green; - для теста Спасибо за труды, но при пляске от выше указанного варианта я получаю стандартную верстку, где: слева и справа заполняются фоном, что зачастую и делается. Я выше указывал, что хочу более сложный вариант, где подобная вещь отсутствует, а ее место покрывают те же самые блоки. От этого у меня пляска с процентами и идет. 0

@Amestigon 33 / 32 / 15 Регистрация: 12.06.2014 Сообщений: 119
	14.09.2014, 13:29	9
	evilcockroach, Вы ставите нереальную задачу, которая к тому же не имеет практического применения. Сообщение от evilcockroach То-есть чего я хочу добиться: что бы имелась резиновая модель, и какое бы разрешение монитора не было, она все равно будет эстетично растягиваться и покрывать все и в ширину и в длину; Если с резиновой шириной все понятно и проблем нет, то вот с высотой все не так просто. В первую очередь никогда контент не зависит от высоты. Всегда высота зависит от контента. Ведь чаще всего высота контента больше высоты окна браузера. И это нормально и правильно. То есть блоки должны растягиваться по высоте. Поэтому тем блокам, в которых находится изменяемый контент высоту или не задают вообще или задают минимально-необходимую. Для этого используют свойство min-height. А тем блокам где контент не изменяется (это как правило шапка сайта, подвал, горизонтальная навигационная панель и т.д.) высоту задают фиксированную. Но бывает когда высота сайта меньше окна браузера. В этом случае подвал будет не в самом низу, а может находится в любом месте, в зависимости от того, какой высоты ваш контент. Многим это не нравится. Поэтому используют способ для прижатия подвала к низу страницы. В табличной верстке этого делать не надо, а вот в блочной приходится. Так же в блочной верстке есть проблема с одинаковой высотой колонок. Ведь на стандартных макетах высота колонок будет зависеть от контента. В табличной верстке с этим опять же нет никаких проблем. Все колонки строго одинаковой высоты. Все эти задачи вполне решаемы и в блочной верстке, но вариантов решения существует несколько. И выбор их зависит в первую очередь от реального макета. Для начала попробуйте воспользоваться вот этим генератором макетов. P.S И кстати, никогда не вставляйте оформление в html код. Для этого есть CSS. 1

@evilcockroach 14 / 14 / 5 Регистрация: 29.07.2013 Сообщений: 138
	14.09.2014, 14:23 [ТС]	10
	Всем спасибо за советы, и последний вопрос. В самом первом сообщении я выкладывал пример блочной верстки, в целом интересная штука, но я так и не понял каким образом там задается то, что при маленьком разрешении текст и меню начинают трансформироваться в несколько полос, как убрать этот эффект? 0

Блочная верстка

Решение