How can I make my dark blue dropdown background non-transparent - html

I have attached an image showing my dropdown. The issue is that you can still see the text behind the dropdown. I want it to be deep blue so the text behind it can be hidden. How can I change this with CSS so that the background won't let me see the text behind it ?
As you can see on the image, ns can be seen through that dropdown. And last 12 months is kind of overlapped.
here is the CSS code of the tabs
.menu_button {
width: 19%;
height: 30px;
background: #1A3F73;
float: left;
margin-right: 5px;
margin-bottom: 10px;
text-align: center;
border: 1px solid black;
border-radius: 5px;
color: #f4f442;
font-weight: bold;
font-size: 13px;
}
.menu_button ul {
margin-top: 10px;
background: #1A3F73;
list-style-type: none;
width: 100%;
display: none;
margin-left: 0px;
background: rgba(128,128,128,0.7);
}
.menu_button li {
height: 30px;
background: #1A3F73;
margin: 0px;
width: 100%;
opacity: 1;
}
HTML
<a style='color:#f4f442;' href ='course/view.php?id=11'><div class ='menu_button'><span class='middle daily'>Daily Magic Spells</span><br /><div class='dd'><ul><li class='recent'><a style='color:#f4f442' href='recent.php'>Most recent leaders</a></li><li class='threem'><a style='color:#f4f442' href='three-month.php'>last 3 months</a></li><li class='sixm'><a style='color:#f4f442' href='six-month.php'>last 6 months</a></li><li class='twelvem'><a style='color:#f4f442' href='year.php'>last 12 months</a></li></ul></div></div></a>

You need to remove the opacity from your rgba background color
.test{
height: 100px;
width: 100px;
background-color: rgba(26,63,115, .5)
}
If you change the
background-color: rgba(26,63,115, .5)
to
background-color: rgba(26,63,115, 1)
It will remove the Opacity making the color solid
With your code change
.menu_button ul {
margin-top: 10px;
background: #1A3F73;
list-style-type: none;
width: 100%;
display: none;
margin-left: 0px;
background: rgba(128,128,128,0.7);
}
to
.menu_button ul {
margin-top: 10px;
background: #1A3F73;
list-style-type: none;
width: 100%;
display: none;
margin-left: 0px;
background: rgba(128,128,128,1);
}

Related

Stop the text moving down on hover

