Как установить свою шапку на сайт?

голоса: 0
Не могу установить правильно свою шапку на сайт образовательного учреждения, ввиде картинки и надписи. На разных мониторах разьезжается все, то за пределы монитора, то вниз и тд. на ноутбуке нормально, у меня получается картинка и надпись идет наложением поверх шаблона (редактирую в глобальных блоках-верхняя часть сайта). Меняю настройки в Таблице стилей (CSS) чтоб расширения одинаковые были, вообще шаблон сайт весь слетает, резервную копию постоянно делаю, там стараюсь не лезть уже(((
Адрес сайта http://ds20rosinka.ucoz.ru/
| Автор: | Категория: Дизайн сайта

Ответов: 1

голоса: 0
И будет на разных мониторах разъезжаться. У вас шаблон не адаптивный, в этом проблема. В дополнение шапка сайта сверстана с помощью таблиц, это еще одна проблема. В вашей ситуации нужно шапку сайта полностью переверстать на дивную верстку и шапку (фото) сделать одним изображением не используя несколько частей.
| Автор:
Получается переверстать нужно будет  где стили СSS ?
Желтобрюхова Алеся,
Не просто стили CSS, нужно полностью переписать код шапки сайта и дополнить с помощью CSS.
Yuri_Geruk,
Понятно)))   Но при редеактировании СSS весь шаблон сайта слетает, делеется в белом или черном цвете)))))) Это как то можно избежать и почему такое происходит?

перед правками таблицы стилей нажмите на восстановить стандартный шаблон таблицы стилей. если не поможет через быструю замену заменить в шаблонах это

 <link type="text/css" rel="StyleSheet" href="http://s64.ucoz.net/src/css/806.css" />

на это

 <link type="text/css" rel="stylesheet" href="/_st/my.css" />
webanet,

Не выходит((((

Изначально было так (не до конца скопировала)

/*--------------------- General styles start ---------------------*/
body {margin: 0;font: 12px 'Century Gothic', 'Verdana';color: #edd9ac;text-align: center;background: url(/.s/t/789/1.jpg) top center;}
td, input, select {font: 11px 'Century Gothic', 'Verdana';}
body a {color: #fff;text-decoration: underline;}
body a:hover {text-decoration: none;}
* {}
img {border: 0;}
a.noun img {margin: 2px;}
.clear {clear: both;}
h1, h2, h3, h4, h5, h6 {}
hr {border: 0; height: 1px; background: #42352b;}
*:focus {outline: none;}
.u-star-rating, .u-star-rating a {margin: 0 !important;padding: 0 !important;font-family: 'Times New Roman',serif;}
/*--------------------- General styles end ---------------------*/

 

 

Сделала "Восстановление стандартного шаблона". Восстановилось на нужный шаблон

/* General Style */
body {margin: 0; padding: 0; background: #f3f8f9;}
.wrap {background: url('/.s/t/806/1.gif') repeat-x #f3f8f9; text-align: center;min-width: 1000px;}
.header {width: 940px; height: 180px; margin-left: auto; margin-right: auto; background: url('/.s/t/806/2.jpg') no-repeat; margin-bottom: 10px; position: relative;}
.footer {background: url('/.s/t/806/3.gif') repeat-x #bfd6df; padding: 20px 10px; text-align: center;}

table.main-table {border: 0px; padding: 0; border-collapse: collapse; border-spacing: 0px; width: 100%; text-align: left;}
td.content-block {vertical-align: top; padding: 10px; background: #fff; }
td.forum-block {vertical-align: top; padding: 0 10px 10px 10px;}
td.side-block {vertical-align: top; width: 200px; padding: 0 10px 10px 10px; }

.block {width: 200px; margin-bottom: 10px;}
.block-title {background: url('/.s/t/806/4.png') no-repeat; padding: 13px 10px 10px 45px; color: #000; font-size: 10pt; font-weight: bold;}
.block-top {background: url('/.s/t/806/5.png') bottom no-repeat; padding-bottom: 10px;}
.block-content {margin: 0 5px 5px 5px; width: 190px;}

.date {position: absolute; top: 10px; left: 30px; font-size: 8pt; color: #636363;}
.user-bar {position: absolute; top: 25px; left: 30px;font-size: 8pt; color: #636363;}
.header h1 {position: absolute; margin: 0; padding: 0; width: 380px; text-align: center; top: 70px; left: 30px; font-size: 25pt; font-weight: normal; color: #000;}
.navigation {position: absolute; top: 10px; right: 30px; color: #e4ffbd;}
 .navigation a:link {text-decoration:underline; color:#e4ffbd;}
 .navigation a:active {text-decoration:underline; color:#e4ffbd;}
 .navigation a:visited {text-decoration:underline; color:#e4ffbd;}
 .navigation a:hover {text-decoration:none; color:#fff;}
и т.д.......

Сайт стал черным после этого. 

Сделала замену кода "Заменить все"

  <link type="text/css" rel="StyleSheet" href="http://s64.ucoz.net/src/css/806.css" />

на это

  <link type="text/css" rel="stylesheet" href="/_st/my.css 

 

Вышло так

 <link type="text/css" rel="stylesheet" href="/_st/my.css/* General Style */
body {margin: 0; padding: 0; background: #f3f8f9;}
.wrap {background: url('/.s/t/806/1.gif') repeat-x #f3f8f9; text-align: center;min-width: 1000px;}
.header {width: 940px; height: 180px; margin-left: auto; margin-right: auto; background: url('/.s/t/806/2.jpg') no-repeat; margin-bottom: 10px; position: relative;}
.footer {background: url('/.s/t/806/3.gif') repeat-x #bfd6df; padding: 20px 10px; text-align: center;}

table.main-table {border: 0px; padding: 0; border-collapse: collapse; border-spacing: 0px; width: 100%; text-align: left;}
td.content-block {vertical-align: top; padding: 10px; background: #fff; }
td.forum-block {vertical-align: top; padding: 0 10px 10px 10px;}
td.side-block {vertical-align: top; width: 200px; padding: 0 10px 10px 10px; }

.block {width: 200px; margin-bottom: 10px;}
.block-title {background: url('/.s/t/806/4.png') no-repeat; padding: 13px 10px 10px 45px; color: #000; font-size: 10pt; font-weight: bold;}
.block-top {background: url('/.s/t/806/5.png') bottom no-repeat; padding-bottom: 10px;}
.block-content {margin: 0 5px 5px 5px; width: 190px;}

 

Сайт опять черный весь (((Пришлось опять с резервной копии восстанавливать

откройте таблицу стилей удалите оттуда все и вставьте содержимое файла

 http://s64.ucoz.net/src/css/806.css

сохраните таблицу стилей и не надо восстанавливать сразу. на что смотреть?

Желтобрюхова Алеся,
  1. Перейти в панель управления - Дизайн - Редактор - CSS, удалить все содержимое, после вместо удаленного содержимого установить содержимое с файла http://s64.ucoz.net/src/css/806.css - Сохранить.
  2. После очистить кеш в браузере https://ukit.com/ru/help/kak-ochistit-cahe и далее редактировать стили, после шаблон ломаться не должен после редактирования стилей, при условии, что вы понимаете что редактируете.
...