Помогите с версткой меню

Помогите с версткой меню

#1 19 августа 2012 в 20:03
помогите отверстать меню что бы все встало на свои места
  1. <div>
  2. <a href="/">
  3. <img style="margin-top:3px;" src="/templates/_default_/images/logo.png"></a>
  4. <ul style="margin-left: 180px; margin-top: -35px; " id="{$menu}" class="menu">
  5.  
  6. {if $cfg.show_home}
  7. <li {if $menuid==1}class="selected"{/if}>
  8. <a href="/" {if $menuid==1}class="selected"{/if}><span>{$LANG.PATH_HOME}</span></a>
  9. </li>
  10. {/if}
  11.  
  12. <li >
  13. <a href="{profile_url login=$login}">Моя страница</a>
  14. </li>
  15. <li >
  16. {if $newmsg}
  17. <a class="has_new" href="/users/{$id}/messages.html">Сообщения +{$newmsg}</a>
  18. {else}
  19. <a href="/users/{$id}/messages.html">Сообщения</a>
  20. {/if}
  21. </li>
  22.  
  23. <li >
  24. <a href="/users/{$id}/photoalbum.html">Фотографии</a>
  25. </li>
  26. <div style="margin-right: 10px; margin-top: -40px;" align="right">
  27.  
  28. <li " >
  29. <a href="/users">Люди</a>
  30. </li>
  31. <li >
  32. <a href="/blogs">Блоги</a>
  33. </li>
  34. <li >
  35. <a href="/forums">Форумы</a>
  36. </li>
  37.  
  38. <img style="margin-top:3px;" src="/templates/_default_/images/break.png">
  39.  
  40. <li >
  41. <a href="/logout">Выйти</a>
  42. </li>
  43. </div></div>

#2 19 августа 2012 в 20:36
Вы б дали ссылку на сайт и не матерились бы…
#3 19 августа 2012 в 20:57


Вы б дали ссылку на сайт и не матерились бы...

Rossoman

это не мат. что бы увидеть это надо автроризоваться
вот вам тестовый пароль для авторизации:
ЛОГИН: test
ПАРОЛЬ: test

WWW.YOUNET.PRO

#4 19 августа 2012 в 21:13
igolka97, для начала примерно так:
  1. <div class="контейнер для меню">
  2. <ul class="левая часть"> <!--дальше, например, float:left-->
  3. {if $cfg.show_home}
  4. <li>
  5. <a href="/" class="main_page">Главная</a> <!--стилями цепляем любую картинку-->
  6. </li>
  7. {/if}
  8. <li>
  9. <a href="{profile_url login=$login}">Моя страница</a>
  10. </li>
  11. <li>
  12. {if $newmsg}
  13. <a class="has_new" href="/users/{$id}/messages.html">Сообщения +{$newmsg}</a>
  14. {else}
  15. <a href="/users/{$id}/messages.html">Сообщения</a>
  16. {/if}
  17. </li>
  18. <li>
  19. <a href="/users/{$id}/photoalbum.html">Фотографии</a>
  20. </li>
  21. </ul>
  22. <ul class="правая часть"> <!--ну и float:right-->
  23. <li>
  24. <a href="/users">Люди</a>
  25. </li>
  26. <li>
  27. <a href="/blogs">Блоги</a>
  28. </li>
  29. <li>
  30. <a href="/forums">Форумы</a>
  31. </li>
  32. <li>
  33. <a href="/logout" class="logout">Выйти</a> <!--стилями цепляем любую картинку-->
  34. </li>
  35. </ul>
  36. </div>
Ну и дальше с помощью css выставляйте на нужные позиции…
#5 19 августа 2012 в 22:26


igolka97, для начала примерно так:

  1.  
  2.  
  3. {if $cfg.show_home}
  4.  
  5. Главная
  6.  
  7. {/if}
  8.  
  9. Моя страница
  10.  
  11.  
  12. {if $newmsg}
  13. Сообщения +{$newmsg}
  14. {else}
  15. Сообщения
  16. {/if}
  17.  
  18.  
  19. Фотографии
  20.  
  21.  
  22.  
  23.  
  24. Люди
  25.  
  26.  
  27. Блоги
  28.  
  29.  
  30. Форумы
  31.  
  32.  
  33. Выйти
  34.  
  35.  
  36.  
Ну и дальше с помощью css выставляйте на нужные позиции...

Pasha

Спасибо! я уже почти понял но что надо написать в class "logout" что бы воткнуть туда картинку break.jpg???
#6 19 августа 2012 в 23:21
Ну если буквально к данному случаю, то выглядеть должно примерно вот так:
  1. a.logout{
  2. display:block;
  3. padding-right:зависит от размеров рисунка(скорее всего и вертикальные отступы тоже нужны);
  4. background:url(путь к рисунку) позиция_по_x позиция_по_y no-repeat;
  5. }
#7 20 августа 2012 в 13:58


Ну если буквально к данному случаю, то выглядеть должно примерно вот так:

  1. a.logout{
  2. display:block;
  3. padding-right:зависит от размеров рисунка(скорее всего и вертикальные отступы тоже нужны);
  4. background:url(путь к рисунку) позиция_по_x позиция_по_y no-repeat;
  5. }

Pasha

Ага, я понял, извинюсь за свое неумение CSS верстки :D
Последний вопрос: что надо написать в padding-right: если ширина рисунка 1рх?
#8 20 августа 2012 в 14:09
Ну так визуально смотрите. Какой нужен отступ от последнего символа текста до рисунка, такой и падинг выставляйте…
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.