|
HTML - Image Issue After Uploading.....
Hello everyone. I'm new to HTML and experimenting...
I have a domain www.thomgreg.com linux hosted by godaddy. I've started going thru "Head First HTML with CSS & XHTML" and am in chapter 2. On my local computer the pages displayed fine but after uploading to the server the text displays but the images do not. I have all the images and html files in the same directory, a directory called "html" directly off of root. the img src element I'm using is: <img src="drinks.jpg"> and, again, drinks.jpg and index.html are in the same directory. The home page displays without the image though...!! Also if I try to show the drinks.jpg directly by using www.thomgreg.com/html/drinks.jpg I get a page cannot be found error. Any ideas...? Thanks...! Similar TutorialsI want to make an image upload like the one in facebook that you can choose multiple images to upload and it also shows the directories. I'm not sure what it's called and how to do it. Hopefully someone can help me Thanks I have an HTML form that allows users to browse for an image. I need that image to then be displayed on that form once the "Upload" button is pressed. Code anyone? Resolved.* I'm doing some very basic coding and I'm not sure why but one of my images will not show up - I cannot seem to locate the problem. Code: <html>
<head>
<title</title>
<style>
img {
padding: 0px;
margin: 0px;
display:block;
}
#container-object {
background-image: url('http://i.imgur.com/gHgb5.jpg');
height: 250px;
width: 520px;
margin: 0;
padding: 15px 0px 15px;
}
</style>
</head>
<body>
<img src="http://i.imgur.com/fVgTl.jpg" alt="top" />
<div id="container-object" style="text-align:center">
<object>
<param name="movie" value="http://www.youtube.com/v/SmWWd_QDc6w?version=3&feature=player_detailpage">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<embed src="http://www.youtube.com/v/SmWWd_QDc6w?version=3&feature=player_detailpage" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="425" height="250"></object>
</div>
<img src="http://i.imgur.com/wMrMI.jpg" alt="bottom />
<img src="http://imageshack.us/photo/my-images/825/ojygw.jpg/" alt="twitter" />
</body>
</html>
The image in BOLD is the problem image. i was going to try to get my background to stretch but im running into too many issues with it, im wondering if any1 can help me get a background image start at top:150 left:280 here is what i tried so far with no luck:: <body background= image.gif position:absolute; top:150; left;150> doesnt work... so i tried setting up a div to call this into play... <style type="text/css"> #bg {position:relative; top:150; left:150;} </style> <div id="bg"> <body background ="background.gif"> </div> i also tried calling it with out a div threw the body and if i remember the image showed correctly but this time my page started over 150 x 150 px maby the image was just set as background tiled and wasnt even in the right spot i really dont know if any1 can please help me with this issue i would greatly appreciate the help thank you Hi, I have to draw divs over an image. When the mouse is over a div, the bgcolor of the div is changed to show it highlighted with some opacity. Am using following code for it Code: <!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<style type="text/css">
.mouseOutClass {
border: 1px dotted #74CFFA;
}
.mouseOverClass {
cursor: pointer;
border: 1px solid #74CFFA;
background-color: #ffeaab;
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity: 0.6;
}
</style>
<script type="text/javascript">
function highlightBox(obj, show) {
var attr = obj.getAttribute("boxList");
if (show) {
obj.className = "mouseOverClass";
} else {
obj.className = "mouseOutClass";
}
}
</script>
</head>
<body>
<div style="height: 100%;width: 100%;">
<div >
<div style="position:absolute; left:0px; top:0px; height:150px; width:150px;" class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" >
<table width="100%" height="100%">
<tr>
<td> </td>
</tr>
</table>
</div>
<div style="position:absolute; left:200px; top:100px; height:200px; width:200px;" class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" >
<table width="100%" height="100%">
<tr>
<td> </td>
</tr>
</table>
</div>
<img src="someImage.jpg" />
</div>
</div>
</body>
</html>
This is working fine in all browsers except IE 9. It works in IE 9 too if I use the HTML 4 doctype instead of HTML5. Am I missing something here or is it a bug with IE9? Thanks Kapil Hello I'm a very amateur html coder and up until half a year ago I've been using tables as a way to setup my layout. Fortunately I came across a downloaded template that had no tables and I ventured into finding out how this person accomplished this. Six months later I'm a little bit more familiar with styling sheets working along with html pages. I have made a couple of test webpages that turned out quite successfully so I agreed to helping out my friend's small gaming community by making them a small homepage. I decided to make a little "coming soon" page so I can test out login forms (yes I am that much of a noob). I added a couple of links to help promote the free webhosts im using along with a link to the forums that they setup before my friend contacted me. I wanted to add a rollover effect with the images using stylesheet. I read a couple of tutorials and understood the basic concept of using the anchors' hover feature to change the background. While still having the webpage on my computer it worked just fine.. the images lit up the way I wanted them to when I hovered my mouse over them. Later, after uploading the webpage to the webhost I noticed that only when you first hover your mouse over the images they disappear for a couple of seconds, come back and then they function properly. Did I do something wrong here.. I followed several tutorials and kind of pieced together the puzzle... Sponsor One and Two: HTML Code: <div id="left"> <ul> <li><a class="hosting-logo" href="http://www.000webhost.com">Hosting provided by: 000webhost</a></li> <li><a class="dot-tk_logo" href="http://my.dot.tk">Redirecting provided by: my.dot.tk</a></li> </ul> </div> Register Image: HTML Code: <a class="register-forum" href="http://analogknights.forum-motion.com/profile.forum?mode=register">Register for the Forums</a> My CSS HTML Code: #middle {
width:300px;
margin-left:15px;
}
a.forum-signup:link {
background-image:url(../images/join_forums.gif);
width:300px;
height:63px;
text-indent: -999em;
display:block;
text-decoration:none;
}
a.forum-signup:hover {
background-image:url(../images/join_forums_over.gif);
}
a.register-forum:link {
background-image:url(../images/register_forums.gif);
width:300px;
height:63px;
text-indent: -999em;
display:block;
text-decoration:none;
}
a.register-forum:hover {
background-image:url(../images/register_forums_over.gif);
}
There is more to the code but I only pasted what I thought was relevant to the problem. Thanks in advance! EDIT: Oh and I forgot the page: Link Here ** validation and everything is all wrong (hopefully I'll learn all that next semester during my first ever web-design class) ** Hi People, Another issue I am having with background images using div tags carrying on a little from http://www.htmlforums.com/html-xhtml...es-123021.html Although I can insert the background image now it does not appear to be taking much notice of the background image position or repeat elements. I could make life allot easier for myself and use a different method but wanted to learn this method. Any ideas why it would not take notice of my background positioning or repeat request? HTML Code: Header information and then........ </head> <body> <div id="content"> <div id="image1"><img src="images/image1.jpg" alt="image description"></div> <div id="image2"><img src="images/image2.jpg" alt="image description"></div> </div><!-- end #content --> </body> </html> CSS PHP Code: } body { width:100%;height:100%;margin:0;padding:0;background-color:#cccccc; } #content { width:100%;height:100%;margin:0;padding:0;background-color:#cccccc; } #image1 { background-image:url('images/image1.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-position: right bottom; } #image2 { background-image:url('images/image2.jpg'); background-repeat:repeat-y; background-attachment:fixed; background-position: center; padding-left: 6px; } Adding the padding above does make the image move along with margins which i added for testing only but I obviously have something else not quite right here. I added sizes to the body and content as I was experimenting. Do I really need them, if so what is the recommended code to put in? Thanks all Hello. I have an HTML website image background that I am trying to stretch across any screen resolution, while keeping the image "fixed" in one position, so the image does not shrink when the screen window is modified. I got everything to work correctly, however I cannot get the image to stay at a "fixed size" when I shrink the window. Can somebody please help me? I am a beginner programmer, but I have tried numerous processes before resorting to this forum. Here is my code...in case you want to preview it in a web browser. Thanks in advance for any help you can offer me to get the image to stay "fixed" and also to keep it stretched across the entire screen. HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- leave DTD out of DOCTYPE to put IE6 in quirks mode -->
<html>
<head>
<title>GIS Disclaimer</title>
<style type="text/css">
body {
/* for IE; otherwise, BG isn't fully stretched */
margin: 0px;
}
#background {
position: absolute;
margin: 0px;
border: 0px;
padding: 0px;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
background-repeat: no-repeat;
background-attachment: fixed
}
#background img {
padding: 0em;
width: 100%; height: 100%;
}
#body {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height:100%;
padding: 0px;
z-index: 0;
}
li {
margin-bottom: 2em;
}
</style>
<!--[if IE]>
<style type="text/css">
body {
margin: 0px;
overflow: hidden;
}
</style>
<![endif]-->
</head>
<!-- img must be encased in div to keep proper image aspect ratio -->
<div id="background"><img src="file:///C:/Website/Images/Disclaimer_bckgd_5.jpg"></div>
<div id="body">
<style fprolloverstyle>A:hover {color: red; font-weight: bold}
</style>
<div align="left">
<table cellspacing="0" cellpadding="0" align="center"><tr>
<td width="100%" nowrap>
<b><p style="word-spacing: 0in; line-height: 0px; margin-left: 0px; margin-right: 0px; margin-top: 175px; margin-bottom: 0px"; <span style="font-size:21.0pt; color:maroon"
>Town of Leprechauns, Confusion<p style="word-spacing: 0in; line-height: 0px; margin-left: 0px; margin-right: 0in; margin-top: 40px; margin-bottom: 20px"; align="center"><b><span style="font-size:21.0pt;color:maroon">Online Disclaimer Form</span></b></p>
</tr></table>
<div align="left">
<table cellspacing="0" cellpadding="0" align="center"><tr>
<td width="100%" nowrap>
<p style="line-height: 0px; word-spacing: 0in; margin-left: 0px; margin-right: 0px; margin-top: 10px; margin-bottom: 0px"; align="left"><b><span style="font-size:12.0pt;
color:black">This site provides access to the Online stuff. The information contained on this site is</p><p> updated periodically, however this town geographic database
may NOT reflect the most current</p><p> information available. THE TOWN OF LEPRECHAUNS MAKES NO CLAIMS OR WARRANTIES,</p><p> EXPRESSED OR IMPLIED, CONCERNING THE COMPLETENESS, RELIABILITY, OR SUITABILITY
</p><p> OF THESE DATA. THE TOWN OF LEPRECHAUNS DOES NOT ASSUME ANY LIABILITY ASSOCIATED</p><p> WITH THE USE OR MISUSE OF THIS INFORMATION. All information is for planning purposes only.
</p><p> It may not be adequate for legal boundary definition, regulatory interpretation, or property conveyance</p><p> purposes. If you believe that any data provided within this site is inaccurate, or if you have any questions
</p><p> regarding these data, please contact:</span></b></p>
</tr></table>
<table cellspacing="0" cellpadding="0" align="center"><tr>
<td width="100%" nowrap>
<p style="word-spacing: 0in; line-height: 100%; margin-left: 80px; margin-right: 0; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:12.0pt;
color:maroon">Butch, GISP</span></b></p>
<p style="word-spacing: 0in; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:10.0pt;color:maroon">Town
of </span></b><b><span style="font-size:10.0pt;color:maroon">Leprechauns</span></b><b><span style="font-size:10.0pt;color:maroon">
</span></b><b><span style="font-size:10.0pt;color:maroon">GIS</span></b><b><span style="font-size:10.0pt;color:maroon">
Coordinator</span></b></p>
<p style="word-spacing: 0in; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:10.0pt;color:maroon">41
Pot O Gold Road</span></b><b><span style="font-size:10.0pt;color:maroon">,
</span></b><b><span style="font-size:10.0pt;color:maroon">Leprechauns</span></b><b><span style="font-size:10.0pt;color:maroon">,
</span></b><b><span style="font-size:10.0pt;color:maroon">Confusion</span></b><b><span style="font-size:10.0pt;color:maroon">
</span></b><b><span style="font-size:10.0pt;color:maroon">90210</span></b></p>
<p style="word-spacing: 0px; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0" align="left"><b><span style="font-size:10.0pt;color:maroon">Tel:
</span></b><b><span style="font-size:10.0pt;color:maroon">555-555-5555</span></b><b><span style="font-size:10.0pt;color:maroon">
Fax: </span></b><b><span style="font-size:10.0pt;
color:maroon; nowrap">555-555-5555</span></b><b> </b></p>
<p style="word-spacing: 0px; line-height: 100%; margin-left: 80px; margin-right: 0in; margin-top: 0px; margin-bottom: 0"; align="left"><b><span style="font-size:10.0pt;font-family:"Times New Roman";mso-fareast-font-family:
"Times New Roman";color:maroon;mso-ansi-language:EN-US;mso-fareast-language:
EN-US;mso-bidi-language:AR-SA">Email:</span><span style="font-size:12.0pt;
font-family:"Times New Roman";mso-fareast-font-family:"Times New Roman";
mso-ansi-language:EN-US;mso-fareast-language:EN-US;mso-bidi-language:AR-SA"> </span><span style="font-size:10.0pt;font-family:"Times New Roman";mso-fareast-font-family:
"Times New Roman";color:blue;mso-ansi-language:EN-US;mso-fareast-language:EN-US;
mso-bidi-language:AR-SA"><a href="mailto:bdawg9674@hotmail.com"><i><span style="color:navy">bdawg9674@hotmail.com</span></i></a></span></b></p>
<p style="text-indent: 0; line-height: 250%; margin-left: 50px; margin-right: 0; margin-top: 0px; margin-bottom: 0"; align="left"><b>Do
you agree to the conditions listed above?</b></p>
<p style="text-indent: 0; line-height: 250%; margin-left: 50px; margin-right: 0; margin-top: 0px; margin-bottom: 0"; align="left"><font face=Arial size=-1 color=#000000><a href="http://xxxxx.xxxxxx.xxx.xxx/website/xxxxx/parcels/login.htm"><input type="submit" value=" I Agree " onclick= "parent.location='http://xxxx.xxxxx.xxx.xxx/website/xxxxx/Parcels/login.htm'" style="font-family: Georgia; color: #000080; font-weight: bold"></a></font><font face="Arial">
<a href="file:///C://Website/xxxx.html">
<input type="submit" value="I Do Not Agree" onclick= "parent.location='file:///C://Website/Survey.html'" style="font-family: Georgia; color: #000080; font-weight: bold"></a></font></p>
</tr>
</table>
</div>
</body>
</html>
I i open this code in FF i get some padding on the left side of the image which is ok, but when i open it in IE i don't get this padding. Is there any way that I have this padding in IE? thanks Code: <div align="justify"><img src="http://www.site.com/default1.gif" style="padding-left:27px;" alt="Cleveland" align="right" width="152" height="136" border="0" /> <p> Ticketchest.com is the Number One provider of Major League Baseball tickets in the United States. You came to the right place for great Cleveland Indians tickets -- close to the field or anywhere you desire. Ticketchest.com has a huge supply of great tickets to sold-out or hard-to-get Cleveland Indians baseball games. <br> </p> <p>Whether you need group tickets for a professional or corporate outing or just a pair of tickets, The Ticket Chest is your source for the best Cleveland Indians baseball tickets on demand. Also, check into our other Major League Baseball teams. We do the hard work so you can focus on eating peanuts. <br> </p> </div> As a part of a project I am doing I want to display images on a website. The width/height of the image displayed on the screen should depend on the orientation of the image. The idea is to make the longer side 150px, so if width is greater than height then width=150px, else if height > width, then height=150px. Is there a simple way of doing this? My solution to this is to store the image height and width in a database (I already need to create a database for images), and am using onLoad attribute to change the width/height based on a boolean parameter which tell the orientation of the image, a test version of the code is here (wait for the image to load) http://www.confusionart.com/public/test.html However, as you can notice, first the complete image is loaded and then resized to the desired size. i.e. there is a unnecessary switching of sizes on screen. Is there any way to avoid this. Hello, I wasn't exactly sure which category to post this question in, but I am having problems uploading a completed website. All of the files have been uploaded to the "www" folder on the server. When I type in the web address on the computer I upload from it appears to be live and working. When I try to view the site on a second computer I get a "server not found" error. Is there something I am doing incorrectly? Thanks for any help you can offer! Hi, I'm just about to upload my website and was wondering how it works. I'm going to be using filezilla. What i'm not sure about is how do I define what page shows up as my home page. Do I need to put the web address inside the HTML code, or name the file before uploading. I was also unsure about what I need to write at the top of my HTML pages, I;ve copied and pasted an example form a webpage I have open at the moment: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> Can anyone explain what this means?? I hope this will make sense to someone Thanks in advance Dyfrig I m facing a serious problem in uploading my sites page. the problem is, whenever i upload a page that page show an error in uploading that file and the is " cannot put index.shtml. Access Denied. The file may not exist, or there could be a permission problem. ". i tried many times to re upload it but it didn't worked. I also tried to do it from file manager in cpanel but its also not working. i don't know what to do... please help me..... Hey everyone, im making a website for my girlfriend... lol and she wants me to upload pictures of her product on a webpage what is the code segment for doing this? thanks alot for everyones help im starting to get the hang of this Hey everyone, I'm the owner of a small business who had a website made recently. Unfortunately, I felt the style of the designer wasn't what I was looking for so we parted ways. So, basically I am left with a mostly done website, including code for a sliding bar of pictures (sorry for the non-technical phrases) for the online shop section of the site. My problem is I don't know how to upload pictures to the bar! Right now all it has is a "coming soon" picture. Can anyone help? URL is: http://outoftheblue.ca/newarrivalsOOTB.html Thanks! Is there somewhere I can upload code so that it can be seen by forum members? Im trying to fix my layout for ebay and I don't really have anywhere else I can put it besides posting all the code here. I use frontpage to edit my page (so I can view it before uploading it to the web) It shows exactly the way I want it when I save it and view it on my HD but once I upload it to the server... it's the same... Then when I edit it again and upload the "update".... it's messed up. Could anyone tell me what I am doing wrong? Thanks Lace hi! Firstly I would like to state my first impression about this site. Judging the activity of members by the amount of posts I can see that this is the best place to discuss anything website-related. So I hope I enjoy my time here Now, onto my question. I have all my files stored on my computer (.htm + graphics + other junk), and have already purchased a domain. I was wondering how to upload these files onto my site, and get my site going. I understand that I need to purchase a hosting service. I tried that, and didn't understand what to do. I uploaded all my files with the uploader provided, including the index.htm files, and nothing happened. I was then sent to filezilla - some kind of FTP someting (I don't even know what FTP is), and I had no idea what to do with that software. help please? |
|||||||