Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Ссылки-картинки становятся огромными

#1 Artrom

Artrom
  • Пользователь
  • 2 сообщений
  • Репутация: 0
0

Отправлено 12 Июль 2013 - 18:04

Начал делать сайт на таблицах PHP. Раньше я делал вертикальное меню, но в этот раз мне захотелось, чтобы оно располагалось горизонтально под шапкой, вот так:


Изображение

Это, к слову, и есть идеальный вариант. Но во время тестирования на локальном сервере (денвер) меню то и дело начинало приобретать такой вид:

Изображение

И это ещё, кстати, по-божески, иногда одна картиночка вообще всю ширину занимает) В чём дело я так разобраться не смог.
Код имеет такой вид:


<a href="index.php"><img onmouseover="this.src='images/1.png';" onmouseout="this.src='images/1.jpg';" src="images/1.jpg" width="97%" height="90">  
  </a>

  <a href="arhiv_index.php"><img onmouseover="this.src='images/2.png';" onmouseout="this.src='images/2.jpg';" src="images/2.jpg" width="97%" height="90">  
  </a>

  <a href="spravka_index.php"><img onmouseover="this.src='images/3.png';" onmouseout="this.src='images/3.jpg';" src="images/3.jpg" width="97%" height="90">  
  </a>

  <a href="kontakti_index.php"><img onmouseover="this.src='images/4.png';" onmouseout="this.src='images/4.jpg';" src="images/4.jpg" width="97%" height="90">  
  </a>

  <a href="onas_index.php"><img onmouseover="this.src='images/5.png';" onmouseout="this.src='images/5.jpg';" src="images/5.jpg" width="97%" height="90">  
  </a>

(Не стопроцентную процентовку я выставил в надежде, что глюк пропадёт. Этого не случилось)
По идее, как мне кажется, всё написано правильно и никаких ошибок быть не должно. Всё чинненько, каждой картиночке-ссылочке своя ячейка. Но когда одна-две картинки-ссылки
занимают всё поле это, конечно, ненормально. Я уже совсем отчаялся, ничего не помогает... Подскажите, пожалуйста в чём может быть проблема? Или хотя бы посоветуйте как сделать такое же красивое (на мой взгляд) горизонтальное меню. Буду рад любой помощи.

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 12 Июль 2013 - 21:42

Начал делать сайт на таблицах PHP.
...
Или хотя бы посоветуйте как сделать такое же красивое (на мой взгляд) горизонтальное меню. Буду рад любой помощи.

В PHP нет таблиц. Таблицы есть в HTML. В таблицах следует размещать табличные данные, а меню правильнее делать списками.

Такое горизонтальное меню, как у вас, делается без картинок и JS-вставок на чистом HTML и CSS примерно так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>menu</title>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
ul#menu{
  list-style: none;
/*Ширина меню*/
  width: 828px;
/*Высота меню*/
  height: 45px;
  background: #fff;
}
ul#menu li{
  float: left;
  height: 45px;
/*интервал между кнопками*/
  margin-right: 4px;
}
ul#menu li a{
  float: left;
/*красная рамочка вокруг каждой кнопки толщиной 4px*/
  border: 4px solid #ce451b;
/*желтый фон*/
  background: #fddc75;
/*цвет шрифта*/
  color: #562d00;
/*текст выравниваем по центру кнопки*/
  text-align: center;
/*высота ссылки на кнопке получается вычитанием из высоты меню удвоенной толщины рамочки: 45px-4px*2= 37px */
  height: 37px;
/*ширина ссылки на кнопке получается вычитанием из ширины кнопки удвоенной толщины рамочки: 161px-4px*2= 153px
(ширина кнопки равна 1/5 ширины меню минус расстояние между кнопками (4px) кнопки 828px/5-4px=161px)*/
  width: 153px;
/*шрифт на кнопке */
  font: normal 24px/37px Verdana, Geneva, "DejaVu Sans", sans-serif;
/*убираем подчеркивание*/
  text-decoration: none;
}
ul#menu li a:hover{
/*тут можно указать цвета рамочки, фона и шрифта для кнопки под курсором мыши*/
  border: 4px solid #c41;
  background: #fc9;
  color: #630;
}
</style>
</head>
<body>
<ul id="menu">
  <li><a href="index.php">Главная</a></li>
  <li><a href="arhiv_index.php">Архив</a></li>
  <li><a href="spravka_index.php">Справка</a></li>
  <li><a href="kontakti_index.php">Контакты</a></li>
  <li><a href="onas_index.php">О нас</a></li>
</ul>
</body>
</html>

Если очень хочется сделать кнопки меню на изображениях (т.е. если фон — нечто более сложное, чем монотонный прямоугольник в рамочке), то нужные изображения можно указать в стилевом свойстве background (рамочку заданную свойством border в этом случае надо убрать) ссылок меню примерно так:
ul#menu li a{
  height: 45px;
  width: 161px;
  background: url(1.png);
}
ul#menu li a:hover{
  background: url(1.jpg);
}

  • 2

#3 Artrom

Artrom
    Topic Starter
  • Пользователь
  • 2 сообщений
  • Репутация: 0

Отправлено 14 Июль 2013 - 15:45

Про таблицы учту) Спасибо вам огромное за развёрнутый и понятный ответ, сейчас разберусь, и как говориться, вперёд за орденами!
  • 0

#4 denis79513

denis79513
  • Пользователь
  • 56 сообщений
  • Репутация: 7

Отправлено 23 Июль 2013 - 13:53

Про таблицы учту) Спасибо вам огромное за развёрнутый и понятный ответ, сейчас разберусь, и как говориться, вперёд за орденами!

Вы что, действительно собирались делать меню картинками?) :D
Это как бы, :) не совсем верно)
Почитайте тут для начала: http://www.pastukhova.com/lesson1.php
И, думаю, вам нужно понять что такое html и Css: http://htmlbook.ru/samhtml
И еще запомните, не надо делать ничего картинками, картинок должно быть как можно меньше, совсем скоро (хотя и уже есть) сайты будут вообще без единой картинки. Все элементы оформляюся при помощи css. И это не потому что это так надо а потому что, во-первых, сайты с картинками значительно дольше грузятся, во-вторых, что очень важно, контент на картинках не индексируется поисковиками, а меню в первую очередь должно быть проидексировано.
  • 0


Оформление форума – IPBSkins.ru