In a website I'm developing, I am making a menu that appears when one hovers over a navigation menu item. However, only half of the hover menu appears.
HTML:
<div class= "navn">
<ul>
<li>
<a class="btn" href="about_contact.html">
About Us
<div class="tooltip">
Contact Info, and <b>stuff</b> <!--the txt inside the hover thing-->
</div>
</a>
</li>
</ul>
</div>
CSS:
.btn {
/* irrelevant: some styling to make the anchor tags look nicer */
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
text-align: center;
white-space: nowrap;
margin: auto;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
text-decoration: none;
font-family: 'Lucida Sans', 'Arial', 'sans-serif';
}
.btn:hover .tooltip {
display: block;
}
.tooltip {
background-color: white;
color: black;
position: absolute;
display: none;
border: 1px solid black;
}
What I see:
Why is this happening? What can I do to stop this?
Sorry for no JSFiddle
Edit: I know I can use a standard tooltip on the <a> tag, but I want to have formatted text in the tooltip.
Maybe Your <div class="navn"> has a not enough height. Try to extend that and see what happened. Or set z-index on tooltip.
Set ul{ height: 60px; //for example}. I think it help you.
Related
I'm trying to make the above text (home help customer etc) similar to the one below Home and all in green box with white text and hover effect but I am unable to add the green background and make the words display similar to the once below with a hover effect I have tried some things out but it did not help me out and also I have tried a lot to move the cart to the top right to make it look like a normal shopping website but it didn't work if you guys see any mistakes or suggestions to make it better I would really appreciate it as I am a beginner https://imgur.com/2Bhxzs2
Help fix the top header please refer the image link as it shows were exactly is the green box and all thank youthe image has the header of the website were there are different buttons like guest customer help etc and I am trying to make it like the one underneath in the green box with a hover effect
<html>
<head>
<title>Rajeshri Traders </title>
<link href="CSS/style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="subheader">
<div class="container">
<p> CCTV Supplier</p>
Guest Consumer Download App
Help
</div>
</div>
<!--==main header==-->
<div id="main-header">
<!--logo-->
<div id="logo">
<span id="ist"></span><span id="iist"> Rajshri Traders</span>
</div>
<!--==search area==-->
<div id="search">
<form action="">
</form>
<input class="search-area" type="text" placeholder="Search here">
<input class="search-btn" type="submit" value="SEARCH">
<!--="user-menu"==-->
<div id="user menu">
</div>
<li>Cart
<li>Login
</div>
</div>
</div>
<!----=====navigation bar==--->
<div id="navigation">
<nav>
Home
New Arrivals
Products
Deals
Accesories
Order
</nav>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
#wrapper {
font-family: tahoma;
}
/*logo styling*/
#main-header {
width: 100%;
height: 125px;
background: #93A7FF;
display: flex;
flex-wrap: no-wrap;
}
#main-header > div {
flex: 1 1 0;
}
#ist {
color: black;
font-size: 65px;
font-weight: bold;
margin-left: 15px;
font-family: fantasy;
}
#iist {
color: black;
font-size: 45px;
font-weight: bold;
margin-left: 15px;
font-family: fantasy;
}
/*searchinga area styling*/
#search {
padding: 20px;
margin-left: 50px;
text-align: center;
}
.search-area {
width: 350px;
height: 30px;
background: #fff;
border: none;
border-radius: 10px;
padding-left: 15px;
}
.search-btn {
width: 65px;
height: 34px;
border-radius: 10px;
border: none;
color: #fff;
background: brown;
margin-left: 15px;
}
/*this is for user menu styling*/
#user-menu {
margin-top: 20px;
margin-right: 20px;
text-align: right;
}
#unser-menu ul {
list-style-type: none;
width: 100%;
}
#user-menu li {
display: inline-block;
padding: 0px 10px;
}
#main-header > div {
flex: 1 1 0;
}
/*this style is for navigation bar */
#navigation{
width: 100%;
height: 35px;
background: #1aaa1a;
float: left;
box-shadow: 10px 14px 45px 3px #1aaa1a;
}
nav{
width: 1200px;
margin: 0 auto;
}
nav a{
margin-left: 35px;
color: white;
text-decoration: none;
}
nav a:hover{
color:#000;
transition: all .7s ease;
}
To give a background colour to your 'home, help, customer etc' text, you need to refer to the element in which they are all included. In this case, they are all contained within the .container class. So by adding styling to the .container class, you'll be adding styling to the div containing the text in question.
Simply add a background colour to the .container class like this:
.container {
background: #1aaa1a;
}
As for the hover effect, you can specify the effect you want for each link of the 'home, help, container etc'. For example, if you want to change the colour of the text when you hover on it, you can do something like this
.container a:hover {
color: black;
}
The .container a is how you reference the links contained in your .container class.
Alright.So you need to see what styling you have applied to the text in the green box. you need to copy the styling you use in #navigation which is the container for everything in the green box. You have included your links in the green box in a nav element, you have then styled the nav element as follows:
nav{
width: 1200px;
margin: 0 auto;
}
nav a{
margin-left: 35px;
color: white;
text-decoration: none;
}
nav a:hover{
color:#000;
transition: all .7s ease;
}
You need to style your links in the .container div in the same way. The easiest way to do this would be to include your home, help, customer links in a nav element as follows:
<div class="container">
<p> CCTV Supplier</p>
<nav>
Guest Consumer
Download App
Help
</nav>
</div>
I'm trying to move the border-bottom down so more of my active-link can be seen.
.navigation a.active-link {
background-border: #red;
border-style: solid;
border-bottom: solid white;
color: black;
padding:10px;
}
#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
padding-top: 10px;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
}
The problem is when I try and increase the padding-bottom it stacks my text and I'm trying to avoid that.
https://jsfiddle.net/akn5r7y5/2/
You can add the padding-bottom you need and set the anchor line-height accordingly so they don't stack
#navigation a {
line-height:26px;
}
#navigation {
padding-bottom:26px;
}
https://jsfiddle.net/akn5r7y5/3/
Adding padding-bottom to your navigation should fix your problem.
Read more about box model (paddings, margins etc.) here - https://css-tricks.com/box-sizing/
Remove your padding-top, and use line-height, must be equal to the height of the content, so it will be centered:
Your #navigation must look like this then:
#navigation {
border-bottom: 1px solid currentColor;
text-decoration: none;
word-wrap: break-word;
margin-bottom: 15px;
overflow: hidden !important;
white-space: no-wrap;
text-overflow: clip;
height: 26px;
line-height: 26px;
}
I think you're making this way harder than you need. Try to prevent using a fixed height. Also use a display: inline-block; on the anchor. This way it has a height you can actually work with. Example:
#navigation {
border-bottom: 1px solid currentColor;
}
.navigation a {
color: black;
padding: 10px;
display: inline-block;
text-decoration: none;
}
.navigation a.active-link {
background: red;
border: 1px solid black;
border-bottom: none;
}
<div class="navigation" id="navigation">
Show all
<a href="#" >title</a>
<a href="#" >title1</a>
<a href="#" >title2</a>
<a href="#" >title3</a>
<a href="#" >title4</a>
</div>
here is some clue for you.
ok forget what i just said about hr tags.
i just got what is your question, so you wanted to create a navigation with a border bottom, and a full border if you are in that page.. i suggest you to using ul li tags. its a bit comfotable, and dont use too many link if you dont have any responsive yet.
because, the whitegaps u think it's a easy task but it actually a big trouble in here. this <a></a> link should not seperated and you should type the code like this ridiculously like this
<a>link</a><a>link</a>
which mean, you should type it without a gaps in it, if only you put it in li tags, it would be easier to read like this
<li><a>link</a></li><li>
<a>link</a></li><li>
etc
so you only thinking about border inside of a, dont over think about a border in navigation div.
this is the code, have a look
.navigation a.active-link {
border: solid 1px black;
color: black;
padding:10px;
}
.navigation a{
padding:10px;
border-bottom: 1px solid black;
}
#navigation {
text-decoration: none;
padding-top: 10px;
padding-bottom:10px
}
hr{
border:solid black 1px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-lg-10 col-lg-offset-1">
<div class="navigation" id="navigation">
Show all<a href="#" >title</a><a href="#" >title1</a><a href="#" >title2</a><a href="#" >title3</a><a href="#" >title4</a><a href="#" >title5</a>
</div>
</div>
Yes, I know this has been asked and answered but I can't get this working no matter what I try.
I need to remove the text decoration on a link that I have applied to a div.
The code looks like this:
#about-con a {
text-decoration: none !important;
}
div #about-con a:link {
text-decoration: none;
}
#about {
position: relative;
width: 100px;
height: 1.5em;
font-size: 1.125em;
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
border: 1.5px;
border-style: solid;
border-color: black;
}
<div id="about-con">
<a href="http://ptunitedbrochure.bkm-tech.com/about.php">
<div class="inline-nav" id="about">
<div style="margin-top: 2px; text-align: center">
About Us
</div>
</div>
</a>
</div>
Instead of this:
div #about-con a:link {
text-decoration: none;
}
Place this:
#about-con a:hover{
text-decoration: none;
color: #337ab7;
}
This will make your link text stay the same on hover. Now, if you are talking about the border around the "About Us", you will have to remove border properties from your #about div.
I'm using a <ul> with css display: inline; set to use as a toolbar/menu at the top of my page like this:
As you can see, the text vertically aligns perfectly, however the img on the left is too high, and the input box on the right is slightly low. I'm struggling to move them so they are perfectly vertically aligned.
Below is my CSS:
.mynav {
font-weight: 300;
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #0067b1;
}
.mynav li {
display: inline;
align-items: center;
vertical-align:middle;
line-height:35px;
}
.mynav a {
color: white;
display: inline-block;
padding: 15px;
font-size: 14pt;
text-decoration: none;
}
.mynav input {
margin-left: 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-style: italic;
-moz-border-radius: 10px;
border-radius: 10px;
border: none;
padding: 5px;
width: 200px;
height: 25px;
margin-top: 0px;
}
.mynav i
{
font-weight: 300;
color: white;
font-size: 24px;
margin-left: 15px;
}
And my HTML (if needed):
<ul class="mynav">
<li><img src="http://www.advancegroupholdings.com.au/my_logo_nav.png" style="width: 100px; height:25px; padding-right:25px;" /></li>
<li>My Jobs</li>
<li>Obtain a Quote</li>
<li>Submit New Instruction</li>
<li>Settings</li>
<li>Help</li>
<li><input type="text" placeholder="Enter Your Ref or Job Number"/><i class="fa fa-search"></i></li>
</ul>
As for the input box, it has a padding of 5 which I have tried to remove with no luck. I have also set margin-top: 0px on the input, still no luck.
As for the logo, I'm also quite stumped. I've tried adding margin-top: 5px, but it's not working.
I also have found both these questions on StackOverflow:
<ul> horizontal nav bar... vertically-align element
css - verticaly align horizontal li
The first had no effect and the second wanted to change the CSS to display: flex, which for me gets rid of the horizontal bar, doesn't it?
Can anyone help me get the logo and the input box (and the magnifying glass) vertically centered? Thank you in advance!
Plunker here
I created a small bootstrap example for what you require. Different to what you have but give the required output more or less. Hopefully you can continue from here if this solution works for you.
HTML
<div class="col-md-2"><img src="http://www.advancegroupholdings.com.au/my_logo_nav.png" /></div>
<div class="col-md-1">My Jobs</div>
<div class="col-md-2">Obtain a Quote</div>
<div class="col-md-2">Submit a New Instruction</div>
<div class="col-md-1">Settings</div>
<div class="col-md-1">Help</div>
<div class="col-md-3"><input class="inputHeight" type="text" placeholder="Enter Your Ref or Job Number"/><i class="fa fa-search"></i></div>
</div>
</div>
CSS
.navbar {
width:80%;
font-weight: 300;
border: 1px solid #ccc;
border-width: 1px 0;
margin: 0;
padding: 0;
text-align: center;
background-color: #0067b1;
vertical-align:middle;
line-height:50px;
}
.inputHeight {
margin-left: 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-style: italic;
-moz-border-radius: 10px;
border-radius: 10px;
border: none;
padding: 5px;
width: 200px;
height: 25px;
margin-top: 0px;
}
Plunker Example
Adding next two rules to your image will center it correctly.
display: inline-block;
vertical-align: sub; /* or text-bottom */
As for the input , it looks correctly centered to me.
In your specific example it's enough to add vertical-align:middle; to <img> and to <a>, <i> elements! Also I'd recommend to have <li> elements as inline-block, not inline for more flexibility.
In general case, to align vertically the image height must be equal as
other element's line-height in the line and vertical-align:middle has to be set.
If image height is 25px then set:
.mynav li, .mynav i {
vertical-align:middle;
line-height:25px;
}
img {
vertical-align:middle;
height: 25px;
line-height:25px;
}
Here you go: https://plnkr.co/edit/Xf3uvvjuqykQMjnhVxes?p=preview
My website uses a drop-down menu for the things you can do on the page.
HTML:
<table class="navbar">
<td class="menuNormal geometry" width="135px" onmouseover="menu('exp',this);" onmouseout="menu('col',this);">
<p class="tdesc">
<span lang="hu">Geometria</span>
<span lang="en">Geometry</span>
</p>
<div class="menuNormal dropdown" width="inherit">
<table class="menu" width="inherit">
<tr><td class="menuNormal">
<a href="javascript:geodesc('squa')" class="menuitem">
<span lang="hu">Négyzet</span>
<span lang="en">Square</span>
</a>
</td></tr>
...
</table>
</div>
</td>
</table>
CSS:
table {
padding:0;
margin:0;
}
table.navbar {
background-color: ButtonFace;
font: menu;
}
p.tdesc {
margin: 0;
padding: 0 3px 0 3px;
text-align:center;
font: menu;
}
table.menu{
font-size: 8pt;
margin: 0px;
padding: 0px;
}
td.menuNormal{
padding: 0px;
color: ButtonText;
vertical-align: top;
}
td.menuHover{
padding: 0px;
color: HighlightText;
vertical-align: top;
background-color: Highlight;
}
div.menuNormal{
display: none;
position: static;
}
div.menuHover{
border: 1.5px solid ButtonShadow;
background-color: Menu;
display: inline;
position: absolute;
}
a.menuitem:link{
text-decoration: none;
color: ButtonText;
padding: 2.5px;
border-bottom: 1px solid GrayText;
display: block;
}
a.menuitem:hover{
text-decoration: none;
color: HighlightText;
padding: 2.5px;
background-color: Highlight;
border-bottom: 1px solid GrayText;
display: block;
}
.hover {
border:3px ridge #8CA3FF;
background-color: #C9D4FF;
font-style:normal;
}
Currently, this solution is not the perfect one, since the menu's width is fixed, and when I tried to make it look like a bit more drop-down-ish, it extended the width of the top label when showing the actual options.
I need a method that I could use to make the options appear like an actual drop-down would, and make the label width fit the text that it contains.
If this is something new you are putting together and you have complete control over it and the goal is to make a nice website (not about showing an understanding of CSS) and you have no limitations such as not using an existing library, then I would suggest trying out Twitter Bootstrap and using a fluid container and navigation as a base and then add your own CSS on top for specific design changes if required.