So, I've got a CSS drop down menu with links, when you click on a link, the page loads in an iframe placed below the css menu. I have two problems.
1) In Google Chrome, there are think gray lines that appear in the iFrame when scrolling up, and there are more and they are more condensed when you actually drag the scroll bar up.
2) Some of the links are to PDF files, when those load into the iFrame, they display over the top of pieces of the CSS menu.
Any ideas? I've found a few articles with similar issues for the thin lines, but none of the solutions I've seen seem to be working.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AHCS - eLearning Portal - Caregiver Welcome</title>
<link rel="stylesheet" type="text/css" href="portal.css" />
</head>
<body>
<div id="cgframeinner">
<div id="reflibcontainer">
<div id="reflibhead">
<h2>Reference Library</h2>
</div>
<div id="reflibnav">
<span style="display:block;"><ul id="css3menu1" class="topmenu">
<li class="toproot"><span>COPD</span>
<ul>
<li>COPD Training Videos</li>
<li>COPD Foundation</li>
<li>COPD Fact Sheet</li>
<li>Breathing Better With COPD</li>
<li>COPD Glossary of Terms</li>
<li>What is COPD?</li>
</ul></li>
<li class="toproot"><span>CHF</span>
<ul>
<li>American Heart Association</li>
<li>WebMD CHF Guide</li>
</ul></li>
<li class="topmenu">Pneumonia</li>
<li class="topmenu">Fall Risk</li>
</ul></span>
</div>
<iframe src="" width="500px" height="350px" name="frame2"></iframe>
</div>
</div>
</body>
</html>
Related
I am receiving an
"Object not found!
The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.
If you think this is a server error, please contact the webmaster."
which is pretty obverse to me. problem is when I use on all the page where I need the navigation bar to work on. some of my links ty to go to http://localhost/xenxarragroup/site_03/site_03/gallary/index.php
which should really be going to
http://localhost/xenxarragroup/site_03/gallary/index.php.
I get this problem say when i click
from home say my Gallery page then to Design room I get "Object not found!"part which leadsa me back to this
http://localhost/xenxarragroup/site_03/site_03/gallary/index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>XarraLures - Home</title>
<link rel="shortcut icon" href="im/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<body>
<!--class="pressed"-->
<div class="container">
<div class="header" id="top">
<div class="menuBar" id="menuBar">
<!--<input type="checkbox" id="css3menu-switcher" class="c3m-switch-input">-->
<ul id="css3menu1" class="topmenu">
<li class="topfirst"><a href="../index.php" title="Home"
target="_parent" style="height:18px;line-height:18px;">Home</a></li>
<li class="topmenu"><a href="../site_03/gallary/index.php" title="Show Room" target="_parent" style="height:18px;line-height:18px;">Show
Room</a></li>
<li class="topmenu">Design Room</li>
<li class="topmenu"><a href="#" target="_parent"
style="height:18px;line-height:18px;">Shop</a></li>
<li class="topmenu"><a href="#" target="_parent"
style="height:18px;line-height:18px;">Enquires</a></li>
<li class="topmenu">Comments</li>
<li class="toplast">About Us</li>
</ul>s
</div>
</DIV>
</div>
</body>
</html>
the only thing I tried is to change the allocations of the directory to which it it point to
I'm having an issue with getting the icons to display while using MaterializeCSS. I'm using the bare bones "Getting Started" from the documentation but for whatever reason icons refuse to show up. Below is the code I'm using
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<ul class="hide-on-med-and-down">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<ul id="slide-out" class="side-nav fixed">
<li class="bold">First Sidebar Link</li>
<li class="bold">Second Sidebar Link</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<i class="mdi-navigation-menu"></i>
</nav>
<!--Import jQuery before materialize.js-->
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script>
$('.button-collapse').sideNav({
menuWidth: 300, // Default is 240
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});
$('.collapsible').collapsible();
</script>
</body>
</html>
All this code is trying to do is display a navbar, it was pulled directly from the documentation.
The hamburger menu doesn't appear when the browser is resized
The dropdown arrow doesn't appear beside the dropdown menu item.
I feel like it's something stupid that I'm missing but I've been looking at it for 2 hours and my brain is melted. Any help would be appreciated.
EDIT: Here's the updated code for the dropdown arrow too:
<i class="material-icons right">arrow_drop_down</i>
I ran into this issue too and wondered where my hamburger icon went!
Unfortunately, a lot of their documentation hasn't been refreshed, so the code you are using is a bit outdated.
Change this:
<i class="mdi-navigation-menu"></i>
to this:
<i class="material-icons">menu</i>
and you should see the icon. If you check their source code, you'll see that even their site uses the updated code that's different from their docs:
CHANGE HTTP TO HTTPS in linking font library. It worked for me.
I have created a navigation menu that I have been inserting into my pages using the "object" tag. Whenever I click a link on the navigation menu, it takes me to the correct page but it is inside the object tag. The rest of the page remains the same including the original address in the address bar. I cannot seem to find anyone else having the same issue as I am.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<link rel="stylesheet" href="/css/body.css" />
<body>
<object id="navigation" type="text/html" data="/includes/inc.nav.php"></object>
<div id='page'>
<div id='pageTitle'>Knowledge Base</div>
<p>Here is the body</p>
</div>
</body>
</html>
inc.nav.php
<link rel="stylesheet" href="/css/navbar.css" />
<ul id="menu">
<li>Tickets
<ul>
<li>BLAH</li>
<li>Haha</li>
<li>Woohoo</li>
</ul>
</li>
<li>Equipment
<ul>
<li>Trucks</li>
</ul>
</li>
<li>Reports
<ul>
<li>Reports</li>
<li>User List</li>
</ul>
</li>
<li>Knowledge Base</li>
<li>Logout</li>
</ul>
I'm sure I am missing something simple. Any help would be appreciated.
Found information on the answer here
Links should look like this:
<li><a target="_parent" href="/vision/tickets.php">BLAH</a></li>
Hi guys so a site I've been working on is acting up and has randomly re-positioined itself wierdly on the top bar and I have no idea why. I thought everything was fine before, however recently I saw the site and it just so happened that theres a wierd space at the top of the page between the nav bar and the window url. Can someone inspect it and help me figure out whats causing this and if there would be a quick or easy fix. The site is www.omegadesignla.com
and any help would be appreciated, thanks.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Omega Design | LA</title>
<meta name="description" content="Web development and printing services serving the greater los angeles area">
<meta name="keywords" content="web development, printing, graphics design, los angeles, santa clarita">
<link rel="stylesheet" href="stylesheets/app.css" />
<link rel="stylesheet" href="stylesheets/foundation-icons.css" />
<link rel="stylesheet" href="css/normalize.css" />
</head>
<body>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<span><img class="logo" src="img/logofinal.png"><span>
</li>
<li class="toggle-topbar menu-icon">
Menu
</li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li>About us</li>
<li>Contact us</li>
<li class="has-dropdown">
Services
<ul class="dropdown">
<li>Print Media</li>
<li>Web Development</li>
<!-- <li>Promotional Items</li> -->
<!-- <li class="active">Active link in dropdown</li> -->
</ul>
</li>
</ul>
</section>
</nav>
<div class="container">
<header>
There's a line " " right after the body tag. Remove it and this should reposition the navigation bar correctly.
I just realized that you can only see this if you 'inspect element' in development tools.
If you can edit the page's source, make sure that the <nav class="top-bar" data-topbar> comes right after <body>. Right now, there is a blank line (line 16).
Solve this problem try this
body{
font-size: 0;
}
I have a problem with Twitter Bootstrap's class="nav."
When I include "data-toggle='tab'", none of my menu items function.
(BTW: If I remove data-toggle, the first option does not work, but the rest will i.e. if data-toggle is removed, Google does NOT work, but Bing and Bing2 will, and Yahoo won't work, but CNN and Weather do)
This is the code:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
</head>
<body>
<ul id="myTab" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Google</li>
<li>Bing</li>
<li>Bing2</li>
<li class="dropdown">
More choices <b class="caret"></b>
<ul class="dropdown-menu">
<li>Yahoo</li>
<li>CNN</li>
<li>Weather</li> <!-- NOTE data-toggle removed -->
</ul>
</li>
</ul>
</body>
</html>
Here is a working example: http://jsbin.com/ujujub/1/edit
Three things:
Remember to include bootstrap-tab.js
Write a script responsible for handling navigation from tab to tab
The links should not point directly to the content of your sites, but rather to the the ID of divs that wrap the content of your sites.