Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Горизонтальное меню

Автор: virus3003 22.2.2013, 17:17

Добрый день
Вопрос по поводу горизонтальное меню, возможно ли сделать меню горизонтальный не использую таблицу?
И какой самый оптимальный вариант с точки зрение профессиональной вёрстки, как следует делать и как нет.
И ещё вопрос картинка кнопок 1. PNG8-9кб 2.PNG24- 35 кб - разницу видно только при увеличенни 300% , Подскажите в каких случаях польцоваться PNG8 и в каких PNG24.

HTML

Код

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Меню горизонтальное</title>
   <meta name="Author" content="">
   <meta name="Keywords" content="">
   <meta name="Description" content="">
   <link href="menu.css" rel="stylesheet" type="text/css">
 </head>
 <body><table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col"><div class="wrapper1">
    <a href="/"></a> 
    </div></th>
    <th scope="col"><div class="wrapper2">
    <a href="/"></a>
    </div></th>
    <th scope="col"><div class="wrapper3">
    <a href="/"></a>
    </div></th>
    <th scope="col"><div class="wrapper4">
    <a href="/"></a>
    </div></th>
    <th scope="col"><div class="wrapper5">
    <a href="/"></a>
    </div></th>
    <th scope="col"><div class="wrapper6">
    <a href="/"></a>
    </div></th>
  </tr>
</table>
   
 </body>
</html>

CSS

Код

 BODY {
    background-color: #fff /* Цвет фона веб-страницы */
   } 

.wrapper1 a{
    display:block;
    background-image:url("1.png");
    background-repeat:no-repeat;
    height:44px;
    width:162px; 
    outline:none;
   }
     .wrapper1 a:hover{
        display:block;
        background-image:url("1.png");background-repeat:no-repeat;
        background-position:-162px 0;
        height:44px;
   }
    .wrapper2 a{
    display:block;
    background-image:url("1.png");
    background-position: 0 -44px;
    background-repeat:no-repeat;
    height:44px;
    width:162px; 
    outline:none;
   }
     .wrapper2 a:hover{
        display:block;
        background-image:url("1.png");background-repeat:no-repeat;
        background-position:-162px -44px;
        height:44px;
   }
   .wrapper3 a{
    display:block;
    background-image:url("1.png");
    background-position: 0 -88px;
    background-repeat:no-repeat;
    height:44px;
    width:162px; 
    outline:none;
   }
     .wrapper3 a:hover{
        display:block;
        background-image:url("1.png");background-repeat:no-repeat;
        background-position:-162px -88px;
        height:44px;
   }
      .wrapper4 a{
    display:block;
    background-image:url("1.png");
    background-position: 0 -132px;
    background-repeat:no-repeat;
    height:44px;
    width:162px; 
    outline:none;
   }
     .wrapper4 a:hover{
        display:block;
        background-image:url("1.png");background-repeat:no-repeat;
        background-position:-162px -132px;
        height:44px;
   }
         .wrapper5 a{
    display:block;
    background-image:url("1.png");
    background-position: 0 -176px;
    background-repeat:no-repeat;
    height:44px;
    width:162px; 
    outline:none;
   }
     .wrapper5 a:hover{
        display:block;
        background-image:url("1.png");background-repeat:no-repeat;
        background-position:-162px -176px;
        height:44px;
   }
       .wrapper6 a{
    display:block;
    background-image:url("1.png");
    background-position: 0 -220px;
    background-repeat:no-repeat;
    height:44px;
    width:162px; 
    outline:none;
   }
     .wrapper6 a:hover{
        display:block;
        background-image:url("1.png");background-repeat:no-repeat;
        background-position:-162px -220px;
        height:44px;
   }

Автор: x404 2.3.2013, 00:32

для меню лучше использовать списки ul-li

Код


<ul>
    <li>
        <a href="#">menu1</a>
        <a href="#">menu2</a>
        <a href="#">menu3</a>
        <a href="#">menu4</a>
        <a href="#">menu5</a>
        <a href="#">menu6</a>
    </li>
</ul>

указав для li свойство float:left;

PNG24 лучше использовать для полупрозрачных картинок.

в вашем случае лучше использовать png8

