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.
Related
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 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 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.
How can be image center horizontally inside smaller or bigger div, (image is variable and can be bigger then his div wrapper or smaller)?
Exist Javascript solution, but i looking for css solution.
The sample code that not working: (html should be not changed only css)
<!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" xml:lang="en" lang="en">
<head>
<title>my test</title>
</head>
<body>
<div id="wrapper" style="width:300px;margin:0 auto;">
<div id="image_content" style="margin:0 auto;">
<img src="image_small_then_300_or_bigger.jpg" />
</div>
</div>
</body>
</html>
Thanks
You want to center align the image_content within the wrapper?
text-align
<div id="wrapper" style="width:300px;margin:0 auto;text-align:center;">
background-image
<div id="wrapper" style="width:300px;margin:0 auto;background:transparent url('image_small_then_300_or_bigger.jpg') 50% 50%;"> good call #gov
I am trying to enclose two DIV elements, inner-1 & inner-2, (dotted red border) inside a wrapper DIV (solid green border) but the wrapper DIV element does not expand to enclose the inner DIVs.
What am I doing wrong?
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>
<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;">
content inside "wrapper" div
<div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
content <br />
inside <br />
inner-1 div
</div>
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
</div>
</body>
</html>
Rendered HTML
Since you're floating both #inner-1 and #inner-2, you'll need a clear fix. Basically, setting overflow: auto on the parent (#wrapper) should do the trick.
.
.
.
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
<br style="clear:both" />
</div>
.
.
.
Try that.
You can set the margins for the <br /> so that it is hardly visible too.
It is the floats that are giving you the problem.
this might work for you:
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> Nested divs </title>
</head>
<body>
<div id="wrapper" style="margin-left:auto; margin-right:auto; border:solid #669933;">
content inside "wrapper" div
<div id="inner-1" style="float:left; width:49%; border:dotted #CC3300;">
content <br />
inside <br />
inner-1 div
</div>
<div id="inner-2" style="float:left; width:49%; border:dotted #CC3300;">
content inside inner-2 div
</div>
<div style="clear: both"></div>
</div>
</body>
</html>
Added "div style="clear: both">" at the bottom of the containing DIV.
It might also be worth noting that there are a few different methods of "clearing floats" out there. This one works pretty well for me and only involves adding a single class to the parent element:
.clearfix:after{content:"\0020";display:block;height:0;clear:both;
visibility:hidden;overflow:hidden;}
As has been said already you need some method of forcing the containing div to realize the floating divs have taken up space. Commonly known as clearing a float, there are quite a few discussions on the topic around the internet.
This post at pathf.com is one of the more popular to use. When you read the article be sure to read all the comments as well.