Как сделать выделение по высоте - HTML и CSS

narem · 29.12.2016, 00:43

Как увеличить выделение по высоте и ширине? Т.е делаю псевдо класс 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;}

Вадим Мошев · 02.01.2017, 00:19

Если, уж на то пошло, то есть, сохранить всё то, что написано у вас, то то предлагаю вам ваш же 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

Naive · 02.01.2017, 00:32

Цитата:

Сообщение от Вадим Мошев

только модифицированный мной

так хоть глаза не кровоточат)
с новым годом, Вадим)

не очень решение через интерлиньяж, если ссылка будет в две строки, то все поедет.
но это кнеш от случая зависит)

Вадим Мошев · 02.01.2017, 00:54

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

Ну и по теме.

Цитата:

Сообщение от Naive

если ссылка будет в две строки, то все поедет

Согласен, меню от этого разорвёт

02.01.2017, 00:19	#2
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	Если, уж на то пошло, то есть, сохранить всё то, что написано у вас, то то предлагаю вам ваш же 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 в 00:22.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Как сделать выделение области на Image в виде эллипса?	Lilen	Мультимедиа в Delphi	1	10.12.2015 12:37
Как сделать выделение ячейки по условиям совпадения	Sanden	Microsoft Office Excel	14	09.04.2015 11: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 18:19