Автор: Arantir 2.3.2013, 03:04

Цитата(virus3003 @ 22.2.2013, 16:17

)

с точки зрение профессиональной вёрстки

Использовать HTML5, ссылки поместить в список, список поместить в nav, nav поместить в header, header поместить в body.
Как-то так =)

Цитата(virus3003 @ 22.2.2013, 16:17

)

Подскажите в каких случаях польцоваться PNG8 и в каких PNG24

8 и 24 - битность цвета. 24 - это 16 млн. цветов, как на современных мониторах. 8 - это 256 цветов.
Соответственно, если в картинке меньше 256 цветов, то лучше png8. Хотя я бы gif использовал, он компактнее.

Цитата(x404 @ 1.3.2013, 23:32

)

для меню лучше использовать списки ul-li

Код


<ul>
    <li>
        <a href="#">menu1</a>
        <a href="#">menu2</a>
        <a href="#">menu3</a>
        <a href="#">menu4</a>
        <a href="#">menu5</a>
        <a href="#">menu6</a>
    </li>
</ul>

А может все таки так?

Код


<ul>
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
    <li><a href="#">menu4</a></li>
    <li><a href="#">menu5</a></li>
    <li><a href="#">menu6</a></li>
</ul>

Цитата(virus3003 @ 22.2.2013, 16:17

)

возможно ли сделать меню горизонтальный

Кроме варианта x404, можно еще сделать так же display: inline-block. "Инлайновые" элементы не имеют переноса строки после себя, соответственно, все будут в одной строчке. При этом останутся блочными, что позволит задавать размеры и прочее.

Автор: virus3003 4.3.2013, 17:40

x404 невнимателен) Arantir подправил правильно, но не по конца (class) если быть окончательно точным ) варианты такие выискал
Arantir , я смотрел гиф и пнг8, ПНГ выглядит лучше и размер поменьше, остновлюсь на пнг8, а если есть прозрачные то пнг24 всё с картинками разобрался спасиб.

Вариант 1
Минус картинок должно быть столько сколько и кнопок(В ДАННОМ варианте их 6, и общий размер около 25 кб), но код выходит с СSS короче т.к. смещение происходит одинаковое.

Код


<ul>
      <li><a href="@" class="kn1"></a></li>
      <li><a href="@" class="kn2"></a></li>
      <li><a href="@" class="kn3"></a></li>
      <li><a href="@" class="kn4"></a></li>
      <li><a href="@" class="kn5"></a></li>
      <li><a href="@" class="kn6"></a></li>
  </ul>

CSS такой

Код


ul {
    margin:0; padding:0; 
    list-style-type:none; }
li { float:left; }
a{
    display:block;
    overflow: hidden;
    height:44px;
    width:162px;
    text-indent:-9999px;
    background-position:0 0;
    background-repeat:no-repeat;
     
    outline:none;
   }
    a:hover{
        background-position:-162px 0;
    }
      a.kn1 { background-image:url(kn1.png); }
      a.kn2 { background-image:url(kn2.png); }
      a.kn3 { background-image:url(kn3.png); }
      a.kn4 { background-image:url(kn4.png); }
      a.kn5 { background-image:url(kn5.png); }
      a.kn6 { background-image:url(kn6.png); }

Вариант 2
Плюсы в таком коде озображение используется 1, Размер 7кб , но код CSS становится длинее немного, но и становится универсальнее тк. кнопки могут быть и разной длинны , и если разной то 1 Вариант не получится использывать вроде). Думаю 2 вариант лучше. А Ваше мнение какое?

Код


<div class="menu"> 
     <a href="/" class="wrapper1"> 
     </a><a href="/" class="wrapper2"> 
     </a><a href="/" class="wrapper3">
     </a><a href="/" class="wrapper4">
     </a><a href="/" class="wrapper5">
      </a><a href="/" class="wrapper6">
      </a><a href="/" class="wrapper7"></a>     
 </div>

CSS

Код


 BODY {
    background-color: #fff ;/* Цвет фона веб-страницы */
   margin:0; padding:0;
   } 
