hopefully this will be an easy answer for some of you CSS veterans out there.
I'm developing a site for a client. For readability, I'll just give you a link to the website and the css page in question.
HTML
CSS
I'm trying to make a sub menu pop up to the right of the main menu when you scroll over "Star Quartz Grout." My current CSS obviously isn't correct though, and I could use some guidance.
ul#subNav {display: none; width: 134px; }
li:hover ul#subNav, li.over ul#subNav {display: inline-block; position: absolute; top: 0px; left: 134px; }
My guess is that it's working but it's hidden behind the rest of the page. I could be wrong though. It's kind of hard to confirm, even with Chrome's "Inspect Element" (very nice thing btw). It's probably some dumb mistake. Anyway, thanks in advance. I'm a bit of a CSS novice.
You can try this :
ul#subNav ul
{
display: none;
}
ul#subNav li:hover ul
{
display:block;
}
But be careful because your "li" zone is smaller than the link itself.
I did it this way on this website : Spirit Of Polo (hover the shopping cart).
Be careful, this kind of effect (hover) will not be visible on touch-screen devices (because hover is impossible if you think about it)
Related
I have a navbar I am creating that has a bunch of menus and submenus. The menus are trailing off the point of viewing and allowing my page to scroll which is not my desired result. I would like for it to flip from right menu to left if there is not enough room for it.
For my Fiddle I have a quick demo that fairly accurately represents my real navbar. To replicate my issue position the webpage depending on your resolution so that the navbar is forced off the side of the page. Click on the interactive tab and on the right column (ignore the styling) click stuff system and go into those submenus. They will trail off the page unviewable unless you scroll which is not what I want.
I have tried using right:0;left:auto; as well as positions for the css as I have found in other discussions but that did not help. I also have tried to use a JQuery menu that worked for the most part but didn't do everything I needed so that is not an option currently. How can I get it to be responsive and realize that it cannot overflow off the page?
UPDATE: I have created a bounty as I need an answer for this. I have modified the question slightly.
To do this you have to use JavaScript to make the menu dynamically change its style based on the viewport.
Luckely for all of us, there are some great guys on the web who create these things for existing frameworks. So others don't have to invent an existing wheel. Take a look at the link below. This is exaclty what you are looking for (atleast, as far as I can see in your question).
http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar.html#
It is fully compatible with bootstrap 3.
For a temporary fix (Not dynamic)
Use the following CSS rules
ul.dropdown-menu.dropdown-inverse {
position: absolute;
left:-58%
/* Overriding value from 100% defined in ".dropdown-submenu > .dropdown-menu" */
margin-right: 200px;
margin-left: -60px;
}
For a responsive solution, basically calculate the width of each menu and add them up.
Then subtract the value from the screenwidth and then add the above class to the subject.
Fiddle Link
Use this css rule in the media queries (at widths that have the problem). It should sort it out to what i believe you want
.dropdown-submenu > .dropdown-menu > .dropdown-submenu > .dropdown-menu {
top: 0;
left: -92%;
margin-top: -6px;
margin-right: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
Fiddle
Try This:
.dropdown-submenu > .dropdown-toggle:hover + .dropdown-menu{
display: block ;
}
I need some expert advice on this as its driving me crazy!!
I have checked through everything and even removed all CSS but I can’t stop this from happening!
In the footer of this website - www.thedevelopists.co.uk, the links are moving downwards about 1px on hover. The crazy thing is though that they don’t bounce back up when you leave, they remain 1px down. Also, to see this error/bug, you have to be scrolled right to the bottom of the page??
If somebody could figure this out I will be so happy!!
P.S This is affected the most in Firefox. In Chrome it behaves a little differently, rather than moving slightly the curser hand flickers like crazy.
It's quit simple. Just put below code in your css.
footer li {
display: inline-block;
width: 100%;
}
This is happen because your li is not clear. There for it happen. Cheers!!!
Try this code as you feel footer Links Jittering/Moving on Hover is due to transition effect
If do not need that
footer a { transition: none; }
I'm trying to make a white div box turn red when it's hover overed, so far i have this in my css:
#white{
width: 90px;
height: 90 px;
background-color:white;
position: absolute;
top: 10px;
left:10px;
}
a:hover #white{
color:red;
width: 90px;
height: 90 px;
position: absolute;
top: 10px;
left:10px;
}
and this in my html:
<div id="white">
</div>
but it doesn't work at all, help please?
You need to go back and read a bit more about HTML and CSS basics.
You are targeting a link that doesn't exist.
You don't set a background color for the hover state, so how could it change? You change the TEXT color, but not the background, and your question says you want to change the color of the
You have a space between 90 and px, so that breaks your CSS.
Something like this is probably what you want: Link
The problem is a:hover #white, you're targeting an <a> tag that is being hovered with a child that has id="white".
You want to use this:
#white:hover {
...
}
You're also on the hover event you're using color and not background-color.
http://jsfiddle.net/xuj44/1/
This question has been answered but it seems like you are trying to run before you can walk, http://w3schools.com/ is possibly where every front-end web developer began learning html/css - it will give you the basic fundamentals of the language so its well worth reading through each section. Even seasons developers have to pop back to it occasionally just to jog there memory. Good luck, and keep trying :)
I am trying to build a website and have encountered a tricky issue with li having display: inline-block; property.
My website is: http://www.gypsytours.in/
If you visit this site, on homepage, I have a horizontal list under the heading "Himalayan Packages by Gypsy Tours".
In this list, I have a block element A with display: block; property.
Here are my simplified codes:
HTML:
<div id="menu-board">
<ul>
<li>Elephant Safari Packages in Jim Corbett Park, India</li>
<li>Chopta Tungnath Trekking Package</li>
<li>River Rafting Packages in Rishikesh</li>
</ul>
</div>
CSS:
#menu-board
{
text-align: center;
}
#menu-board ul
{
}
#menu-board ul li
{
float: none;
display: inline-block;
}
#menu-board ul li a
{
display: block;
width: 180px;
height: 130px;
background-color: #C50000;
text-align: center;
overflow: hidden;
}
Now, the issues is: My link-text in 2nd box, is not longer than two lines, unlike the other two boxes where link-text spreads in three lines. This boxes look perfectly fine in IE and FireFox but when I open the site in Google Chrome or Safari, the box in the center (with relatively shorter text) pops down. If I make the text long enough to span in three lines, it comes back to original position. I am not able to figure out how to fix this. My apologies for not being able to put across my issue in simple and short manner. I am relatively inexperienced with web-designing. I will really appreciate if you guys can help me out. Thanks in advance.
Ok, after more digging, I found out that it was a computed float issue.
I believe that adding:
#splash-list ul li a {
float:left;
}
will solve the problem. It may compute very slightly differently on other browsers, but at least they'll be in the proper line.
Hope this helps!
Mason
I saw a page today which has a little detail, which I find, is very neat.
http://www.songkick.com/feedback
If you have a look at the right upper corner you see:
I tryed to inspect the element, to how this is done and I only get this code:
We <strong><span>love</span></strong> feedback
Where is the magic? I don't see a reference to a picture for the heart or something. Where does the heart come from?
Open up Firebug. Then right click on the heart image and click on "Inspect Element" in the context menu.
If you are in the HTML or CSS views in Firebug then in the small pane to the right it will show the CSS rules, which are as follows (copied from Firebug):
#header #header-nav ul #feedback strong {
background-image: url("http://www2.sk-static.com/images/layout/heart-small.png?20110728085037");
background-position: 0 2px;
background-repeat: no-repeat;
display: inline-block;
height: 10px;
width: 10px;
}
So, background-image is the "heart".
Happy coding.
And to answer "where did 'love' go?", click on the <span>love</love> in the HTML view (it is not selected by the above approach, presumably because it is hidden):
#header #header-nav ul #feedback strong span {
display: none;
}
The Computed tab is also helpful to see the actual applied rules.
The <strong> tag has this CSS: background-image: url(http://www2.sk-static.com/images/layout/heart-small.png?20110728085037);, applied from this CSS rule: #header-nav ul #feedback strong :)
Using firebug, it's an image in their css.
http://www2.sk-static.com/images/layout/heart-small.png?20110728085037