Урок по html верстці - клікабельним логотип за допомогою шару (div)

. В принципі, для шару доступні властивості горизонтального і вертикального позиціонування - left і top, які задають відступи від лівого і верхнього країв відповідно. Проте, я зустрічав також використання звичайного відступу margin.

Властивість z-index задає порядок перекриття шарами один одного при накладенні. Блок DIV з більш високим індексом буде розташовуватися вище ніж той, у кого значення нижче.

Часто в шаблонах wordpress або будь-яких інших визначаються відступи або рамки для всіх зображень на сайті, тому може знадобитися обнуління цих значень:

P.S. Якщо ви зібралися організувати конкурс з великим бюждет, рекомендую почитати статтю про проведення подібних заходів.
До речі, для підсвічування коду в блозі можна використовувати спеціальний плагін для wordpress.

Сподобався пост? Підпишись на оновлення блогу по RSS. Email або twitter.

А мені ось завжди було цікаво, чи можна зробити посилання на логотип, який відображається як фон і прописується в CSS.

Спробую розібратися з цим наступного разу.

Набагато логічніше зробити картинку саме фоном, клікабельним (до того ж, судячи з закривающеюмуся

, це XHTML, в якому не можна використовувати атрибути width і height, а також немає title у посилання і alt у картинки).

Для цього нам буде потрібно тільки текст, укладений на заслання - Text (І що знаходиться в діві id = "header») і одна властивість CSS:

#header a background: url ( 'images / logo1.jpg');

Далі - потрібний паддінг (відступ всередині рамки) в px.

padding: зверху справа знизу зліва;
>

Проблема залишається в тексті, який залишиться в центрі картинки. Щоб його змістити чисто по-горизонталі, можна скористатися text-indent прямо в нашому #header a.

Якщо ж по-вертикалі, то текст всередині посилання потрібно засунути в спан - Text. А вже в CSS писати додаткові паддінгі в самому спання, ну або абсолютне позиціонування (тільки в цьому випадку, у header має бути position: relative, щоб вважалося щодо блоку, а не всієї області екрану).

Це якщо коротко;)

#header a background: url ( 'images / logo1.jpg') no-repeat;

Дякую за таку детальну консультацію :) З приводу картинки фоном - не особливо люблю, тому що по-перше, вона завантажується після всього сайту як і стилі (хоча це взагалі не критично), а по-друге, в деяких CMS немає можливості редагування файлу стилів через адмінку. При цьому можливість зміни логотипу зробити бажано + знову ж при мультимовності можуть виникнути складності. Це все не велика проблема, звичайно, просто я звик так працювати.

До речі, неправда. Навіть ослик 7-ий і 6-ий вантажать все окремі файли більш-менш паралельно (он на webo.in можна подивитися діаграмкой). Тобто вантажиться HTML і CSS, картинки з CSS, картинки ІМГ. Стилі взагалі повинні завантажуватися якомога швидше, тому що браузер саме по ним будує верстку, тому вони навіть в опері досить швидко вантажаться. Ось у мене ЦСС так і не вдалося стиснути менше 4 кБ, гзіп я поки не застосовую, тому рефлаш все-таки є через секунду після початку завантаження сторінки на поганий швидкості.

Плюс не варто забувати про оптимізацію - якщо все в ЦСС картинки по можливості помістити в один CSS Sprite (як у мене - при тому, що десяток різних елементів використовується, спрайт дозволяє зменшити кількість HTTP-запитів по картинках до 2-х), а також зберігати в гіф-ПНГ з обмеженою палітрою (у фотошопі вибрати save to web as і пограти з квітами і їх кількістю), то все буде завантажуватися аццки швидко і набагато кльово.

Особливих проблем все зміни не викликають, насправді. Та й цей спосіб більш валиден, семантич, та й більш короткий, щоб придумати механізм модифікацій.

