Назад
Создание прибыльного бизнеспроекта на базе сайта

SEO + ASP.NET 4.0 + БИЗНЕСМОДЕЛЬ = ПРИБЫЛЬНЫЙ САЙТ

Инструмент быстрого построения прибыльного онлайн бизнеса своими силами без капиталовложений за 4 месяца все подробности на SEO + ASP.NET 4.0.

Подписка на рассылку

МАГИЯ C#!

Создание вебсайта с формой автоматического приема онлайн платежей по WebMoney!
Ваше имя
Ваш e-mail
Уроки по ASP.NET c# ADO.NET
     

18 видеоуроков
более 5 часов
по созданию сайта,
выполняющего
продажи ваших продуктов (физических/электронных) на полном автомате с личным оповещением на e-mail, а также ...
DVD-курс по C#, .NET

3 часть. Введение в ASP.NET. WebServices Профессиональная подготовка разработчика по языку C# на платформе .NET

asp.net webservices dvd c# gridview Гудок курс Более 65 подробных видео уроков по теоретическим основам технологии сайтостроения ASP.NET и процессу создания и использованию вебсервисов.

DVD-курс по C#, .NET

2А часть. XML/TXT в аспекте ADO.NET Профессиональная подготовка разработчика по языку C# на платформе .NET

xml txt dvd c# ADO ADO.NET Гудок курс 70 подробных видео уроков по работе с форматами xml, txt, по работе с файлами и директориями. Разработка высокоорганизованных свойств для значительного сокращения объема исходного кода и облегчения дальнейшей модификации и многое-многое другое...

DVD-курс по C#, .NET

1 часть. Windows Forms Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок

185 подробнейших уроков (70 часов) лекций в формате видеоуроков по теории языка c# и платформы .NET. Практическое закрепление теоретического материала на примере создания Windows Forms - приложения видеоигры "Tanks"

DVD-курс по C#, .NET

2 часть. ADO.NET/SQL Профессиональная подготовка разработчика по языку C# на платформе .NET

Профессиональная подготовка на c# А. Гудок ADO.NET sql

165 подробных видео уроков по созданию приложений распределенных баз данных на примере разработки проектов с использований технологий ADO.NET (Connected model, Disconnected model, Typed DataSet, ...)

Бодибилдинг
Программы тренировок для занятий штангой, гантелями; описание тренажеров

Я записываю курсы!
  Курс валют

НБУ курс евро






DIV верстка резиновых блоков в разметке html/css float



Смежные статьи: Выравнивание надписей серверных элементов ASP.NET с помощью стилей CSS и Урок верстки из .psd

Пару дней назад один посетитель данного сайта, Максим, попросил меня показать, как сверстан сайт skillcoding.com.

Максим, дело в том, что весь контент сайта (любой страницы) сформирован таким образом, что полностью разъезжается на всю ширину окна браузера, не зависимо от разрешения экрана и абсолютной ширины монитора.

Хотя сам я мало чего понимаю в html-верстке (профиль программера, а не верстальщика), но все же многолетняя совместная работа с верстальщиками не могла не сказаться положительно в плане моих познаний html/css.

Конечно, любой прогер ASP.NET обязан хотя бы владеть основами html/css, иначе ничего путнего с чистого ASP.NET по получиться.

Итак, смотри - вопрос заключается в следущих аспектах:

а) как скомпоновать блоки на сайте так, что б сверху был один горизонтальный header, в центре три вертикальных блока, крайние заданной ширины и прилегающие к краям экрана, средний «резиновый» и размещающийся между крайними блоками. Под всеми этими блоками размещается futer, занимающий, как и header горизонтальное 100% положение.

б) как заставить все блоки находиться в точно заданных позициях не накладываясь друг-на-друга и не съезжая при изменении внутри них контента.

Поехали.

Верстка основана на тегах <div>.

<!-- шапка -->
<div id="header">Шапка</div>

<!-- левый вертикальный -->
<div id="left">левый блок</div> 
<!-- правый вертикальный -->
<div id="right">правый блок</div>
<!-- центральный блок (для динамического контента)-->
<div id="middle">центральная резина</div>
    
<!-- футер -->Вот имеем 5 блоков div.
<div id="footer">футер</div>

Скажу, что в табличной верстке такое позиционирование задать проще простого. Одна таблица table, три строки tr и три столбца на каждую td. Верхняя и нижняя строки содержат по одному столбцу, colspan которых установлено в 3. Средняя строка имеет 3 столбца. Ширина таблицы 100%. Вот и имеем резиновую верстку с точно позиционируемыми блоками.

Почему я не использую табличную верстку сейчас объяснять не стану.

Гораздо более интереснее увидеть стили, которые позволяют выше описанным div-ам занять свое место на екране.

