I am trying to have things on my web-page that will dynamically change size when I shrink the size of the page. I have currently hard-coded elements to specific spots like such:
<img class="img-responsive" style="position: absolute; top: 250; right: 0;"
src="/static/Pictures/16848_REGO_LOGO_nP1.png" height="450" width="450">
<img class="img-responsive" style="position: absolute; top: 410; left: 0;"
src="/static/Pictures/baked_icon.png" height="300" width="300">
As well as a video in the center of the page:
<div style="text-align: center">
<video controls="controls" autoplay="autoplay" width="550" height="350">
<source src="http://regotrade.com/static/Videos/Rego.mp4" type="video/mp4" />
<source src="http://regotrade.com/static/Videos/Rego.webm" type="video/webm" />
<source src="http://regotrade.com/static/Videos/Rego.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="550" height="350">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fregotrade.com%2Fstatic%2FVideos%2FRego.mp4','autoPlay':true}]}" />
<span title="No video playback capabilities, please download the video below">RegoTrade Video</span>
</object>
When I shrink the page, the image on the right collapses onto the video in the center, and eventually if I shrink it small enough, both images lay on top of the video. Is there a better way to do this?
EDIT: My full code:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<link rel="shortcut icon" type="image/x-icon" href="/static/Pictures/regoIcon.ico" />
<style>
.jumbotron{
margin-bottom:20px;
margin-top:0px;
padding:10px 0 10px 0;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/css/style.css" />
<title>Rego Trade Signup Page</title>
</head>
<body>
<div class="center">
</div>
<script type="text/javascript" src="/static/js/main.js"></script>
</body>
<div class="jumbotron img-responsive" height:auto style="background:#CCFFFF !important">
<h1>
<div style="text-align: center">
<strong>
<div style="font-size:79px">
<span style="color:#38B859">Rego</span><span style="color:#008FAF">Trade</span>
</div>
</strong>
</div>
</h1>
<div style="text-align: center">
<h4> Pre-register now, and we'll donate $1 to charity! </h4>
</div>
<div style="text-align: center">
<h5> Full Site Coming Soon... </h5>
</div>
</div>
</html>
<div style="position: absolute; top: 500; left: 0;">
</div>
<img class="img-responsive" style="position: absolute; top: 250; right: 0;"
src="/static/Pictures/16848_REGO_LOGO_nP1.png" height="450" width="450">
<img class="img-responsive" style="position: absolute; top: 410; left: 0;"
src="/static/Pictures/baked_icon.png" height="300" width="300">
<body bgcolor="#E6E6FA">
<form action="" method="post">
<div style="position: absolute; top: 355; left: 0;">
<h3><strong>A proud partner of Baked Cookies!</strong></h3>
</div>
<div style="position: absolute; top: 600; left: 0;">
<h5><strong>Mention RegoTrade and get 15% off your entire order!</strong></h4>
</div>
<div style="position: absolute; top: 625; left: 0;">
<h5><strong>(Valid through December 2015)</strong></h4>
</div>
<div style="position: absolute; top: 650; left: 0;">
<h5><strong>(812)-336-2253</strong></h4>
</div>
<div style="text-align: center">
<strong><label for="email"><font face="verdana" style="color:#008FAF"><div style="font-size:18px">Pre-Register:</div></font></label></strong>
<input id="email" name="email" type="email" size="34" placeholder= "email#indiana.edu"/>
<br>
<br>
<div style="font-size:18px">
<strong><font face="verdana" style="color:#38B859">Charity:</font></strong>
<select name="charity">
<option value="Indiana University Dance Marathon">Indiana University Dance Marathon</option>
<option value="Big Man on Campus">Big Man on Campus</option>
<option value="Drop the Puck on Cancer">Drop the Puck on Cancer</option>
</select>
</div>
<br>
<button type="submit" class="btn btn-info" onclick="alert('Your donation will be counted as soon as the email you have preregistered with is used to make an account. You will be able to make an account very soon!
Donations will be made next school year (2016 IDUM and BMOC, and 2017 DPOC.)');"> Sign Up </button>
</div>
</form>
<div style="text-align: center">
<video controls="controls" autoplay="autoplay" width="550" height="350">
<source src="http://regotrade.com/static/Videos/Rego.mp4" type="video/mp4" />
<source src="http://regotrade.com/static/Videos/Rego.webm" type="video/webm" />
<source src="http://regotrade.com/static/Videos/Rego.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="550" height="350">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fregotrade.com%2Fstatic%2FVideos%2FRego.mp4','autoPlay':true}]}" />
<span title="No video playback capabilities, please download the video below">RegoTrade Video</span>
</object>
</video>
<p>
<strong>Video didn't load? Download Video Here</strong>
</p>
<p>
Contact Us
</p>
</div>
</body>
<!--
<div>
<font size="4">Log In</font>
<font size="4">Create Account</font>
</div> -->
Related
I just working on Brightcove Responsive but i am not sure why Brightcove video not resize when I using viewport below.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
If i don't use viewport so when I rotate in mobile is working well.
Here my css code
<style type="text/css">
.containing-block {
width: 100%;
}
.outer-container {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.BrightcoveExperience {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
And Brightcove code
<div class="containing-block">
<div class="outer-container">
<!-- Start of Brightcove Player -->
<div style="display:none">
</div>
<!--
By use of this code snippet, I agree to the Brightcove Publisher T and C
found at https://accounts.brightcove.com/en/terms-and-conditions/.
-->
<script language="JavaScript" type="text/javascript" src="//sadmin.brightcove.com/js/BrightcoveExperiences.js"></script>
<object id="myExperience1754276206001" class="BrightcoveExperience">
<param name="bgcolor" value="#FFFFFF" />
<param name="width" value="480" />
<param name="height" value="270" />
<param name="playerID" value="1753810340001" />
<param name="playerKey" value="AQ~~,AAABmA9XpXk~,-Kp7jNgisrdihurn3hYnYJWo8k_gM6uF" />
<param name="isVid" value="true" />
<param name="isUI" value="true" />
<param name="dynamicStreaming" value="true" />
<param name="#videoPlayer" value="1754276206001" />
</object>
</div>
</div>
Thanks for help me
i have this simple html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position:absolute;">
<div style="position:absolute; display:block; z-index:999; left:450px;">stuff</div>
</div>
<object data='C:/mypdf.pdf' type="application/pdf" width="500px" heigth="500px" style="z-index:1;">
<p>stuff</p>
<p>stuff</p>
</object>
</body>
</html>
In internet explorer i can not make div in front of the pdf, in others browsers works well,
Any Sugestions?
[EDIT]
Here's a JsFiddle
thanks
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position:absolute;">
<div style="position:absolute; display:block; z-index:999; left:450px;">stuff</div>
</div>
<object type="application/pdf" width="500px" heigth="500px" style="z-index:1;">
<param name="src" value="http://www.who.int/medicines/publications/essentialmedicines/18th_EML_Final_web_8Jul13.pdf" />
</object>
</body>
</html>
I am trying to stretch the video that I have. It has to be 400 X 400 stretched. I tried using the "stretchtofit" value="true" but that doesn't work and I need the video centered under the heading. I'm curious as to what I use to stretch the video? This is my code:
<!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>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Lab 8-3</title>
</head>
<body>
<div style="text-align: center">
<img style="border: 0" src="magiclogo.png" width="325" height="88" alt="Logo" />
</div>
<div style="position: absolute; top: 110px; left: 310px">
<object data="magicshow.wmv" height="400" width="400">
<param name="showcontrols" value="false" />
<param name="stretchtofit" value="true" />
</object>
</div>
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6">
<param name="URL" value="magicmusic.mp3" />
<param name="uimode" value="invisible" />
</object>
</body>
</html>
why aren't you using <video> tag. you can set the size easily.
<video width="400" height="400" controls>
<source src="movie.mp4" type="video/mp4">
</video>
It's the first time I design a website so I need help with dividing my page into 2 vertical parts.
Basically, I want to have this page : http://elishaabargel.com/denim and this page http://elishaabargel.com/denim2 combined. I mean that I want the flash animation on the left and the links to the technical drawings and sketches on the right, down on the page.
The first page already contains the html and css codes of the right part but it just doesn't appear.
How can I do this?
There are many ways to divide a page into two parts you could either use iframes, divs, or a table. The most simple would be a table.
<table width=100% height=100%><tr><td width=50%>Put page1 here</td><td width=50%>Put page2 here</td></tr></table>
Also if you are loading two completely full pages it might just be best to use an iframe.
<iframe src="pg1.html" style="position:absolute;top:0;left:0;width:50%;height:100%;"></iframe>
<iframe src="pg2.html" style="position:absolute;top:0;left:50%;width:50%;height:100%;"></iframe>
I thought I should add the simplest template (using divs) that worked for me here:
<div id="container" style="width:100%;">
<div id="left" style="float:left; width:50%;"> This is left panel </div>
<div id="right" style="float:right; width:50%;"> This is right panel </div>
</div>
You can change the css style options (like width) appropriately to suit your needs.
You can use bootstrap for division of your page.
<div class="container">
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
</div>
If you need 100% width, you can use container-fluid and row-fluid.. I hope this will help you.
I did this in a bit of a rush, and im sure some bits are incorrect like the alignment of your pics on the right being at the top rather than the bottom also the popups are not the same size as your original popups... But it does fix your original issue of the two panels.
<!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">
<title>Elisha Bargel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="fashion, design, student, shenkar, college, portfolio, creation, mode">
<meta name="description" content="Fashion designer Elisha Abargel: projects, pictures, contact.">
<style type="text/css">
#flashContent { width:100%; height:100%; }
body {background-color: #FFFFFF;}
h1 {font-family:Cursive; color: #000000;}
p {font-family:Cursive; font-size: 14pt; font-style: normal; font-weight: normal; color: #000000;}
.link {color: #000000;}
.alink {color: #000000;}
.vlink {color: #000000;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="MainTitle" style="text-align: center;"><img alt="" src="http://elishaabargel.com/photos/logo2.jpg"></div>
<div id="MainLinks" style="text-align: center;">projects - contact</div>
<div id="LeftPanel" style="width: 800; height: 100%; float: left;">
<h1>Denim Project</h1>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="612" id="denimproject" align="middle">
<param name="movie" value="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" width="800" height="612">
<param name="movie" value="http://elishaabargel.com/photos/flashgalleries/denimproject.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflash">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
<div id="RightPanel" style="width: 200; height: 100%; text-align: left; vertical-align: bottom; float: right;">
<img alt="technical drawings of the denim project" style="width: 349px; height: 150px; vertical-align: bottom;" src="http://elishaabargel.files.wordpress.com/2012/12/sketchesdenim.jpg"><br />
<img alt="technical drawings of the denim project" style="width: 349px; height: 150px; vertical-align: bottom;" src="http://elishaabargel.files.wordpress.com/2012/12/technicaldrawingsdenim.jpg">
</div>
</div>
</form>
I'm sure yu can put your JQuery code block back to address the popups being of incorrect size.
I have bought a Joomla template from Template monster. It looks like this template isn't Ie8 fully compatible. I can't count on support, because when entering their online chat, you get a fague chat bot.
The problem is that the template doesn't show any text after the flash banner. In FF it all works great, but in Ie7,8 andabove not. Only the top menu and flash header.
This is the header
<!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-gb" lang="en-gb" dir="ltr" >
<head>
<base href="http://www.friesecomputerservice.nl/" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="joomla, Joomla" />
<meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Friese Computerservice</title>
<link href="/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
<link href="/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
<script type="text/javascript" src="/templates/theme520/scripts/jquery.js"></script>
<script type="text/javascript" src="/templates/theme520/scripts/maxheight.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.menu-nav li').hover(
function() {
$j(this).addClass("active");
$j(this).find('.ulwrapper').stop(false, true).slideDown();
$j(this).find('.ulwrapper .ulwrapper').stop(false, true).slideUp('fast');
},
function() {
$j(this).removeClass("active");
$j(this).find('div').stop(false, true).slideUp('fast');
}
);
$j('.ulwrapper').hover(
function() {
$j('.parent').addClass("active_tab");
},
function() {
$j('.parent').removeClass("active_tab");
}
);
});
</script>
<script type="text/javascript" src="/templates/theme520/scripts/cufon-yui.js"></script>
<script type="text/javascript" src="/templates/theme520/scripts/News_Gothic_400.font.js"></script>
<script type="text/javascript" src="/templates/theme520/scripts/cufon-replace.js"></script>
<script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script>
<link rel="stylesheet" href="/templates/theme520/css/constant.css" type="text/css" />
<link rel="stylesheet" href="/templates/theme520/css/template.css" type="text/css" />
</head>
This is the body HTML including flash
<div class="flash"><p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24"
width="100%" height="393">
<param name="movie" value="/images/stories/header_v8.swf">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<!--[if !IE]> <-->
<object data="/images/stories/header_v8.swf"
type="application/x-shockwave-flash" width="100%" height="393">
<param name="quality" value="high">
<param name="menu" value="false">
<param name="wmode" value="transparent">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (the browser should render some flash content, not this).
</object>
<!----> <!--[endif]-->
</object></p></div>
<!--content-->
<div id="content">
<div class="clear">
<!--left-->
<div id="left" class="maxheight">
<div class="left-indent maxheight">
<div class="left-border maxheight">
<div class="left-inner">
<div class="wrapper-box module_menu">
<div class="boxTitle">
<h3 >Main Menu</h3>
</div>
<div class="clear">
<div class="boxIndent">
<ul class="menu"><li class="item1"><a href="/home.html">
<span>Home</span></a></li><li class="item27">
<span>Blog</span></li>
<li class="item2"><a href="/joomla-license.html">
<span>Joomla! License</span></a></li><li class="item49">
<span>News Feeds</span></li>
<li class="item60"><span>Wrapper</span></li>
<li class="item61"><span>User</span></li>
<li class="item62"><span>Poll</span></li>
<li class="item63"><span>Search</span></li>
<li class="item48"><span>Web Links</span>
</li></ul> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--center-->
<div id="container" class="maxheight">
<div class="clear">
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="100%" class="article_column"> <div class="article-title">
<table class="contentpaneopen">
<tr>
<td class="contentheading" width="100%">
<div class="article-title-text">
Call of Dury - Black Ops </div>
</td>
</tr>
</table>
</div>
<div class="wrapper1-border">
<div class="wrapper1-bg clear">
<div class="article-text-indent">
<div class="clear">
<table class="contentpaneopen">
<tr>
<td valign="top" colspan="2">
<h1>Call of Duty - Black Ops te koop in Stiens</h1>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="article-separator-indent">
<span class="article_separator"> </span></div>
</td>
</tr>
</table></td>
</tr>
</table>
Just FYI on TinyMCE, if you go into TinyMCE's plugin parameters in Extensions->Plugin Manager->Editor-TinyMCE the first parameter "Functionality" if you select "Extended" from the drop down list then TinyMCE will have an option to insert/embed media when you are editing your articles. And it does all the necessary code structure, you just have to select the flash.
Fixed. Joomla has a kind of clean code option in it's editor. That one should be turned off, so it does not trim certain parts of a code.
Also installing JCE as the default Joomla! WYSIWYG Editor (instead of TinMCE) gave me more options for formatting text, in my case code, there is even a option for formatting or inserting code samples. Inserting code samples combined with turning off clean code option.
Wonderfull.