Bear with me, i am very new to web programming.
here is my simple code:
<?xml version='1.0' encoding='UTF-8' ?>
<!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>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Carlton Banks</title>
</head>
<body>
<h1>CLICK ON CARLTONS HEAD!</h1>
<a href="http://youtu.be/zS1cLOIxsQ8" target="_blank">
<img src="hey.jpg" alt="A picture" style="width:300px">
</a>
</body>
</html>
Here is the extremly simple css file:
body{
h1: green
}
When opening the site on a browsers nothing at all shows up, just this error message:
This page contains the following errors:
error on line 7 at column 10: Opening and ending tag mismatch: link line 0 and head
Below is a rendering of the page up to the first error.
As you are using XHTML, all tags needs to be closed.
The link tag should have a slash at the end to close it:
<link rel="stylesheet" type="text/css" href="style.css" />
The same for the image tag:
<img src="hey.jpg" alt="A picture" style="width:300px" />
The CSS is incorrect. I think that this is what you are trying to do:
body h1 {
color: green;
}
Related
I am trying to add an alternate stylesheet to my XHTML page, but it doesn't work. I have done it with HTML, which works perfectly, but XHTML just doesn't do what I want.
The code looks like this:
<head>
<title>some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/main.css" title="normal"/>
<link rel="alternate stylesheet" type="text/css" href="css/blue.css" title="blue"/>
</head>
<body>
<div class="header">
<div class="styles">
<a id="normal" href="#" onclick="setActiveStyleSheet('normal');"><img src="tomain.png" width="20" alt="change style"/></a>
<a id="blue" href="#" onclick="setActiveStyleSheet('blue');"><img src="toblue.png" width="20" alt="change style"/></a>
</div>
</div>
<--!other stuff-->
</body>
Of course in the CSS file I added .header next to the header tag, etc. Everything else works fine for the HTML and XHTML with the same CSS files, I just can't change styles so I think the problem is with the XHTML, and not the CSS.
I've created a basic page, from a template I had for the rest of my site, but pulled most of it apart to make the page look "not designed". It only has an unordered list with a short paragraph fixed to the top and a logo float right. It works in system preview, but when uploaded to the server it loses all the CSS styling.
This is the html:
#title {
width:400px;
position:fixed;
}
#icon {
position:relative;
float:right;
}
h5 {
font-size:25px;
color:#ff6682;
line-height:1.35em;
}
a:link {
color:#253b84;
}
<!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>/other</title>
<link href="assets/scripts/AMK_Website.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="icon">
<img src="assets/images/icon/icon.gif" width="80" height="106" alt=""/>
</div>
<div id="title">
<h5> /other is a collection of personal work in design photography, as
well as work that inspires me. To get back to
the important stuff, click here
</h5>
</div>
<div id="photolist">
<ul>
<li><img src="assets/images/other/1.jpg" width="768" height="1024"
alt=""/></li>
</ul>
</div>
</body>
</html>
Help appreciated!
Sounds like your css isn't where the html link expects it to be. If you're pointing to a file in assets/, make sure that folder is in the same directory as your html file, and make sure it contains that specific css file.
I'm using HTML_EXTRA_STYLESHEET option to override default css rules. I can easily override some rules like span.mlabel or .SelectItem but .SREntry can't be overriden for some reason. In Firebug it's like my new rule never existed.
Css rules that I'm using:
.SREntry {
font-size: 10pt;
}
span.mlabel {
font-size: 11pt;
}
.SelectItem {
font-size: 10pt;
}
.SREntry is responsible for formatting search box results. It's defined in search.css and it seems that no rule from this file can be overriden.
Why is that I can override rules defined in doxygen.css but not in search.css?
[EDIT] Link to generated documentation. It uses a custom css file Custom.css with described above rules.
If you look closer to html that generated by search.js at runtime you will find out that
<iframe id="MSearchResults"> block contains another section of html document with
its own <head> section.
That is why you can't override this style.
<!--
HTML header for doxygen 1.8.7
-->
<!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" style="cursor: auto ! important;">
<head>
... removed some html here ...
<script src="search/search.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="search/search.css"></link>
<link type="text/css" rel="stylesheet" href="custom.css"></link>
</head>
<body>
<div id="top"></div>
<div id="MSearchSelectWindow" onkeydown="return searchBox.OnSearchSelectKey(event)" onmouseout="return searchBox.OnSearchSelectHide()" onmouseover="return searchBox.OnSearchSelectShow()"></div>
<!--
iframe showing the search results (closed by defa…
-->
<div id="MSearchResultsWindow" style="display: block; top: 182px; left: 236px;">
<iframe id="MSearchResults" frameborder="0" name="MSearchResults" src="javascript:void(0)">
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta content="text/xhtml;charset=UTF-8" http-equiv="Content-Type"></meta>
<meta content="Doxygen 1.8.7" name="generator"></meta>
<link href="search.css" type="text/css" rel="stylesheet"></link>
<script src="all_1.js" type="text/javascript"></script>
<script src="search.js" type="text/javascript"></script>
</head>
<body class="SRPage">
... and so on...
You can fix this with either modifying search.css somehow or using
this kind of code in custom js file with MutationObserver or setInterval based solution. Notice the ../ in path, you need to go one level up to find correct css.
var cssLink = "../custom.css"
var searchDocument = document.getElementById("MSearchResults")
.contentWindow.document;
var head = searchDocument.getElementsByTagName("head")[0];
var customStyle = searchDocument.createElement("link");
customStyle.setAttribute("href", cssLink);
customStyle.setAttribute("type", "text/css");
customStyle.setAttribute("rel", "stylesheet");
head.appendChild(customStyle);
I've got a MySQL database and have a few Google charts querying the data.
I'm looking for a way to display the charts in a neater way. I currently have each chart on a separate page, so I'm wondering if an Iframe is the way to go?
I'm hoping to click on a vertical list menu and see the different charts populate the Iframe.
This works, but I have some problems:
placing the Iframe to the right of the menu at the top of the page,
the menu's css also wont work,
a new page also fires, when I click of the menu.
<!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>
<title>Graph Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
<script src="./js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body>
<h1>Graph navigation page</h1>
<hr />
<iframe frameborder="0" width="65%" height="800" style="float:centre" src="http://mysite" name="graphs" id="graphs">
<p>iframes are not supported by your browser.</p>
</iframe><br />
<ul>
<li>Graph1</li>
<li>Graph2</li>
</ul>
Just use float: right
<iframe frameborder="0" width="65%" height="800" style="float:right" src="http://mysite" name="graphs" id="graphs">
<p>iframes are not supported by your browser.</p>
</iframe><br />
I would like to apply jQueryUI's tooltip to elements in the TinyMCE editor, however, they do not appear using FF, and are buggy using IE and Chrome. I've experimented applying jQueryUI's tooltip to elements in an iframe, and get similar results. My script is below, and a demo is at http://jsbin.com/abEkOnO/1/ (note that the iframe JS had to be disabled as it causes a proxy error using jsbin). I think the tooltips are being created, however, maybe the CSS is relative to the iframe and not the document. I've also experimented by creating my own tooltip plugin (http://jsbin.com/AzaKARe/1/), but also get funky results.
How can I use tooltips on elements in the TinyMCE editor?
<!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=ISO-8859-1" />
<title>IFrame and tooltips</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({'selector': "#tinymce"});
$(document).ready(function(){
$('.tooltip').tooltip();
$('#click').click(function(){
console.log($('#iframeID').contents().find('.tooltip'));
$('#iframeID').contents().find('.tooltip').tooltip();
$('#tinymce').html('<div class="tooltip" title="Some Div4">Some DIV4</div><div class="tooltip" title="Some Div5">Some DIV5</div><div class="tooltip" title="Some Div6">Some DIV6</div>');
var t=tinymce.editors['tinymce'];
t.load();
console.log($(t.getBody()).find('div.tooltip'));
$(t.getBody()).find('div.tooltip').tooltip();
});
});
</script>
</head>
<body>
<button id='click'>Click</button>
<iframe src="iframe_page1.html" id="iframeID"></iframe>
<div class="tooltip" title="Some Div1">Some DIV1</div>
<div class="tooltip" title="Some Div2">Some DIV2</div>
<div class="tooltip" title="Some Div3">Some DIV3</div>
<div id="tinymce"></div>
</html>
iframe_page1.html
<!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=ISO-8859-1" />
<title>Bind</title>
<style type="text/css">
.toolTip {width:100px;}
.myTooTip {
z-index:99999;
border:1px solid #CECECE;
background:white;
padding:10px;
display:none;
color:black;
}
</style>
</head>
<body>
<div class="tooltip" title="Some Div7">Some DIV7</div>
<div class="tooltip" title="Some Div8">Some DIV8</div>
<div class="tooltip" title="Some Div9">Some DIV9</div>
</body>
</html>
In your case the e.pageY was problem,
as tinymce creates a iframe, the e.pageY is set to 0 from current location(of tinymce),
So the tool tip again goes to Y=respective to mce position. You need to handle it manually,
I have updated the JSbin with some tweaks,
this will solve the issue,
although you have to do some small tweaks, for 100% accuracy
Edit : Updated JSBin with JQuery UI,
Undated Link of JSBin
This works fine without any problem on my side, the problem was we were calling the same function twice and in iframe the mouseOut event is not passed to its parent window, that's why tooltip generated was not getting closed.
I have changing codes and this is simple tooltip that works same as in the iframe above. in example.
I have just removed redundant instance of the tooltip by changing class name :)
I hope this will do finally