|
HTML - Preview And Uploads Look Different
After hours of figuring out position absolute and position relative code and putting it in a nice div section, I got what I wanted. I previewed my page in my web browser (IE8). I was trying to overlay text on a graphic. It looked perfect. Then I uploaded it to my server and went to my website (again in IE8). None of the words were properly lined up. They were too high and too far to the right. Does anyone know why this would be? I ended up just putting my old pages back up....
I thought some screenshots would be helpful: The first one is how it looked from my harddrive; the second one is uploaded to my server: Similar Tutorialswell long story short someone sent a virus through a clients file upload and the amdin wants to setup a file restriction on the types of files that can be sent in...they want to limit it too .doc and .xls files, how could this be done below is the current code for the file upload: Code: <input name="resume" type="file"/> Hi, i'm making a website for sim city 2000 (yes I know this is an old game) and I wanted to know if anyone has an html code that would enable user uploads so that I could allow users on my site to upload their cities and tile sets? If someone has the code I would greatly apprecieate it if they would share it with me. thanks. Hi guys, pretty new to html coding and stuff. was wondering is it even possible for html to say have a browse button and upon click the image file directly shows the picture in a picture box above or somewhere on the same page ? Hey everyone - can anyone help me to even get started on how to do the following: When i'm searching in google for a website called 4xp.com you can see that on google there is website name+description and under it there is some sort of a list. I'm attaching a file here with an image that will show the result. My question is: Can i do it in HTML, if yes then how? If not - how can i do it?! Thanks, Igal example_code.html HTML Code: <!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>Example Code</title>
<link rel="stylesheet" href="example_code_styles.css" type="text/css" />
<script type="text/javascript">
function PreviewCode()
{
document.getElementById("output_view").innerHTML=
document.getElementById("input_view").value;
}
// Set desired tab- defaults to four space softtab
var tab = " ";
function checkTab(evt)
{
var t = evt.target;
var ss = t.selectionStart;
var se = t.selectionEnd;
// Tab key - insert tab expansion
if (evt.keyCode == 9)
{
evt.preventDefault();
// Special case of multi line selection
if (ss != se && t.value.slice(ss,se).indexOf("\n") != -1)
{
// In case selection was not of entire lines (e.g. selection begins in the middle of a line)
// we ought to tab at the beginning as well as at the start of every following line.
var pre = t.value.slice(0,ss);
var sel = t.value.slice(ss,se).replace(/\n/g,"\n"+tab);
var post = t.value.slice(se,t.value.length);
t.value = pre.concat(tab).concat(sel).concat(post);
t.selectionStart = ss + tab.length;
t.selectionEnd = se + tab.length;
}
// "Normal" case (no selection or selection on one line only)
else
{
t.value = t.value.slice(0,ss).concat(tab).concat(t.value.slice(ss,t.value.length));
if (ss == se)
{
t.selectionStart = t.selectionEnd = ss + tab.length;
}
else
{
t.selectionStart = ss + tab.length;
t.selectionEnd = se + tab.length;
}
}
}
// Backspace key - delete preceding tab expansion, if exists
else if (evt.keyCode==8 && t.value.slice(ss - 4,ss) == tab)
{
evt.preventDefault();
t.value = t.value.slice(0,ss - 4).concat(t.value.slice(ss,t.value.length));
t.selectionStart = t.selectionEnd = ss - tab.length;
}
// Delete key - delete following tab expansion, if exists
else if (evt.keyCode==46 && t.value.slice(se,se + 4) == tab)
{
evt.preventDefault();
t.value = t.value.slice(0,ss).concat(t.value.slice(ss + 4,t.value.length));
t.selectionStart = t.selectionEnd = ss;
}
// Left/right arrow keys - move across the tab in one go
else if (evt.keyCode == 37 && t.value.slice(ss - 4,ss) == tab)
{
evt.preventDefault();
t.selectionStart = t.selectionEnd = ss - 4;
}
else if (evt.keyCode == 39 && t.value.slice(ss,ss + 4) == tab)
{
evt.preventDefault();
t.selectionStart = t.selectionEnd = ss + 4;
}
}
</script>
</head>
<body>
<table class="column">
<tr>
<td class="header">
Input View
</td>
</tr>
<tr id="input_view_container">
<td>
<textarea
spellcheck="false"
onkeydown="return checkTab(event);"
name="input_view"
id="input_view"
wrap="hard"></textarea>
</td>
</tr>
<tr>
<td id="button_container">
<input type="button"
value="Preview Code"
onClick="PreviewCode()"
id="button" />
</td>
</tr>
</table>
<table class="column" id="output_column">
<tr>
<td class="header">
Output View
</td>
</tr>
<tr id="output_view_container">
<td>
<div id="output_view">
</div>
</td>
</tr>
</table>
</body>
</html>
example_code_styles.css HTML Code: html
{
width:100%;
height:100%;
}
body
{
margin:0px;
width:100%;
height:100%;
}
td
{
padding:0px;
}
.column
{
width:50%;
float:left;
border-collapse:collapse;
width:50%;
height:100%;
background-color:rgb(217,217,217);
overflow:hidden;
}
.header
{
font-size:18pt;
border-bottom:1px solid black;
height:30px;
}
#input_view_container
{
text-align:center;
height:100%;
}
#output_view_container
{
height:100%;
}
#output_view
{
height:100%;
}
#input_view
{
width:95%;
height:95%;
resize:none;
}
#output_column
{
border-collapse:collapse;
border-left:1px solid black;
}
#button_container
{
text-align:center;
height:1em;
padding-bottom:10px;
}
#button
{
width:95%;
}
The Javascript I found at: http://ajaxian.com/archives/handling-tabs-in-textareas First of all, this code could probably be cleaned up a lot, as I just wrote it. Don't worry about that, unless you have lots of extra time on your hands. But, my question is, how can I convert this into only using divs. The idea is, I have a fixed size header and footer, on the left, and a fixed size header on the right. I want the middle to fill the remaining space on the left, and the bottom to fill the remaining space on the right. I do not want to use Javascript for the layout of the page, as I will have alternative code for the user without Javascript. Any ideas? Also, feel free to copy this code for your own purposes. When the code is complete, I will move the code over to the "Peddlers Village" or wherever it needs to be. Ok so i have the hover box working i see the pictures I see the text. However I cant figure out how to change the font style please help.
HTML Code: <html>
<head>
<title>MARK-10 Force Gauge Series BG</title>
<link rel=stylesheet href="../../stylesheet2004.css" type="text/css">
<script src="../../jquery.js" type="text/javascript"></script>
<script src="../../main.js" type="text/javascript"></script>
<style type="text/css">
<!--
p{
clear:both;
margin:0;
padding:.5em 0;
font:Arial, Helvetica, sans-serif;
}
pre{
display:compact;
font: 100%, Arial, Helvetica, sans-serif, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li2{
margin:0;
padding:0;
}
li2{
list-style:none;
float:bottom;
display:inline;
margin-right:10px;
font-family:"Arial Black", Gadget, sans-serif;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:inline-table;
color:#fff;
}
title{
font:Arial, Helvetica, sans-serif;
}
-->
</style></head>
<td width="8" class="divid" id="spacer"> </td>
<td width="671" id="content_table">
<h1><strong>QUICK-CHANGE GRIP ADAPTERS</strong></h1>
<p>These unique adapters mount between a force gauge loading shaft and a grip, providing several useful benefits:</p>
<ol>
<li>Simply and quickly change grips, ideal for laboratory and other environments with multiple test applications. </li>
<li>Prevent grip rotation about the loading shaft, eliminating the need to manually adjust grips. </li>
<li>Align grips with respect to the force gauge, ensuring that samples are tested in a consistent manner.</li>
</ol>
<p>Models AC1033-1 and AC1033-2 include all the attachments and hardware necessary to mount one grip to a force gauge loading shaft. Attachments for grips only are also available. </p>
<p><strong style="color: #F00">Note:</strong> These attachments are compatible only with Mark-10 Series 5 digital force gauges.</p>
<h2> </h2>
<table width="658" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="38%"><img src="../accessories/quick-change-3-closeup.jpg" width="250" height="250"></td>
<td width="62%"><p class="menuheader" style="font-weight: bold; color: #0E4AB1;">Photo Gallery (Mouse Over Pictures)</p>
<ul>
<li2><a href="../accessories/quick-change-3lg.jpg" class="preview" title="Shown mounted between a Series 5 force gauge and <br>
a G1021 curved padded attachment." ><img src="../accessories/quick-change-3sm.jpg" alt="gallery thumbnail" /></a></li2>
<li2><a href="2.jpg" class="preview"><img src="2s.jpg" alt="gallery thumbnail" /></a></li2>
<li2><a href="3.jpg" class="preview"><img src="3s.jpg" alt="gallery thumbnail" /></a></li2>
<li2><a href="4.jpg" class="preview" title="Lake and a mountain"><img src="4s.jpg" alt="gallery thumbnail" /></a></li2>
</ul></td>
</tr>
<tr>
<td height="195" colspan="2"><p><img src="../../images/hd-ordering.gif" width="280" height="15"></p>
<hr size="1">
<table width="658" >
<tr>
<td width="82" class="tableheader1">Model No.</td>
<td width="480" class="tableheader1">Description </td>
<td width="80" class="tableheader1">US Price</td>
</tr>
<tr>
<td class="model_c">AC1033-1</td>
<td class="data_c">Quick-change adapter, complete kit, #10-32</td>
<td class="price_c">$125.00</td>
</tr>
<tr>
<td class="model_c">AC1033-2</td>
<td class="data_c">Quick-change adapter, complete kit, 5/16-18</td>
<td class="price_c">$125.00</td>
</tr>
<tr>
<td class="model_c">AC1034-1</td>
<td class="data_c">Quick-change adapter, grip attachments only, #10-32</td>
<td class="price_c">$75.00</td>
</tr>
<tr>
<td class="model_c">AC1034-2</td>
<td class="data_c">Quick-change adapter, grip attachments only, 5/16-18</td>
<td class="price_c">$75.00</td>
</tr>
</table></td>
</tr>
</table>
<p>
<p><br>
</p></td>
</tr>
</table>
<table border="0" width="98%" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table>
<br><br>
<script language="javascript" src="../../bottomnav.js" type="text/javascript"></script>
<!-- Start SuperStats code version 2.0f. Do not alter this code!
http://www.superstats.com -->
<script language="JavaScript">
var code = " ";
</script>
<script src="http://code.superstats.com/code?u=bfridman">
</script><script language="JavaScript">
document.write(code);
</script><noscript>
<a
href="http://stats.superstats.com/c.cgi?u=bfridman"
target="_top"><img
src="http://stats.superstats.com/b.cgi?u=bfridman&z=1"
border=0></a></noscript>
<!-- End SuperStats tracking code. -->
</body>
</html>
Is there a way to have an RSS Feed Preview automatically display on a web page without using iFrame? Thank you. Eckersen First off I am new to web design, so please take that into consideration. This question is hard for me to word, so here I go.. I apologize in advance. I would like to display a short description + link to content / articles that are on other pages of my website. For example: like on nypost.com - How on the main index page they have very short blurbs about all kinds of articles, then when you click on them they go to the full size article on another page. This is obviously all automatically generated onto the main index page. How can I accomplish this? *Overall goal* I would like to write articles, blog posts, ect.. and have them automatically show up on my main index page? I hope this makes sense.. It has been hard for me to search for an answer, because I don't think I am using the right term, or wording it incorrectly. Thanks! Kyle So I created an html file in text edit and when I try to preview it in Safari or Firefox, they both just show the html code. This is the code, simple right? <html> <body> <h1> Carly Krysak</h1> <p>Marketing Director</p> <h2>Frank's Auto Supermarket</h2> <p>P: 724.430.2000</p> <p>F: 724.438.5990</p> <a href="http://tiny.cc/FbWeSpeakCar">Facebook</a> <a href="www.autosupermarket.com">Website</a> <a href="www.GrindingGearsBlog.com">Blog</a> </body> </html> As long as it's saved as an html file and being opened in a browser it should show right? Help please. Hi EveryBody, I want to add a preview of html page feature in my project. I had created registration form and I need when user click submit button,user should get a preview of registration form after that further operation will b performed. Guys just tell me how can i achieved this. Any clue or sample code so i can learn it and implement in my project. I am working on an index page with menu for a friend and originally did the page an menu separately....I was able to get them to work together but when i do the In-Dreamweaver preview does not work...This is very important because she will need the preview to make her changes... Everything looks fine upon viewing in browser but no preview.... I think it probably has something to do with me using two different body tages with two different csses....Can somebody take a look and see if they can find my problem? Any help would be greatly appreciated! You can view an online version at: http://www.firstpresgreenville.org/NEWFPATEST/menu.html HI, Can anybody recommend a gadget for Previewing / Thumbnailing HTML templates on my hard drive. I have lots of index.html pages in different folders and I'm looking for a way to flick through them, rather than having to go in and open the files individually. |
|||||||