I have an issue with links for which their focus is jumping around.
The site is here: www.bikramyoga.cz
The links that are troublesome are in this HTML piece:
<ul id="sub">
<li id="mail">
chci zasílat novinky
</li>
<li id="fb_icon">
to se mi líbí
</li>
</ul>
When I first created the site the links worked fine, now not so much.
Any ideas where my CSS is messed up?
If you display your <a> as block, instead of inline-block it seems to work as you want.
#mail a{display:block}
#fb_icon a{display:block}
Related
I am working on a bespoke WordPress build and for some reason, I just cannot get some anchor links to work. It's driving me potty and I just don't know what the problem is.
I have discovered, static anchor links are working fine (the back to top button works). However, I am using Advanced Custom Fields to generate ID's for the anchor tags. The IDs are generating correctly, but won't work as anchor tags.
Anyone have any ideas? The bit I am referring to is the service boxes near the bottom of the page. The idea being you click on these and that they will take you to the services page, and down to the relevant section.
The markup I am using is:
<ul class="cf">
<li>
<div>
<a href="/services/#dimensional-surveys">
<div class="filter"></div>
<img width="500" height="600" src="pexels-photo-175771-500x600.jpeg" class="attachment-feature size-feature" alt="" />
<h3>3D Dimensional Surveys</h3>
</a>
</div>
</li>
</ul>
<ul class="service-list cf">
<li id="#dimensional-surveys">
<div class="feature" style="background-image:url(pexels-photo-175771.jpeg);">
</div>
</li>
</ul>
Just remove the # from id and it will work.
<ul>
<li id="example"></li>
</ul>
I have looked at your page
The point where an ancor should jump to should have no #
You do: <li id="#dimensional-surveys">
But do just <li id="dimensional-surveys">
Fix that first and test again.
You don't want the '#' on the anchor: <li id="#example"></li> should be <li id="example"></li>
It is such that I have a menu where there is a border in the page you're into, just currently the whole time on the index page, but if I click onto the news as it should be less.
I have tried so many ways but none of them works, think a little that you can do it with something GET?
This means that it must move to find the page you are on, and view page not in the menu so it should not be there.
there are border in Home, how can I do so that, for example, I go into the info then border under the info and not the front, what should I do there?
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown active"><span>Forside</span></li>
<li class="pi-has-dropdown"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
Ses image HER
Here you can see how my menu appears when I click on the info.
The answer is as simple as this: see the pi-has-dropdown active part. If you don't want it, just remove it. If you want it in other pages, add it to each page, for example in Info, like this:
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown"><span>Forside</span></li>
<li class="pi-has-dropdown active"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
. You usually do this with the help of a CMS or some JS/Jquery coding, but you could totally hard code it on each page if you want. This way, you need to copy this snippet of code on each page, only changing the active class keeping in mind in which page are you. As simple as that
I'm having trouble finding the reason why my navigation menu is not popping up when I hover over "English". The other menu pop up without problem.
http://jsfiddle.net/B6ZcG/
Can someone help me find the error?
Your hovering <li class="top"> element needs to include (wrap) the child <ul> containing all the language links. Since its pretty hard to explain how to find the error here the updated code on jsFiddle.
http://jsfiddle.net/B6ZcG/2/
You had a rouge </li> in your markup
<li class="top"><span class="trf trf-english"></span>English</li>
<ul>
Should be
<li class="top"><span class="trf trf-english"></span>English
<ul>...
FIDDLE
I am currently trying to style my navigation bar with different colors for each list item.
Here is the html code
<ul>
<li id="item1">Home </li>
<li id="item2"> About </li>
<li id="item3"> News </li>
<li id="item4"> Video </li>
<li id="item5"> Donate </li>
<li class="part">Contact </li>
</ul>
And here is the css code
#item1{background:#7375D8};
#item2{background:#4E51D8};
#item3{background:#1A1EB2};
#item4{background:#303285};
#item5{background:#080b74};
#header ul li.part
{
background:#689AD3;
}
For some reason only item 1 and li.part are actually displaying the colors correctly , the rest display nothing in all browsers.
Dreamweaver however is displaying all the colors in the preview section so I have no clue what the problem is with them .
Many thanks for your contributions.
It's just a syntax error! The semicolons should be inside the curly braces!
#item1{background-color:#7375D8;}
#item2{background-color:#4E51D8;}
#item3{background-color:#1A1EB2;}
#item4{background-color:#303285;}
#item5{background-color:#080b74;}
#header ul li.part
{
background-color:#689AD3;
}
You have not closed the semicolons properly, it was outside the braces so thats the reason it was not working. See the css rules below for correct one.
Write your css like below:
#item1{background:#7375D8;}
#item2{background:#4E51D8;}
#item3{background:#1A1EB2;}
#item4{background:#303285;}
#item5{background:#080b74;}
#header ul li.part{background:#689AD3;}
the semi colons should be before the closing brace for each style. the unclosed tags are causing the problem
I have a weirdest thing, in this peace of code a browser adds tags automatically. I disabled all javascript and css, left only simple HTML and still see tags added. Here is my code:
<div id="menu-contact" class="menuNew">
<ul class="navi-list">
<li class="goto">Go to:</li>
<li id="whats">Welcome!</li>
<li>About</li>
<li>Shop</li>
<li><a class="active" href="#menu-contact">Contact</a></li>
</ul>
</div>
and here is what firefox4 sees:
<div id="menu-contact" class="menuNew">
<a> </a>
<ul class="navi-list">
<a>
<li class="goto">Go to:</li>
</a>
<li id="whats">
<a></a>
Welcome!
</li>
<li>
About
</li>
<li>
Shop
</li>
<li>
<a class="active" href="#menu-contact">Contact</a>
</li>
</ul>
</div>
It basically surrounds each tag by a tag. Again, I removed all js and css references..any idea what's going on?? Funny thing, that I have the same code (with unique IDs) in the same page and it renders normally.. only the last snippet adds tags..
My best guess absent a link to a live example is that there is a stray <a> somewhere above that element, and Firefox is attempting to apply it to all the elements below, and of course not having a very happy time of it. A quick HTML validation will reveal if something like that is going on, since either the <a> is unclosed (invalid) or the <ul> is inside it (also invalid).
If that doesn't explain it (which is entirely possible, since I'm just speculating wildly), consider crafting a live example we can inspect in detail. Certainly what you're describing is not normal Firefox behavior, so any clues we can get to what makes your situation different will help.