Всем приветик!!! Рад видеть Вас на одном из моих сайтов для вебмастеров о создание веб сайта на языках разметки гипертекстов Css и Html!!

Немного о сайте:
На сайте размещены и будут размещатся различные статьи, темы о создание веб сайта с помощью языков Css и Html.
А именно различные проблемы, возникшие у вас при написание сайтов, которые обсуждаются на форумах посвящённых этим языкам и их все возможные решения!!!

Я думаю что это будет полезный ресурс, как для новичков, так и для опытных вебмастеров!

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

Ещё один плюс в пользу сайта, вам не придётся читать различные, бесполезные комментарии по вопросу, как это обычно происходит на форумах.(короче говоря, вопрос - ответ и некакой воды)!!!

Почему именно создание веб сайта с помощью языков css и html? Наверное потому, что написание сайтов с помощью данных языков стало основным для вебмастеров, да и вообще язык html - это основа сайта (без него никуда), а язык ксс так сказать улудчшает сайт, делает его быстрее (так как общий ксс код выносится в отдельный файл какскадных таблиц и загружается только один раз с последующими подгрузками), также код страницы становится чистым (так как можно заменять различные таблицы и т .д… блоками и др. элементами ксс, которые также вынесенные в отдельный файл) + ко всему этому такой сайт будет отлично читатся поисковыми ботами!!!!

Можно ещё говорить и говорить о преимуществах етих языков, но мы пока что будем боротся именно с проблеммами, которые возникли у вас при работе с ними!

Всем привет!
Совсем недавно наткнулся на один из форумов посвящённых языкам гипертекстовой разметки и увидел такую вот темку:

Парень спросил можно ли сделать следующее:
цитата с форума

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

Я нашёл как это делать но с спользованем скрипта написанном на JavaScript…

А можно это сделать с помощью Css ?????

На том форуме пока, что никто так и не ответил, хотя ответ прост - конечно можно, но это будет сделать куда лудчше средствами JavaScript..

Вот пример: Нажми чтобы просмотреть.

Вот код:

Это Css:

<style type=”text/css”>
#pic {
position: relative;
background-color: #FFFFFF;
left: 50px;
top: 50px;
width: 100%;
}#pic a .large {
position: absolute;
border: 0px;
display: block;
height: 1px;
left: -1px;
top: -1px;
width: 1px;
}#pic a.p1:hover .large {
position: relative;
border: 1px solid #000000;
display: block;
left: 70px;
_left: 110px;
top: 30px;
width: 100px;
height: 100px;
}#pic a.p1:hover {
background-color: white;
}
</style>

Это Html:

<div id=”pic”>
<a class=”p1″ href=”#”>Наведите на меня мышинный курсор<img src=”openquote.gif” class=”large” /></a>
</div>

А для того, чтобы сделать вместо текста картинку, то просто между div на место текста вставте картинку.. вот и всё - если будут какие нить вопросы или поправки, то отписывайтесь в этой теме…..

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

Смысл в следующем:

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

Потом если их это устраивает, то они Вас принимают и Вы приступаете к поиску предложений от рекламадателей.

Ищете близкую к Вашему сайту тематику, и пишите рекламный пост на этот ресурс (реклама или обзор чего либо).

После написания поста, Вы посылаете ссылку на этот пост рекламодателю и если его всё устраевает то он будет платить Вам за этот пост…

Вот такая система, а вот собственно и она: http://blogun.ru/

Как оформить текст, так же как на различных CMS-ах - в начале вверху красивая ковычка и в конце внизу тоже стоит закрывающая ковычка???

Пытался и у меня получается тупо ставить картинку перед началом текста и в конце текста , но это же так сильно достаёт, каждый раз проделывать данную процедуру!!!!

Может можно, как то сделать так, чтобы прописывать только тег или стиль к примеру blockquote, как в CMS - ках и на форумах или ещё что нить в этом роде..
Надеюсь, что это возможно сделать на языках гипертекстовой разметки, а не на скриптах?

Заранее спасибо!!!!

Ответ

Да можно сделать на языке гипертекстовой разметки (Css - каскадные таблицы стилей).
Смотрим пример ниже:
НАЖМИ ЧТОБЫ ПРОСМОТРЕТЬ ПРИМЕР