Усвідомте для себе хід ваших думок:
а) У вас є фон
б) ви хочете щоб частина фону була посиланням
в) ви робите новий шар з картинкою частини фону і накладаєте його точно поверх.
Ви в принципі все робите правильно але можу спростити завдання. Робите прозорий gif, розміром тієї частини фону яка повинна бути посиланням, замість того щоб «Для початку вирізаємо за допомогою photoshop зображення логотипу, який повинен бути клікабельним:».
Що ми в результаті маємо:
а) менше гемора з точністю позиціонування.
б) полегшуємо сумарна вага картинок на сайті.

angelZ, прозорий гіф - відмінний варіант, на жаль не знайшов реалізацію даного методу, тому застосував свій. Відчуваю варіантів вирішення даного завдання досить багато. Цікаво який з них оптимальний, тому як в верстку я зустрічав абсолютно різні.

Я користуюся таким же варіантом як і angelZ. Якщо хочете можу дати посилання на статтю, де я це розписував!

А ще, це можна зробити засобами HTML:
Нехай ми маємо картинку 100 * 100 і нам треба зробити посиланням прямокутник м-у точками: 40; 40 і 90; 60
Тоді пишемо:

Спосіб старий, але зате CSS не чіпаєш, а ефект як від варіанту з прозорим гіфом.

Мої вирішення питання:

0) Почнемо з способу розглянутого в замітці.

Плюси: він є, про працює і це перше, що спадає на думку.
Мінуси: потрібно жорстко стежити, щоб логотип був точно на своєму місці, так як (при використанні складного фону) піксель вліво, піксель вправо рівносильні розстрілу. При гумової верстки це ще складніше. + Це додаткові кілька кілобайт на закачування користувачеві.

1) Найпростіше дійсно прозорий gif (1х1 піксель) - при цьому все робиться так само, як описано в замітці, але не потрібно нічого в фотошопі вирізати. Важливо! задати розміри, щоб gif потягнувся на весь логотип.

Плюси: просто і швидко; для користувача все чудово.
Мінуси: За логікою речей, логотип можна вважати смисловим елементом сторінки. При спробі, наприклад, його «зберегти як» або роздрукувати сторінку (якщо немає окремого стилю для друку) логотипу не буде - як би підставі виходить.

2) Якщо вся картинка хедера зверстана НЕ фоном, а одним. йому можна призначити map - докладніше в будь-якому підручнику з html. Але спосіб морально застарілий, так як зараз для цього використовуються бекграунд, а до них така технологія непридатна.

3) Ще одна модифікація способу із замітки: картика логотип акуратно вирізається і зберігається в png.

Плюси: не порушується логіка (швидше за семантика) сторінки; якщо картинка трохи з'їжджає в бік - це непомітно. Все гарно.
Мінуси: отримуємо проблему з форматом png в IE і ще кілька кілобайт для користувача (хоча деякі стверджують, що png тисне навіть краще ніж gpeg, але не знаю - точно не в фотошопі).

Вердикт - якщо семантика сторінки не важлива - використовуємо прозорий gif поверх, інакше граємося з png.

PS стільки вийшло, що варто навіть статтю в своєму блозі запостити :)

Kitich, я як побачив - був приємно шокований! Дякую за пояснення. Дійсно для окремого поста матеріал :)
Я сам взагалі не верстаю, але стикаюся з шаблонами при розробці сайтів, тому привів варіант, який бачу найбільш часто. Бувало й з прозорими gif, але це частіше використовується для невеликих іконок - карта сайту, домашня сторінка, а ось лого постійно оформлено в DIV, який поверх фону. В цьому випадку добре, що можна картинку зберегти.

