Перейти к содержимому

Реферальная программа Мегаплана


Как сделать рамку вокруг "содержания"?

#1 efros

efros
  • Пользователь
  • 188 сообщений
  • Репутация: 5
0

Отправлено 11 Январь 2016 - 15:18

Всем привет, вот собираюсь ставить оглавление ко всем статьям, поставил только пока здесь. Как мне вокруг него сделать рамку? Какой код прописать и куда? 


 

 

  • 0

#2 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 11 Январь 2016 - 16:34

@efros, "обернуть" оглавление в отдельный блок со своим стилем в котором и прописать рамку.

 

Например:

HTML:

<div id="oglavlenie">
  <p>Из этой статьи вы узнаете:</p>
  <a href="#a1"><li>Сухая чистка ковролина</a><br>
  <a href="#a2"><li>Влажная чистка ковролина</a><br>
  <a href="#a3"><li>Как очистить ковролин от пятен с помощью народных средств?</a>
</div>

CSS:

#oglavlinie {border:1px solid black;}
#oglavlinie p{font-weight:bold;}

Что-то вроде этого...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#3 efros

efros
    Topic Starter
  • Пользователь
  • 188 сообщений
  • Репутация: 5

Отправлено 11 Январь 2016 - 17:13

CSS: #oglavlinie {border:1px solid black;} #oglavlinie p{font-weight:bold;}
Впихнул это в css, но что-то не работает. Это в определенное место нужно или в любое? 
  • 0

#4 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 11 Январь 2016 - 17:22

@efros, просмотрел сразу, а что там теги <li> делают?

 

И исправь (очепятался: написал "i" вместо "e") CSS:

#oglavlenie {border:1px solid black;}
#oglavlenie p{font-weight:bold;}

PS Теги списка наверное можно убрать, тем более что объявления списка не нашел в коде при поверхностном изучении фрагмента


Сообщение отредактировал ShowPrint: 11 Январь 2016 - 17:25

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#5 efros

efros
    Topic Starter
  • Пользователь
  • 188 сообщений
  • Репутация: 5

Отправлено 11 Январь 2016 - 17:29

@ShowPrint@ShowPrint, Теги li для списка как я понял. 


Вот вставил между этим и все ровно не получается. 

 


}
.breadcrumb, .breadcrumb> div, .breadcrumb .fa-caret-right, .breadcrumb .root a {
float: none;
#oglavlenie {border:1px solid black;}
#oglavlenie p{font-weight:bold;}
}
.breadcrumb .root {
padding: 0;
}

  • 0

#6 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 11 Январь 2016 - 17:44

Попробуйте тогда без CSS, просто в HTML:

<div style="border: 1px solid black;">
  <p style="font-weight:bold;">Из этой статьи вы узнаете:</p>
  <a href="#a1">Сухая чистка ковролина</a><br>
  <a href="#a2">Влажная чистка ковролина</a><br>
  <a href="#a3">Как очистить ковролин от пятен с помощью народных средств?</a>
</div>

@efros, а зачем внутри фигурных скобок вставили????

 

Надо было так сделать:

}
.breadcrumb, .breadcrumb> div, .breadcrumb .fa-caret-right, .breadcrumb .root a {
float: none;
}
#oglavlenie {border:1px solid black;}
#oglavlenie p{font-weight:bold;}
.breadcrumb .root {
padding: 0;
}

А так как вы написали - в одни стили вписали другие, а никак не "между"... )))


Теги li для списка
Они должны быть обернуты в пару тегов ul... 

Сообщение отредактировал ShowPrint: 11 Январь 2016 - 17:41

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#7 efros

efros
    Topic Starter
  • Пользователь
  • 188 сообщений
  • Репутация: 5

Отправлено 11 Январь 2016 - 18:08

@ShowPrint, спасибо, получилось, буду теперь настраивать. Но вот не понял как правильно список сделать. Это в начале должны быть теги li, а в конце ul?


  • 0

#8 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 11 Январь 2016 - 18:16

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

display:inline-block;

а также поиграть стилями margin и padding как самого блока, так и вложенных элементов...

 

И совет: пытайтесь разбираться как с css, так и с html - очень полезное знание при сайтостроительстве.

 

Правильное оформление маркированных списков делается так:

<ul>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

Ссылка на матчасть: ...тынц...

 

И стили прописывать лучше всё-таки через css (когда возможно), чтоб код был "чистый", без style...


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#9 efros

efros
    Topic Starter
  • Пользователь
  • 188 сообщений
  • Репутация: 5

Отправлено 11 Январь 2016 - 18:33

@ShowPrint, Про блок я понял как делать, а вот с вложенными элементами, особенно с ссылками вообще не понял, вот хотел отступить от края и прописал 

<p style="margin: 5px;"<a href="#a1">Сухая чистка ковролина</a><br></p> 

Но ссылка убралась и ничего не произошло

 

Аааа, докумекал.  padding ))

@ShowPrint, хотел еще поинтересоваться, а закрывать это все в noindex или nofollow нужно? А то как бы повторяются заголовки. Как думаете? 


Сообщение отредактировал efros: 11 Январь 2016 - 18:26

  • 0

#10 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 701 сообщений
  • Репутация: 405

Отправлено 11 Январь 2016 - 18:36

@efros, а зачем ссылку обернули в тег <p>?

 

Экспериментируйте и изучайте - опыт вещь бесценная...

 

стили прописывать лучше всё-таки через css
 

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru