<ul style="padding-left:0px;list-style:none">
<li style="display:inline"> <strong> Home </strong> </li>
<li style="display:inline;margin-left:40px"> <strong>Photos</strong>
<ul style="padding-left:0px">
<li> find more </li>
<li> share more</li>
</ul>
</li>
<li style="display:inline;margin-left:40px"><strong> Edit </strong></li>
<li style="display:inline;margin-left:40px"><strong> Privacy </strong></li>
</ul>
</div>
Could any one tell me where Im doing wrong?why the find more and share more options goes down the home tab but not below the photos tab ? and also any other listed options goes below the home tab but i want them to be placed one below the photos and other below the edit tab .Take a look at these http://jsfiddle.net/karthik_64/HXqeD/4/
I wanted it to be like these
home photos edit Privacy
find more zoom options
share more more
Please help me with these.Any help is greatly appreciated. Thanks niko
what about http://jsfiddle.net/dfNjA/ ?
Replacing
<li style="display:inline;margin-left:40px"> <strong>Photos</strong>
With
<li style="display:inline-block;margin-left:40px"> <strong>Photos</strong>
will do the trick...
Related
When I change the path to the correct routes in the url bar I get where I need to go and everything displays correctly. The actual router links are not taking me anywhere.
I have NgModule, Routes and RouterModule all imported properly in my only module. I have my components imported properly. router-outlet is properly placed. I have base href="/" in the head of my index.html.
Here is part of my html:
<section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
[ngClass]="{'show':displaySideNav}">
<nav class="nav">
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
</nav>
</section>
I expect to be directed to the correct path when I click on the link. Nothing happens when I do so.
Try as mentioned in docs
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
....
</ul>
After a lot of trail and error yesterday I realized the issue came because a lot of the code had been given to me as boilerplate code that had been manually upgraded from Angular6 to 8. I created a new project in the cli from scratch and copied over my components and had no issues.
I'm just learning html to build a team site at work. I'm getting the hang of it pretty easily, but I'm having an issue with subfolders not showing in a dropdown. The html is linked to css for a design, but I know the problem isn't with the css.
I'm not exactly sure what to try as I mentioned I am just learning how to code the html.
<li class="top"><span class="down">Folders</span>
<ul class="hsolinks">
<li><span class="down">HIPAA Security Office</span></li>
<ul class="hsolinks">
<li>Access</li>
<li>Audit</li>
<li>LAN File Access</li>
<li>Training</li>
</ul>
The expected result is that the folders "ACCESS", "AUDIT", "LAN FILE ACCESS", and "TRAINING" would show under the HIPAA Security Office in a css dropdown. However, when I place the code into SharePoint it only shows an arrow, but no folders in the dropdown under HIPAA Security Office.
Also, there is additional code under this which is why I have only closed one ul tag. I hope I'm clear with what I'm trying to do!
The <li> element always needs to be surrounded by a <ul> element. But you can have a <ul> inside an <li> if needed. Something like so will work
<ul>
<li class="top">
<a href="#nogo4" id="hsolinks" class="top_link">
<span class="down">Folders</span>
</a>
<ul class="hsolinks">
<li>
<a href="#" target="_parent" class="hsolinksfly">
<span class="down">HIPAA Security Office</span>
</a>
<ul class="hsolinks">
<li>
Access
</li>
<li>
Audit
</li>
<li>
LAN File Access
</li>
<li>
Training
</li>
</ul>
</li>
</ul>
</li>
</ul>
For more information and examples about the <ul> <li> elements read: ul: The Unordered List element
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;}
This is the block of code I am having trouble with on a website. From all the looking I have done the <li> and </li> should work just fine. However when I run it on the site it causes this list to be linked to the next list as if I never closed the list tag. If I remove everything and bring the </li> to right behind the </a> it works fine, but if say I put a space or press enter it acts as if the </li> does not exist.
<li>contact
<ul class = "contact">
<li>email</li>
<li>phone</li>
<li>skype</li>
<li>twitter</li>
<li>facebook</li>
</ul>
</li>
<li> home
</li>
even something as simple as this the </li> gets ignored.
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.