Трохи доповню, раз таке обговорення. PNG дійсно тисне краще GIF для малокольорових зображень. Для цього в Photoshop'е треба зберігати Save as for Web і вибирати кількість квітів у палітрі, правильно підбираючи також і спосіб розсіювання. Краще jpeg точно - тому що не виявляються артефакти при стисненні. З PNG-8 немає проблем ні в одному з нових браузерів, в т.ч. і в ІЕ6, виграш в порівнянні зі стисненим GIF - 5-10%, в порівнянні з JPEG - більше. Якщо ж потрібна напівпрозорість (для лого зазвичай не треба), то дійсно, будуть проблеми з PNG-24.

Збереження логотипа також річ непотрібна зазвичай, тому фон краще все ж. Крім семантики, грає роль також і оптимізація - зазвичай блокується паралельна завантаження більш, ніж 3-х файлів, і CSS починає завантажуватися майже відразу з HTML. І зображення в тлі вантажаться швидше - саме це нам і треба, щоб віднести всі картинки не оформлення в «пост-завантаження» (умовно кажучи).

За map'ам теж додам - ​​не завжди можна зверстати все фоном. Взагалі, мапи зараз треба використовувати тільки в одному випадку - якщо ми хочемо скоротити колво зображень на сторінці, що підключаються через img. Це цілком нормальний підхід.

У всьому іншому огляд методів - відмінний.

ну PNG-8, як я розумію, напівпрозорості не дає :(
І все ж десь стикався з такою думкою: Фотошоп не використовує всіх можливостей PNG-24 - тисне не найкращим чином. Рекомендувався якийсь софт навіть для роботи з PNG, але я тоді не звернув увагу, на жаль.

Про «пост-завантаження» спасибі. Зустрічався з такою думкою, але тільки тепер зрозумів, чому так :)

А я просто зазвичай сам свої макети збираю, так що доводиться :).

Так, PNG-8 не доставляє. Але пхати 24 туди, де він не потрібен - теж не варто :). З приводу тисне не кращим чином - можливо, ще 5-10% можна заощадити, так що якщо згадаєш, який софт - опиши в своєму блозі (я передплатник вже, да)))

З «пост-завантаженням», звичайно, не все так просто. Я ось за матеріалами sunnybear, документів Yahoo і до решти намагаюся дописати талмуд по оптимізації блога (зокрема, вордпресс), але ось з цим питанням поки тільки питань більше, ніж відповідей.

Господа, перш ніж пропонувати ПНГ24 (причому отриманий на виході з шопа) подивіться статистику використання ослів 5-й і 6-й версій. На жаль багатьох верстальників, включно зі мною, їх використовує більшість. А ті танці з бубном, необхідні для запуску альфа каналу ІМХО не варті тих кілобайт і краси.
Так що подивіться яке диво цей пнг24, смахніте скупу сльозу і забудьте про нього поки світ офісного планктону і тих у кого адміни не дозволяють ставити ніякі інші браузери крім предустановочной (я не говорю про браузери на движку осла) НЕ пересядуть як мінімум на 7-го осла.)))

Тоді, пам'ятаю, з'ясувалося, що популярні хакі, якими я користувався, криво працюють (зовсім несподіваний поворот) на Опері :) В результаті витратив багато часу, але що саме зробив - не пам'ятаю. Треба буде покопатися і написати окремо.
Проблема бекграунду, швидше за все, таким чином не вирішується, але стверджувати не буду.

Я зовсім не проти дискусій)) Тим більше таких цікавих і корисних. Особисто мені використання png не заважає, в принципі, там є якийсь хак через htc файл, який я зустрічаю в більшості останній зверстаних проектів.

Боянчег, але новачкам саме воно)

Вобщем суть така - на div в background'e якого задана картинка, накладаємо інший div з прописаним css-властивістю position: absolute; в залежності від того яку частину картинки, хочете зробити посиланням підганяєте цей div на потрібне місце, (для зручності для початку задаємо border: 1px solid; щоб було видно куди рухати :) природно потім прибираємо або ж прирівнюємо до 0px) задаємо висоту і ширину там ж в CSS (Наприклад: width: 150px; height: 36px;), потім вже в самому div'e прописуємо подія onClick = "document.location = 'index.php'» - це для прикладу index.php можна вказати посилання куди хочете =))). А так, і бажано б до нашого div-посиланню :) вказати z-index який-небудь з вище ніж 1 =).

