Внести изменения в свойства элемента (CSS) для корректного изображения блока

@Илья-74-23 · Регистрация: 15.05.2014

Author24 — интернет-сервис помощи студентам

Доброго времени суток.
Не получается решить простую задачу:
Заголовок H1 на всех страницах сайта находится в Header и содержит в себе лого (фото 1).
Задача - сделать этот блок без заголовка H1 не потеряв форматирование.
Чувствую, что не вижу элементарного решения, но у меня получается как на фото 2
Вот код:
HTML

HTML5

<h1>
<a class="logo" href="сайт.ру">АВТО<strong>ПИЛОТ</strong></a>
<span>Краснодар</span>
</h1>

CSS

HTML5

h1 {padding:15px 0 0 0;position:relative;font-weight:normal;text-transform:uppercase;margin-left:-4px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
    h1 span {display:inline-block;font-size:28px;line-height:1.2em;color:#949494;letter-spacing:-1px;padding:29px 0 0 4px}
.logo {display:inline-block;font-size:60px;line-height:1.2em;;color:#262626;cursor:pointer;letter-spacing:-3px}
    .logo strong {color:#ff9601; font-weight:normal}

@EaGames · 15.05.2014, 14:33

тоесть вы просто хотите избавится от h1 и заменить его другим тэгом?
если да то тут все просто, меняет сам тэг, к примеру <h1> и </h1> на <p> и </p>, после чего, тоже самое делаете и в таблицу стилей. в вашем случае вместо

CSS

1
2

h1 {padding:15px 0 0 0;position:relative;font-weight:normal;text-transform:uppercase;margin-left:-4px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
    h1 span {display:inline-block;font-size:28px;line-height:1.2em;color:#949494;letter-spacing:-1px;padding:29px 0 0 4px}

будет:

CSS

1
2

p {padding:15px 0 0 0;position:relative;font-weight:normal;text-transform:uppercase;margin-left:-4px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
 p span {display:inline-block;font-size:28px;line-height:1.2em;color:#949494;letter-spacing:-1px;padding:29px 0 0 4px}

как-то так

@Илья-74-23 · 15.05.2014, 14:37 **[ТС]**

Спасибо за ответ.
Да, нужно переписать все h1, т.к. сейчас они одинаковые на всех страницах.

Сообщение от EaGames

тоесть вы просто хотите избавится от h1 и заменить его другим тэгом?
если да то тут все просто, меняет сам тэг, к примеру <h1> и </h1> на <p> и </p>, после чего, тоже самое делаете и в таблицу стилей. в вашем случае вместо

CSS

1
2

h1 {padding:15px 0 0 0;position:relative;font-weight:normal;text-transform:uppercase;margin-left:-4px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
    h1 span {display:inline-block;font-size:28px;line-height:1.2em;color:#949494;letter-spacing:-1px;padding:29px 0 0 4px}

будет:

CSS

1
2

p {padding:15px 0 0 0;position:relative;font-weight:normal;text-transform:uppercase;margin-left:-4px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
 p span {display:inline-block;font-size:28px;line-height:1.2em;color:#949494;letter-spacing:-1px;padding:29px 0 0 4px}

как-то так

В том то и дело, что получается как на фото 2!
Если правильно понимаю - тэг h1 - блочный, а p - строчный, поэтому не получается просто скопировать свойства.

@EaGames · 15.05.2014, 14:40

тэг p тоже блочный, а даже если вам нужен другой строчный элемент просто пропишите ему display: block;

выложите полный код в песочнице я вам помогу

@Илья-74-23 · 15.05.2014, 14:44 **[ТС]**

Пардон

Сообщение от EaGames

выложите полный код в песочнице

это где?
(новичок я)

@EaGames · 15.05.2014, 14:55

вот тут к примеру

@romchiksoad · 15.05.2014, 14:59

EaGames, Илья-74-23, весь код должен быть изначально в теме, а песочницы используем для демонстрации.

@Илья-74-23 · 15.05.2014, 15:01 **[ТС]**

Вот

Добавлено через 44 секунды

Сообщение от romchiksoad

EaGames, Илья-74-23, весь код должен быть изначально в теме, а песочницы используем для демонстрации.

ОК, сейчас выложу

@EaGames · 15.05.2014, 15:05

меняете

HTML5

<h1>
<a class="logo" href="сайт.ру">АВТО<strong>ПИЛОТ</strong></a>
<span>Краснодар</span>
</h1>

на

HTML5

1
2
3

<p class="test"> <a class="logo" href="http://autopilot-krd.ru/index.html">АВТО<strong>ПИЛОТ</strong></a>
 <span>Краснодар</span>
</p>

и

CSS

1
2

h1 {padding:15px 0 0 0;position:relative;font-weight:normal;text-transform:uppercase;margin-left:-4px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
    h1 span {display:inline-block;font-size:28px;line-height:1.2em;color:#949494;letter-spacing:-1px;padding:29px 0 0 4px}

на

CSS

1
2

p.test {padding:15px 0 0 0;position:relative;font-weight:normal;text-transform:uppercase;margin-left:-4px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
    p.test span {display:inline-block;font-size:28px;line-height:1.2em;color:#949494;letter-spacing:-1px;padding:29px 0 0 4px}

@Илья-74-23 · 15.05.2014, 15:10 **[ТС]**

Не получается - вот

@EaGames · 15.05.2014, 15:13

обновите страницу ctrl + f5, у меня открылось все ок выглядит.

Внести изменения в свойства элемента (CSS) для корректного изображения блока

@Илья-74-23 · 15.05.2014, 15:17 **[ТС]**

Да, все работает.
Спасибо огромное!

@EaGames 28 / 28 / 13 Регистрация: 03.12.2013 Сообщений: 122
	15.05.2014, 15:13	11
	обновите страницу ctrl + f5, у меня открылось все ок выглядит. 0

@Илья-74-23 0 / 0 / 0 Регистрация: 15.05.2014 Сообщений: 9
	15.05.2014, 15:17 [ТС]	12
	Да, все работает. Спасибо огромное! 0

@EaGames 28 / 28 / 13 Регистрация: 03.12.2013 Сообщений: 122
	15.05.2014, 14:40	4
	тэг p тоже блочный, а даже если вам нужен другой строчный элемент просто пропишите ему display: block; выложите полный код в песочнице я вам помогу 0

@Илья-74-23 0 / 0 / 0 Регистрация: 15.05.2014 Сообщений: 9
	15.05.2014, 14:44 [ТС]	5
	Пардон Сообщение от EaGames выложите полный код в песочнице это где? (новичок я) 0

@EaGames 28 / 28 / 13 Регистрация: 03.12.2013 Сообщений: 122
	15.05.2014, 14:55	6
	вот тут к примеру 0

@romchiksoad 1957 / 796 / 89 Регистрация: 03.11.2009 Сообщений: 3,066 Записей в блоге: 2
	15.05.2014, 14:59	7
	EaGames, Илья-74-23, весь код должен быть изначально в теме, а песочницы используем для демонстрации. 0

@Илья-74-23 0 / 0 / 0 Регистрация: 15.05.2014 Сообщений: 9
	15.05.2014, 15:01 [ТС]	8
	Вот Добавлено через 44 секунды Сообщение от romchiksoad EaGames, Илья-74-23, весь код должен быть изначально в теме, а песочницы используем для демонстрации. ОК, сейчас выложу 0

@Илья-74-23 0 / 0 / 0 Регистрация: 15.05.2014 Сообщений: 9
	15.05.2014, 15:10 [ТС]	10
	Не получается - вот 0

Внести изменения в свойства элемента (CSS) для корректного изображения блока

Решение