I'm trying to pull off the following Top Bar with Zurb Foundation.
(I'm aware of how to do this with plain HTML...trying to figure out the correct way to do it using Foundation, though.)
So you've got the title-area name on the left (which works fine), and on the right the "Hi, Joe!" is just plain text and then the "Change Settings" and "Log out" are each links (which doesn't work).
Here's what's happening when I build that out...
And here's the code I'm using...
<nav class="top-bar">
<ul class="title-area">
<li class="name"><h1>Acme Company</h1></li>
<li class="toggle-topbar"></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>Hi, Joe!</li>
<li>
Change Settings | Log out
</li>
</ul>
</section>
</nav>
So how can I get Foundation to work with my original design example above?
Foundation uses the a tag to style it. You're better off putting them in two separate li tags.
e.g.
<li><a href='#'>Change Settings</a></li>
<li class='divider'></li> <!-- built into foundation -->
<li><a href='#'>Log out</a></li>
Your Hi, Joe! should go in a blank a tag also.
Related
I am new in web page design. I made a web site in html and css. I did not use wordpress or any kind of canned web designing site.
This kind of code does not work in mobiles. This is part the code in my website.
<nav>
<ul>
<li> Home </li>
<li> Flowers </li>
</ul>
</nav>
I researched, and the code that I see is this:
<li>Contact</li>
Can somebody tell me what "#" means?
What can I do to make my links suitable for tablets and mobiles?
Thank you in advance to anybody who can help me.
Try
<nav>
<ul>
<li> Home </li>
<li> Flowers </li>
</ul>
</nav>
also add css
a {display:block;}
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>
So I'm learning web development on my own since I'm a CS major and it appears that my school doesn't have an option for that in cs (IT only). Right now I've been using youtube, Microsoft virtual academy, codecademy(not pro), and khan academy. Kind of besides the point but my question is I have pills in bootstrap, I want to have a list under each pill that's only accessable by clicking on that pill. The way I have it setup is that the pill is a shortcut to the list that is further down the page, is there a way for me to hide the lists so that they're only specific to the active pill without me having add each lists down the page, using html,css, or bootstrap? This is what I've been working with, I haven't moved on to js or php or any scripting, I do know python but I don't know how to implement scripts in html yet.
code below
<ul class = "nav nav-pills">
<li class ="active"> Engineering </li>
<li> Medical </li>
<li> Education </li>
<li> Jobs for students </li>
</div>
</div>
<div class ="eng-company-list">
<div class = "container">
<ul id="engineering-positions">
<li> Google </li>
<li> Amazon </li>
<li> Facebook </li>
<li> Twitter </li>
<li> Pandora </li>
<li> Dropbox </li>
<li> Pinterest </li>
<li> Khan Academy </li>
<li> Zynga </li>
<li> EA </li>
<li> Sony </li>
<li> Intel </li>
</ul>
</div>
</div>
<div class ="edu-list">
<div class ="container">
<ul id = "edu-positions">
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
<li> newitem </li>
</div>
</div>
like right now I click on the Engineering pill and it displays the eng-position list AND the edu-positions list, what I want to do is hide the edu-positions list from engineering and subsequently Jobs for students, Medical, etc.
You can use the display: none; css property: value pair on a default element and psuedo classes.
For example, name each container uniquely. (e.g. engineering-container, edu-container) and set css property "display" to "none" on both. Use relative positioning in your css and define the positions in which the container will reside. You can also use x-index values to place the container behind your main container.
Then use the :hover pseudo class on your primary navbar and the hidden containers to make it show. Set the :hover display values to block. So when you hover over the navbar tag "engineering", the list will also expand and show for the list you've associated with the engineering navbar link.
Sorry for not giving you a step-by-step details, but it can be done with just css. It would be easier with jQuery. But as the remark made in an earlier comment, you should learn css layout first. It will make you a better developer and you will need to know it pretty well if you're going to become a developer.
So, since you don't know js, I highly recommend you look into CSS psuedo classes. With it, you can get a navigation list to expand and retract. You will have to just make sure that the :hover includes your links else it will retract once you move off the div because it no longer the active element.
Try this:
<header id="navigation" class="nav nav-pills">
<ul class="menu-content" style="display: none;">
<li class="menu-link active">Engineering</li>
<li class="menu-link">Medical</li>
</ul>
</header>
And at end of body tag paste this:
<script type="text/javascript">
function showhide() {
var nav = document.getElementbyId('navigation');
if(nav.style.display == 'none') {
nav.style.display = 'block';
} else {
nav.style.display = 'none';
}
}
</script>
Or I found 100% open-source example of navigation which you want by Bootstrap on github https://github.com/BlackrockDigital/startbootstrap-logo-nav.
I am editing horizontal navigation bar and need to add description text before the links. My problem that all the text displays after links in the browser. How can I modify css or code to change the location of the text in nav bar? 'DIRECTORIES:' and 'SEARCH:' That I need to display in the browser just before the links, not after
<div id="navcontainer">
<ul id="navlist">
<li id="active">Home</li>
<li>SEARCH: Product Technologies</li>
<li>Trials & Registries</li>
<li> DIRECTORIES: PIs</li>
<li>PI Study Sites</li>
<li>Products
<li>Companies/Sponsors</li>
<li>MIB Custom Alerts</li>
</ul>
Maybe I'm misunderstanding the question, but isn't it as easy as going from this:
<li>SEARCH: Product Technologies</li>
to
<li>label goes hereSEARCH: Product Technologies</li>
Edit: In regards to your comment, why not: <li>Search</li>?
I've looked at this for a number of hours now and can't figure out what is going on. Any help would be much appreciated thank you. It is a very strange problem and rather than going into detail I thought it best to just show you, so please find below a link to problem, currently on the development page of my website.
http://dev.cccit.co.uk/about-us/our-team/
As you can see the active dropdown seems to work along with the header being active in the nav bar as well, however when highlighting the nav select it is making the header appear darker and also not selecting the whole box (missing out the information section). It is probably easier to just see for yourself.... hover over About Us in the nav bar and you will see.
I thought initially this might be css related.... there is a separate css file for color selection which I have changed every option without any affect, and what makes me think this won't help is the strange way in which the whole menu is not changing when you hover. Please find a copy of the code below, bear in mind I'm using php for this section, but it also does the same thing regardless, so I have also changed the header for "Support" so that you can see it is doing the same thing.
I thought someone may have come across the same thing, if you need any more information or files, then please get in touch. Thank you in advance
`div class="container">
<div id="nav-wrapper">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="buttons-container">
</div>
<div class="nav-collapse">
<ul class="nav nav-pills">
<li class="single"><a href="../index.php">HOME
<i></i>
</a>
</li>
<li <?php if($pageName == "About Us")echo " class='dropdown active' ";?> class="dropdown">
<a href='/about-us'>
ABOUT US<i></i>
</a>
<ul class="dropdown-menu">
<li <?php if($pageMetaTitle == "Our Team")echo " class='active' ";?>>Our Team</li>
<li <?php if($pageMetaTitle == "Philosophy")echo " class='active' ";?>>Philosophy</li>
<li <?php if($pageMetaTitle == "FAQs")echo " class='active' ";?>>FAQs</li>
</ul>
</li>
<li class="dropdown active">
<a href="/support">
SUPPORT<i>IT support for business</i>
</a>
<ul class="dropdown-menu">
<li>Support Packages</li>
<li>Service Level Agreements</li>
<li>FAQs</li>
</ul>
</li>
`
Remove the custom background colors you set have for the <i> tags.
Noticing the hover effects on Firebug, the colors don't match the hover effects of the parent element.