Структура вёрстки для двухколоночного сайта
Когда-то я писал про структуру для трёхколоночного сайта. А в этой статье я покажу, как выглядит структура вёрстки для двухколоночного сайта.
Для начала HTML-код:
<div id="header">Шапка сайта</div>
<div id="content">
<div id="left">Левая колонка</div>
<div id="right">Правая колонка</div>
</div>
<div class="clear"></div>
<div id="footer">Подвал</div>
И CSS-код:
.clear {
clear: both;
}
#content {
width: 100%;
}
#left {
float: left;
margin-right: 30px;
width: 200px;
}
#right {
width: 100%;
}
Ключевой момент здесь состоит в том, что у нас #content имеет ширину 100%, то есть он растягивается на всю ширину родительского контейнера (например, body). Дальше мы указываем фиксированный размер для #left (хотя можно указать и проценты, если это необходимо), а для #right мы указываем 100% от оставшегося свободного места.
Вот так выглядит структура вёрстки для двухколоночного сайта.
Если Вы ещё плохо ориентируетесь в HTML и CSS, то рекомендую для изучения вот этот курс: http://srs.myrusakov.ru/makeup.
-
Создано 04.09.2013 12:12:23
-
Михаил Русаков
Комментарии (30):
хороший пример, но думаю это совсем просто. Можно дописать примером прижатия футера к низу. Это можно сделать вынося футер за весь блок контента, дать ему отрательный "margin-top:-40px"? при этом высота футера должна быть равна 40px. А всему остальному, то что осталось задать высоту "min-height:100%"
Ответить
Михаил, почему на вашем сайте нету min-width?? На маленьких нетбуках ваш сайт будет кривой :(
Ответить
Марк 08.10.2013 20:23:32 Здравствуйте Михаил не получается сделать ссылки ( навигацию сайта помогите пожалуйста: Я делаю так: <li> <a chref= "index.html">главная</a> </li> Заранее спасибо!
Ответить
href, а не chref.
Ответить
Еще вопросик у меня не получается установить denwer на windows 7. Он не запускается что делать, а без него неудобно?
Ответить
http://myrusakov.ru/php-denwer-nowork.html
Ответить
Спасибо! У меня еще ссылками не получается я сделал как вы написали. Вроде бы ссылки получились я перехожу по одной из них, как только я перешел на главную страницу ссылки погасли. А хотя на всех страницах все как надо? Но попробую еще разик может быть получится, а так скажите пожалуйста в чем может быть проблема? Заранее спасибо!!! Вот что я делаю: <h3>Меню</h3> <ul> <li> <a href="index.html">Главная</a> </li> <li> <a href="novosti.html">Новости</a> </li> <li> <a href="yrok.html"> Уроки русского</a> </li> <li> <a href="test.html">Тесты</a> </li> <li> <a href="otz.html">Отзывы</a> </li> <li> <a href="obo mne.html">Обо мне</a> </li> <li> <a href="forma obratnoia.html">обратная связь</a> </li> <li> <a href="rasnoe.html">Разное</a> </li> <li> <a href="pomog.html">Пожертвование</a> </li>
Ответить
Что значит "погасли"? Не помечены, как посещённые или что?
Ответить
Нет, просто у меня допустим открыта страница новости сайта, все нормально, но когда я перехожу на другую страницу эти ссылки превращаются в обычный текст! я не знаю что делать подскажите? Если не поняли вопроса напишите я попробую вам его еще раз объяснить.
Ответить
Значит, на других страницах нет нужного тега <a> у ссылок, либо не хватает атрибута href.
Ответить
Спасибо Михаил. Я нашел причину. И ещё извините Михаил я наверное вам уже надоел, но вопрос очень важный скажите пожалуйста какой бесплатный хостинг выбрать? Так как на платный денег нет. Заранее спасибо!
Ответить
Я не использую бесплатные хостинги вообще. Платные хостинги стоят сейчас копейки: http://myrusakov.ru/review-hostia.html
Ответить
Здравствуйте Михаил! у вопрос по denwer. Я всё-таки решил установить denwer. И установил, но не могу его запустить, не даёт (skype отключил). Он требует установить доп. программное обеспечение, высвечивается окошко: внести измениние да, нет. Я не знаю что делать мне страшно вдруг ещё компьютер сломается! что мне делать нажимать да?
Ответить
http://myrusakov.ru/php-denwer-nowork.html
Ответить
Здравствуйте Михаил у меня вот что высвечивается когда я нажимаю start denwer: Инацилизация диска X... Устанавливаем права на C:/windows/system32/drivers/etc/hosts/ Это необходимо для работы драйверов, а дальше окошко: Разрешить внесение изменинии на данном компьютере следующей программе неизвестного издателя? Имя программы: AllowToModifyVirtualHosts.exe Издатель: Неизвестно Потом спрашивают да или нет, что делать?
Ответить
Выбирайте "Да".
Ответить
Огромное спасибо,
Ответить
Здравствуйте ну я вас наверно совсем замучал, но вы уж простите меня! У меня опять по Denwer вопрос значит я установил его вроде всё нормально, но когда я захожу на localhost/tools/php my admin выходит следующая надпись: Расширение mcrypt не найдено. Пожалуйста, проверьте ваши настройки PHP. И не запускаются php скрипты. Что делать как устранить эту проблему! Еще раз спасибо!
Ответить
http://forum.php-myadmin.ru/viewtopic.php?id=2250
Ответить
Здравствуйте теперь вопрос по php. Я пишу следующее echo $_GET ['name'];, но у меня почему то не выводится на экран то, что я вписываю в текстовое поле. Помогите пожалуйста!
Ответить
Здравствуйте Марк. Внимательно проверьте, существует ли то, что Вы пытайтесь передать и правильно ли это реализовано. Пример правильной реализации передачи методом GET. Файл form.php: <form method="GET" action="add.php"> <label> <input type="text" name="page" id="textfield"> </label> <label> <input type="submit" name="button" id="button" value="Отправить"> </label> </form> Файл add.php: <?php echo $_GET['page']; ?>
Ответить
Здравствуйте Александр. Как вы описывали выше так я и делаю: <html> <head></head> <body> <fieldset> <form action="seldom.php" metod="GET"> <legend> Данные о пользователе</legend> Логин:<input type="text" name="login" value="login"/> <br/> Пароль:<input type="password" name="password" value="password"/> </fieldset> <fieldset> <legend> Контактная информация</legend> Телефон:<input type="text" name="telephone" value="telephone"/> <br/> Имя:<input type="text" name="name" value="name"/> <br/> Дата рождения (в формате число,месяц,год)<input type="text" name="birthey" value="birthey"/> <br/> <input type="submit" name="send" value="Отправить информацию"/> </fieldset> код обработчик: <php echo $_GET ['login']; echo $_GET ['password']; echo $_GET ['name]; ?> . Но тут не всё. И в итоге результат: http://tuc.local/seldom.php?login=sas&password=123&telephone=77777&name=%CF%E0%F8%E0&birthey=12.11.2013&send=%CE%F2%EF%F0%E0%E2%E8%F2%FC+%E8%ED%F4%EE%F0%EC%E0%F6%E8%FE Но! Это то выводится в адресной строке, а мне надо, чтобы на экране. (экран получается пустой). Помогите решить проблему! Спасибо! С уважением, Марк
Ответить
Уважаемый Марк. Когда пишите код, пожалуйста, более внимательно это делайте. Теги не правильные. Правильно писать <php //ошибка раз <?php // как надо echo $_GET ['name]; // ошибка два echo $_GET ['name']; // как надо ?> Вообщем смотрите свой код и ищите ошибки, они у Вас из-за невнимательности.
Ответить
Спасибо большое вы мне очень помогли!
Ответить
А у вас есть уроки о том как создавать локальные серевера для более мощных проектов ?
Ответить
Кирилл,в плане Локальные сервера?) Вы что-то путаете...а так,по администрированию и оптимизации серверов у Михаила нет уроков
Ответить
Михаил здравствуйте, можете подробно объяснить зачем это строка ставится в коде <div class="clear"></div> ?? Заранее спасибо.
Ответить
она убирает обтекание
Ответить
Не вариант, тут всего создаться блок с классом clear - а там может быть написано что угодно.
Ответить
Здравствуйте. Скажите, пожалуйста, КУДА И КАК вставлять CSS Код? Мой браузер просто выводит код и ВСЁ...
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.