Min-width и max-width

@a4t_ech · Регистрация: 10.08.2015

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

Доброго времени суток, форумчане! Разбираюсь с резиновой версткой и придумал себе такое условие:
1. минимальная ширина 960 пикселей, максимальная ширина 1600 пикселей.
2. хедер, футер должны тянуться на всю ширину экрана, контентная часть до 1150 пикселей.
3. при ширине экрана меньше 960 пикселей контент не должен тянуться.
Оцените код!

HTML5

<div id="main">
            <div id="header"></div>
            <div id="content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam dolorem consequatur fugiat accusamus consequuntur excepturi                           repudiandae necessitatibus quam velit vel laborum a ipsum, cum molestiae magni quia, facere possimus quod.
                </p>
            </div>
            <div id="footer"></div>
        </div>

CSS

*{
                margin: 0;
                padding: 0;
            }
            #main{
                min-width: 960px;
                max-width: 1600px;
                height: 100%;
                border: 1px solid black;
            }
            #header{
                width: 100%;
                height: 100px;
                background: black;
            }
            #content{
                width: 100%;
                height: 300px;
                background: yellow;
                
            }
            #content p{
                nim-width: 960px;
                max-width: 1150px;
                background: blue;
                margin: 0 auto;
            }
            #footer{
                width: 100%;
                height: 100px;
                background: green;
            }

@Fedor92 · 11.11.2015, 11:53

#content p{nim-width: 960px;} тоже оценивать?

@a4t_ech · 11.11.2015, 12:08 **[ТС]**

все оценивать) если в хедер добавить горизонтальное меню, то длину его пунктов нужно задавать фиксированной в рх или %, что при изменении ширины сайта от 960рх до 1600рх меню тоже плавно подстраивалось?

@Fedor92 · 11.11.2015, 12:43

a4t_ech, то есть Вас не смутил мой первый пост?

Ладно, если первый пост не смутил покажеи другую картинку... Ширина - 1920px...

Есть над чем подумать не правда ли? Header и footer не тянутся на 100%, поскольку вложены в main...

Доработаем? Кстати по поводу вложенности надеюсь - это искажение редактора форума, а не реальный код...

@a4t_ech · 11.11.2015, 13:01 **[ТС]**

nim-width)) опечатка! и поправил код, уже лучше? с вложенностью все ок (работаю табом) это так отображает редактор на форуме

HTML5

<body>
        <div id="header"></div>
        <div id="content">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam dolorem consequatur fugiat accusamus                          consequuntur excepturi repudiandae necessitatibus quam velit vel laborum a ipsum, cum molestiae magni quia, facere possimus quod.
            </p>
        </div>
        <div id="footer"></div>
</body>

CSS

*{
                margin: 0;
                padding: 0;
            }
            #header{
                width: 100%;
                height: 100px;
                background: black;
            }
            #content{
                width: 100%;
                height: 300px;
                background: yellow;
                
            }
            #content p{
                min-width: 960px;
                max-width: 1150px;
                background: blue;
                margin: 0 auto;
            }
            #footer{
                width: 100%;
                height: 100px;
                background: green;
            }

@Fedor92 · 11.11.2015, 13:07

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

опечатка!

Восклицательные знаки ставить не обязательно, я итак это понял...

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

уже лучше?

a4t_ech, теперь контентная часть шалит не соблюдаются условия: 1, 2-вторая половина и 3...

Надо перенести условия ширины и отцентрировать блок и будет гуд... Если кончено под контентной частью Вы подразумевали блок #content...

@a4t_ech · 11.11.2015, 13:32 **[ТС]**

так?

CSS

             #content{
                min-width: 960px;
                max-width: 1150px;
                margin: 0 auto;
                height: 300px;
                background: yellow;
                
            }
            #content p{
                width: 100%;
                background: blue;
            }

@Fedor92 · 11.11.2015, 13:47

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

так?

Вроде того...
Если следовать всем условиям:

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

HTML5

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Verstak :)</title>
    <style>
        *{margin: 0; padding: 0}
        html, body{min-width: 960px; max-width: 1600px; height:100%; margin:0 auto}
        #header{width: 100%; height: 100px; background: black}
        #content{min-width: 960px; max-width: 1150px; margin: 0 auto; height: 300px; background: yellow}
        #content p{background: blue; margin:0 auto}
        #footer{width: 100%; height: 100px; background: green}
    </style>
</head>
<body>
    <div id="header"></div>
        <div id="content">
            <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam dolorem consequatur fugiat accusamus                          consequuntur excepturi repudiandae necessitatibus quam velit vel laborum a ipsum, cum molestiae magni quia, facere possimus quod.
            </p>
        </div>
    <div id="footer"></div>
</body>
</html>

Но данный шаблон будет смотреться не очень на 1920px+

@a4t_ech · 11.11.2015, 13:51 **[ТС]**

а как правильно задавать ширину пунктов меню в хедере в рх или %?

@Fedor92 · 11.11.2015, 14:03

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

а как правильно задавать ширину пунктов меню в хедере в рх или %?

Лучше в % для адаптивности...

@a4t_ech · 11.11.2015, 14:10 **[ТС]**

спасибо

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	11.11.2015, 11:53	2
	#content p{nim-width: 960px;} тоже оценивать? 0

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162
	11.11.2015, 12:08 [ТС]	3
	все оценивать) если в хедер добавить горизонтальное меню, то длину его пунктов нужно задавать фиксированной в рх или %, что при изменении ширины сайта от 960рх до 1600рх меню тоже плавно подстраивалось? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	11.11.2015, 12:43	4
	a4t_ech, то есть Вас не смутил мой первый пост? Ладно, если первый пост не смутил покажеи другую картинку... Ширина - 1920px... Есть над чем подумать не правда ли? Header и footer не тянутся на 100%, поскольку вложены в main... Доработаем? Кстати по поводу вложенности надеюсь - это искажение редактора форума, а не реальный код... 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	11.11.2015, 13:07	6
	Сообщение от a4t_ech опечатка! Восклицательные знаки ставить не обязательно, я итак это понял... Сообщение от a4t_ech уже лучше? a4t_ech, теперь контентная часть шалит не соблюдаются условия: 1, 2-вторая половина и 3... Надо перенести условия ширины и отцентрировать блок и будет гуд... Если кончено под контентной частью Вы подразумевали блок #content... 0

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162
	11.11.2015, 13:51 [ТС]	9
	а как правильно задавать ширину пунктов меню в хедере в рх или %? 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	11.11.2015, 14:03	10
	Сообщение от a4t_ech а как правильно задавать ширину пунктов меню в хедере в рх или %? Лучше в % для адаптивности... 0

@a4t_ech 4 / 4 / 2 Регистрация: 10.08.2015 Сообщений: 162
	11.11.2015, 14:10 [ТС]	11
	спасибо 0