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.
Related
While testing JSP files, I'm getting the problem with displaying on the screen because of alignment:
I want the text to be center aligned and not have a configuration heading on top.
Here's my example of JSP file:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%#include file="/includes/head.jsp"%>
<style type="text/css">
body {
background-color: rgba(26, 35, 115, 0.47);
color: #fff;
}
</style>
</head>
<body class="text-center vsc-initialized">
<%#include file="/includes/header.jsp"%>
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
<main role="main" class="inner cover">
<h1 class="cover-heading">Welcome</h1>
<h1 class="cover-heading">to</h1>
<h1 class="cover-heading">Project Management</h1>
<h1 class="cover-heading">System</h1>
</main></div>
<%#include file="/includes/footer.jsp"%>
</body>
</html>
Can someone tell me, please, is it CSS problem or JSP? Do I need to fix something in JSP to get another result of displaying?
If you need some additional information, I'm ready to update this question.
I appreciate any recommendations/ideas here.
The problem was not specifically with css, but in the way of displaying.
After I changed the path and the way of displaying inside application.properties:
instead of:
spring.thymeleaf.prefix=classpath:/templates/jsp/
spring.thymeleaf.suffix=.jsp
to:
spring.mvc.view.prefix=/
spring.mvc.view.suffix=.jsp
and location of JSP files:
instead of the folder:
/resources/templates/jsp/
to the folder:
/webapp/
the problem with alignment while using CSS styles in JSP, was fixed.
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
I'm new in asp.net. And I am having trouble setting my background image. Here's the master page source:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Master.master.cs" Inherits="Master"%>
<!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 runat="server">
<link rel="stylesheet" type="text/css" href="scripts/style.css"/>
<title>Tracker</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="container">
<img src="images/cross-header.gif" alt="Insert Logo Here" width="100%" id="Insert_logo" style="background: #C6D580; display:block;" />
<div class="sidebar1">
<nav>
<ul>
<li>Home</li>
<li>LINK</li>
<li>LINK</li>
<li><span style="font-weight:italic">LINK</span></li>
<li><span style="font-weight:italic">LINK</span></li>
</ul>
</nav>
<p>SOME LABEL</p>
<p>SOME QUOTE HERE</p>
<p></p>
</div>
</div>
<footer>
LINK HERE | LINK HERE |
CONTACT | REGISTER | LOGIN
<address>
Copyright 2012 #JRC
</address>
</footer>
</div>
</form>
</body>
</html>
The image that I am trying to use is located at the folder image. I don't know whats wrong.
And here's what the style.css source:
body
{
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
background-image:url('images/background.jpg');
background-repeat:no-repeat;
background-attachment:scroll;
background-position:repeat-x;
}
I also tried this url('image/background.jpeg') etc. but still fails.
This largely depends on where your css file is located. If it is located in the same folder where the 'image' folder is located, then this looks correct. However, if you css file is in a different directory (say /css) then your link in your css file will not work. Instead, either change the css link to point to a complete link:
background-image: url('http://mysite.com/images/background.jpg)
I am unsure if the '~' link will work in a stylesheet. Since your css is in the scripts folder, you should be able to do this:
background-image: url('../images/background.jpg')
This worked for me :
background-image: url(<%=ResolveClientUrl("~/images/background.jpg")%>);
it is getting confuse, because of your src, it finding it in current_folder+src, but your image folder is in root folder, for that to reach root_folder+src you have to prefix your source with ~/
background-image:url('~/images/background.jpg');
Add master page, then link css script and paste the link of CSS using drag and drop method
I have the following:
<!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>Testing PasteHTML.com</title>
<link type="text/css" href="http://optdev.shellprompt.net/css/jquery-ui-1.8.1.custom.css" rel="stylesheet">
</head>
<body>
<div class="notification" id="notification-message">
<div class="ui-widget">
<div style="padding: 0 .7em;" class="ui-state-error ui-corner-all">
<span style="float: right;cursor:pointer" onclick="$x_Remove('notification-message')" class="ui-icon ui-icon-closethick"></span>
<div id="message" style="float:left">Invalid Login Credentials</div>
</div>
</div>
</div>
</body>
</html>
Both the Message and "X" apear outside of their parent div. How do I place them inside their parent?
Here is a demo http://pastehtml.com/view/bngl4k1th.html and I would like it to look like JQuery UI Theme http://tinyurl.com/dbqg2t Alert message
Just been working through the jQuery UI Theme and I was missing the ui-helper-clearfix class once I added that it worked perfectly.
You can either add overflow:hidden to the parent tag or a new div with the clear:both property, before ending the parent tag.
I am trying to learn 960 grid system. My left body text appears on the right and vice versa for the other text. My intention is to have these two boxes on the same line. Left body text is appearing higher on the page than right body text too.
Any ideas? Confused!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Site name</title>
<link rel="stylesheet" type="text/css" href="./960.css" />
<link rel="stylesheet" type="text/css" href="./styles/main.css" />
</head>
<body>
<div id="skip">
Skip navigation
</div>
<div id="header" class="container_12">
<div id="mainLogo" class="grid_4">
<h1>Page name</h1>
</div>
<div id="testContainer" class="grid_8">
<div id="mainNavigation">
<ul>
<li>nav1</li>
<li>nav2</li>
</ul>
</div>
</div>
</div>
<div id="content" class="container_12">
<div id="contentleft" class="grid_8">
<p>Left body text</p>
</div>
<div id="contentright" class="grid_4">
<p>Right body text</p>
</div>
</div>
<div id="footer" class="container_12">
</div>
</body>
</html>
For me (in Chrome 8), the problem is caused by the margin on the H1. Specifically, Chrome's user agent stylesheet is inserting:
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0px;
}
The extra height to this h1 causes the contentleft div to start directly underneath the testContainer div.
Setting a margin of 0 removes the problem for me in Chrome 8.
Note the instructions for setting up 960.gs mention the use of the reset.css stylesheet:
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />
</head>
which should also remove this problem. It's generally good practice to include a reset stylesheet anyway, so if you're learning about the 960 grid system you should include this stylesheet.
After every Line please add the div with the clear class.
First would be just after you close the div tag for id= mainLogo. And 2nd one would after you close the div tag with id = testcontainer.
I have had the same issue. If you are using multiple containers on the same page you will also need to apply the clear_fix css class to to all but the first as the container class with try to position it's self at the top of the page.
<div id="content" class="container_12 clear_fix">
</div>
If you look at the source of any of the example sites on 960.gs they have done this where they use many containers.