could anyone please help me with a problem I have been having with a 100% - 350px layout for embedding vimeo video?
It seems like the right-margin property is getting ignored here, and the layout is overflowing to the right. I'm hoping this a simple mistake, but seems like I've tried everything. I'm running out of time.
Help would be really appreciated.
css:
#container {
position:absolute;
width:100%;
height:100%;
}
#content {
width:100%;
height:100%;
margin-left:350px;
margin-right:350px;
}
.video {
padding:0 0 0 0;
height:100%;
width:100%;
}
html (the vimeo embed code has been reformatted for validation):
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
<div style="clear:both; height:1px; line-height:0"> </div>
</div>
</div>
EDIT:
Another solution I have tried:
<!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" />
<style>
#container {
position:absolute;
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
}
.video {
padding:0 0 0 0;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
</div>
</div>
</body>
</html>
</head>
Edit: I'm using the solution for this type of positioning from this thread: How can I do width = 100% - 100px in CSS?
Here is a jQuery solution that works with multiple doctypes and in Chrome, Firefox and IE. IE will possibly show a blank page, but this is a Vimeo issue and can be solved by updating the IE flash plugin as discussed here and very extensively here.
I have also placed the code online.
<!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>
<title>Vimeo test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script language="JavaScript" type="text/javascript">
jQuery(function($){
$(window).load(function() {
var h = $(window).height() * 0.9;
var w = $("#content").width();
$(".video").width(w);
$(".video").height(h);
$("#content").css('visibility', 'visible');
});
});
</script>
<style type="text/css">
#container {
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
visibility: hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<object class="video" width="400" height="225">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />
<embed class="video" src="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="225"></embed>
</object>
</div>
</div>
</body>
</html>
The width of an element does not necessarily prevent elements contained within it from overflowing that element.
If you wish things outside your DIV not to display, set its overflow to hidden: overflow: hidden.
I'm not even sure if I'm understanding your issue properly, to be honest. A clarification of what you're actually hoping to achieve might be helpful if I'm complete misreading you.
EDIT BELOW
Your approach is a bit strange, try this:
<div id="container">
<object> ... </object>
</div>
<style>
#container { position: absolute; right: 5px; }
</style>
Additionally, you're trying to size the video with CSS -- CSS isn't going to have any effect on an object. If you were to change, say, to video { width: 50px; } it would not make your video 50px wide.
Thankyou very much Erik and littlegreen. I have found the problem. It seems that you can't use a DOCTYPE if you want to do this. I just took out the Doctype and xmlns it worked. Wierd but effective.
In order to make the video smaller to stop at the right hand side of the screen (fit to the screen), you'll have to drop some of the 100% attributes and make a few more edits. Here's the new CSS and HTML.
CSS
#container {
width:100%;
height:100%;
}
#content {
margin-left: 350px;
margin-right: 0px;
}
.video {
padding:0 0 0 0;
width:100%;
height:90%;
}
HTML
<div id="container">
<div id="content">
<object class="video" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=8808526&server=vimeo.com&show_title=0&show_byline=0&show_portrait=0&color=ffffff">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="color" value="ffffff" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=8808526" />
</object>
</div>
</div>
EDIT As Emile rightly pointed out, for some reason this only works if you don't set a DOCTYPE for your document. Otherwise it works in Chrome, but Firefox shows a blank screen. After some testing I concluded that this has to do with the percentage widths given for the video object. Firefox doesn't support that.
As Vimeo (unlike YouTube) doesn't allow URL parameters to be passed for determining the video size, and percentage widths apparently have quirks, my only other suggestion would be to specify a fixed width and height on the video object (like on this page, see the page source), set the visibility of the content DIV to invisible, use a Javascript or jQuery function to determine the page width, change the width/height attributes of the OBJECT tag accordingly, and set the object to visible again. It's not very neat, but it'll probably work, and it would be independent of doctype.
EDIT I have implemented this solution, and it works in all browsers. See my separate new answer about it.
Related
I am using basiclightbox to show text from an external txt file.
It works, but I can't apply styles and size to the result.
I've done this:
document.querySelector('button.html1001').onclick = () => {
basicLightbox.create(`
</div>
<h1><p>
<object data="test.txt"></object>
</p></h1>
</div>
`).show()
}
and
<h1><p>
<object data="test.txt"></object>
</p></h1>
and tried including styles in the text file, but this is the result of the popup:
<h1><p> <br><br><br>
<br>
Testing text for testing
<br>
</p><h1>
It pops up with a black background and no style applies to the text.
Anyone have any ideas how to apply styles and background color to this?
Thanks in advance.
Figured it out.
$(document).ready(function() {
$("#obj").width($("#cont").width());
$("#obj").height($("#cont").height());
});
div#cont {
height: 600px;
width: 900px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont">
<object id="obj" width="400" height="400" data="test.html">
</object>
<div>
Figured it out, was a style problem was problem with the lightbox code.
Have the code working with just:
<object data="test.html">
But I still can't figure out how to change the size of the popup box.
Tried a bunch of stuff:
<object data="test.html" width="400" height="400">
and
<div id="cont">
<object id="obj" width="" height="" data="test.html"></object>
<div>
and
<div>
<object width="600" height="900" data="test.html"></object>
<div>
CSS
div {
height:600px;
width:900px;
}
and some others, no luck.
I am not sure if this is a material related code or not.
But if you see this code, you'll find that the width of the i element is wider than that displayed by the red border. You cannot navigate to the beginning of the text input as it still points to the material icon, help_circle.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<style type="text/css">
div.tipped-small
{
margin-top:-10px;
margin-right:10px;
display:inline-block;
width:15px;
height:15px;
padding:5px;
border-radius:50%;
cursor:pointer;
position:relative;
overflow:none;
}
div.tipped-small i
{
width:15px;
color:#4857BA;
font-size:15px;
line-height:15px;
cursor:pointer;
position:absolute;
overflow:none;
}
</style>
</head>
<body>
<div id="container">
<div class="tipped-small">
<i class="material-icons" style="border:1px solid red">help_circle</i>
</div>
<input type="text" style="height:15px;border:1px solid red"/>
</div>
</body>
</html>
https://codepen.io/anjanesh/pen/LqYXZe
How do I get the i tag to be only 15px ?
Is it possible to create a scalable SVG graphic like this ?
Scalable SVG graphic
I want it to resize according to the device dimensions. I'm trying to create a background image which'll use the full page dimensions - not fixed layout.
This is what I've come up with so far.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>New Design</title>
<style type="text/css">
html, body, div, span
{
margin:0;
padding:0;
border:0;
vertical-align: baseline;
}
body
{
font-family:'Roboto', Arial, Helvetica, sans-serif;
font-size:13px;
background-color:lightyellow;
}
html
{
height:100%;
}
body
{
min-height:100%;
position:relative;
}
#container
{
margin:0 auto;
background-color:#eceff1;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
path {
fill: blue;
}
</style>
</head>
<body>
<div id="container">
<div style="width:calc(100% - 100px);height:calc(100% - 100px);margin:0 auto;padding:10px;border:1px solid red;">
<svg height="100%" width="100%" style="border:1px solid #5A07BC;background-color:#fff">
<line x1="20%" y1="0" x2="50%" y2="200" style="stroke:#5A07BC;stroke-width:1" />
<line x1="50%" y1="200" x2="0" y2="450" style="stroke:#5A07BC;stroke-width:1" />
<line x1="100%" y1="20%" x2="60%" y2="60%" style="stroke:#2AA4C6;stroke-width:1" />
<line x1="60%" y1="60%" x2="95%" y2="100%" style="stroke:#2AA4C6;stroke-width:1" />
</div>
</div>
</body>
</html>
You're not required to have every element in your SVG be in percentages. SVG graphics are scalable by default, but you need to include a viewBox attribute that describes its coordinate system.
The viewBox attribute takes four values — viewBox="x_min y_min width height" — which describe the extent of the drawing inside the SVG. You'll usually have something like viewBox='0 0 800 600' which means I have drawn things on a canvas of 800x600 "pixels", with the origin at x = 0, y = 0.
Then when you set a particular width and height to a SVG, it will, by default, stretch the image to fit these dimensions, but you can control the behavior with the preserveAspectRatio attribute.
Further reading: There's a good article on CSS Tricks about these two properties.
I've got some problem with css, the content is sticking out from the boundaries.
It is expected to have a scrollbar rather than hidden overflow, but the boundaries.
Please help.
Here's the code, which reflects my CSS structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{
border:3px solid #FFAD17;
background-color:#FFF;
border-radius:7px;
font:9.5pt Tahoma;
margin:0px;
padding:0px;
}
html {
margin:0px;
padding:0px;
}
div.header{
background-color:yellow;
background-position:top;
padding: 3px;
}
div.wrapper{
float:left;
}
div.context_wrapper{
margin-left:158px;
padding: 3px;
}
div.context{
float:left;
}
div.menu{
text-align:center;
padding: 3px;
width:140px;
float:left;
}
div.footer{
background-color:yellow;
background-position:bottom;
width:auto;
padding: 3px;
clear:both;
}
</style>
</head>
<body>
<div class="header">Head</div>
<div class="wrapper">
<div class="menu">Menu</div>
<div class="context_wrapper">
<div class="context">
ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent
</div>
</div>
</div>
<div class="footer">Foot</div>
</body>
</html>
a busy cat http://img215.imageshack.us/img215/6065/20120223132157.png
I shouldn't style the body element like it was a <div> element, better to make a new wrapper. Furthermore, from your question I gather you're looking for something like this: http://jsfiddle.net/SQDXt/
Basically, this adds the wrapper div with the scrollbar when your content exceeds the size of the wrapper. Also, the header and footer are within the second wrapper, to span the whole width when the content exceeds the first wrapper's width.
I'm using the following code:
<html>
<body bgcolor="black">
<center>
<div style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div>
</center>
</html>
It works in Chrome but not in IE or Firefox. My goal with this is to overlay cover.png over declined.png so people cannot directly save the image, but instead save a transparent png. I prefer to do this without using external CSS. Thanks for your help. :)
The standard method in css is to use margin: 0 auto, so:
<div style="width: 1080px; height: 288px; margin: 0 auto; position: relative">
<img ... >
<img ... >
</div>
Note the addition of position: relative. Without that, your images would position themselves absolutely relative to the <body> element. Also note that these sorts of overlays are trivial to bypass by anyone with the slightest knowledge of HTML and/or access to basic browser developer tools.
-Avoid using old tags such as instead use CSS.
-Use appropriate DOCTYPE (example below shows doctype for html5)
-Always close your tags, your code does not have closing tags for body.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div><!-- end div main -->
</body>
</html>
CSS:
#main{
margin: 0 auto;
width:1080px;
height:288px;
}