When I click on my links, they do not go anywhere; I clicked on "about Us" , nothing. I looked at Lucas Green's answer to anc1revv, but I'm still drawing a blank. I appreciate any ideas. Also the links do not turn yellow when I hover. I know it's something minor.
Sorry, I meant turn orange when I hover.
Thank you
<body>
<div id="container">
<div id="header">
<img class="logo" src="images/green-light.jpg" alt="Green Light Data Technologies" />
<img class="header-star-left" src="images/arrow2.jpg" alt="All Systems Go" />
<img class="header-star-rt" src="images/arrow2.jpg" alt="All Systems Go" />
<h1>Green Light Data Technologies</h1>
<h2>Keeping All Systems GO!</h2>
</div><!--/#header-->
<div id="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div><!--/#nav-->
<div id="content-home">
<h1>Welcome to Green Light Data Technologies!</h1>
<p>Thank you for visiting our site. Here you will find the latest cabling products, accessories and expert advise on their use. Our employees are well trained, product knowledgeable and are pleased to assist you.
Our website is designed to be easy to navigate and easy to learn more about Green Light product lines that may be of interest to you.
We are committed to supplying excellent electronic components that will meet your needs and to the development of unique future electronic components that will open new vistas in electronics. We actively pursue the improvement of existing products, the strengthening of newly developed products.</p>
</div><!--/#content-->
</div><!--/#container-->
</body>
</html>
/* MAIN NAVIGATION
----------------------------------- */
#nav {
float: left;
width: 900px;
height: 53px;
padding: 0;
margin: 0;
}
#nav ul {
list-style: none;
padding: 0;
margin: 205px;
margin-left: 1em;
}
#nav ul li {
float: left;
line-height: 53px;
padding: 0;
margin: 0 50px 0 0;
}
#nav ul li a {
font-family: arial, helvetica, sans-serif;
font-size: 1.4em;
font-weight: bold;
/*color: #fff;*/
color: #fff;
text-decoration: none;
}
#nav ul li a:hover {
position: relative;
bottom: -5px;
background-color: orange;
border-bottom: 2px dotted #fff;
}
Its probably your browser's popup blocker preventing the _blank link opening a new popup. look at the top (for firefox and chrome) or bottom (for IE) for notifications to allow popup.
orange hover links are working as expected.
check this JSFiddle I added this:
body {
background-color: #999999;
}
so your menu is visible.
Related
Sorry for the noob question, but I am trying to write the code for my first website. You can find the 'finished product' here and basically I am trying to write this site I made with Wix from scratch, for my learning. I have the bulk of my markup but I am currently running into trouble with the styling.
The question is how do I style the heading so it's one block of purple and the header still has the break? Currently my header looks like:
<header><mark style="background-color: #edc5f6">Art + Feminism
for<br>Medical Learners</mark></header>
I'd like the full block of purple going across with no break in the highlight. How would you approach this problem?
I think it's a good idea to read some html and css tutorials and to inspect some websites with the developer tools of the browser (also websites, that are not made with wix!).
You could edit your code like this:
<style>
.content--upper-border {
height: 5px;
background: purple;
}
.content--wrapper {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.header--headline {
display: inline-block;
background-color: #edc5f6;
padding-right: 3rem;
font-size: 74px;
font-family: helvetica, sans-serif;
font-weight: 1000;
}
.header--seperator {
height: 74px;
border-bottom: 5px solid black;
}
.is--lifted {
transform: translate(0, -1px);
}
.has--no-margin {
margin: 0;
}
</style>
<div class="content--upper-border"></div>
<div class="content--wrapper">
<article>
<header>
<h1 class="has--no-margin">
<div>
<span class="header--headline">
Art + Feminism
</span>
</div>
<div class="is--lifted">
<span class="header--headline">
for Medical Learners
</span>
</div>
</h1>
<div class="header--seperator">
</div>
</header>
</article>
</div>
I've got an issue and can't solve it easily because appears only in one case : when i'm on my page and i switch from landscape to portrait, on iOS.
My app is a Phonegap app using Angular and plugin device-orientation to make it working with my responsive CSS.
All is fine, except this part.
I've got an horizontal menu and i wan't user able to scroll it if there is overflow.
Here is my code :
CSS
nav.inline {
background: #e4eeef;
outline: 1px solid #e4eeef; /* Safari bug rendering */
overflow: hidden;
overflow-x: scroll;
text-transform: uppercase;
-webkit-overflow-scrolling: touch;
}
nav.inline ul {
list-style: none;
min-width: 102%;
padding: 0 2%;
width: 102%;
white-space: nowrap;
}
nav.inline ul li {
display: inline-block;
white-space: nowrap;
}
nav.inline ul a {
border-bottom: 4px solid transparent;
border-top: 4px solid transparent;
color: #4b8c95;
display: inline-block;
font-size: 1.7em;
font-weight: bold;
line-height: 80px;
margin: 0 0.7em;
}
nav.inline ul a.active {
border-bottom: 4px solid #4b8c95;
}
HTML
<nav class="fullwidth inline" ng-include="'partials/nav.html'"></nav>
And the partial associated
<ul data-snap-ignore="true">
<li><a ng-click="setTab('link1')">Link 1</a></li>
<li><a ng-click="setTab('link2')">Link 2</a></li>
...
</ul>
You can see "data-snap-ignore" because i'm using angular-snap.js for an other menu (left menu) and i don't wan't him to appear when i'm sliding this one (this part is working well).
Thanks for helping ;)
Yep, this sucks. It's a bug, AFAICT.
So far the only mechanism I've found to fix it is to toggle display from none to block on the container, like so:
var navElement = document.getElementsByTagName("nav")[0];
navElement.style.display = "none";
setTimeout ( function() { navElement.style.display = "block"; }, 0 );
Which *looks * horrible, in my opinion, but it does restore the scrolling ability.
Since, as far as I can tell, it never breaks if the elements within force the container to scroll, it should work to ensure that the container always scrolls, even if by a pixel or two.
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?
I'm having some difficulty getting my website to display properly when viewed on the iPhone and iPad. The website displays properly when viewed on every desktop browser I've tried (safari, chrome, firefox), however, on the iPhone/iPad there is a tiny gap/space between the IMG and right box.
It works fine in Firefox. What is the problem?
Here's an inline link to JsFiddle.
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/>
<div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
#wrapper {
border-top: 8px solid #457b91;
max-width: 488px;
margin: 0 auto;
overflow: hidden;
}
#wrapper img {
width: 32%;
float: left;
}
#subject {
background-color: green;
float: right;
width: 68%;
padding-bottom: 32%;
position: relative;
}
#subject_wrapper {
padding-top: 12%;
position: absolute;
height: 100%;
width: 100%;
}
#subject span {
font-family: Thonburi;
font-size: 34px;
color: #ffffff;
display: block;
padding: 0 20%;
}
#subject span:nth-child(2) {
font-size: 18px;
line-height: 8px;
}
I don't have an iPd or iPhone to hand to check this, but try commenting out the space between your elements, thus:
<div id="wrapper">
<img src="http://dummyimage.com/155x155/000/fff"/><!--
--><div id="subject">
<div id="subject_wrapper">
<span>Im span</span>
<span>im spanfdnf</span>
</div>
</div>
</div>
It's a pretty ridiculous fix, but it work for inline block elements, like menus made up of LIs.
I am currently struggling with sIFR and a:hover.
My problem site is hosted at http://irene.huditsch.info
I have the following HTML code:
<body id="irene-huditsch-info">
<div id="header">
<h1>Irene Huditsch</h1>
<div id="top-nav">
<ul>
<li id="impressum">
Impressum
</li>
<li id="kontakt">
Kontakt
</li>
</ul>
</div>
...
My sIFR-config.js looks like:
sIFR.replace(braganza, {
selector: 'div#top-nav a',
css: '.sIFR-root { background-color: transparent; color: #FFFFFF; line-height: 13px; font-size: 11px; text-decoration: underline; cursor: pointer; } .sIFR-root:hover { color: #592b02; }',
wmode: 'transparent'
});
But the hover doesn't take effect. I tried different solution with no success either.
When I write
sIFR.replace(braganza, {
selector: 'div#top-nav li',
css: 'a { background-color: transparent; color: #FFFFFF; line-height: 13px; font-size: 11px; text-decoration: underline; cursor: pointer; } a:hover { color: #592b02; }',
wmode: 'transparent'
});
(which seems logical to me), the list items are not rendered at all.
Could you please give me an advice how to do it correctly with the structure given?
Thanks,
Roman
Replacing the a directly will not work, since the Flash movie will only contain the link text and not the link itself.
Your second example should work, assuming you've removed the first attempt, however I see that on the page you're using .sIFR-root a as the CSS selector. That might be confusing Flash a little. Also, the background-color, line-height and cursor properties are not supported for a elements.