.menu { 
     width: 100%; 
     text-align:center;
     white-space: nowrap; 
     } 
  
 .menu a { 
     display: inline-block; 
     width: 101px; 
     height: 43px; 
     background-image:url("3.png"); 
     } 
  
 a.wrapper1:hover { 
     background-position:0 -43px; 
     } 
  
 a.wrapper2 { 
     width: 86px; 
     height: 43px; 
     background-position:-101px  0; 
     } 
  
 a.wrapper2:hover { 
     background-position:-101px -43px; 
     } 
  
 a.wrapper3 { 
 width: 80px; 
     height: 43px; 
     background-position:-187px 0; 
     } 
  
 a.wrapper3:hover { 
     background-position:-187px -43px; 
     }
  a.wrapper4 { 
 width: 81px; 
     height: 43px; 
     background-position:-267px 0; 
     } 
  
  a.wrapper4:hover { 
     background-position:-267px -43px; 
     }
     a.wrapper4a { 
     width: 81px; 
     height: 43px;
     background-position:-267px -43px; 
     }
     a.wrapper5 { 
 width: 85px; 
     height: 43px; 
     background-position:-348px 0; 
     } 
  
  a.wrapper5:hover { 
     background-position:-348px -43px; 
     }
 a.wrapper6 { 
 width: 86px; 
     height: 43px; 
     background-position:-433px 0; 
     } 
  
  a.wrapper6:hover { 
     background-position:-433px -43px; 
     }
     a.wrapper7 { 
 width: 94px; 
     height: 43px; 
     background-position:-519px 0; 
     } 
  
  a.wrapper7:hover { 
     background-position:-519px -43px; 
     }

И ещё 1 вопрос по вёрстке, лучше табличная или блочная вёрстка. как я понимаю у 1 и 2 есть свои + и - , но если всё же профессионально версталь то на какой стоит заострить (уделить больше) внимания?

Добавлено через 10 минут и 50 секунд

Цитата(Arantir @ 2.3.2013, 03:04

)

Вопрос к тебе Arantir, ну и не только) подскажите книги по которым учили выше сказанные фразы или видео уроки есть.

Автор: virus3003 4.3.2013, 18:18

Вот просто на форуме порекомедовали книгу 2007 года, читаю а там про дивную вёрстку как то слабовато не сильно её любили в 2007 году как я понял, а сей час огггоого как все пользуются, в HTML5 даже теги сделали специальные для разметки, посоветуйте книгу теперешнего времени не HTML5, но не задолго до него в основном про див вёрстку поподробнее чтоб было , СПАСИБО

Автор: SiteVizitka 9.3.2013, 19:38

Цитата(virus3003 @ 22.2.2013, 17:17)

возможно ли сделать меню горизонтальный

-да

Код


<p><a>Пункт 1</a> <a>Пункт 2</a> <a>Пункт 3</a></p>

-кросбраузерно, валидно, надёжно, никто не сможет найти браузер, где это будет сломано smile

Если надо посложнее, тогда убираете абзац, в стиле объявляете ссылки блочными элементами, ну и далее, как фантазия разыграется.
На мой взгляд, "профессиональная вёрстка" должна гарантировать сохранение юзабилити ресурса для всех потенциальных посетителей. А http://xn--80ahjdhy.xn----7sbajzfbacq2eog.xn--p1ai/ - это холивар. Но мешать тоже нехорошо - не надо делать страницу на дивах, а отдельные элементы типа меню - на таблицах.

PNG8 или PNG24 - если не видно разницы, значит надо выбирать то, что меньше. Но у вас не оправдано большая разница в размере, может у вас фотографические изображения, которые плохо подходят для PNG. Если изображения полноцветные, следует посмотреть сколько будет в JPEG.

Книга 2007 года у вас неправильная, либо неправильно её читаете. <DIV> появился в HTML3.2 и поддерживался основными браузерами с конца 90-x. Просто, div-ы надо использовать совместно с CSS, и для многих это кажется сложным в освоении, плюс браузеры часто косячат на стилях. Таблицы не так гибки, требуется немного более сложный HTML код, но они стабильно работают во всех браузерах, и проще в освоении.

Цитата

Пока ребята из Вилларибо верстают дивами, кодеры из Виллабаджо уже всё зафигачили на таблицах и мочат друг друга в квейк. smile