I am trying to implement a:hover effect as in attached image.But i have missed something it is not working .can you please correct me.
HTML code:
<ul class="short-by-list">
<li class="right-mrgn">Make</li>
<li>
<a onclick="ajaxSearchLoad(5,49)" href="javascript:void(0)">
<img class="SortPosition" alt="ascending" src="../images/nav-arrow.png">
</a>
<div class="tooltip-text" style="display: none;">
<img class="tooltip-arrow" alt="Arrow" src="../images/tooltip-arrow.png">
Sort by Ascending
</div>
</li>
<li class="last">
</ul>
CSS:
.short-by-list {
background: url("../images/short-bg.png") no-repeat scroll 0 0 transparent;
float: left;
height: 21px;
margin: 0 6px 15px 0;
padding: 0 6px 0 10px;
width: 79px;
}
.short-by-list li {
color: #FFFFFF;
display: block;
float: left;
line-height: 21px;
position: relative;
}
.short-by-list li .tooltip-text {
left: -38px;
}
.short-by-list li.last .tooltip-text {
left: -40px;
}
.short-by-list li.right-mrgn {
margin-right: 9px;
min-width: 29px;
}
.short-by-list li a {
display: block;
float: left;
padding: 0 6px;
text-decoration: none;
}
.short-by-list li:hover a, .short-by-list li.select a {
background: url("../images/bg-hover.png") repeat-x scroll 0 0 transparent;
}
.short-by-list li.select .tooltip-text {
display: block !important;
}
In .short-by-list li, try adding height:21px;
I am suspecting that it is because the inner <img> element has been floated, therefore the height of the <a> element collapses. Try setting overflow: hidden for <a>.
If it all fails, set an explicit height for <a>.
Related
I have the following Html file, together with the CSS file. When I hover over the Main Navigation bar to open the drop-down menu, the parent width enlarges together with the drop-down menu. How can I fix this? If I set position: absolute to the dropdown menu, it will not work at all.(hovering doesn't trigger the dropdown). I have put my code here: https://jsfiddle.net/L67oxmqc/2/ .
Thank you!
Code:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: navy;
margin-left: 20px;
}
/* SECTION WITH THE heading text */
#boldtext {
color: Black;
border-radius: 15px;
background: #a9bcba;
padding: 10px;
width: 200px;
height: 50px;
}
/* SECTION WITH BILL GATES QUOTE */
#quotetext {
color: Black;
font-size: 18px;
border-radius: 15px;
padding: 30px;
width: 400px;
height: 150px;
}
div.quote {
position: absolute;
bottom: 5px;
right: 50px;
width: 30px;
/* border: 2px solid rgb(150,245,255);
opacity: 0.8;*/
}
/* SECTION WITH THE MENU FOR THE MAIN PAGE */
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #a9bcba;
/*z-index: -1; */
}
div.menu li {
float: left;
}
div.menu li a {
display: inline-block;
text-align: center;
margin: 0px;
padding: 10px 10px;
color: white;
}
div.menu li a:hover {
background-color: #879694;
color: blue;
}
/* SECTION WITH THE DROPDOWN CONTENT FOR THE MENU */
.dropdowncontent a:hover {
background-color: #cbd6d5
}
.dropdown:hover .dropdowncontent {
display: block;
}
div.dropdowncontent {
display: none;
/* position: absolute; */
background-color: #a9bcba;
width: 115px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
div.dropdowncontent a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
overflow: auto;
}
<br>
<!-- Header -->
<b id="boldtext">Welcome</b>
<br>
<br>
<br>
<!-- Menu bar-->
<div class="menu">
<ul>
<li class="dropdown">Boeing Family
<div class="dropdowncontent">
Boeing 737 class
Boeing 747 class
Boeing 787 class
</div>
</li>
<li>Airbus Family
</li>
<li>Others
</li>
<li style="float:right">Contact
</li>
<!-- The Contact button is set to be on the right side of the Navigation bar-->
</ul>
</div>
<div class="quote" id="quotetext">
<p><q><cite>A generic quote.</q>
</cite>
— Author.</p>
</div>
<!-- Boeing planes image that triggers the Boeing menu-->
<a href="Boeing.htm" </a>
<img src="Boeing-777-Generic-Nice.jpg" alt="Boeing picture" style="width:350px;height:150px;">
<!-- Airbus planes image that triggers the Airbus menu-->
<a href="Airbus.htm" </a>
<img src="A320-generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- ATR planes image that triggers the ATR menu-->
<a href="https://en.wikipedia.org/wiki/ATR_(aircraft_manufacturer)" </a>
<img src="ATR_generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- Link to the Frequently asked questions page-->
<a href=#>
<img src="question.jpg" alt="question image" style="width:350px;height:150px;">
</a>
<br>
<br>
Just update in your style may it works for you
div.menu ul {
background-color: #a9bcba;
border-radius: 5px;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
div.dropdowncontent {
background-color: #a9bcba;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
display: none;
position: absolute;
width: 115px;
}
Here is a JSFiddle of the solution I mention below: https://jsfiddle.net/2sy0dn6w/
Fixing your solution is incredibly simple. You want to use position: absolute; for your div.dropdowncontent CSS class. You also want to make your parent li tag have position: relative; to keep your div.dropdowncontent constrained within the parent li. And then you have an issue with your primary ul tag with using overflow: hidden. This would prevent your dropdown from being seen. And I understand why you are using overflow: hidden; - you're using it as a clearfix. But in this case, it is a problem because it hides your dropdown. So instead we would want to use :before with the ul for the clearfix. The steps for applying the fixes are below.
First, remove overflow: hidden; from your css for div.menu ul {}. This will create the following:
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
/* overflow: hidden; */
background-color: #a9bcba;
/*z-index: -1; */
}
Next, right after the div.menu ul {} CSS, add:
div.menu > ul::after {
clear: both;
display: table;
content: ' ';
overflow: hidden;
}
Lastly, at the very bottom of your CSS, add the following (you can even move each of the below to their designated declarations you already have in your CSS. The reason I'm adding this separate is so that it's more obvious what I included to give you the outcome you're looking for):
div.menu > ul > li {
position: relative;
}
.dropdowncontent {
position: absolute;
top: 100%;
}
li.dropdown:hover div.dropdowncontent {
display: block;
}
You have to use position absolute, you cant see it working because ul has overflow:hidden;
add this css :
.menu ul{
overflow:visible;
}
.menu ul li.dropdown{
position : relative;
}
.menu ul li.dropdown .dropdowncontent{
position : absolute;
top:38px;
left:0;
}
try this in your css:
add .menu class and remove bg-color from ul
.menu {
background-color: #a9bcba;
height: 45px;
}
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
//background-color: #a9bcba; <--- remove background
/*z-index: -1; */
}
Try this code below
Remove overflow hidden
div.menu ul{
...
overflow: hidden;
}
Add position absolute
div.dropdowncontent {
...
position: absolute;
}
replace float left
div.menu li{
/* float: left; */
display: inline-block;
}
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h1 {
color: navy;
margin-left: 20px;
}
/* SECTION WITH THE heading text */
#boldtext {
color: Black;
border-radius: 15px;
background: #a9bcba;
padding: 10px;
width: 200px;
height: 50px;
}
/* SECTION WITH BILL GATES QUOTE */
#quotetext {
color: Black;
font-size: 18px;
border-radius: 15px;
padding: 30px;
width: 400px;
height: 150px;
}
div.quote {
position: absolute;
bottom: 5px;
right: 50px;
width: 30px;
/* border: 2px solid rgb(150,245,255);
opacity: 0.8;*/
}
/* SECTION WITH THE MENU FOR THE MAIN PAGE */
div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #a9bcba;
/*z-index: -1; */
}
div.menu li {
display: inline-block;
}
div.menu li a {
display: inline-block;
text-align: center;
margin: 0px;
padding: 10px 10px;
color: white;
}
div.menu li a:hover {
background-color: #879694;
color: blue;
}
/* SECTION WITH THE DROPDOWN CONTENT FOR THE MENU */
.dropdowncontent a:hover {
background-color: #cbd6d5
}
.dropdown:hover .dropdowncontent {
display: block;
}
div.dropdowncontent {
display: none;
position: absolute;
background-color: #a9bcba;
width: 115px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
div.dropdowncontent a {
color: red;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
overflow: auto;
}
<br>
<!-- Header -->
<b id="boldtext">Welcome</b>
<br>
<br>
<br>
<!-- Menu bar-->
<div class="menu">
<ul>
<li class="dropdown">Boeing Family
<div class="dropdowncontent">
Boeing 737 class
Boeing 747 class
Boeing 787 class
</div>
</li>
<li>Airbus Family
</li>
<li>Others
</li>
<li style="float:right">Contact
</li>
<!-- The Contact button is set to be on the right side of the Navigation bar-->
</ul>
</div>
<div class="quote" id="quotetext">
<p><q><cite>A generic quote.</q>
</cite>
— Author.</p>
</div>
<!-- Boeing planes image that triggers the Boeing menu-->
<a href="Boeing.htm" </a>
<img src="Boeing-777-Generic-Nice.jpg" alt="Boeing picture" style="width:350px;height:150px;">
<!-- Airbus planes image that triggers the Airbus menu-->
<a href="Airbus.htm" </a>
<img src="A320-generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- ATR planes image that triggers the ATR menu-->
<a href="https://en.wikipedia.org/wiki/ATR_(aircraft_manufacturer)" </a>
<img src="ATR_generic.jpg" alt="Airbus picture" style="width:350px;height:150px;">
<!-- Link to the Frequently asked questions page-->
<a href=#>
<img src="question.jpg" alt="question image" style="width:350px;height:150px;">
</a>
<br>
<br>
So after hours of searching I still can't find the fix for me stupidity, I'm new to this but on my main monitor it centers just fine
1920x1080:
Larger image
But will my 1280x1024:
Smaller image
So as you can see it's uncomfortably off balanced so here's my code for the website..
/*---Start Navbar---*/
.nav-main {
display: block;
list-style: none;
position: relative;
width: 100%;
height: 70px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
.nav-logo {
float: left;
height: 40px;
padding: 15px 20px;
line-height: 60px;
display: inline-block;
list-style-type: none;
}
ul {
text-align: center;
position: relative;
margin: 0;
padding: 0;
float: left;
left: 30%;
list-style-type: none;
display: inline-block;
}
ul li {
float: inherit;
}
.nav-item {
display: inline-block;
list-style-type: none;
padding: 15px 20px;
height: 40px;
width: auto;
line-height: 50px;
color: #fff;
text-decoration: none;
}
li a:hover {
background-color: #444;
}
/*---End Navbar---*/
<nav class="nav-main">
<ul>
<li>
<a href="http://phalanxgaming.org/" class="nav-logo" target="_blank">
<img src="http://i.imgur.com/sg5DZao.png?2" alt="logo" style="width:60px;height:60px;">
</a>
</li>
<li>
CONTACT US
</li>
<li>
TEAMSPEAK
</li>
<li>
DONATE
</li>
<li>
STEAM
</li>
<li>
TWITCH
</li>
</ul>
</nav>
Any and all support is great, ps sorry for slurring I'm quite tired and I couldn't sleep til I fix this issue.
What you need to do is, to display your list elements inline. So set up
ul li {
/* float: inherit; */
display: inline;
}
After that, just remove your float and left attributes on your ul styling and set your .nav-mains height to auto.
Check this.
how about wrapping it in a div and using width:auto?
http://www.456bereastreet.com/lab/width-auto/
First, remove
left: 30%;
from
ul {...}
then change this:
ul li {
display: inline-block;
vertical-align: middle;
}
I am trying to create the navigation as per the picture below, where the text is centered aswell as the icon, but the text is left aligned to the icon. The link needs to be the width of its container, this also needs to be responsive:
How do you go about this?
CODEPEN DEMO HERE
HTML
<ul class="mobile-home-section">
<li>PROPERTY</li>
<li>FUTURE PLANNING</li>
<li>COMMERICAL</li>
</ul>
CSS
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}
.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position: 0 10px;
padding-left: 50px;
}
.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 0;
display: block;
border-bottom: 1px solid white;
}
EDIT Changed the code to make it responsive
If i was you, I would not place the icon for the link as a background image. I would place the icon as an image inside of the link tag.
HTML
<div class="container">
<ul class="mobile-home-section">
<li>
<a href="#">
<span><img src="img2.jpg">PROPERTY</span>
</a>
</li>
<li>
<a href="#">
<span><img src="img2.jpg">FUTURE PLANNING</span>
</a>
</li>
<li>
<a href="#">
<span><img src="img3.jpg">COMMERICAL</span>
</a>
</li>
</ul>
</div>
CSS
.container {
background: #273F87;
}
ul.mobile-home-section {
display: block;
list-style-type: none;
padding: 0px;
}
ul.mobile-home-section li:nth-child(2) {
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
ul.mobile-home-section li a {
display: block;
color: #fff;
padding: 0px;
font-family: serif;
margin: 0px auto;
text-decoration: none;
}
ul.mobile-home-section li a span img {
width: 50px;
height: 50px;
padding-right:20px;
display: inline-block;
vertical-align: middle;
}
ul.mobile-home-section li a span {
padding: 10px 0px;
width: 230px;
display:block;
margin: auto;
}
Updated JSfiddle
As others have said, it's going to be easier using an image. The most important thing to know is that not all display: values support vertical alignment - my go-to is display: inline-block, but if you're using flexbox it might be more convenient to use display: flex
Depending on context, I typically use one of these three solutions:
Adjacent inline blocks
CSS tables
A pseudoelement with a background image
Here are examples of each of those.
Notes:
For the table solution, the <li> loses its bullet and gets an auto width (it's as wide as its contents) - depending on your context, you might want to add on a width: 100% to #or-another li
For the background image solution, if the image isn't necessarily the same size as the container you'll want to use background: no-repeat center center; -webkit-background-size: cover; background-size: cover; background-image:url(...);
In all three cases, we're accounting for the possibility that either of the elements could be the taller one. If you know the image is always going to be taller than the text, you could target #or-another span instead of #or-another li > *, and you could drop #one-more li span {...} entirely
#one-way li > * {
display: inline-block;
vertical-align: middle;
}
#or-another li {
display: table;
}
#or-another li > * {
display: table-cell;
vertical-align: middle;
}
#one-more li span {
display: inline-block;
vertical-align: middle;
}
#one-more li:before {
content:'';
width: 200px;
height: 200px;
display: inline-block;
vertical-align: middle;
background:url('https://placehold.it/200x200');
}
<ul id="one-way">
<li>
<img src="https://placehold.it/200x200" alt="" />
<span>1</span><!-- or div or p or what have you -->
</li>
</ul>
<ul id="or-another">
<li>
<img src="https://placehold.it/200x200" alt="" />
<span>2</span>
</li>
</ul>
<ul id="one-more">
<li>
<span>3</span>
</li>
</ul>
Add a text-align: center; in the .mobile-home-section class to make them align to the center and remove the padding-left: 50px; under .mobile-home-section li class. And these two CSS will become:
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158;
text-align: center;
}
.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position: 0 10px;
}
You can see the demo here.
Try just editing the paddings and background-position.
.container {
width: 600px;
}
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}
.mobile-home-section li {
background-image: url('http://s18.postimg.org/m26o71ohx/icon_future_hover.png');
background-repeat: no-repeat;
background-position:50% 15px;
padding-left: 50px;
}
.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 50%;
display: block;
border-bottom: 1px solid white;
text-align:left;
}
UPDATE try this
.mobile-home-section li a {
color: white;
text-decoration: none;
padding: 20px 0 20px 50%;
display: block;
border-bottom: 1px solid white;
text-align: left;
}
Update the padding of .mobile-home-section li a
The selectors could use some love, but here is my codepen:
<div class="container">
<ul class="mobile-home-section">
<li><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>PROPERTY</span></span>
</li>
<li><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>FUTURE PLANNING</span></span>
</li>
<li><span><img src="http://s18.postimg.org/m26o71ohx/icon_future_hover.png" /><span>COMMERICAL</span></span>
</li>
</ul>
.container {
width: 600px;
}
.mobile-home-section {
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
background: #163158
}
.mobile-home-section li {
margin: 0;
padding: 0;
}
.mobile-home-section li a {
display: block;
height: 3em;
}
.mobile-home-section li a > span {
display: block;
width: 55%;
padding: 0;
margin: 0 auto;
text-align: left;
}
.mobile-home-section li a > span > span {
line-height: 2em;
font-size: 1.4em;
position: relative;
top: -0.4em;
}
.mobile-home-section li span img {
margin-right: 0.75em;
height: 2.6em;
position: relative;
top: 0.2em;
}
.mobile-home-section li a {
border-bottom: 1px solid white;
color: white;
display: block;
font-family: 'Times New Roman';
font-size: 1.2em;
padding: 0;
text-align: center;
text-decoration: none;
}
http://codepen.io/anon/pen/PZwvZz
so basically I've got this code: HTML and CSS below, using bootstrap as well, and for some reason, it's not centred. It used to be, but at some point it wasn't anymore, now it pulls to the left. See image below. Any ideas?
<div class="row" id="nav-bar">
<div class="col-md-9">
<ul>
<li class="col-md-3 nav-btn" id="home">Home</li>
<li class="col-md-3 nav-btn" id="about">About</li>
<li class="col-md-3 nav-btn dropdown-toggle" id="games">
Games & Apps ▼
<div class="dropdown">
<ul>
<li>Games & Apps ▼</li>
<li id="first">Space Rodeo</li>
<li id="spaced">Boodya's Carpet Ride</li>
<li id="spaced">Ultimate Points Counter</li>
</ul>
</div>
</li>
<li class="col-md-3 nav-btn" id="blog">Blog</li>
</ul>
</div>
</div>
#nav-bar {
margin: 0px 0px 10px 0px;
height: 60px;
}
#nav-bar ul {
margin-top: 20px;
}
.col-md-3 a {
padding: 15px 40px 15px 40px;
font-size: 20px;
text-decoration: none;
text-align: center;
color: #B6B6B6;
}
#nav-bar a:hover {
color: #428bca;
}
.col-md-3 {
display: inline;
}
.col-md-9 {
float: none;
margin: auto;
left: 0;
right: 0;
}
.dropdown {
padding: 0;
margin-top: -48px;
position: absolute;
z-index: 10;
background-color: #ffffff;
box-shadow: -5px -5px 20px;
border-radius: 5px;
height: 210px;
width: 275px;
}
.dropdown ul {
padding: 0;
margin-top: 0;
}
.dropdown li {
list-style: none;
padding: 0;
width: 310px;
}
#games2 {
color: #428bca;
}
#spaced {
margin-top: 10px;
}
#first {
padding-top: 20px;
border-top: 1px solid black;
margin-top: 22px;
}
Showing result of code, the navbar is off centre
http://i.stack.imgur.com/smtTP.png
Your list items are display: inline which means they'll follow the alignment rules of text. Since you set no text-align, it defaults to the left. You can fix that by adding text-align: center to your ul so the contents will be centered.
Now the insides of the dropdown will also inherit that, you can reset that by setting text-align: left back on the dropdown ul again.
Also reset the left padding that ul has by default.
#nav-bar ul {
padding-left: 0;
text-align: center;
}
#nav-bar .dropdown ul {
text-align: left;
}
Works in this jsFiddle
Here is the fiddle, this is a vertical menu, floated to right. I have to use percent values (to have responsive design) but then the last menu goes underline. If I set it with "px" it works.
http://jsfiddle.net/aDRnn/
#topmenu
{
margin-top: 20px;
min-height: 47px;
background-color: red;
border-radius: 25px;
float: right;
}
#topmenu ul
{
list-style-type: none;
margin: 0 0 0 0;
padding: 13px 0 0 0;
color: #fff;
font-size: 1.6em;
}
#topmenu ul li
{
display: inline;
padding: 15px 2.5% 17px 2.5%; /* when its set with percents, it screwes */
margin: 0 0 0 0;
}
#topmenu ul li:last-child
{
border: none;
box-shadow: none;
}
#topmenu ul li:first-child
{
border-top-left-radius: 15px;
}
#topmenu ul li img
{
vertical-align: middle;
}
#topmenu a
{
color: #fff;
text-decoration: none;
height: 54px;
}
<div id="topmenu"><ul>
<li class="">
<a href="tanar">
Nyitólap</a>
</li>
<li class="">
<a href="diak">
Rólunk</a>
</li>
<li class="">
<a href="szulo">
Szállodák</a>
</li>
<li class="">
<a href="nyelviskola">
Apartmanok</a>
</li>
<li class="">
<a href="boltok">
Gourmentteszt</a>
</li>
</ul>
<div style="clear:both;"></div></div>
You have a float:right on the #topmenu, but you need a float:left to his children "ul". Also, if you want to have "li" paddings and margins, you need to also float them left.