Jump to content
  • 0

Спрятать текст на картинке меню

qazibum

Asked by qazibum,

 Share

Question

qazibum Explorer

qazibum

Posted
Posted

Делаю меню, которое должно быть картинкой, на картинки нарисованный текст. Само меню, ссылки - текстовые. Поместил картинку, а на ней текст ссылок. Теперь задача спрятать этот текст, чтобы был виден только текст, который на картинке. Цветом не получится, картинка разноцветная, задать 1px - видно. Как делать в таких случаях?

МОжет быть можно сделать так, чтобы картинка была над текстом, наверху? Чтобы текст под ней прятался.

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
qazibum Explorer

qazibum

Posted
  • Author
Posted

Почему не сделаете просто ссылки картинками, без всяких пряток?

Делается на cms, спрятать проще :)

visibility работает, но не хотелось бы. Мало ли ПС не так поймут.

z-index хочу, но почему-то не получается.

Вот такой код.

<html><head><style>
div#menu{
background: url(m.png);
height: 28px;
width: 300px;
position: relative;
z-index: 2;
}
ul.menu{
list-style: none;
margin: 0;
padding: 0;
position: relative;
z-index: 1;
}
ul.menu li{
float: left;
position: relative;
z-index: 1;
}
ul.menu a{
display: block;
width: 150px;
position: relative;
z-index: 1;
}
ul.menu a span{
position: relative;
z-index: 1;
}
</style></head><body>
<div id="menu">
<ul class="menu">
<li><a href="/"><span>123</span></a></li>
<li><a href="/"><span>456</span></a></li>
</ul>
</div>
</body></html>

Link to comment
Share on other sites
  • 0
USF Explorer

USF

Posted
Posted

кроме visiblity и display вам вряд ли что-то поможет. и я не рекомендую использовать никакой из костылей, так как это не есть правильно.

Если в меню генерируется текст - найдите какой модуль(ну тут думаю понятно) и какой файл(!) генерирует и исправьте. Потратите больше времени но сделаете правильно, мой совет.

Что за cms, кстати?

  • Like 1
Link to comment
Share on other sites
  • 0
wildhind Explorer

wildhind

Posted
Posted

text-indent: -9999px;

overflow: hidden; // (а вдруг будет просматриваться на экране шириной 20000px)

Потратите больше времени но сделаете правильно, мой совет.

ряд вопросов:

что неправильного в том, что хочет сделать автор темы?

что правильного в том, чтобы потратить больше времени?

что вообще правильного в том, чтобы меню делать картинками? (но это уже так, общая философия)

  • Like 1
Link to comment
Share on other sites
  • 0
USF Explorer

USF

Posted
Posted
что неправильного в том, что хочет сделать автор темы?

что правильного в том, чтобы потратить больше времени?

в том, что меню изначально выдает текст. это все равно, что клеить обои поверх старых, вместо того, чтобы содрать их и поклеить качественно. потратит больше времени - но в будущем разберется как эта цмс генерирует списки меню и сделает все намного быстрее.

что вообще правильного в том, чтобы меню делать картинками? (но это уже так, общая философия)

это не ко мне вопрос, а к автору тему. возможно используются мудреные шрифты и(или) эффекты при наведении.

Link to comment
Share on other sites
  • 0
qazibum Explorer

qazibum

Posted
  • Author
Posted
что неправильного в том, что хочет сделать автор темы?

что правильного в том, чтобы потратить больше времени?

в том, что меню изначально выдает текст. это все равно, что клеить обои поверх старых, вместо того, чтобы содрать их и поклеить качественно. потратит больше времени - но в будущем разберется как эта цмс генерирует списки меню и сделает все намного быстрее.

что вообще правильного в том, чтобы меню делать картинками? (но это уже так, общая философия)

это не ко мне вопрос, а к автору тему. возможно используются мудреные шрифты и(или) эффекты при наведении.

С одной стороны правильнее убрать текст в меню, чтобы без костылей. С другой стороны для сео полезнее оставить, но тогда скрыть грамотно. CMS joomla, я знаю как там убрать текст из меню, но хотелось бы по хитрому сделать :)

Картинка из-за дизайна, там шрифты и два эффекта при наведение и активное меню.

text-indent: -9999px;

overflow: hidden; // (а вдруг будет просматриваться на экране шириной 20000px)

Сработало, так и оставлю :) Спасибо.

Link to comment
Share on other sites
  • 0
hedgehog Explorer

hedgehog

Posted
Posted

text-indent: -9999px;

overflow: hidden; // (а вдруг будет просматриваться на экране шириной 20000px)

Где-то здесь на форуме встречал ссылку на статью, описыающую такой вариант:


overflow:hidden;
white-space:nowrap;
text-indent:100%;

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept