So for my project I've setup a fixed header and footer but noticed that my footer is rather large. What I'd like to do is hide it and add a button toward the bottom that when you hover over will display the whole footer.
Here is my current website: http://webcomp41.volume11.com/final/index.html
How would I go about adding this feature? Any help is greatly appreciated!
CSS Solution: (show/hide completely)
for it to work, you just need to make the button and the footer siblings
#footer
{
display: none;
}
#button:hover ~ #footer
{
display: block;
}
you can use the same technique to specify different size instead of show/hide.
and as Ali Sheikhpour said:
notice: replace the word "button" with the ID of button and "footer" with the ID of footer.
Example HERE
jquery solution:
$("#button").hover(function(){$("#footer").show()})
notice: replace the word "button" with the ID of button and "footer" with the ID of footer.
Related
i have been fiddling around with this for a few hours now.
I have a vertical elementor nav menu and i want to apply a hover affect to it.
So far so good, but i only seem to be able to select the whole column and apply the affect onto that, not only the length of the text.
Here is an example of how it currently looks, the closing "brakets" are always at the same width at the end of the column:
Example 1:
Example 2:
What i want it to be like is on the end of the text - which is differnet for each menu item.
Like This:
My current selector is .elementor-7 .elementor-element.elementor-element-1cf0e88 .elementor-nav-menu--main .elementor-item: - i tried with "a" as well which made it not work at all.
Thank you.
Max
You can not select only text. The text must be inside a html tag.
For example:
div {
color: green;
}
p {
color: red;
}
span {
color: blue;
}
<div>
<p>I am selectable with p { }</p>
I am not selectable as I am a text element of root div tag.
<span>Again I am selectable as I am wrapped with span tag.</span>
<div>
A link to the site would be helpful.
But the problem here is probably, that the element you're targeting is "display: block" or similar, making is a full-width element.
Try setting the a-tag to "display: inline" or "display: inline-block", which will make the width fit the element - not the parent div.
Alternatively, you could target each link as "nth"-elements of a list, but I would need to see the actual page to determine that, as Elementor is rarely just "Elementor". Your theme and additional addons play a part here as well.
HTML fragments using links to pages using /#page-section to link to a specific section of a page is loading too low down the element for me.
For example I set up a <div id="engagment"> and then link to site.com/#engagement but instead of it linking to the top of the section like this:
what I want to happen
I get this: What actually happens
Is there anything I can do to fix this?
Thanks in advance. I'm new to html/web development.
That's because you have a fixed header which overlaps that section (which is actually positioned at the top of the window). So you need to create an offset.
A common way is to add an invisible pseudo element to the original target element of the link via CSS, like this:
#page-section::before {
display: block;
content: " ";
margin-top: -150px;
height: 150px;
visibility: hidden;
}
This will "extend" the element with that ID in a way that causes the anchor to be 150px above the main element, without any other visible changes. Adjust that value as you need it (i.e. to the height of your fixed header)
(A padding-top or margin-top would do something similar, but it would create an empty space in there, which you might not necessarily want)
I'm creating a web map. I have a div at the top of the map that when clicked maximizes and shows a custom attribute window. The attribute window displays data based on other actions in the map. The attribute window currently has 4 buttons at the top that will change the contents of the window depending on which button is selected.
The actions on the map will send a request to my Python flask web service which returns data formatted in <ul><li></li><ul> that I want to display in the attribute window.
The problem I currently have is that the text goes outside the the window - probably because I have the div set to position: absolute. But is there any way around this?
Here is a working CodePen (click the div at the top):
https://codepen.io/anon/pen/oeJGdm
Thank you for any advice.
Keeping your structure i would suggest few changes, I'm including only the changes in this answer.
First give room for .nav in #atributeWindow.
#attributeWindow {
padding-top: 30px; /*to accomodate nav bar*/
...
}
Move nav to top padding area of #attributeWindow.
.nav{
top: 0;/* to place at top;*/
...
}
Contents will be placed below .nav since padded in #attributeWindow. So remove this padding.
.attributeContent{
/*padding-top:30px; remove this padding.*/
...
}
Finally remove the display:inline
#test1{
/*display: inline;*/
...
}
I have a top bar with text links and images; all the images are shifting to one side?
The images should align next to their respective text links, can anyone tell me what I'm doing wrong?
here is the website:
http://www.heatx.org/productcart/pc/viewCategories.asp?idCategory=2
So, I was looking at the URL you posted in Chrom DEV tools, and i found an entry in pcHeaderFooter11.css
#pcIconBar a {
text-decoration: none;
color: #666;
}
Changed that to :
#pcIconBar a {
text-decoration: none;
color: #666;
display: inline-block;
}
and voila!
And please remember, elements with display: block tend to behave like div tags and end up in a separate space for themselves. is you want alignment like this, you're supposed to specify explicitly that you want the element to be inline. Hope this helps!
I think i see a div in there called "pcIconBarRight" and left.
But personally i would create one div for every button/icon pair.
otherwise you can make the main div "relative" in your css and then move the child objects around based on that. (relative to the parent div (in this case pcIconBarRight)
I have this page: http://www.problemio.com which has a black bar on top which has search and a dropdown menu. That looks reasonably ok.
But then I have another page like this: http://www.problemio.com/category.php?category_id=1 which has those two elements, but for some reason, the search appears on the top left of the bar.
How can I make these elements appear as they do on the home page of problemio.com ?
Thanks!
You have it absolutely positioned over your search box. Fix the absolute positioning and you should be fine.
you don't have you main_styles.css on the interior page, which has this style in it:
#search {
float: right;
margin-top: 7px;
width: 14em;
}
In your page which displays the search box as you desire [problemio.com] the div has the css value 'float: right'. This is the value you need on the other page.
div#search {
float: right
}
I just answered this in the comments of your other question, posted 5 min ago.
Your problem is that the home page div with class nav takes values from main_index.css and the other page takes values from main.css.
There are some inconsistencies between the two which might lead to the problem. Firebug or devtools will help you debug these kind of problems.