X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Ссылки-картинки становятся огромными
Artrom_mw
Artrom_mw
Topic Starter сообщение 12.7.2013, 19:04; Ответить: Artrom_mw
Сообщение #1


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


[img]http://litiko.p.ht/99.jpg[/img]

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

[img]http://litiko.p.ht/98.jpg[/img]

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


  <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
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 12.7.2013, 22:42; Ответить: yury_mw
Сообщение #2


Начал делать сайт на таблицах 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);
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Artrom_mw
Artrom_mw
Topic Starter сообщение 14.7.2013, 16:45; Ответить: Artrom_mw
Сообщение #3


Про таблицы учту) Спасибо вам огромное за развёрнутый и понятный ответ, сейчас разберусь, и как говориться, вперёд за орденами!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
wolverine_hb
wolverine_hb
сообщение 23.7.2013, 14:53; Ответить: wolverine_hb
Сообщение #4


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

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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Ссылки за которые не стыдно! Качественный линк билдинг сервис под Бурж от Westrank. Честный прайс.
 63 DaoDog 47122 Вчера, 12:05
автор: Omaxis
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКрауд ссылки с форумов, блогов, порталов. Жирные ссылки с Ua,Ru, Бурж площадок. Вечные ссылки в статьях на собственных сайтах
Быстро, качественно и ответственно!
 138 vetalbon 66432 13.4.2024, 17:53
автор: vetalbon
Открытая тема (нет новых ответов) SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией
 20 Needmylink1 7000 12.4.2024, 23:32
автор: Needmylink1
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВечные ссылки с трастовых сайтов
 53 1informer 22677 7.4.2024, 13:47
автор: 1informer
Открытая тема (нет новых ответов) Оптом и в розницу, скупаю ссылки околомедицинской тематики.
 3 kasey7 2024 4.4.2024, 19:12
автор: kasey7


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 20.4.2024, 1:30

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet