URL: test.getfamo.us
Issue: the drop down menu does not work (hover over any link to see), as I have the main box covering it.
I was trying to code the site without using percentages for height, as I heard its bad and my site was displaying poorly on other monitors so I changed it all to px. Anyway in order to do the main box I used this CSS
#content #main {
position: absolute;
top: 70px;
bottom: 15px;
width:100%;
So it did not cover my header or footer.
Issue being that with my Header, this is the CSS
#content #header {
height: 70px;
width: 100%;
}
I want it to be like this though so it can work on all screen sizes with the main box automatically generating its size, however I obviously want my drop downs visible so I am at a crossroads.
So how am I able to fix this?
Also if you need any more info my CSS is available: http://test.getfamo.us/css/
Thanks very much!
Addd z-index to ul.
ul li ul {
box-shadow: none;
display: none;
left: 0;
opacity: 0;
padding: 0;
position: absolute;
top: 48px;
transition: opacity 0.2s ease 0s;
visibility: hidden;
width: 150px;
z-index: 50;
}
Related
I have a little pseudo modal I am building for my app that takes over the screen for a moment when a user clicks the button. I have it set as position fixed so it can overtake the entire screen infront of the user. I have it show and hiding right now with just toggling between display: block and display: none, my css right now just looks like so :
(SCSS) :
.sort-fullscreen {
display: none;
top: 0;
left: 0;
right: 0;
height: 100vh;
width: 100vw;
background-color: $modal-bg-color;
position: fixed;
z-index: 101;
transition: all 0.5;
&.open {
display: block;
}
}
And there is just a
<div class="sort-fullscreen">
... users content
</div>
Sitting at the bottom of my page.
So this works fine, however I am trying to figure out if there is a way to animate the position fixed coming onto the page - perhaps sliding on and off?
Initially - I tried something like this
.sort-fullscreen {
display: block;
top: 0;
left: -100%;
right: 0;
height: 100vh;
width: 100vw;
background-color: $modal-bg-color;
position: fixed;
z-index: 101;
transition: all 0.5;
&.open {
left: 0%;
}
}
However, this does not seem to work for me. I cannot seem to find a clean way to animate a position fixed onto the page. Any help on how to achieve this would be appreciated. Thanks!
Your code seemed to work for me, albeit after adding 's' in your transition time:
transition: all 0.5s;
Fiddle: https://jsfiddle.net/dt2j6872/1/
I'm trying to have it so that when I hover on an <img> tag, a div will appear over it. I want it to be a white overlay with text inside of it.
I cannot make the image a background-image, as much as I would like to. My code uses width:percent/max-width:pixels and height:auto/max-height:pixels, so without the img there, nothing would show up. And to my knowledge, there is no solution to that issue.
I attempted to give the image a unique id and apply a id:hover .class to have the div appear, but it didn't respond to any coding I gave it, let alone work right. I then tried putting the id on a div of its own over putting it on the picture with still no yield.
I also tried to make a div with the image as a background pic and made the hover as desired. I tried to make the div not implode by putting in another div that has the image constraints, but because of the height:auto, it didn't work.
I refuse to set height/width as pixels, as it would mess up the rest of my coding and one of the major reasons I'm coding what I am. So, if it's not possible because of this, that's fine; Just tell me.
My CSS is as follows:
#logo {
text-align: center;
width:100%;
max-width:769px;
height:auto;
overflow:hidden;
}
#bannerpic {
max-width:769px;
max-height:300px;
width:100%;
height:auto;
}
#bannerpic .logobody {
display:none;
}
#bannerpic:hover .logobody {
display:inline;
background-color:rgba(255,255,255,0.5);
width:100%;
height:100%;
}
My HTML is this:
<div id="logo">
<img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png">
<div class="logobody">text</div>
</img>
</div>
I don't know if you need to be able to click the image, but you can overlay text with absolute positioning.
#logo {
text-align: center;
height: auto;
overflow: hidden;
position: relative;
max-width: 469px;
}
#bannerpic {
width: 100%;
height: auto;
}
.logobody {
position: absolute;
background-color: pink;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
-webkit-transition: opacity .3s;
transition: opacity .3s;
}
.logobody:hover {
opacity: 1;
}
<div id="logo">
<img id="bannerpic" src="https://dl.dropboxusercontent.com/u/67673862/logoTEMP.png" />
<div class="logobody">text</div>
</div>
How about this:
#logo {
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.logobody {
position: absolute;
z-index: 2;
left: 0;
top: 0;
background-color: rgba(255,255,255,0.75);
visibility: hidden;
height: 100%;
width: 100%;
}
#logo:hover .logobody{
visibility: visible;
}
#bannerpic {
max-width:769px;
max-height:300px;
width:100%;
height:auto;
}
Here's a JSFiddle link for it:
https://jsfiddle.net/zVBDc/790/embedded/result/
Note: My example is using 0.75 alpha for the background. 0.5 seemed too low. Set it to whatever you prefer, though.
I had this effect working on a Shopify site I designed about a year ago (http://originalchuck.com/), and then tonight, unbeknownst to me, the client decides to buy a new theme, turn it on and now one of my CSS tricks no longer works. If you go to the three images beneath the two blog posts, you'll see the problem. Roll over them, and the image opacity changes. That's the good news. The bad? Some text in a span is also supposed to appear in the dead center of each image, but now it no longer does. My code is the same as the previous theme, so why isn't it working anymore? Here's my CSS:
span.text-content, span.text-content-bags {
color: #ffffff;
font-size: 30px;
left: 0px;
opacity: 0;
position: absolute;
text-transform: uppercase;
top: 0px;
width: 100%;
}
span.text-content span, div.homepage-bags span.text-content-bags span {
left: 0px;
margin-top: -12px;
position: relative;
text-align: center;
top: 50%;
width: 100%;
}
.homepage-products a:hover span.text-content, .homepage-bags a:hover span.text-content-bags {
opacity: 1;
display: inline-block;
}
Here's a cool trick to center stuff inside a container:
set position: relative on the outer, containing element, and then on the element you want centered, do this:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
text-align: center;
You also need to set a height and width for the inner element. The units shouldn't matter.
Works in all browsers including at least IE8+. It may even go further back than that.
I currently have a div called testLine used for displaying a color triangle effect using css:
#testLine {
width: 0;
height: 0;
padding-bottom: 47.5%;
padding-left: 47.5%;
overflow: hidden;
}
#testLine:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: -1000px;
border-bottom: 1000px solid transparent;
border-left: 1000px solid #4679BD;
}
This works fine but the issue is the following:
How can I do to have a text over that triangle? I mean, I've tried with z-index but with no success (css it is not my strong point) and I didn't know if it is even possible to write text on it. What can be other possibilities? (I really don't want to use a resource consuming image for the background). I really appreciate any help that can lead me to a solution.
PrintScreen - http://i.imgur.com/dRCKVNO.jpg
edit, html code:
<div id="testLine"></div>
<div id="text">Testing Testing</div>
use position with alignment...something like:
#text {
position: absolute;
/* this will make div fall out of
page flow anad align to viewports dimension*/
top:0;
/* position to top*/
left:20px;
right:0
/*if needed*/
bottom:0
/*if needed*/
}
working demo
Use z-index with a position property, for example:
#testLine {
position: relative;
z-index: 9999;
}
Without position property z-index not work
Fiddle
I am trying to make the div #top opacity: 50%, so when you scroll, it will show a faded portion of the webpage below it. When I run this, however, it does not show opacity. It still shows solid.
CSS:
#top {
width: 100%;
height: 40px;
background: #96f226;
text-align: center;
font-size: 30px;
color: #252525;
position: relative;
position: fixed;
opacity: 50%;
}
HTML:
<div id='top'>Cuisine List</div>
opacity takes a decimal between 0 and 1, like so:
opacity: 0.5;
See MDN for more information.
Also,
you seem to have two positions - you should remove the first one
for position: fixed to work, you must specify at least one location, such as:
top: 0px;
which will anchor it to the top.
fixed fiddle