HTML - Inserting Images From Different Locations
Hey guys,
I am trying to insert a picture into a .htm file. However, I want to have my files more organize, so I have put the picture in a seperate folder, inside the folder that the .htm file is in. I used the code that is used to do so, however, when I do so, it shows a broke image file. This is my code: <img src="/images/bob saget.gif" Does anyone have any tips and resolutions to why this isn't working? Thanks, Calum Similar TutorialsI am new to html, and I am trying to add images, this is what I have been typing to get my img, but i doesn't work. <body> <img src="imagename.jpg"> </body> the web browser knows there is supposed to be an image but it broken picture image where the picture is supposed to be. Anybody know what I am doing wrong, i have tried loading it on both firefox and IE. thanks for your help in advance OK, what i need to know is how to access files in different folders on my website... for example i have 2 folders inside of my main folder o Main Folder - Sub folder 1 - Sub folder 2 Inside subfolder 1 is my images Inside subfolder 2 is extra html files... o Main Folder - Sub folder 1 ----- +Tutorial.html - Sub folder 2 ----- +image.png i want Tutorial.html to access the images inside subfolder 2, hwo would i do this? i know how to access an item in a subfolder: <img src="./Tutorial.html/image.png"> but my images and my html file are in different folders and i dont want to copy and paste because i want to update my files altogether.. how do i access the files from a different subfolder? I'm trying to fix up my code a bit so all the files I'm pointing to are relative to the root of the site. Most of my links used to look something like this (all these link examples came from same file)... <link href="css/styles.css" type="text/css" rel="stylesheet"> <script src="scripts/jquery.min.js" type="text/javascript"></script> <?php include('includes/header.html');?> <img src="images/maps/pic1.jpg"> The above was fine as long as my site stayed small, with few pages all in same directory. However, bigger projects require pages in different folders, sometimes in subfolders, yet all these pages share certain characteristics - headers, footers, etc. So I need to start specifying links to those files relative to the root. Here are the same examples, but now starting from the root of my site. They all work, except for my includes. <link href=" / css/styles.css" type="text/css" rel="stylesheet"> <script src=" / scripts/jquery.min.js" type="text/javascript"></script> <?php include(' / includes/header.html');?> <img src=" / images/maps/pic1.jpg"> Any idea why the includes won't work? Works fine as long as I don't put that / in there. Im moving to a strict Doctype and I can't be bothered inserting alt = "" tags to images that need them. Can anyone provide a regular expression that I could use in dreamweaver that would insert alt = "" into an <img > tag if it already didn't contain the alt = "" attribute I'm building my first real web site and am running into some problems getting the (simple) site to display properly across different browsers. In Firefox and Chrome everything seems to display normally, but in IE the format appears very different from what it should be: the div for the site information links is way out of place, and the left navigation menu is as well. After discovering doctypes I found that using Strict 4.01 eliminated the inconsistencies across browsers, but broke a lot of my formatting and positioning (in particular, margins). I am currently using Transitional. Any recommendations on what could be done would be appreciated. Through searching I have found numerous references to problems with IE using the box model correctly, but that isn't supposed to apply to IE8/IE9. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="description" content="PAGE DESCRIPTION!"> <link rel="stylesheet" type="text/css" href="mystyle.css"> <script type="text/javascript" src="myscript.js"></script> <title>Index Page!</title> </head> <body> <div id="container" style="background-color:#abc;"> <div id="header"> <h1 style="margin-bottom:0; text-align:center;">Title</h1> </div> <div id="siteinfo"> <div style="margin:10;background-color:#CCCCCC;"> <ul id="thehoriz" style="text-align:center;"> <li class="siteinfo"><a href="site.htm" class=siteinfo>Site</a></li> <li class="siteinfo"><a href="info.htm" class=siteinfo>Info</a></li> <li class="siteinfo"><a href="goes.htm" class=siteinfo>Goes</a></li> <li class="siteinfo"><a href="here.htm" class=siteinfo>Here</a></li> </ul> </div> </div> <div id="menu" style="float:left;width:200px"> <div style="margin-right:10;padding:10;margin-bottom:30;border-right:5px solid;border-bottom:5px solid;;background-color:#EFC700;"> <b>Section 1</b><br> <ul id="thevert"> <li class="tips"><a href="Page 1.htm" class=tips>Home</a></li> <li class="tips"><a href="Page 2.htm" class=tips>News</a></li> <li class="tips"><a href="Page 3.htm" class=tips>Contact</a></li> <li class="tips"><a href="Page 4.htm" class=tips>About</a></li> </ul> </div> </div> <div id="content" style="background-color:#EEEEEE;margin-right:10;padding:10;border:5px solid"> <p>Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here Content goes here </p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> <p>Content goes here</p> </div> <div id="footer" style="clear:both;"> <div style="margin-top:30px;background-color:#FFA500;text-align:center;"> <p>Copyright (C) 2011 nothing.com</p> <h4>Footer Sample</h4> Page loaded at Tuesday, 04-Oct-2011 15:00:03 PDT </div> </div> </div> </body> </html> Hello fellow helper By now you probably know my topics by name and find them somewhat annoying due to their difficult nature.. (ive gotten few to no replies on them..) Anyways, im back.. with.... a simple question! Its about tables.. i havent studied them yet. Just getting into whole table thing. I want to insert an image that will serve as a LEFT outer border that will connect the header image and the image below. To get the point check this out: http://.com/FINAL.html It is a 38 x 24 .png.. and i was thinking about stretching it to fit. Dont know if thats the solution.. but hey, thats why im posting. Please tell me what codes to insert and where. The image i was talking about is located he http://.com/blokjee.png Appreciate any help! Dont be shy.. please. Thanks. HTML Code: <div> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </div> <div align="center"> </div> <table style="border-collapse: collapse; width: 600px;" align="center" border="2" bordercolor="#410d3e" cellpadding="0" cellspacing="0"> <tbody> <tr> <td align="left"> <table style="width: 90%;" cellpadding="0" cellspacing="0"> <tbody> <tr> <tbody> <tr> <td id="YMLPZCTD" align="center" valign="top"> </tr> </tbody> </table> </td> <td align="left" valign="top" width="100%"> <table style="width: 100%;" class="YMLPBT" id="YMLPBT" cellpadding="10" cellspacing="0"> <tbody> <tr> <div align="right"><img src="http://www..com/top.png" border="0" height="110" width="711" /></div> <td id="YMLPBTTD" align="left" valign="top"> <div><b> <font color="#410d3e" face="verdana,geneva" size="3"> <br /> Nieuwsbrief februari 2010</font></b></div> <table style="width:100%;" class="YMLPS3" id="YMLPS3" cellpadding="0" cellspacing="0"> <tbody> <tr> <td style="width: 100%;" align="left" valign="top"> <tbody> <tr> <td align="left"> <table style="width: 100%;" border="0" cellpadding="45" cellspacing="0"> <tbody> <tr> <td style="width: 100%;" align="left" valign="top"> <div><p> <font face="verdana,geneva" size="2">Beste Lezer van mijn eerste nieuwsbrief, <br> <br> Graag wil ik je opmerkzaam maken op de nieuwste activiteiten van <br> Sessio Communications. <font color="#410d3e"> <br> <br> <br> <div align="center"><img src="http://www..com/koord.jpg" border="0" height="189" width="170"/> <br> <a href="http://.com/basis.html"target=”_blank” ><b>Asitisinheaven.com</b></a></font></p></div> Ik nodig je van harte uit om <a href="http://www..com"target=”_blank” >mijn website</a> te bezoeken.<br> Reacties zijn welkom. Doorsturen naar andere belangstellenden mag. <br> <a href="[FORWARDTOFRIEND]"target=”_blank” >Stuur deze email door naar een vriend of vriendin.</a></p> </p><p> Mocht je geen belangstelling hebben om op de hoogte te blijven van<br> mijn verschillende workshops en trainingen dan kun je dat via de <br> link onderaan de pagina aangeven. Je e-mail adres wordt dan verwijderd. </div> <div><font face="verdana,geneva" size="2"><br /> Met vriendelijke groet,<br /> <br> Jan M.M. Boesten<br> <a id="link" href="http://www..nl"target=”_blank” >www..nl</a><br></p> </font> </div> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </table> <div><img src="onder.png"></div> Jesse bjr 2 created a site ac XHTML / CSS Oh sorry, here is no Sms :p Hello =) I try to create a site with XHTML / CSS, for now, I'm doing pretty good! No luck, to insert the banner hangs her: / I insert this code: Citation Code: <Div id = "<img src="images/hawai.jpg" alt="Photo Hawaii" /> <! - Here we put the banner -> </ Div> <div id="menu"> <! - Here we will put the menu -> </ Div> <div id="corps"> <! - Here we put the main content of the page (all text what) -> </ Div> <div id="pied_de_page"> <! - Finally, we will down the page the name of the author, copyright ... -> </ Div> (Example teo21 @ m) But nothing happens! So, hoping you can help me: / Regards! Hi, I hope I am posting this in the right place. I would like to insert the <h> tags to headings & sub headings in certain areas of a web page. But if I place the <h> tag next to the word or phrase that is relevant, it increases the font size. Am I ok to have the code like below or will the SE’s read everything between the tags, including the code & confuse the whole thing. Its just a case of wanting to not have the text as large as some of the <h> tags want to make it. <center><h1><font face="arial" size="3" color="000000"><b>My text here</b></font></h1></center> Hope you can help! Many thanks. Chris. Hello we i insert pic only show in fix area but i wanna show it in my my complete page (not backgroud) pic. This is my code <img src="abc.gif" alt="abc" /> <img src="abc.jpg" alt="abc rock" width="304" height="228" /> i wanna show my pic only as header and in whole page you can see this in forum header. and see link for example http://uploadpic.org/v.php?img=JvzHJN0gmm please help me Hi everyone! With HTML: How do I create an entry in a mysql database? How do I delete one? How do I delete one at a specified time? How do I take a value from a column in an entry and display it in a textbox? Thanks! This might get a laught or two but how do I insert an affiliate link into an eBook that will be a PDF. All I have are html links and javascript links. Thanks in advance... I'm trying to insert a background image from my CSS into a table and not having any luck getting the image to appear. This is what the CSS looks like: #trekBike { background-image: url(assets/photos/bluerackbike.jpg); height: 188px; width: 250px; z-index: inherit; position: relative; top: 10px; left: 10px; } and in my table I try to call the style like this: <table width="791" border="0" cellspacing="1" cellpadding="2"> <tr> <td><div id="trekBike"></td> How should I be referencing the CSS? I aprreciate any help that anybody can give me. Suppose that I have two pictures acting as borders for the page, one on the left, one on the right. How would I have text automatically wrap itself around inside of those two images? Thanks in advance. I can't figure out how to get IE to position this page at the top. This has consistently worked perfectly in FireFox, no matter what changes I try. It has consistently NOT worked in IE, it starts each page 180 px from the bottom of the header. And please don't rag on me for using tables. This is custom coding for a Perl system we are using. The programs generate tables and rows, and I have to fit my code into the generated pages. Here's the code that's currently running. I know there are duplicates in here, I kept adding things hoping something would wake IE up. It's interesting that with all this redundancy, FireFox has no problems at all. And both the HTML and the CSS validate. The first table is actually in the header, and closed in the footer, so it has to be there. ============================================= <table class="ac_mainbody" cellpadding=0 cellspacing=0 style="position: absolute; left: 260px; width: 550px; top: 180px;"><tr><td> <table width="85%" align="left" border="0" cellpadding="0"> <tr><td class="top_of_page" colspan="4" valign="top" style="vertical-align: top;"> <h5><font face=Georgia color="#990066" size="2"> Offering quality products that bring safety and comfort into your life. We seek out unique equipment and supplies designed to improve the quality of life for those with disabilities and those who assist them.</font></h5></td></tr> <tr><td style="text-align: center;" colspan="4"> ============================================= Everything after this point is lined up correctly in both browsers. It's the starting position that I can't get IE to recognize. I started with just CSS, here's the code: h5.top_of_page {font-size: 12pt; color: #990066; margin: 0px 0px 0px 0px; padding-right: 60px; font-weight: bold; text-align: left; vertical-align: top;} IE ignored everything, including the font color. That's when I started adding names and parameters one at a time, including valign and the font stuff. I also tried <p> and <div> instead of the second table. Same problem. I tried position=”relative” --- everything clumped together at the left, 180px too low on FireFox and 360px too low on IE I tried position=”fixed” --- everything clumped together at the left, and still low on IE Hi, I wish to insert the same HTML code into every page as it is the code for a Menu Bar which will need to be changed. How would i go about this? Thanks Henry I am looking for some script that allows me to insert a media player in to my page, preferably windows media player. I currently have one inserted but i want it to be able to use more than one media file and have previous and next to play other songs. The current one i have is Code: <script type="text/javascript"> AC_AX_RunContent( 'id','MediaPlayer','width','100%','height','190','classid','CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95','standby','Loading Windows Media Player components...','type','application/x-oleobject','src','03-Slinkee Minx - Summer Rain (Alex K Mix).mp3','showcontrols','true','showstatusbar','true','showdisplay','false','autostart','false','filename','03-Slinkee Minx - Summer Rain (Alex K Mix).mp3' ); //end AC code </script><OBJECT ID="MediaPlayer" WIDTH="100%" HEIGHT="190" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject"> <PARAM NAME="FileName" VALUE="05-johnny_cash-long_black_veil.mp3"> <PARAM name="autostart" VALUE="false"> <PARAM name="ShowControls" VALUE="true"> <param name="ShowStatusBar" value="true"> <PARAM name="ShowDisplay" VALUE="false"> <EMBED TYPE="application/x-mplayer2" SRC="05-johnny_cash-long_black_veil.mp3" WIDTH="100%" HEIGHT="190" ShowControls="1" ShowStatusBar="1" ShowDisplay="0" autostart="0"> </EMBED> </OBJECT> Like i said this will only play one song that is specified and i want it to be able to play more than one file. Anyone got any good scripts to play multiple media files? Thanks. I'm new to HTML and I am just playing around with a few things to work on learning it. I am just using notepad and trying to insert an image to my web page. I have the image saved in the same folder as my notepad.html. I've tried both these codes but neither have seemed to work <img src="/image.jpeg" alt="image" /> and <img src="/folder/image.jpeg" alt="image" /> Could someone help me figure out exactly what I am doing wrong. Also if you know of any sites that are good at explaining the very basics would be nice too. Thank you. Hi there, i'm trying to insert a flash movie into the html of my index.cfm file using dreamweaver. Im quite new to working with files that link to a coldfusion database. Anyhow, it doesn't seem to play, and i'm guessing it's because it doesn't like the scripts file generated by dreamweaver. Here is the swf movie http://www.thinking-forward.co.uk/sk...rintoffers.swf. It calls on images using xml. Any help would be much appreciated. Regards Hello Folks, I have created a graphic using photoshop CS2 that will form the basis of a webpage. I am a little stuck as to how to include rollover buttons. This is the graphic as it is at the moment: http://magicalwonders.com/colingreen/ With my first attempt at using a background graphic for a website I was able to use a repeating tile in the left hand side bar, and insert basic image buttons for navigation. This time though the situation is a little different, as I am not using a solid colour in the side bar, in favour of a graduated colour image. I have yet to slice the graphic, and will create a slice towards the bottom of the graphic that can be used to repeat - so that any overflow text doesn't break the design. What I'm not sure about is, if the main background image for the side bar, and the repeat background tile can occupy the same cell, both as background images? If they can, then adding rollover buttons should not be a problem. If they can, I'm not sure what the code would look like to handle that. If they can't, I'm wondering what other method can be used to include Rollover navigation buttons. I'd be grateful if someone can advise. Many thanks, Myles Wonder if anybody can help me. I'm looking for the correct code to be able to grab a piece of text from a text file (rather than having the text in the raw code) and insert it into a page, in a similar manner that the img src="x.jpg" command grabs the picture at x.jpg and inserts it into a page. Any ideas? Thanks for any help. Peter+ |