#header
{
	width: 100%;
	margin: 0px;
	text-align: center;
	background-color:#ff9999;
}
#right 
{
  float: right;	
  width: 200px;
  margin: 20px 0px 0px 0px;
  text-align: right;
   
  background-color:#99ff99;
  height: 400px;
}
#middle
{
	margin: 20px 220px 10px 220px;
	background-color:#9999ff;
	height: 400px;
	text-align: center;
}
#footer
{
	margin: 0;
	border: solid 1px Dark;
	background-color: #dbc1c1;
	font-size: 10px;
	text-align: center;
	clear:both;
}
#left 
{
	background-color:#fdff5e;
	margin: 20px 0px 0px 0px;
	width: 200px;
	float:left;
	height: 400px;
}

Думаю, здесь все ясно как белый день. Дополнительные стили введены для того, что б было нагляднее увидеть местопозиционирование каждого блока. А реально, всю ситуацию разруливает следующее:

#header
{
	width: 100%;
}
#right 
{
  	float: right;	
  	width: 200px;
}
#middle
{
	margin: 20px 220px 10px 220px;
}
#footer
{
	clear:both;
}
#left 
{
	width: 200px;
	float:left;
}

Ключевым свойством является float. Благодаря ему мы указываем блоку как позиционировать себя относительно соседнего блока. Соседний считается предыдущий и следующий в html-разметке. Именно в том порядке, в котором мы их указали на странице.

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

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

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

А получиться должно следующее:



Больше информации читайте по теме:



Оценить статью:

Оценивая статью, Вы подсказываете нам насколько данная информация стала полезной именно для Вас. Мы ожидаем, прежде всего, оценку доступности материала для понимания и простоты его изложения. Дополнительные комментари, вопросы, дополнения и замечания Вы можете указать на странице От Вас

Частичное, или полное копирование материала данной статьи возможно лишь при размещении ссылки на данную страницу.


            
        


        Саша Гудок    22.11.2010 11:53:48
        

Максим, если есть еще вопросы по этому поводу - напиши. постараюсь ответить как появится свободная минута.


        Не Максим    22.11.2010 23:24:32
        

Не знаюкто такой Максим, но спасибо ему за вопрос - случяйна попал на сайт Супер! И статья в тему!


        Игнат    05.12.2010 11:28:49
        

Спасибо за статью, очень помогла.


        Alexey    13.12.2010 18:35:48
        

А как быть, если в центральной резине где-то внутри встречаются элементы с clear: both? Ведь вся разметка плывет в этом случае. Элемент с clear: both размещается ниже левого или правого блока..


        Владимир    21.12.2010 18:17:02
        

Клевые уроки спасибо!!! было бы класно если бы видео уроки делал)


        Саша Гудок    25.12.2010 13:24:58
        

Ну да, только времени это занимает много. Быстрее текстовку накидать. Но видео по верстке немного будет в курсе по ASP.NET на создании рабочего сайта.


        Даниил    14.01.2011 18:36:30
        

Урок, конечно очень хороший, но у меня почему-то центральная резина не растягивается и футер не прилегает к нижниму краю окна браузера...


        Александр Гудок    15.01.2011 13:30:55
        

Попробуй вставить этот код и посмотри, или сработает как надо. Возможно, у тебя что-то не так как здесь.


        Anton    26.01.2011 15:30:01
        

Spasibo! U menia vsio ok poluchilos!


        Keylis    17.04.2011 16:31:38
        

Александр! Огромное спасибо! Уже несколько дней ломал голову над этим и случайно наткнулся на на этот сайт!

77.47.192.206


        allash    21.05.2011 1:02:34
        

Привет всем! Помогите решить проблему!) Отверстал сайт с использованием CSS3: тени, градиент и округлённость углов отображается нормально во всех браузерах, но не в ИЕ-8 и ниже! Подскажите, что делать?!

109.104.166.154


        Саша Гудок    23.05.2011 23:50:38
        

Я не верстальщик сам, просто видел результаты работы коллег-верстальщиков и изучал их исходную разметку. В итоге просто наблатыкался с разметкой, но это не мой профиль. А скорее всего под старыми версиями CSS3 не воспринимается, атк что просто округленности картинками делай.

109.167.74.76


        allash    24.05.2011 13:22:15
        

ok

212.92.229.210


        Natasha    23.09.2011 2:15:03
        

Спасибо! Хорошо и доступно описано.

93.75.137.12




Имя:  


Текст комментариев (не больше 600 знаков):  
введите не более 600 знаков



Введите символы с картинки:
Капча имеет "срок годности". Поэтому, если необходимо обновите страницу.



Черный список покупателей
c# курс Гудок   курс по ASP.NET Гудок   курс по ADO.NET Гудок   курс по XML txt Гудок   курс по рефлексии и многопоточности Гудок