Wini the Pooh
Reputation: 423
a element inside li is displaying bigger than it's parent element while hovering on it
I'm currently writing a project for my school classes and I have a problem with CSS,. I want to box-up everything, but it appears to be not that easy to do. My current problem is that my a element inside li, while on hover is displayed bigger than it's supposed to. Here's my code:
#main{
position: absolute;
top:0;
right: 0;
left:0;
bottom:0;
}
#main_head{
position: absolute;
background-color: #b3fff0;
height:65px;
min-width: 100%;
z-index: 5;
}
#logo{
position: absolute;
height:100%;
left:45%;
top:0;
}
#logo_img{
position:absolute;
top:30%;
width: 80px;
height: 75px;
border-radius: 10px;
}
#top_menu{
position: absolute;
width: 100%;
height:65px;
background-color: #111;
top:0;
}
#top_menu_left {
position: relative;
left:14%;
width: 30%;
height: 100%;
top:0;
background-color: red;
}
#top_menu_left ul{
padding-top:0;
margin: 0;
width:100%;
height: 100%;
list-style-type: none;
text-decoration: none;
background-color:blue;
}
#top_menu_left li {
position:relative;
display: block;
color: white;
right:0
left:0;
width:30%;
height:35px;
text-align: center;
text-decoration: none;
list-style-type: none;
float:left;
margin:2px;
border-radius: 5px;
background-color: red;
}
.top_menu_li a{
text-decoration: none;
text-align: center;
display: inline-block;
width:100%;
height:35px;
padding-top:8px;
}
.top_menu_li a:hover{
background-color: #111;
}
#left_menu{
position:absolute;
background-color: grey;
left:0;
top:0;
width: 160px;
height: 100%;
z-index: 4;
}
#footer{
position: absolute;
bottom: 0;
width:100%;
height: 25px;
z-index:5;
background-color: blue;
}<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="main">
<div id="main_head">
<div id="top_menu">
<div id="top_menu_left">
<ul id="topleft_ul">
<li class="top_menu_li"><a href="">NEWS</a></li>
<li class="top_menu_li"><a href="">WEATHER</a></li>
</ul>
</div>
<div id="logo">
<a href="/">
<img id="logo_img" src="logo.png" alt="logo image"> </img>
</a>
</div>
</div>
</div>
<div id="left_menu">
<div style=" padding-top:65px; font-family: Arial;background-color: #fbfbfb;border: 1px solid #e7e7e7;width: 160px;height: 255px;-moz-box-shadow: 0 0 2px 1px #e7e7e7;-webkit-box-shadow: 0 0 2px 1px #e7e7e7;box-shadow: 0 0 2px 1px #e7e7e7;overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;"><div style="width: 160px;height: 255px;"><div style="margin:7px 10px;"><div style="color: #222222;font-family: Arial;font-size: 12px;font-weight: bold;margin: 0px 0px 7px 0px;line-height: 14px;">Prognoza pogody<br/><span style="font-weight:normal;">Bytów</span></div><iframe id="widget-frame" src="http://www.meteovista.pl/Go/ExternalWidgetsNew/ThreeDaysCity?gid=4078297&sizeType=2&temperatureScale=Celsius&defaultSettings=False" width="140" height="142" frameborder="0" scrolling="no" style="border: none;" allowtransparency="true"></iframe><a href="http://www.meteovista.pl/Europa/Polska/Bytow/4078297" style="background: url(http://www.meteovista.pl/Shared/Images/list_icon_blue_trans.png) no-repeat scroll left 1px transparent;color: #0160b2;font-family: Arial;font-size: 12px;font-weight: normal;padding-left: 14px;margin: 7px 0px 5px 0px;line-height: 12px;outline: none;text-decoration: none;display: inline-block;" target="_blank">Pogoda - Bytów</a><a href="http://www.meteovista.pl/" style="display: block;height: 25px;width: 113px;margin: 0px 10px 8px 0px;outline: none;text-decoration: none;" title="Meteovista.pl Zawsze aktualna pogoda" target="_blank"><img src="http://www.meteovista.pl/Shared/Images/variations/pl-PL/new-widget-logo-PL-color.png" width="113" height="25" alt="Meteovista.pl Zawsze aktualna pogoda" style="border: none;background-color: transparent;box-shadow: none;" /></a></div></div></div>
</div>
<div id="section_main">
<section>
</section>
</div>
<div id="footer">
</div>
</div>
</body>
<
/html>Upvotes: 0
Views: 127
Answers (3)
Geethu Jose
Reputation: 1993
Just add box-sizing:border-box to the li a element.
.top_menu_li a{
box-sizing:border-box
}
Refer box-sizing
#main{
position: absolute;
top:0;
right: 0;
left:0;
bottom:0;
}
#main_head{
position: absolute;
background-color: #b3fff0;
height:65px;
min-width: 100%;
z-index: 5;
}
#logo{
position: absolute;
height:100%;
left:45%;
top:0;
}
#logo_img{
position:absolute;
top:30%;
width: 80px;
height: 75px;
border-radius: 10px;
}
#top_menu{
position: absolute;
width: 100%;
height:65px;
background-color: #111;
top:0;
}
#top_menu_left {
position: relative;
left:14%;
width: 30%;
height: 100%;
top:0;
background-color: red;
}
#top_menu_left ul{
padding-top:0;
margin: 0;
width:100%;
height: 100%;
list-style-type: none;
text-decoration: none;
background-color:blue;
}
#top_menu_left li {
position:relative;
display: block;
color: white;
right:0
left:0;
width:30%;
height:35px;
text-align: center;
text-decoration: none;
list-style-type: none;
float:left;
margin:2px;
border-radius: 5px;
background-color: red;
}
.top_menu_li a{
text-decoration: none;
text-align: center;
display: inline-block;
width:100%;
height:35px;
padding-top:8px;
box-sizing:border-box;
}
.top_menu_li a:hover{
background-color: #111;
}
#left_menu{
position:absolute;
background-color: grey;
left:0;
top:0;
width: 160px;
height: 100%;
z-index: 4;
}
#footer{
position: absolute;
bottom: 0;
width:100%;
height: 25px;
z-index:5;
background-color: blue;
}<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="main">
<div id="main_head">
<div id="top_menu">
<div id="top_menu_left">
<ul id="topleft_ul">
<li class="top_menu_li"><a href="">NEWS</a></li>
<li class="top_menu_li"><a href="">WEATHER</a></li>
</ul>
</div>
<div id="logo">
<a href="/">
<img id="logo_img" src="logo.png" alt="logo image"> </img>
</a>
</div>
</div>
</div>
<div id="left_menu">
<div style=" padding-top:65px; font-family: Arial;background-color: #fbfbfb;border: 1px solid #e7e7e7;width: 160px;height: 255px;-moz-box-shadow: 0 0 2px 1px #e7e7e7;-webkit-box-shadow: 0 0 2px 1px #e7e7e7;box-shadow: 0 0 2px 1px #e7e7e7;overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;"><div style="width: 160px;height: 255px;"><div style="margin:7px 10px;"><div style="color: #222222;font-family: Arial;font-size: 12px;font-weight: bold;margin: 0px 0px 7px 0px;line-height: 14px;">Prognoza pogody<br/><span style="font-weight:normal;">Bytów</span></div><iframe id="widget-frame" src="http://www.meteovista.pl/Go/ExternalWidgetsNew/ThreeDaysCity?gid=4078297&sizeType=2&temperatureScale=Celsius&defaultSettings=False" width="140" height="142" frameborder="0" scrolling="no" style="border: none;" allowtransparency="true"></iframe><a href="http://www.meteovista.pl/Europa/Polska/Bytow/4078297" style="background: url(http://www.meteovista.pl/Shared/Images/list_icon_blue_trans.png) no-repeat scroll left 1px transparent;color: #0160b2;font-family: Arial;font-size: 12px;font-weight: normal;padding-left: 14px;margin: 7px 0px 5px 0px;line-height: 12px;outline: none;text-decoration: none;display: inline-block;" target="_blank">Pogoda - Bytów</a><a href="http://www.meteovista.pl/" style="display: block;height: 25px;width: 113px;margin: 0px 10px 8px 0px;outline: none;text-decoration: none;" title="Meteovista.pl Zawsze aktualna pogoda" target="_blank"><img src="http://www.meteovista.pl/Shared/Images/variations/pl-PL/new-widget-logo-PL-color.png" width="113" height="25" alt="Meteovista.pl Zawsze aktualna pogoda" style="border: none;background-color: transparent;box-shadow: none;" /></a></div></div></div>
</div>
<div id="section_main">
<section>
</section>
</div>
<div id="footer">
</div>
</div>
</body>
<
/html>Upvotes: 1
chirag satapara
Reputation: 1937
I hope below code solve your problem.
I just change the hover effect from .top_menu_li a:hover to .top_menu_li:hover.
#main{
position: absolute;
top:0;
right: 0;
left:0;
bottom:0;
}
#main_head{
position: absolute;
background-color: #b3fff0;
height:65px;
min-width: 100%;
z-index: 5;
}
#logo{
position: absolute;
height:100%;
left:45%;
top:0;
}
#logo_img{
position:absolute;
top:30%;
width: 80px;
height: 75px;
border-radius: 10px;
}
#top_menu{
position: absolute;
width: 100%;
height:65px;
background-color: #111;
top:0;
}
#top_menu_left {
position: relative;
left:14%;
width: 30%;
height: 100%;
top:0;
background-color: red;
}
#top_menu_left ul{
padding-top:0;
margin: 0;
width:100%;
height: 100%;
list-style-type: none;
text-decoration: none;
background-color:blue;
}
#top_menu_left li {
position:relative;
display: block;
color: white;
right:0
left:0;
width:30%;
height:35px;
text-align: center;
text-decoration: none;
list-style-type: none;
float:left;
margin:2px;
border-radius: 5px;
background-color: red;
}
.top_menu_li a{
text-decoration: none;
text-align: center;
display: inline-block;
width:100%;
height:35px;
padding-top:8px;
}
.top_menu_li:hover{
background-color: #111 !important;
}
#left_menu{
position:absolute;
background-color: grey;
left:0;
top:0;
width: 160px;
height: 100%;
z-index: 4;
}
#footer{
position: absolute;
bottom: 0;
width:100%;
height: 25px;
z-index:5;
background-color: blue;
}<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="main">
<div id="main_head">
<div id="top_menu">
<div id="top_menu_left">
<ul id="topleft_ul">
<li class="top_menu_li"><a href="">NEWS</a></li>
<li class="top_menu_li"><a href="">WEATHER</a></li>
</ul>
</div>
<div id="logo">
<a href="/">
<img id="logo_img" src="logo.png" alt="logo image"> </img>
</a>
</div>
</div>
</div>
<div id="left_menu">
<div style=" padding-top:65px; font-family: Arial;background-color: #fbfbfb;border: 1px solid #e7e7e7;width: 160px;height: 255px;-moz-box-shadow: 0 0 2px 1px #e7e7e7;-webkit-box-shadow: 0 0 2px 1px #e7e7e7;box-shadow: 0 0 2px 1px #e7e7e7;overflow: hidden; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;"><div style="width: 160px;height: 255px;"><div style="margin:7px 10px;"><div style="color: #222222;font-family: Arial;font-size: 12px;font-weight: bold;margin: 0px 0px 7px 0px;line-height: 14px;">Prognoza pogody<br/><span style="font-weight:normal;">Bytów</span></div><iframe id="widget-frame" src="http://www.meteovista.pl/Go/ExternalWidgetsNew/ThreeDaysCity?gid=4078297&sizeType=2&temperatureScale=Celsius&defaultSettings=False" width="140" height="142" frameborder="0" scrolling="no" style="border: none;" allowtransparency="true"></iframe><a href="http://www.meteovista.pl/Europa/Polska/Bytow/4078297" style="background: url(http://www.meteovista.pl/Shared/Images/list_icon_blue_trans.png) no-repeat scroll left 1px transparent;color: #0160b2;font-family: Arial;font-size: 12px;font-weight: normal;padding-left: 14px;margin: 7px 0px 5px 0px;line-height: 12px;outline: none;text-decoration: none;display: inline-block;" target="_blank">Pogoda - Bytów</a><a href="http://www.meteovista.pl/" style="display: block;height: 25px;width: 113px;margin: 0px 10px 8px 0px;outline: none;text-decoration: none;" title="Meteovista.pl Zawsze aktualna pogoda" target="_blank"><img src="http://www.meteovista.pl/Shared/Images/variations/pl-PL/new-widget-logo-PL-color.png" width="113" height="25" alt="Meteovista.pl Zawsze aktualna pogoda" style="border: none;background-color: transparent;box-shadow: none;" /></a></div></div></div>
</div>
<div id="section_main">
<section>
</section>
</div>
<div id="footer">
</div>
</div>
</body>
<
/html>Upvotes: 0
inputforcolor
Reputation: 919
.top_menu_li a
{
text-decoration: none;
text-align: center;
display: inline-block;
width:100%;
height:28px;
border-radius: 5px;
padding-top:8px;
}
.top_menu_li a:hover
{
background-color: #111;
}
Upvotes: 0
Related Questions
- Hover on <li> haven't good size
- the hover doesn't cover the whole li element in the nav
- Unwanted effect on ul li hover
- li and parent div size mismatch
- "a" element inside "li" element overflows the "li" element
- Increase <li> tag hovering using CSS
- CSS - li a href parent is smaller than child
- li hover issue in html page
- CSS hover on li child
- Hovering on <li> on menu item causes expantion by 1px