Чтобы сделать такое же оформление - тебе нужно создать отдельный файл таблиц стилей и прописать следующие стили:

.pullquote {
width: 50%;
font-size:100%;
line-height:140%;
margin:60px;
background: url(closequote.gif) no-repeat bottom right !important;
background /**/:url(); /* Disabling quote effect in IE5 + */
padding:0px 25px 5px 0px;
}

.pullquote:first-letter {
background: url(openquote.gif) no-repeat left top!important;
padding:5px 2px 10px 35px!important;
padding /**/:0px; /* Disabling quote effect in IE5 + */
background /**/: url(); /* Disabling quote effect in IE5 + */
}

А так же тебе нужно создать две картинки с изображениями ковычек или ещё чего.
А так же можеш воспользоваться этими:

И немного поясню про код:

width: 50%; - Здесь ставиш ширину цитаты, в данном случае 50% - тоесть половина экрана
font-size:100%; - Это размер шрифта.
line-height:140%; - Это очень грубо говоря высота твоей цитаты, в данном случаи цитата будет растянута в верх на 40% процентов выше нормы, а норма 100%.
margin:60px; - Этот параметр отвечает за место расположение твоей цитаты, сам по эксперементируй со значениями и поймёш что это и надо ли тебе оно вообще…
background: url(closequote.gif) - closequote.gif - это название картинки.

Ну а дальше аналогично, а чего не знаеш эксперементируй или же пиши в эту тему - помогу…

Вопрос

Здравствуйте!
Я недавно наткнулась на сайт у, которого заглавные буквы обзатца были сделанные в виде больших квадратов, залитыми разноцветным фоном..
Мне очень понравилось такое оформление…
Но самое главное, что - эти красивые буквы были сделанны не картинками, а текстом, тоесть их можно было спокойно выделять и копировать как текст….

Я в Css немного разбираюсь, но создать подобное у меня не получилось - прошу у Вас помощи!!!
За ранее благадарна!!!

Ответ

Здравствуйте!
Это можно сделать, через язык разметки Css - ответ на этот вопрос я нашёл на англоязычном сайте mandarindesign.com - кстате очень интересный сайт, там есть много различных трюков с данными языками гипертекстовой разметки……

Так вот пример с использованием белой буквы на цветном квадрате и с чёрной буквой….
!!!НАЖМИ ЧТОБЫ ПРОСМОТРЕТЬ!!!

Ниже я приведу коды и сделаю краткое описание к некоторым стилям.

Код на белую букву в жёлтом квадрате:

<span style=”margin-right:6px;margin-top:5px;float:left;

color:red;

background:blue;

border:3px solid red;

font-size:55px;

line-height:37px;

padding-top:2px;

padding-right:5px;

font-family:times;

“>

В

</span>

от такой простенький пример с использованием

<br>

большой и симпатичной белой буквочкой на жёлтом фоне…..

<div style=”clear:both;”><br></div>

Вот код на чёрную букву в бордовом квадрате:

<span style=”margin-right:6px;margin-top:5px;float:left;

background:firebrick;

border:1px solid black;

font-size:55px;

line-height:37px;

padding-top:2px;

padding-right:5px;

font-family:times;

“>

А

</span>

это второй пример, с чёрной буквой<br> на красном фоне…

<div style=”clear:both;”><br></div>

Вот краткое описание на код белой буквы в жёлтом квадрате:

<span style=”margin-right:6px;
margin-top:5px;
float:left;
color:white; - в место white можите написать любой другой цвет.
background:khaki; - мы добавили фоновый режим. Также вместо khaki можите вставить любой другой цвет.
border:1px solid darkkhaki; - это мы добавили границу квадратика. Можно изменять значения: 1px - ставить любую другую цивру изменяя этим толщину границы. Также можно изменять цвет darkkhaki на любой другой цвет.
font-size:55px; - здесь мы изменяем размер буквы 55px - ставте любое другое значение.
line-height:37px; - здесь изменяем высоту буквы 37px - на любой другой.
padding-top:2px;
padding-right:5px;
font-family:times;
“>
В - это наша буква. В - замените на свою.
</span>
от такой простенький пример с использованием - это текст после буквы. Замените на свой.
<br>
большой и симпатичной белой буквочкой на жёлтом фоне….. - это тоже текст.
<div style=”clear:both;”><br></div>

