In the middle of my page I have this <div> which includes a list. When I view the page source I see all the code there, but the only thing actually rendered for the user to see in the browser is the "Brand" h4 heading. (note that this is actually generated dynamically, and this is example output)
Also I have checked in several different browsers on several different machines so I don't think thats the issue
Is there something obvious I'm missing here why my list is not displaying?
<div class="filter-group filter-group-brand">
<h4>Brand</h4>
<ul class="nav-brand ">
<li class="collection-container aimpoint active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimpoint"
href="/collections/firearm-accessories/aimpoint">
<i class="check-icon"></i> Aimpoint
</a>
</div>
</li>
<li class="collection-container aimshot active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimshot"
href="/collections/firearm-accessories/aimshot">
<i class="check-icon"></i> Aimshot
</a>
</div>
</li>
<li class="collection-container barska-optics active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag barska-optics"
href="/collections/firearm-accessories/barska-optics">
<i class="check-icon"></i> Barska Optics
</a>
</div>
</li>
</ul>
</div>
Without any CSS this works well and <li> elements will appear. Always think about giving your CSS code when you have a display error/problem
You must have an error in your CSS file. Check for display:none or hidden properties, etc on the following classes : collection-name, new-brand, collection-container.
Also you have empty <i> tags, just in case it's an error.
Related
Following is html code. The final div is a hyperlink that calls javascript. This is the bottom of a longer page, but everything works until the final hyperlink, which appears on the page but not as a clickable link.
<div style="padding-left:15%;">
<span class="blank">Action Hyperlink</span>
</div><br>
<div class="sp_01 bordered">
<ul class="sp_03 bordered">
<li class="sp_03 bordered" style="text-align:justify;">Text 1</li><br>
<li class="sp_03 bordered" style="text-align:justify;">Text 2</li><br>
<li class="sponsor_03 bordered" style="text-align:justify;">Text 3</li>
</ul>
</div><br><br>
<div style="padding-left:15%;">
<span class="blank">Action Hyperlink</span>
</div><br>
The first instance of the hyperlink works. After the -div class="sp_01 bordered"- section, the final instance of the hyperlink appears as a line but not a click link.
This sort of problem is usually related to how the preceding tags are open and closed. I’ve studied the open and close tags and I don’t see anything wrong. The color coding in my editor (Atom) is correct for all tags.
What’s wrong?
Just wrap your DIV inside a like
<a href="#" onclick="ShowPages(18);" class="tfl" style="text-decoration: none; color:rgb(255,255,255)"><span class="blank">Action Hyperlink</span>
<div style="padding-left:15%;">
</div>
</a>
<br>
Edit
For future references this answer don't include sufficient information . So that I was trying to delete this. But after answer beign accepted it cant be deleted.
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>
I'm trying to retreive "prace.avizo.cz" and "onlineprodej.cz" from the following html. I've tried several different variations to isolate that one url but none have been successful.
I'm trying to get it via an importXML function in a googledoc. Some of the paths I've tried are:
=importXML(B2,"//article[#class='genericlist component leadingReferers']//ul/li[1]")
=importXML(B2,"//ul[#class='sites items']//li[1]")
=importXML(B2,"//li[#class='item']//div//a")
These either don't work or return extra irrelevant data. I'm only looking for the data within this specific article class (genericlist component leadingReferers).
Any help is appreciated.
<article class="genericlist component leadingReferers">
<h2 class="title">
Top Publishers
<i class="tooltip sprite icon_tip_idle" title="<h1>Leading paid referring sites</h1>Leading publishers referring advertising traffic to Cz.indeed.com"></i>
</h2>
<ul class="sites items">
<li class="item ">
<div class="text" title="prace.avizo.cz" data-sitename="prace.avizo.cz">
<a class="link" href="/website/prace.avizo.cz" data-tipsygravity="w" data-shorturl="Prace.avizo.cz">
<img class="icon lazy-icon lazy" data-original="http://images2.similargroup.com/image?url=prace.avizo.cz&t=2&s=1&h=11351681863127555753" src="/images/lazy.png"/>
<noscript>
<img class="icon" src="http://images2.similargroup.com/image?url=prace.avizo.cz&t=2&s=1&h=11351681863127555753"/>
</noscript>
Prace.avizo.cz
</a>
</div>
<div class="progress-bar">
<div class="progress-value percentage per1" style="width: 62.91%"></div>
</div>
</li>
<li class="item ">
<div class="text" title="onlineprodej.cz" data-sitename="onlineprodej.cz">
<a class="link" href="/website/onlineprodej.cz" data-tipsygravity="w" data-shorturl="Onlineprodej.cz">
<img class="icon lazy-icon lazy" data-original="http://images2.similargroup.com/image?url=onlineprodej.cz&t=2&s=1&h=14252445317786093368" src="/images/lazy.png"/>
<noscript>
<img class="icon" src="http://images2.similargroup.com/image?url=onlineprodej.cz&t=2&s=1&h=14252445317786093368"/>
</noscript>
Onlineprodej.cz
</a>
</div>
<div class="progress-bar">
<div class="progress-value percentage per1" style="width: 50.88%"></div>
</div>
</li>
....
This expression will give you the last text node inside the <a> of the first item in the article:
//article[#class='genericlist component leadingReferers']//li[1]//a/text()[last()]
which is the one that contains the text Prace.avizo.cz (surrounded by spaces, tabs and newlines). If you wish to trim those extra spaces, you can pass that expression as the argument to the XPath function normalize-space():
normalize-space( //article[#class='genericlist component leadingReferers']//li[1]//a/text()[last()] )
You can select the second article in a similar manner (same expression, using li[2]):
//article[#class='genericlist component leadingReferers']//li[2]//a/text()[last()]
If you want to retrieve a collection containing all text nodes (which you can manupulate outside of XPath) you can use:
//article[#class='genericlist component leadingReferers']//li//a/text()[last()]
which will return a list containing all text nodes (two, in your example). In this case, you will have to use your host language to extract them (probably in a for-each loop).
I'm using wordpress to host a website for work, and I was finally able to change the name of the site to an image.. But now it looks all weird because the navigation links are still aligned to the left. I'm trying to center them on the page, but I can't find the code to change. The navi links on the blue line are categories, and when I cntrl-F to find categories, only 2 lines show up, & they are just for hiding all the links.
I was wondering if there was a piece of code I should be looking for or if this info is included in the stylesheet & not editable.
Thanks for any help! Also, here's the tester website for ref: http://phitlab.host22.com/wordpress/
Edit: Found the html/ css code that needs editing
<div id="cat-nav" class="clear">
<ul class="nav sf-js-enabled">
<li class="cat-item cat-item-3">
<a title="View all posts filed under Home" href="http://phitlab.host22.com/
wordpress/?cat=3">Home</a>
</li>
<li class="cat-item cat-item-4">
<a title="View all posts filed under People" href="http://phitlab.host22.com/
wordpress/?cat=4">People</a>
</li>
<li class="cat-item cat-item-5">
<a title="View all posts filed under Publications" href="http://phitlab.host22.com/
wordpress/?cat=5">Publications</a>
</li>
<li class="cat-item cat-item-7">
<a title="View all posts filed under Research" href="http://phitlab.host22.com/wordpress/?cat=7">Research</a>
</li>
<li class="cat-item cat-item-6">
<a title="View all posts filed under zContact" href="http://phitlab.host22.com/wordpress /?cat=6">zContact</a>
</li>
</ul>
</div>
</div>
I would look at the HTML source code to check to see if the elements have any classes or ids. If they don't then I would check their parents for classes and ids as well.
Then search the css code for the these classes and ids to find its source code.
Both of these tasks will be easier if you use a browser extension or feature. I like firebug for firefox or ctrl-shift-i in chrome. They can tell you how the styles are decided for each element and what line of the css file to find it.
If what you want to do is center them it probably would be easiest to give the container element that holds your navigation links a fixed width using px or % then set
margin-left:auto;
margin-right:auto;
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.