Помогите разобраться с кодом

6 года 2 мес. назад - 6 года 2 мес. назад #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;
}

....

Весь код здесь:


Вложенный файл:

Имя файла: template.doc45
Размер файла:118 KB
Вложения:

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

6 года 2 мес. назад #1879 от VARion
Acka, думаю дело в следующих строках:
.art-postcontent p
{
margin: 12px 0;
border:1px solid #ccc;
}
Т.е. каждый абзац в классе .art-postcontent выделился в рамочку...
Чтобы кнопку выделять, нужно смотреть какой у неё класс и стиль к нему привязывать.

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

6 года 2 мес. назад #1915 от acka

VARion пишет: Acka, думаю дело в следующих строках:

.art-postcontent p
{
margin: 12px 0;
border:1px solid #ccc;
}
Т.е. каждый абзац в классе .art-postcontent выделился в рамочку...
Чтобы кнопку выделять, нужно смотреть какой у неё класс и стиль к нему привязывать.


Извиняюсь за отсутствие, уезжал на пару дней.

Рамку и отступ писал сам, чтобы разобраться, что и за что отвечает.
Мне непонятно, как мне прописать к отдельному контейнеру свое задание, или как, например, вынести за рамки общего списка (например, заголовок 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;
}

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

6 года 2 мес. назад #1922 от VARion
Здесь нужно разбираться, как 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

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

6 года 2 мес. назад #1924 от acka
[quote="VARion"[/quote]

Спасибо. Буду пробовать.
Спасибо за ссылку. Ознакомлюсь, отпишусь.

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.

6 года 1 мес. назад - 6 года 1 мес. назад #2102 от Dorfman

VARion пишет: Здесь нужно разбираться, как CSS вообще работает


Угу, в артистировском шаблоне разве разберёшься? Там прога таких каскадов настраивает, что начинаешь отладку - потом плюёшься и перевёрстываешь ручками... :dry:

А вообще - Firebug рулит!

Пожалуйста Войдите или Зарегистрируйтесь, чтобы присоединиться к беседе.


Вверх