Если вдруг у кого возникнут проблемы с данным кодом, пишите в этот пост.

Вопрос

Хотелось бы узнать, как делают такие кнопки, которые работают без картинок?
К примеру возьмём меню пуск в виндовсе хр, там есть обычные надписи, но при наведении на них курсора, они заливались фоном, а при выведения курсора становились прежними….

Я вообще уже нашёл подобную технологию, но в ней использовались таблицы, а так как я не силён в Css - не могу сделать такие же кнопочки без таблиц…..

Может приведёте какой нибудь пример или ещё что нибудь???
заранее спасибо!!!

Ответ

Здравствуйте!!!
Просто уберите таблицы и всё

А вообще можно делать с помощью списков к примеру…

Вот пример: нажми чтобы посмотреть

Ниже привожу код Css:

<style type=”text/css”>

#links ul {
list-style-type: none;
width: 500px;
}

#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}

#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}

* html #links li a { /* make hover effect work in IE */
width:500px;
}

#links li a:hover {
background: #ffffcc;
}

#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}

#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
</style>

А так же код Html:

<div id=”links”>
<ul>
<li><a href=”#” title=”Text”>Первый пример
<em>Описание примера…</em>
<span>Ну и ещё какая нить хрень</span></a></li>
<li><a href=”#” title=”Text”>Второй пример
<em>Описание примера...</em>
<span>Ну и ещё какая нить хрень 2</span></a></li>
<li><a href=”#” title=”Text”>Третий пример
<em>Описание примера…</em>
<span>Ну и ещё какая нить хрень 3</span></a></li>
</ul>
</div>

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

Всем привет!
У меня на главной странице, да и не только на главной странице, стоят рисунки, которые раньше отображались корректно, а сейчас после того как я сделал эти рисунки ссылками на другие страницы у меня появились рамки вокруг картинок (до нажатия - синяя, а после нажатия на неё - фиолетовая)…..
Помогите пожайлусто избавится от этой рамки, которая портит весь дизайн моего сайта…. За ранее спасибо…….

Ответ

Привет.
Тебе просто нужно вставить к каждому рисунку этот код:
style=”border:0;”
Или же будет ещё лудчше прописать в таблице стилей, этот стиль:
a img{border:0px;}
И тогда не надо будит прописывать первый код к каждой картинки….

Вопрос

Есть большой прайс-лист, который представлен в виде таблицы.
Мне надо чтобы текст в определённой колонке был отцентрирован, и для того, чтобы не задавать класс отдельно для каждой ячейки, я задала класс для определённой колонки, но помчему то ни чего не вышло??
Вот код:

col.d {
text-align: center;
}

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

Ответ

Здравствуйте!
Вот пример кода для отцентрирования только первой колонки:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title></title>
<style type=”text/css”>
/* для всех */
table.foo {
border-collapse: collapse;
}table.foo td {
padding: .5em;
border: 1px solid #000;
}table.foo col {
width: 500px;
}

/* для ИЕ, мать его */
table.foo col.alcen {
text-align: center;
}

/* для Фокса и Оперы, мать их */
table.foo td:first-child {
text-align: center;
}
</style>
</head>
<body>

<table class=”foo”>
<col class=”alcen”>
<col>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
</tr>
</tbody>
</table>

</body>
</html>

А вот пример где ценрируются все колонки кроме первой:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title></title>
<style type=”text/css”>
/* для всех */
table.foo {
border-collapse: collapse;
}table.foo td {
padding: .5em;
border: 1px solid #000;
}

table.foo col {
width: 100px;
}

/* для ИЕ, мать его */
table.foo col.alcen {
text-align: center;
}/* для Фокса и Оперы, мать их */
table.foo td+td {
text-align: center;
}
</style>
</head>
<body><table class=”foo”>
<col>
<col class=”alcen”>
<col class=”alcen”>
<col class=”alcen”>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
</tbody>
</table>

</body>
</html>

Ну и пример где центрируется только третяя колонка:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title></title>
<style type=”text/css”>
/* для всех */
table.foo {
border-collapse: collapse;
}

table.foo td {
padding: .5em;
border: 1px solid #000;
}

table.foo col {
width: 100px;
}