обнуління цих значень можна провести через * :)

Велике вам дякую! Я за допомогою Вашої статті зробила нову шапку на свій сайт «В Повний Рост» - ось, подивіться: enioway.ru
Тепер сайт завантажується набагато швидше - ще раз, величезна Вам спасибі!

Катерина, потрібно в файлі стилів CSS знайти тег «а» або клас, який для нього визначено, і відредагувати їх.

так я в класі для хедера і посилання хедера поставила значення border: none

div.art-Header-logo
position: absolute;
margin: 1px 445 93 13px;
z-index: 2;
>

div.art-Header-logo img
border: none! important;
margin: 0px;
>

div.art-Header-logo a img
border: none! important;
margin: 0px;
>

або не тут? або взагалі скрізь, що стосовно тега «а»?

Йдеться про «моєму книжковому»? В якому браузері виникають рамка і значок?
Іл на хостинг залита версія без «артефакту»?

Так, про нього, але я поки тренуюся на локалхосте, тому там нічого немає :) працюю в Мазілу. Так що робити?

Просто складно виловлювати подібні глюки, не бачачи всього коду - вони можуть виникати через інших стилів або елементів коду, що не бачить ніхто крім вас :)

Спробуйте додати border: none! Important; не тільки до зображення, а й до заслання, і до всіх елементів між ними, якщо такі є. Також спробуйте додати outline: 0; - цей параметр відповідає за «обведення» посилань при натисканні на них.

за розширення спасибі величезне)))) зручно! але ось з рамкою болт :( не виходить ...

Можливо буду писати дурниці, але тестуємо наосліп -_- так що доводиться

1. Припустимо, що div.art-Header-logo a не допомогло.

Якщо ви не зробили чогось з перерахованого вище, робіть (хоча за пунктом 2 зараз пройдемося докладніше).

4. Якщо такого елемента не знайшли, перевірте сусідні елементи - може туди потрапило щось зайве.

5. Можливо, справа не в border'е, а є який-небудь зовнішній елемент з відступом і фоном, який створює ефект рамки.

Поки нічого більше не придумав :(

Спасибо большое за допомогу :) Я почала все заново і уважно-уважно, і все вийшло. Мабуть через неуважність і на втомлену голову :) Дякую ще раз, пішла на паб переносити!

Вітаю. Заодно чомусь новому навчилися)

Вітаю! Чи правильно я роблю? В мене не виходить(((
В index.php у мене так:

У template.css так (в самому кінці дописала):
.logo1 position: absolute;
margin: 1px 0 0 1px;
z-index: 100;
>

Нічого не змінюється чомусь (((

Зараз якраз займаюся лого. Пост в тему, буду розбиратися.

Теж думаю, як посилання на зображення поставити, якщо воно описується в CSS ... спробую з прозорим гіфом зробити)))

Дорогенький, велике тобі людське спасибі матерією, 4 години перебирав уроки всяких криворуких і тільки цей блог зміг хоч чимось допомогти, спасибі-спасибі!

А як зробити клікабельно картинку НЕ прямокутної форми? Наприклад, трикутну?

В'ячеслав, якщо чесно, не знаю. Там був якийсь елемент в HTML який дозволяв робити різної форми посилання з картинки, але на жаль не пам'ятаю як він називається. Треба гуглити, хоча там теж якісь складні всі варіанти.

Kitich, спасибі, це воно! Хвилин 10 згадував як ці теги називаються.

Ні як не можу зробити задній фон клікабельно посиланням, як на кіно порталах (

Фокус, розглянув рішення цього завдання в цій статті.

Якщо виникнуть питання, пишіть на [email protected]