Результаты опроса: Актуальны для вас такие уроки?

Голосовавшие
165. Вы ещё не голосовали в этом опросе
  • Да

    130 78.79%
  • Нет

    16 9.70%
  • Не знаю

    19 11.52%
+ Ответить в теме
Страница 1 из 11 1 2 3 4 5 ... ПоследняяПоследняя
Показано с 1 по 10 из 101

Тема: Примеры html, css решений частных вопросов

  1. #1
    Special web solutions klenovnn как роза среди колючек klenovnn как роза среди колючек klenovnn как роза среди колючек Аватар для klenovnn
    Регистрация
    25.03.2009
    Адрес
    Новосибирск
    Сообщений
    702

    Сообщение Примеры html, css решений частных вопросов

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

    1. Одна таблица для создания общего макета

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

    <table cellspacing="0">
    <tr>
    <td>левый ряд</td>
    <td>центр</td>
    <td>правый ряд</td>
    </tr>
    </table>
    Для того чтобы добавить меню и прочее, вставляйте свой код (список, див...) между <td></td>. Для того чтобы использовались отступы, их можно задать как новому диву, к примеру рассмотрим sidebar (левый ряд)
    <table cellspacing="0">
    <tr>
    <td>
    <div id="sidebar">левый ряд</div>
    </td>
    <td>центр</td>
    <td>правый ряд</td>
    </tr>
    </table>
    И добавляем css:

    div#sidebar {margin:10px;}/*получаем отступы по всему кругу, или же margin:0 10px; отступы только справа и слева.*/
    Последний раз редактировалось klenovnn; 29.10.2011 в 23:03.
    // Сайт под ключ и другое klenovnn

  2. #2
    Special web solutions klenovnn как роза среди колючек klenovnn как роза среди колючек klenovnn как роза среди колючек Аватар для klenovnn
    Регистрация
    25.03.2009
    Адрес
    Новосибирск
    Сообщений
    702

    Расположение двух и трех div'ов по горизонтали

    2. Располагаем два и три дива по горизонтали.

    2 div'a по горизонтали
    code:

    <div id="sidebar">левый блок</div>
    <div id="content">правый блок</div>

    css:

    div#sidebar {float:left;}
    div#content {float:right;}


    3 div'a по горизонтали
    code:

    <div id="sidebar">левый блок</div>
    <div id="sidebar2">правый блок</div>
    <div id="content">центральный блок</div>

    css:

    div#sidebar {float:left; width:250px;}
    div#sidebar2 {float:right; width:250px;}
    div#content {margin:0 300px;}
    // Сайт под ключ и другое klenovnn

  3. #3
    Special web solutions klenovnn как роза среди колючек klenovnn как роза среди колючек klenovnn как роза среди колючек Аватар для klenovnn
    Регистрация
    25.03.2009
    Адрес
    Новосибирск
    Сообщений
    702

    Применение php. Общая шапка и дно

    3. Быстрая смена шапки (header) и дна (footer) в десятках страниц.

    Создаем примитивный сайт, где будет использоваться общая шапка (header), меню (sidebar), дно (footer).
    Идеальное решение для начинающего пользователя, пожелавшего создать сайт в пределах 10 страниц (фактически можно и больше).

    Внимание: Для того, чтобы использовать данное решение, необходим хостинг с поддержкой php.

    Пишем макет сайта:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Простой макет</title>
    <style>
    html, body {margin:0; padding:0; font-size:100.01%;}
    body {background-color:#fff; color:#000; font:normal 12px ‘Tahoma’;}
    </style>
    </head>
    <body>

    <table cellspacing="0">
    <tr>
    <td colspan="2">
    <h1>Заголовок страницы</h1>
    </td>
    </tr>
    <tr>
    <td width="250px">
    <ul>
    <li><a href="#">Главная страница</a></li>
    <li><a href="#">О компании</a></li>
    <li><a href="#">Контактная информация</a></li>
    </ul>
    </td>
    <td>Содержание страницы</td>
    </tr>
    <tr>
    <td colspan="2">
    Copyright &copy; 2009
    </td>
    </tr>
    </table>

    </body>
    </html>
    Затем разделяем его на состовляющие:
    Файл header.inc

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Простой макет</title>
    <style>
    html, body {margin:0; padding:0; font-size:100.01%;}
    body {background-color:#fff; color:#000; font:normal 12px ‘Tahoma’;}
    </style>
    </head>
    <body>

    <table cellspacing="0">
    <tr>
    <td colspan="2">
    <h1>Заголовок страницы</h1>
    </td>
    </tr>
    Далее файл sidebar.inc

    <tr>
    <td width="250px">
    <ul>
    <li><a href="#">Главная страница</a></li>
    <li><a href="#">О компании</a></li>
    <li><a href="#">Контактная информация</a></li>
    </ul>
    </td>
    И заключительный файл footer.inc

    </tr>
    <tr>
    <td colspan="2">
    Copyright &copy; 2009
    </td>
    </tr>
    </table>

    </body>
    </html>
    Файл index.php выглядеть останется вот так:

    <?php include"header.inc"; ?>
    <?php include"sidebar.inc"; ?>
    <td>Содержание страницы</td>
    <?php include"footer.inc"; ?>

    В итоге все остальные страницы мы создаем по аналогии с файлом index.php.
    // Сайт под ключ и другое klenovnn

  4. #4
    Супер-модератор MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится Аватар для MetSerp
    Регистрация
    20.10.2008
    Адрес
    Москва
    Сообщений
    3,274
    дабы не было оффтопа - закрыто.

  5. #5
    Супер-модератор MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится MetSerp за этого человека можно гордится Аватар для MetSerp
    Регистрация
    20.10.2008
    Адрес
    Москва
    Сообщений
    3,274
    Открыто по просьбе автора, пишите свои вопросы по html+css, когда наберется достаточное количество вопросов на них будут даны ответы klenovnn, .
    От меня: не пишите вопросы которые требуют срочного решения, так как " когда наберется достаточное количество вопросов на них будут даны ответы klenovnn, .", но не ранее.
    Просьба к остальным, не отвечать на вопросы так как они собираются для создания уроков, после того как klenovnn, ответит на вопросы, сами вопросы будут удалены, чтобы тема имела вид сборника рецептов.
    Вроде все.

  6. #6
    Местный Arks - луч света в тёмном царстве Arks - луч света в тёмном царстве Arks - луч света в тёмном царстве Arks - луч света в тёмном царстве Arks - луч света в тёмном царстве Аватар для Arks
    Регистрация
    20.03.2010
    Адрес
    Москва
    Сообщений
    2,780
    Оптимальный макет:
    меню
    таблица
    меню

    Мой вариант:
    div без ширины выровненный по горизонтали
    таблица как position:relative; margin-top: n-цать px
    div без ширины выровненный по горизонтали в котором наборы dl/dd/dt

    Автор - твой вариант... Может что лучше продложишь
    Earling Mitsomaar!! div-pro

  7. #7
    тема про html, а речь о php... ладно спрошу ,.. сделал я например шаблон (футер хедер и всё такое) , дальше налепил страниц 1.php 2.php... 10000.php как туда сувать мета теги (кейвордс и описание)? вручную на каждой странице ?? я так подозриваю что есть какой-то скрипт или код который например копирует title в description

  8. #8
    Администратор Webmaster отключил(а) отображение уровня репутации Аватар для Webmaster
    Регистрация
    05.03.2007
    Адрес
    Belarus
    Сообщений
    7,531
    Записей в дневнике
    1
    Цитата Сообщение от x-line Посмотреть сообщение
    тема про html, а речь о php... ладно спрошу ,.. сделал я например шаблон (футер хедер и всё такое) , дальше налепил страниц 1.php 2.php... 10000.php как туда сувать мета теги (кейвордс и описание)? вручную на каждой странице ?? я так подозриваю что есть какой-то скрипт или код который например копирует title в description
    если вы делали PHP странички, то что вам мешает вписать title в description ?

  9. #9
    Цитата Сообщение от x-line Посмотреть сообщение
    тема про html, а речь о php... ладно спрошу ,.. сделал я например шаблон (футер хедер и всё такое) , дальше налепил страниц 1.php 2.php... 10000.php как туда сувать мета теги (кейвордс и описание)? вручную на каждой странице ?? я так подозриваю что есть какой-то скрипт или код который например копирует title в description
    Для этого достаточно сделать в шаблоне вставку переменной, а в общем шаблоне задать условие для вывода и подставлять переменную туда куда надо с теми значениями каторые нужны!

  10. #10
    http://divhack.com/
    html css решения. Сайт мой.
    Собрано множество решений по вёрстке, некоторые решены на javascript и jquery.
    Присутствуют также такие сложные кроссбраузерные вещи как:
    Стилизация селекта (безумно востребованное решение)
    Стилизация радиокнопки
    Слайдер постраничный для картинок
    Нестандартный input type file
    Таблица в div подстраивающаяся под контент любой ячейки
    Нестандартный input type submit
    футер внизу

    Когда начинал заниматься вёрсткой - бывало что долго искал эти решения по разным сайтам.
    Захотел собрать всё в одном месте. Сам пользуюсь каждый день.

+ Ответить в теме
Страница 1 из 11 1 2 3 4 5 ... ПоследняяПоследняя

Похожие темы

  1. Куча готовых Ajax решений
    от Eclipse в разделе JavaScript
    Ответов: 1
    Последнее сообщение: 02.06.2009, 10:23
  2. Ответов: 2
    Последнее сообщение: 23.02.2009, 16:23
  3. Примеры
    от пингвин Чилли - Вилли в разделе CSS
    Ответов: 4
    Последнее сообщение: 19.02.2008, 23:05
  4. Много вопросов...
    от MaX_PaIn в разделе Флейм и оффтопик
    Ответов: 1
    Последнее сообщение: 11.12.2007, 20:42

Метки этой темы

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения