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



Передвинуть логотип в шапке сайта

#1 Apmyp-21

Apmyp-21
  • Пользователь
  • 1 сообщений
  • Репутация: 0
0

Отправлено 06 Март 2012 - 21:36

Помогите вставить сюда логотип компании.В визуальном редакторе не получается а кодах я не силен!Изображение

Желательно бы по скайпу объяснил кто нибудь.

 

 

  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Шапки лого для вашего сайта
  2. Создание шапки для сайта
  3. Бесплатные логотипы для вашего сайта.
  4. Бесплатно изготовлю логотип для WEB сайта
  5. Как название сайта в шапке двигать, изменить цвет

#2 Banderas

Banderas
  • Пользователь
  • 1 168 сообщений
  • Репутация: 1

Отправлено 07 Март 2012 - 00:39

Там где у вас картинка логотипа, может быть типа такого
<img src='/img/logo.png'>
То сделайте просто вот так
<img style='margin: 30px 0px 0px 700px;' src='/img/logo.png'>
ну а потом просто поэксперементируйте...
margin: верх право низ лево
  • 0


#3 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 07 Март 2012 - 20:05

Помогите вставить сюда логотип компании.В визуальном редакторе не получается а кодах я не силен!

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

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

При рассмотрении кода вашего сайта sc-holding.ru видно, что в самом начале страницы имеется блок header, который зачем-то имеет такой же фон что и у всей страницы, см ваш css/style.css:

body {
height: 100%;
text-align: center;
font: 1.2em Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF url('../img/bg.gif') repeat-x 0 0;
min-width: 950px;
}
/* Header */

#header {
margin: 0 auto;
width: 850px;
height: 172px;
position: relative;
background: #005D85 url('../img/hd-bg.gif') repeat-x 0 0;
text-align: left;
}

(картинки bg.gif и hd-bg.gif у вас совершенно одинаковые).

Так что, самый простой способ разместить изображение логотипа в шапке, например, выровняв его по правому краю блока header и отцентровав по высоте этого блока, — это заменить в вашей таблице стилей строчку

background: #005D85 url('../img/hd-bg.gif') repeat-x 0 0;


на
background: url('../img/logo.gif') no-repeat right 50%;/*т.е. буквально изображение располагается справа и на высоте 50%,
если же нужно иное расположение, то можно, например, вместо "right 50%" явно указать отступы в пикселях слева сверху, например, "580px 56px"*/
в предположении, что logo.gif — это картинка с вашим логотипом.

Если же хочется, чтобы логотип был еще и ссылкой, тогда код немного сложнее:
в css пишем описание блока с логтипом и ссылки в нем:
#logo{
position: absolute;
top: 56px; /*=(172-60)/2 — центруем по высоте: вычитаем из высоты header-a высоту логотипа и делим пополам*/
right: 0; /*прилепляем с нулевым отступом к правому краю блока header, который у вас имеет ширину 850px и отцентрован на странице*/
width: 270px;/*допустим у изображения логотипа такая ширина*/
height: 60px;/*допустим у изображения логотипа такая высота*/
}
#logo a{
display: block;
width: 270px;
height: 60px;/*Эти размеры должны совпадать с размерами блока logo*/
background: url('../img/logo.gif') no-repeat;
}
в html в конец блока header добавляем сам блок с логотипом и ссылкой:
<!-- Header -->
<div id="header">
	<!-- Your gallery name  -->
	<h1>SC-Holding</h1>
	<!-- Your gallery name end -->
	<!-- Your slogan -->
	<h2>Ремонт компьютерной техники, ноутбуков...
		<br />Прокат звукового оборудования...
		<br />Установка и продажа видео наблюдения...
	</h2>
	<!-- Your slogan end -->
	<!-- Search form -->
	<!-- Menu end -->
	<div id="logo" title="тут пишем текст, который будет появляться при наведении мышки на логотип, буде нам такого захочется"><a href="#"></a></div>
</div>
<!-- Header end -->


У вас в коде в этом месте вот такая вермишель (наверное визуальный редактор ее напихал, он такое любит):

<!-- Header -->
<div id="header"><!-- Your gallery name  -->
<h1>SC-Holding</h1><!-- Your gallery name end --><!-- Your slogan -->

<h2>Ремонт компьютерной техники, ноутбуков...</h2>
<div>&nbsp; &nbsp; &nbsp;&nbsp;<span style="margin: 0px; padding: 0px; color: #ffffff; font-family: Georgia,'Times New Roman',Times,serif; font-size: 18px">Прокат звукового оборудования...</span></div>
<div>&nbsp; &nbsp; &nbsp;&nbsp;<span style="margin: 0px; padding: 0px; color: #ffffff; font-family: Georgia,'Times New Roman',Times,serif; font-size: 18px">Установка и продажа видео наблюдения...</span></div><!-- Your slogan end --><!-- Search form -->	<!-- Menu end --></div><!-- Header end -->

  • 2

#4 Vohrak

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

Отправлено 01 Апрель 2012 - 21:54

В этом вам может помочь элементарный php редакторв типа dreamweaver. Там как раз можно ставить разметки таблиц и размещать картинки или области там где желаете.
  • 0


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