I am having trouble to explain my issue, but here goes...
I have create a z-index layer effect and want to some words to show up underneath. This sounds simple right, however my text goes and sits underneath the "Z-Index layers".
How do I correctly markup my text to "Inherit" or to sit under the Z-Index.
Thanks for the help in advance.
Please Code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2013 Christmas Ecard</title>
</head>
<body onload="init();" style="background-color:#D4D4D4"><p>
<font face="Arial">From all of us at Canadian Western Trust.<br><br>
<canvas id="canvas" width="711" height="661" style="z-index: 3; position: absolute; background-color:#ffffff"></canvas>
<!--[if IE]><param name="movie" value="______.SWF"><![endif]-->
<!-- fallback to Flash: -->
<object id="top" style="z-index: 2; position: absolute" width="711" height="661" type="application/x-shockwave-flash" value="_____">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="________.SWF" />
</object>
<img id="under" style="z-index: 1; position: absolute" src="______">
<font face="Arial">
Please view in HTML.<br><br>
We wishes everyone a wonderful holiday season and a happy new year!<br><br>
Please click here to open the e-card in your web browser.
<br><img src="{Campaign_Opened Email_Tracking_URL?}">
</font>
<br>
</body>
</html>
There seemed to be some open tags that was floating around. WoW!! THat gave me a head ache. All good now and works!
<body onload="init();" style="background-color:#D4D4D4"><p>
<font face="Arial">From all of us .</font><br><br>
<canvas id="canvas" width="711" height="661" style="z-index: 3; position: absolute; background-color:#ffffff"></canvas>
<!--[if IE]><param name="movie" value="...."><![endif]-->
<!-- fallback to Flash: -->
<object id="top" style="z-index: 2; position: absolute" width="711" height="661" type="application/x-shockwave-flash" value="https://...">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="https://...." />
</object>
<img style="z-index: 1; position: absolute" src="https://....">
<font style="position: absolute; top: 725px;" face="Arial">
Please view in HTML.<br><br>
We wishes everyone a wonderful holiday season and a happy new year!<br><br>
The greatest gift is our children.....<br><br>
Please click here to open the e-card in your web browser.
<br><br><img src="{Campaign_Opened Email_Tracking_URL?}">
</font>
<br>
</body>
Related
I want to use margin in html but when im writing margin it doesn't auto complete and It doesn't work even if I type
here is my code;
<html lang="tr">
<head>
<meta charset="utf-8">
<title>GAMEBLOG</title>
</head>
<body>
STYLE="margin:30px"
<hr align="left" color="Red" size="60"width="1475">
<center><font face="papyrus" size="12" color="maroon"> <span><b>Gameblog News</b></span></font></center>
<p>
<center><h1><font face="Arial">En hızlı büyüyen kara delik bulundu: <br>
'Her saniye Dünya büyüklüğünde kütle yutuyor'</font> </h1></center>
</p>
<hr color="Lightgray" width="500"size="3">
<center><img src="C:\Users\Samet\Desktop/kara.png" width="400" height="400">
</center>
<b>Avustralyalı astronomların liderliğini yaptığı bilim insanlarından oluşan bir ekip, son dokuz milyar yılın en hızlı büyüyen kara deliğini keşfettiklerini açıkladı.</b>
</body>
</html>
You have to put style a HTML tag. For exemple, if you want to put margin on the body, you have to do this :
<body style="margin:30px;">
// Your code
</body>
this code overlaps two div, (using html only)how do i display these vertically like this: https://i.stack.imgur.com/Mq5om.jpg
<html>
<body>
<title> Flag Ship Devices </title>
<div>
<object border="2" width="400" height="250" data="D:\Project1\FinalResource\iphonex.jpg" align="left" >
<img src="D:\Project1\FinalResource\iphonex.jpg">
</object>
<object align="left">
<ul>
<h2> iPhone X (Matte Black, 64GB) </h2> <br>
<li> <p>Price ₹83499</p> </li>
</object>
</div>
[enter image description here][1]
Mi A1 (White, 64GB)
Price ₹13999
Please, take a look and see if this helps you.
Also, I suggest you to use bootstrap, it's a very good framework to this kind of need.
.product_container{
width: 100%;
margin-bottom: 10px;
display: flex;
}
<html>
<body>
<title> Flag Ship Devices </title>
<div class="product_container">
<object border="2" width="400" height="250" data="D:\Project1\FinalResource\iphonex.jpg" align="left" >
<img src="https://placehold.it/400x250"/>
</object>
<object align="right">
<ul>
<li><h2> iPhone X (Matte Black, 64GB) </h2> <br></li>
<li> <p>Price ₹83499</p> </li>
</ul>
</object>
</div>
<div class="product_container">
<object border="2" width="400" height="250" data="D:\Project1\FinalResource\iphonex.jpg" align="left" >
<img src="https://placehold.it/400x250"/>
</object>
<object align="right">
<ul>
<li><h2> iPhone X (Matte Black, 64GB) </h2> <br></li>
<li> <p>Price ₹83499</p> </li>
</ul>
</object>
</div>
Can we make the following Google Map interactive provided the frame image is showing.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" onclick="$('#frame_image').show();" value="Show frame layer">
<input type="button" onclick="$('#frame_image').hide();" value="Hide frame layer">
<br /><br />
<div style="position: absolute; z-index: 1;">
<iframe frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&aq=&sll=43.656877,-79.32085&sspn=0.852471,2.113495&ie=UTF8&hq=&hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&t=m&z=14&ll=43.67111,-79.395217&output=embed&iwloc=near" ></iframe> <br />
<small>View Larger Map</small>
</div>
<div style="position: absolute; color:red; z-index: 2" id="frame_image">
<img src="http://torontoclinic.awkwardhosting.com/images/frame.gif" />
</div>
Code is also on the following link:
http://jsfiddle.net/pPrZV/
Please let me know if there is any other way via Google Maps API etc.
Thanks
Just apply this style to <iframe> of the google map
<iframe style="border-radius:250px" frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no"...
Working jsFiddle here
I'm trying to put a header on top of my pages. It works fine with IE 8. It moves slightly down and blocking my page content on the newest IE and apple safari. Can anyone show me what I need to put so that it is compatible for all search engines? I am PHP Including my header to all my pages. Below is my header code.
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>
<body>
<div style="position: absolute; width: 1280px; height: 92px; z-index: 1; left: 1px; top: 0px" id="layer1">
<div style="position: absolute; width: 660px; height: 22px; z-index: 1; left: 238px; top: 52px" id="layer2">
<font face="Arial">|<b>
New Cost </b>| <b>
</b>|<b> <a href="http://www..net/carriers/newcarrier.php">New
Carrier</a></b> | <b>
</b>|<b> <a href="http://www..net/carriers/search.php">Carrier
Board</a></b> | </font></div>
<p>
<img border="0" src="/carriers/.png" margin= 0 auto width="100%" height="73"></div>
</body>
</html>
Assuming this is the header you're talking about...
<img border="0" src="/carriers/echoheader.png" margin= 0 auto width="100%" height="73">
...it should look something like this. I think you'll need to specify top and make its position absolute.
HTML:
<img class='header' />
CSS:
img.header {
position:absolute;
top:0;
...other styles...
}
Try to avoid "inline styling" - this is where you set the style of the element directly in the HTML.
It is good practice to split the style from the markup, since later, in a more complex page, you can find your way around more easily.
I've run into this problem before and couldn't figure it out, but it's basically just trying to insert two different embeds (youtube embed and a Reverbnation widget) and have them behave together.
I can get them to sit on top of each other... but when I insert them they take up the whole width of the page. I know there's gotta be a way to limit the width of the widget right?
Here's the code for the page - real simple
<!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 profile="http://www.w3.org/2005/10/profile">
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type" />
<link rel="icon" type="image/png" href="http://static.tumblr.com/iorl8zv/yQxlnm3r2/favicon.png" />
<title>Official Pissing Graffiti--Rock-Industrial-Meaning</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24167987-1']);
_gaq.push(['_setDomainName', 'pissinggraffiti.com']);
_gaq.push(['_setAllowHash', 'false']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body style="background-color: #666666; background-image: url('http://static.tumblr.com/iorl8zv/Me9ljgnyz/pgbgtumb.gif')">
<h1><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="180" height="150"><param name="movie" value="http://cache.reverbnation.com/widgets/swf/43/pro_widget.swf?id=artist_470177&posted_by=&skin_id=PWPS4008&font_color=FFFFFF"></param><param name="allowscriptaccess" value="always"></param><param name="allowNetworking" value="all"></param><param name="allowfullscreen" value="true"></param><param name="wmode" value="transparent"></param><param name="quality" value="best"></param><embed src="http://cache.reverbnation.com/widgets/swf/43/pro_widget.swf?id=artist_470177&posted_by=&skin_id=PWPS4008&font_color=FFFFFF" type="application/x-shockwave-flash" allowscriptaccess="always" allowNetworking="all" allowfullscreen="true" wmode="transparent" quality="best" width="180" height="150"></embed></object><br/>
<img style="visibility:hidden;width:0px;height:0px;" border=0 width=0 height=0 src="http://www.reverbnation.com/widgets/trk/43/artist_470177//t.gif" /></h1>
<div style="color: #ffb02e"><strong>
<center>New 8-track SAXAPHONE EP, by Pissing Graffiti</center></strong></div>
<div style="text-align: center">
<iframe width="560" height="349" src="http://www.youtube.com/embed/rn1SIXPZIgM" frameborder="0" allowfullscreen=""></iframe></div><!--
<div style="text-align: center;"><img alt="" src="http://static.tumblr.com/iorl8zv/vIXlngmey/cover2.jpg" /></div-->
<div style="color: #ffb02d">
<center><font size="6">Free EP</font></center></div>
<div style="color: #ffb02e">
<center>Join the mailing list and immediately receive a link to a .zip file containing all 8 tracks with cover art and metadata.</center>
<center><br />
</center>
<center>
<div name="holder" style="border: 3px solid #FFB02E; width: 400px">
<div name="header" style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; text-transform: uppercase; padding-left: 4px; padding-top: 8px; text-align: left; color: #FFB02E!important; line-height: 12px">
Join the mailing list</div>
<div style="text-align: center">
<form action="http://www.reverbnation.com/controller/fan_reach/add_email_direct/470177" target="_new" method="post"><span style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 14px; color: #fff !important">
Email Address: </span><input name="email" type="text" style="width: 220px" /> <input name="Submit" style="font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; color: #333 !important; background-color: #FFF !important" value="SUBMIT" type="submit" /><br />
<br /></form></div></div></center>
<div><a style="color: #ffb02e" "="" href="http://blog.pissinggraffiti.com"></a>
<center><a style="color: #ffb02e" "="" href="http://blog.pissinggraffiti.com">Head over to the blog.</a>or <a style="color: #ffb02e" href="http://blog.pissinggraffiti.com/socialize">See what we're all about.</a></center></div></div>
</body>
</html>
I feel like such an idiot when I post here because I can never figure out how to format the code so it looks readable.
I appreciate any help you can give. I read through the W3 school tut and everytime I think I get it...i don't and my page disappears.
Thanks guys! have a blessed one!
CCS columns did the job for me! Just defined a #widgets div for the elements and tweaked their widths once they were in there. Don't forget the 'moz' and 'webkit' bits so it works on all browsers.
EMBED your Reverbnation songs using this code:
[gigya src="http://cache.reverbnation.com/widgets/swf/40/pro_widget.swf"
flashvars="id=artist_######&posted_by=&skin_id=PWAS1009&
font_color=12ff98&auto_play=false&shuffle=false"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowNetworking="all" allowfullscreen="true" wmode="transparent"
quality="best" width="100%" height="300" ]
REPLACE ###### in the "id=artist_######&" segment with your own user id code which may be found at any of your personal song pages as seen in the location bar of your browser: reverbnation.com/control_room/artist/######
You can also change the style of your widget by changing the number after "&skin_id=PWAS" to any number between 1000 and 1020. Experiment to see what you get.
Ah, you just want the quote widget to be in line with the YouTube video? In that case, refer to this jsfiddle. Basically all I did was set embeds, objects and iframes to display inline (to stay in line with each other), got rid of the <h1> tag you had, since it's a block object, which would cause a line break, as well as deleted a <br /> tag, and moved the quote widget above the YouTube video in the HTML.