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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыКрауд ссылки с форумов, блогов, порталов. Жирные ссылки с Ua,Ru, Бурж площадок. Вечные ссылки в статьях на собственных сайтах
Быстро, качественно и ответственно!
 138 vetalbon 66392 13.4.2024, 17:53
автор: vetalbon
Открытая тема (нет новых ответов) SEO Линк Билдинг под Бурж | Вечные ссылки США, Европа и Мир с Гарантией
 20 Needmylink1 6993 12.4.2024, 23:32
автор: Needmylink1
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыВечные ссылки с трастовых сайтов
 53 1informer 22664 7.4.2024, 13:47
автор: 1informer
Открытая тема (нет новых ответов) Оптом и в розницу, скупаю ссылки околомедицинской тематики.
 3 kasey7 2005 4.4.2024, 19:12
автор: kasey7
Горячая тема (нет новых ответов) Вечные ссылки с 300+ СДЛов, тиц до 750, ЯКи, DMOZ, от 1$/ссылка
вечные ссылки
 259 SeoUaSales 129189 30.3.2024, 18:27
автор: Hillel_Silver


 

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

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

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

Дизайн

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