I have a text in the middle of the div block with a font size 80px. When I hover on the div block, it will change the border size from 1px to 5px with a blue color but the text will moves down.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.calendarday-number:hover {
margin: 12px 2px;
}
.calendarday-container:hover {
border: 5px solid #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Jsfiddle: http://jsfiddle.net/f0k6r9nb/
I have tried to change the margin in the calendarday-container:hover .add-day-ico but it didn't help to resolve the issue.
Can you please show me an example how I can stop the text moving down on hover?
Thank you.
Changing the width of the border from 1px to 5px and recalculating the inner parts is not a practical solution. You could use an additional element, which has 5px of transparent border and change it to 5px of colored border on hover.
Another simple solution would be to use outline instead, as it doesn't add to the elements dimensions:
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-container:hover {
outline: 5px solid #2e7ad1;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
.add-day-ico {
opacity: 0;
width: 21px;
height: 21px;
position: absolute;
bottom: 0;
right: 0;
}
.calendarday-container:hover img {
opacity: 1;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" class="add-day-ico">
</a>
</div>
A typical approach to showing a border on hover is to have the non-hover state be transparent or a color that matches the background along with the width matching that of the border when hovered.
In this case, there's an existing 1px border. Here, I would change the gray border blue, then use an inset box-shadow to add the additional 4px of the border.
Note: I also removed some margin for .calendarday-number on hover so the number does not shift.
.calendar-content {
width: 81%;
display: block;
padding: 0;
background: #fff;
float: left;
position: relative;
margin-bottom: 150px;
}
.calendarday-container {
width: 139px;
height: 139px;
float: left;
position: relative;
margin-top: -1px;
margin-left: -1px;
border: 1px solid #ccc;
}
.calendarday-add .calendarday-number {
display: inline-block;
width: 100%;
font-size: 80px;
color: #f1f1f1;
margin: 12px 0px;
text-align: center;
}
/*
.calendarday-number:hover {
margin: 12px 2px;
}
*/
.calendarday-container:hover {
border-color: #2e7ad1;
box-shadow: inset 0 0 0 4px #2e7ad1;
}
.add-day-ico {
display: none;
width: 21px;
height: 21px;
margin: 22px 0px;
float: right;
}
.calendarday-container:hover .add-day-ico {
display: block;
margin: 22px 0px;
}
<div class="calendarday-container" data-day="0" data-dropable="true">
<a href="/autoresponder/create_day.php?day=0" data-action="click" class="calendarday-add">
<span class="calendarday-number">0</span>
<img src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png" sytle="height: 21px; width: 21px;" align="right" style="margin-top: 3px;" class="add-day-ico">
</a>
</div>
Add this:
.calendarday-container {
border: 5px solid transparent;
outline: 1px solid #ccc;
outline: none;
}
.calendarday-container:hover {
outline: none;
}
Remove this:
.calendarday-number:hover {
margin: 12px 2px;
}
You can use a pseudo element like this. I also removed lot of unnecessary css that was fighting each other
* { margin: 0; padding: 0; box-sizing: border-box; }
body { margin: 5%; }
/* Normal */
.calendarday-container {
width: 150px; height: 150px;
position: relative;
display: flex; align-items: center; justify-content: center;
}
.calendarday-container:after {
content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #ccc; z-index: -1;
}
.caldndarday-add { text-decoration: none; }
.calendarday-number { font-size: 80px; color: #ccc; }
.add-day-ico { width: 24px; height: 24px; position: absolute; bottom: -8px; right: -8px; }
/* Hover FX */
.calendarday-container:hover:after { border: 10px solid navy; }
.calendarday-container:hover .calendarday-number { color: navy; }
<div class="calendarday-container" data-day="0" data-dropable="true">
<a class="caldndarday-add" href="/autoresponder/create_day.php?day=0" data-action="click">
<span class="calendarday-number">0</span>
<img class="add-day-ico" src="http://www.clker.com/cliparts/u/F/K/J/M/A/add-button-md.png">
</a>
</div>
The text was moving down because, There was increase in border-width from 1px to 5px while hover.
You can either maintain a outline around the box using outline property, and keeping the border: 5px solid transparent to border: 5px solid #2e7ad1 while hovering.
I've created a working fiddle for you, for better understanding: Link to Jsfiddle

Why does my div boxes stack downwards when i have set a float left?

I'm working on a webstore and i want to have like a product field with product in it and i want them to float left so when i add a product it floats left with the rest of the products.
PROBLEM
When i add a float: left it stacks downwards instead of floating left and i dont understand why?
EXAMPLE
Example picture
CODE:
.product_gallery {
margin: 0 auto;
width: 1000px;
list-style: none;
float: right;
position: relative;
}
.product_gallery li {
float: right;
width: 300px;
margin-right: 50;
border: 1px solid #999;
}
.product_gallery li img {
width: 300px;
height: 200px;
float: right;
}
.product_description {
position: absolute;
width: 300px;
height: 200px;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
transition: 0.5s ease-in;
}
.product_gallery li:hover .product_description {
opacity: 0.7;
}
.product_description p {
padding: 10px;
color: #fff;
font-size: 18px;
}
.product_information {
height: 40px;
background: blue;
width: 100%;
float: left;
}
.product_information h4 {
float: left;
color: #fff;
width: 70%;
margin: 10px;
}
.product_information span {
float: right;
color: #fff;
margin: 5px;
font-size: 20px;
}
.buy_now {
background: blue;
color: #fff;
width: 85px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration: none;
float: right;
height: 18px;
}
<ul class="product_gallery">
<li>
<img src="images/test.png">
<div class="product_information">
<h4>AWP ASIIMOV</h4>
<span>230:-</span>
</div>
<div class="product_description">
<p>Awp asiimov är ett fint skin om man gillar att spela awp :)</p>
BUY NOW
</div>
</li>
</ul>
If I truly understand you, you want your divs are side by side.Now it is not, because the first div has width: 100%, So the second div goes to next line.
Decrease its width to a value that can contain in one line with div width: 300px.

Three divs showing on hover css

I have 3 divs and each should have a hover function to show text over the background image.
That works, sort of.... What is happening is when you hover over one all three show the text. How can I fix it so only the one being hovered over shows?
For the css
.circleBase {
border-radius: 50%;
width: 185px;
height: 185px;
border: 2px solid black;
background-color: #fff;
margin: 0 auto;
}
.c1 {
margin: 0 auto;
float: left;
height: 185px;
width: 185px;
background: url(../images/pencil2.png) no-repeat center center;
background-color: #fff;
border: solid red 1px;
}
.c2 {
margin: 0 auto;
float: left;
height: 185px;
width: 185px;
background: url(../images/up.png) no-repeat center center;
background-color: #fff;
border: solid red 1px;
}
.c3 {
margin: 0 auto;
float: left;
height: 185px;
width: 185px;
background: url(../images/email.png) no-repeat center center;
background-color: #fff;
border: solid red 1px;
}
.hidden1 {
font-size: 20px;
color: black;
display: none;
margin-top: 75px;
}
.hidden2 {
font-size: 20px;
color: black;
display: none;
}
.hidden3 {
font-size: 20px;
color: black;
display: none;
}
.full:hover .hidden1{
display: block;
}
.full:hover .hidden2{
display: block;
}
.full:hover .hidden3{
display: block;
}
For the html I have
<div class="full">
<div class="box"><div class="circleBase c1">Web Design</div></div>
<div class="box"><div class="circleBase c2">SEO Services</div></div>
<div class="box"><div class="circleBase c3">Contact Us</div></div>
</div>
Thanks for reading!
Jim
Make sure you qualify correctly which div is being hovered in the selector, something like this:
.box:hover a{display:inline; /*or any value except none */ }
You were probably using the .full class, or just div

Top border is not working with cutting edges

i was trying to make menu buttons with cutting edges, i want to give it a top border but it is not working at all, when i give it a border it come out a little to the left side.. please help
each menu button have different color, i want to make it top boder RED but it is not working DEMO
html
CSS
.btncol1 {
background-color: #8cc63e;
}
.btncol2 {
background-color: #aadcf3;
}
.btncol3 {
background-color: #87868e;
}
.btncol4 {
background-color: #c47269;
}
.btncol5 {
background-color: #8cc63e;
}
.button:not(:last-child) {
margin-left: 3px;
}
.button:before {
content:'';
width: 0px;
height: 0px;
display: block;
border-bottom: 14px solid transparent;
border-left: 14px solid White;
position: relative;
margin-left: -14px;
margin-top: -14px;
top: 4px;
left: 4px;
}
.button {
height: 55px;
padding: 10px;
width: 100px;
display: inline-block;
text-decoration: none;
color: white;
margin: 0;
float: right;
transition: all 300ms ease;
font-size: 14px;
font-weight: 400;
font-family:'Open Sans', sans-serif;
text-align: left;
}
The border is going out a bit to the left side because the red border is for the whole div and the cutting edge is positioned on top of the div by using CSS.
Now since you are applying the red border, you have to move the position of the :before pseudo-element a bit higher for the red border to become invisible and get positioned under the cutting edge.
.button {
border-top: 1px solid red;
}
.button:before {
content:'';
width: 0px;
height: 0px;
display: block;
border-bottom: 14px solid transparent;
border-left: 14px solid White;
position: relative;
margin-left: -14px;
margin-top: -15px; /* This was changed */
top: 4px;
left: 4px;
}

Having a sprite image inside a button with text

I'm trying to create a button and here is the demo so far.
Right now I can't figure out how I can position the sprite image so that only the black icon is visible.
Does anyone know how I can fix this?
This is what I want to achieve with the button:
No hover:
Hover:
Here is the code I have:
HTML:
<a class="top-language" href="#" alt="Choose your language">Language</a>
CSS:
.top-language {
border: 1px solid #ddd;
padding: 5px;
text-decoration: none;
color: #000;
position: relative;
font-weight: bold;
font-size: 13px;
padding-right: 10px;
padding-left: 35px;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 0;
}
.top-language:hover {
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat 0 -22;
}
This will work. Here is a jsfiddle
.top-language {
border: 1px solid #ddd;
width: 100px;
color: #202020;
padding-left: 10px;
padding-right: 10px;
display: block;
font-weight: bold;
font-size: 13px;
width: 80px;
margin: 0;
line-height: 22px;
text-align: right;
text-decoration: none;
background: url("http://imageshack.com/a/img853/7081/1u5z.png") no-repeat top left ;
}
.top-language:hover {
background-position: bottom left;
color: #d13030;
}
You can either:
a. reduce the height of the button;
b. increase the vertical gap between the two sprites in the image itself;
c. background: url(...) no-repeat 0 2px; adjust the value to push out the red icon
.top-language {
display: block;
width: 22px;
height: 22px;
font-size: 13px;
background: url('http://imageshack.com/a/img853/7081/1u5z.png') bottom;
text-indent: -99999px;
}
.top-language:hover {
background-position: 0 0;
}
You can provide image display position as follows:
display:inline-block