X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

10 страниц V   1 2 3 4 5 6 7 8 9 10 >
Открыть тему
Тема закрыта
> Примеры html, css решений частных вопросов
Актуальны для вас такие уроки?
Актуальны для вас такие уроки?
Да [ 130 ] ** [78,79%]
Нет [ 16 ] ** [9,70%]
Не знаю [ 19 ] ** [11,52%]
Всего голосов: 165
  
klenovnn
klenovnn
Topic Starter сообщение 22.4.2009, 11:54; Ответить: klenovnn
Сообщение #1


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


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; отступы только справа и слева.*/
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
klenovnn
klenovnn
Topic Starter сообщение 22.4.2009, 12:16; Ответить: klenovnn
Сообщение #2


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
klenovnn
Topic Starter сообщение 22.4.2009, 13:37; Ответить: klenovnn
Сообщение #3


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]
<?php include"header.inc"; ?>
<?php include"sidebar.inc"; ?>
<td>Содержание страницы</td>
<?php include"footer.inc"; ?>
[/php]
В итоге все остальные страницы мы создаем по аналогии с файлом index.php.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MetSerp
MetSerp
сообщение 17.6.2010, 15:15; Ответить: MetSerp
Сообщение #4


дабы не было оффтопа - закрыто.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MetSerp
MetSerp
сообщение 8.6.2011, 23:13; Ответить: MetSerp
Сообщение #5


Открыто по просьбе автора, пишите свои вопросы по html+css, когда наберется достаточное количество вопросов на них будут даны ответы klenovnn, .
От меня: не пишите вопросы которые требуют срочного решения, так как " когда наберется достаточное количество вопросов на них будут даны ответы klenovnn, .", но не ранее.
Просьба к остальным, не отвечать на вопросы так как они собираются для создания уроков, после того как klenovnn, ответит на вопросы, сами вопросы будут удалены, чтобы тема имела вид сборника рецептов.
Вроде все.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Arks
Arks
сообщение 30.6.2011, 2:26; Ответить: Arks
Сообщение #6


Оптимальный макет:
меню
таблица
меню

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

Автор - твой вариант... Может что лучше продложишь
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
x-line
x-line
сообщение 6.8.2011, 1:59; Ответить: x-line
Сообщение #7


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


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

если вы делали PHP странички, то что вам мешает вписать title в description ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Liforte
Liforte
сообщение 18.8.2011, 20:41; Ответить: Liforte
Сообщение #9


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


Для этого достаточно сделать в шаблоне вставку переменной, а в общем шаблоне задать условие для вывода и подставлять переменную туда куда надо с теми значениями каторые нужны!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Сергей Шолохов
Сергей Шолохов
сообщение 6.10.2011, 2:23; Ответить: Сергей Шолохов
Сообщение #10


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

Когда начинал заниматься вёрсткой - бывало что долго искал эти решения по разным сайтам.
Захотел собрать всё в одном месте. Сам пользуюсь каждый день.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
10 страниц V   1 2 3 4 5 6 7 8 9 10 >
Открыть тему
Тема закрыта
4 чел. читают эту тему (гостей: 4, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Вёрстка HTML-писем
30 Vampler 28840 Вчера, 12:41
автор: Vampler
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3330 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3291 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Залить html страницу на 20 доменов
6 TABAK 1681 22.5.2023, 16:24
автор: KORUP
Открытая тема (нет новых ответов) Сделать правки на html-странице
5 TABAK 2261 20.5.2023, 10:45
автор: EvilGomel


 



RSS Текстовая версия Сейчас: 28.3.2024, 23:01
Дизайн