- Форум
- Шаблоны Joomla.
- HTML и CSS
- Помогите разобраться с кодом
Помогите разобраться с кодом
acka / Автор темы \

Новичок

18
1
11 года 7 мес. назад - 11 года 7 мес. назад #1878 от acka
Хочу сделать сайт по типу блога, но двигая одно, налезаю на другое.
Если делаю рамку для одного контейнера, он вылезает в другом и т.д.
Хочется что-то типа этого:
хотел выделить кнопку ПОДРОБНЕЕ, получил в довесок поля №3. Вообще-то это один текст - почему он оказался в трех контейнерах?
ВОПРОС: Как переписать код, чтобы все контейнеры были независимы. Для того, чтобы можно было работать с каждым контейнером отдельною.
Часть своего кода выкладываю. Загвоздка где-то здесь, как мне кажется, но не могу понять как все разделить.
/* begin Page */
/* v3.1.0.41778 */
#art-main, table
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 13px;
text-align: justify;
}
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
margin: 0;
padding: 0;
}
.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
line-height: 175%;
padding:5px;
}
.art-postcontent p
{
margin: 12px 0;
border:1px solid #ccc;
}
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
font-size: 31px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
....
Весь код здесь:
Если делаю рамку для одного контейнера, он вылезает в другом и т.д.
Хочется что-то типа этого:

хотел выделить кнопку ПОДРОБНЕЕ, получил в довесок поля №3. Вообще-то это один текст - почему он оказался в трех контейнерах?

ВОПРОС: Как переписать код, чтобы все контейнеры были независимы. Для того, чтобы можно было работать с каждым контейнером отдельною.
Часть своего кода выкладываю. Загвоздка где-то здесь, как мне кажется, но не могу понять как все разделить.
/* begin Page */
/* v3.1.0.41778 */
#art-main, table
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
font-size: 13px;
text-align: justify;
}
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li
{
margin: 0;
padding: 0;
}
.art-postcontent,
.art-postcontent li,
.art-postcontent table,
.art-postcontent a,
.art-postcontent a:link,
.art-postcontent a:visited,
.art-postcontent a.visited,
.art-postcontent a:hover,
.art-postcontent a.hovered
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
line-height: 175%;
padding:5px;
}
.art-postcontent p
{
margin: 12px 0;
border:1px solid #ccc;
}
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
font-size: 31px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
....
Весь код здесь:
Вложения:
Последнее редактирование: 11 года 7 мес. назад от acka.
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
VARion

Web-Мастер

166
15
27
11 года 7 мес. назад #1879 от VARion
Acka, думаю дело в следующих строках:Т.е. каждый абзац в классе .art-postcontent выделился в рамочку...
Чтобы кнопку выделять, нужно смотреть какой у неё класс и стиль к нему привязывать.
.art-postcontent p
{
margin: 12px 0;
border:1px solid #ccc;
}
Чтобы кнопку выделять, нужно смотреть какой у неё класс и стиль к нему привязывать.
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
acka / Автор темы \

Новичок

18
1
11 года 7 мес. назад #1915 от acka
Извиняюсь за отсутствие, уезжал на пару дней.
Рамку и отступ писал сам, чтобы разобраться, что и за что отвечает.
Мне непонятно, как мне прописать к отдельному контейнеру свое задание, или как, например, вынести за рамки общего списка (например, заголовок h1) и прописать свой стиль???
Кусок кода,как пример...
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
font-size: 31px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
VARion пишет: Acka, думаю дело в следующих строках:
Т.е. каждый абзац в классе .art-postcontent выделился в рамочку....art-postcontent p { margin: 12px 0; border:1px solid #ccc; }
Чтобы кнопку выделять, нужно смотреть какой у неё класс и стиль к нему привязывать.
Извиняюсь за отсутствие, уезжал на пару дней.
Рамку и отступ писал сам, чтобы разобраться, что и за что отвечает.
Мне непонятно, как мне прописать к отдельному контейнеру свое задание, или как, например, вынести за рамки общего списка (например, заголовок h1) и прописать свой стиль???
Кусок кода,как пример...
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover
{
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: bold;
font-size: 31px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
VARion

Web-Мастер

166
15
27
11 года 7 мес. назад #1922 от VARion
Здесь нужно разбираться, как CSS вообще работает: селекторы, идентификаторы, наследование...
Удобно и понятно изложено здесь: Самоучитель CSS
По вашему примеру кода. Так писать не стоит, это избыточно и не наглядно. Можно так делать:
Удобно и понятно изложено здесь: Самоучитель CSS
По вашему примеру кода. Так писать не стоит, это избыточно и не наглядно. Можно так делать:
body {
font-family: Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
font-style: normal;
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
}
h1 {
font-size: 31px;
}
/* Остальные заголовки аналогично устанавливаете нужный размер */
acka / Автор темы \

Новичок

18
1
11 года 7 мес. назад #1924 от acka
[quote="VARion"[/quote]
Спасибо. Буду пробовать.
Спасибо за ссылку. Ознакомлюсь, отпишусь.
Спасибо. Буду пробовать.
Спасибо за ссылку. Ознакомлюсь, отпишусь.
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
Dorfman

Новичок

24
1
1
11 года 7 мес. назад - 11 года 7 мес. назад #2102 от Dorfman
Угу, в артистировском шаблоне разве разберёшься? Там прога таких каскадов настраивает, что начинаешь отладку - потом плюёшься и перевёрстываешь ручками...
А вообще - Firebug рулит!
VARion пишет: Здесь нужно разбираться, как CSS вообще работает
Угу, в артистировском шаблоне разве разберёшься? Там прога таких каскадов настраивает, что начинаешь отладку - потом плюёшься и перевёрстываешь ручками...

А вообще - Firebug рулит!
Последнее редактирование: 11 года 7 мес. назад от Dorfman.
Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.
- Форум
- Шаблоны Joomla.
- HTML и CSS
- Помогите разобраться с кодом