/* для ИЕ, мать его */
table.foo col.alcen {
text-align: center;
}

/* для Фокса и Оперы, мать их */
table.foo td+td+td {
text-align: center;
}

table.foo td+td+td+td {
text-align: left;
}
</style>
</head>
<body>

<table class=”foo”>
<col>
<col>
<col class=”alcen”>
<col>
<tbody>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>col4</td>
</tr>
</tbody>
</table>

</body>
</html>

Ну а дальше думаю, что и сами догадаетесь :) … .

Вопрос

Здравствуйте!
Как зделать так, чтобы при нажатии на ссылку всплывало окно, которое не просто появлялось сразу же откытым, а потихоньку открывалась как кулисы в театре?
Буду очень признательна если вы мне поможите …

Ответ

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

Для начала мы создадим следующие стили Css:

<style type=”text/css”>
#dialogWindow {/* Настраиваем внешний вид слоя */width: 300px; /* шириша слоя диалогового окна */
height: 200px; /* высота слоя диалогового окна */
background-color: #FFFFCC; /* цвет слоя диалогового окна */
border: 1px dotted gray; /* рамка слоя диалогового окна*//* Позиционируем слой по центру */position: absolute; /* устанавливаем абсолютное позиционирование */
left: 50%; /* устанавливаем верхний левый угол слоя по горизонтали по центру страницы */
top: 50%; /* устанавливаем верхний левый угол слоя по вертикали по центру страницы */
margin-top: -100px; /* сдвигаем слой вверх на половину высоты слоя */
margin-left: -150px; /* сдвигаем слой влево на половину ширины слоя *//* делаем слой невидимым */clip: rect(auto 150px auto 150px); /* свойство clip подробно рассмотрим ниже (оно ключевое) */
}/* заголовок диалогового окна */.dTitle {
font-weight: bold;
margin: 0;
padding: 5px;
background-color: #CCFFFF;
}/* текст диалогового окна */.dBody {
text-align: center;
margin: 0;
padding: 10px 5px;
}
</style>

А теперь прописываем сценарий на всплывание, раскрытие и закрытия нашего окошка:

var curtainStep = 10; //шаг - количество пикселей на которое будет сворачивать слой за один раз
var curtainTimeout = 15;//задержка перед последующей итерацией для эффекта плавности//текущее количество обрезаемых пикселей слоя слева и справа
var curtainLeft = 150;
var curtainRight = 150;
var curtainWidth = 300;//ширина слоя//ф-ция разворачивания слоя
function curtainOpen()
{
if (curtainLeft > 0)//Пока левая граница области усечения не достигла левой границы слоя
{
curtainRight += curtainStep; //раскрываем область усечения справа на curtainStep пикселей
curtainLeft -= curtainStep; //раскрываем область усечения слева на curtainStep пикселей
var rect = ‘rect(auto, ‘+ curtainRight +’px, auto, ‘+ curtainLeft +’px)’;
document.getElementById(”dialogWindow”).style.clip = rect;
setTimeout(curtainOpen,curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}

Код на сворачивание окна:

/ф-ция сворачивания слоя
function curtainClose()
{
if (curtainLeft<curtainRight)//Пока левая граница области усечения не встретилась с правой
{
curtainRight -= curtainStep; //сужаем область усечения справа на curtainStep пикселей
curtainLeft += curtainStep; //сужаем область усечения слева на curtainStep пикселейvar rect = ‘rect(auto, ‘+ curtainRight +’px, auto, ‘+ curtainLeft +’px)’;document.getElementById(”dialogWindow”).style.clip = rect;setTimeout(curtainClose,curtainTimeout); //вызываем эту же функцию повторно через curtainTimeout миллисекунд
}
}

Вот пример того что должно было получится - нажми сюда..

Вопрос

Всех приветствую!
Я всё не могу понять, как создаются кнопочки, при наведении на которые основная картинка кнопки заменяется на другую картинку???
А ещё я видел, что картинка изменялась не только при наведении на неё курсора, а ещё меняла фон картинки при нажатии на неё или же менялся текст..
Помогите Plisssss???
Очень бы хотелось увидеть пример..

Ответ

Привет!
Можно использовать как одну картинку, так и две, и более…
Переходим на ссылку http://www.tigir.com/css_rollover.htm#