Форум программистов  
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 29.12.2016, 01:43   #1
narem
Пользователь
 
Регистрация: 22.11.2015
Сообщений: 12
Репутация: 10
По умолчанию Как сделать выделение по высоте

Как увеличить выделение по высоте и ширине? Т.е делаю псевдо класс hover, но при наводке получается вот такое маленькое окошко белое, как его вытянуть по все высоте серого фона. Скрин и код прикрепил.
Код:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<link href="style/style.css" rel="stylesheet">
		<title></title>
		<meta name="description" content="">
		<meta name="keywords" content="">
	</head>
	<body>
		<header>
			<ul class="menu_top">
				<li><a href="#">Главная</a></li>
				<li><a href="#">Комиксы</a></li>
				<li><a href="#">Видео</a></li>
			</ul>
		</header>
		<article></article>
		<footer></footer>
	</body>
</html>

Код:

body {background:#F2FF00;
height:100%;
width:100%;
margin:0;}
a {text-decoration:none;}
ul {list-style-type:none;}
.menu_top li {display:inline-block;
vertical-align:top;
width:31%;
height:100%;
text-align:center;}
.menu_top a {display:inline-block;
color:white;
width:100%;
height:100%;}
header {padding:10px;
width:100%;
background:#3A3B3E;
font-weight:900;}
.menu_top a:hover{background:white;
color:black;}

Изображения
Тип файла: jpg 2016-12-29_004811.jpg (11.9 Кб, 1 просмотров)

Последний раз редактировалось narem; 29.12.2016 в 01:48.
narem вне форума   Ответить с цитированием
Старый 02.01.2017, 01:19   #2
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,310
Репутация: 3571
По умолчанию

Если, уж на то пошло, то есть, сохранить всё то, что написано у вас, то то предлагаю вам ваш же CSS-код, только модифицированный мной

Код:

html, body {
  margin: 0;
  padding: 0;
}

body {
  background:#F2FF00;
}

header {
  height: 60px;
  width:100%;
  background:#3A3B3E;
  font-weight:900;
}


a {
  text-decoration:none;
}

ul {
  list-style-type:none;
  margin: 0;
}

.menu_top li {
  display:inline-block;
  vertical-align:top;
  width:31%;
  height:60px;
  text-align:center;
}

.menu_top a {
  display:inline-block;
  color:white;
  width:100%;
  height:60px;
  line-height: 60px;
}

.menu_top a:hover{
  background:white;
  color:black;
}

SESESESESE.jpg

Последний раз редактировалось Вадим Мошев; 02.01.2017 в 01:22.
Вадим Мошев вне форума   Ответить с цитированием
Старый 02.01.2017, 01:32   #3
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,571
Репутация: 1842
По умолчанию

Цитата:
Сообщение от Вадим Мошев Посмотреть сообщение
только модифицированный мной
так хоть глаза не кровоточат)
с новым годом, Вадим)

не очень решение через интерлиньяж, если ссылка будет в две строки, то все поедет.
но это кнеш от случая зависит)
__________________
ridero.ru — создайте настоящую книгу
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 02.01.2017, 01:54   #4
Вадим Мошев
гигаМодератор :)
Заслуженный модератор
 
Аватар для Вадим Мошев
 
Регистрация: 12.11.2010
Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес: Адрес:
Сообщений: 7,310
Репутация: 3571
По умолчанию

Александр, С Новым Годом. Если бы был на момент празднования НГ в ЕКБ, пошёл/сходил бы с тобой, наверное, в бар.

Ну и по теме.
Цитата:
Сообщение от Naive Посмотреть сообщение
если ссылка будет в две строки, то все поедет
Согласен, меню от этого разорвёт
Вадим Мошев вне форума   Ответить с цитированием
Ответ



Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать выделение области на Image в виде эллипса? Lilen Мультимедиа в Delphi 1 10.12.2015 13:37
Как сделать выделение ячейки по условиям совпадения Sanden Microsoft Office Excel 14 09.04.2015 12:04
как заставить родительский div растягиваться по высоте дочернего Arassir HTML и CSS 9 16.10.2013 15:20
Сделать дочерний блок, равный во высоте родительскому. vedro-compota HTML и CSS 12 26.08.2011 13:14
Как подогнать содержимое ячейки по высоте ПУГВ HTML и CSS 4 28.03.2009 19:19




18:22.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

купить трафик


как улучшить посещаемость, а также решения по монетизации сайтов, видео и приложений

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru