|
HTML - Trouble With Adding .jpg Images
Hi everyone. I am a pretty experienced html-er. I've been doing it for many years, so I'm very familiar with basics, etc. I've run into this problem before in the past, but it is haunting me again and driving me nuts.
All my folders are fine with respect to the structure of my code. I am having trouble with SOME of my .jpg images showing both remotely and on my uploaded webpages. These troublesome images show up when I edit them, ie. in my editing software. However, when I put them in their respective image folders and write my html, they do not show up in the browser. I absolutely know my source code is fine. I absolutely know the .jpg file(s) are named correctly. But some of them just won't show up. I looked at the details on the properties for these pictures and the ones that will not appear have camera make/model embedded in the information. I've tried to remove the information, but it still isn't making a difference. I've tried to convert the images again into .jpg format, but it is also not making a difference. I'm currently running Windows 7, but had this problem with WinXP in the past as well. Have any of you had this problem? I'm so frustrated! The photos are of products from my manufacturer. However, like I said, they have no trouble displaying while in my editing software and in the actual image folders themselves. It's only when I call them into my html document that they disappear. Grr! Similar TutorialsPlease take a look at the image I attached to this post. If you look closely, you can tell that the bottom half of the lightbulb, the "Imaginit" title, and the yellow bar to the left of that is all one image file. Above that is a larger image (part of which has the top half of the lightbulb) that spans the whole page. I'm sure you can tell by the break in the lightbulb and the white borders around the image where this question is going... I'm trying to get rid of those breaks. Currently, the large image on top is in its own span tag. Below that everything else is organized in a table structure. I've messed with border-collapse: collapse, tried setting the margins to negative values (of em, px, & pt), set border widths to 0. Nothing gets rid of those spaces. Setting the background color for the cells I think would work, but the problem there is that the bottom-half-lightbulb/Imaginit image's cell is set to colspan=2, rowspan=2. Is it possible to have the image just be "laid" over four individual cells? Just a thought. I'm doing this in Visual Studio 2005/ASP.NET if that helps any. Thanks for anyone's help. I'm having some trouble with my site. Some images at the bottom are shifting when using IE. On Safari, it looks fine. Just wondering if anyone can help... Here is the site: http://www.ballermag.com/ and here is the code: <td width="100" valign="top"><a href="http://www.ballermag.com/blog/?cat=40" target="_blank"><img src="img/duzzblog.jpg" alt="Duzzyduzz" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> </tr> </table></td> <td><table border="0" cellspacing="0" cellpadding="3"> <tr> <td width="100" valign="top"><a href="http://www.ballermag.com/blog/?cat=21" target="_blank"><img src="img/jessblog.jpg" alt="J-Dimes" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" nowrap="nowrap" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> </tr> </table></td> <td><table border="0" cellspacing="0" cellpadding="3"> <tr> <td width="100" valign="top"><img src="img/what.gif" alt="Who's next?" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" nowrap="nowrap" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> I am having trouble getting an image to line up in a cell so that the text aligns left and the image directly to the right of it to match the other cells. http://smartvending.com/testindex.html Can anyone see what is wrong with the code that is preventing the Coin Counters & Sorters gray box from allowing anything to align closer to the right side of the box matching the other cells? Any help is greatly appreciated! Thanks Ok I'd really like to design a darker them with a lot of textures like this one: http://www.grafpedia.com/tutorials/c...o-pixel-layout But thats just a photoshop walk-thru. So how would you go about making a background like the one shown with a couple of different textures without making just 1 large huge image? I'm worried about download times as I have my background image as a 1px image set on repeat. But if I choose to have a site design like shown in that link, I cant use the 1px image size option any more, or can I? Basically I'm lost as to how to get my site to look like the design in the link. Here it is now: http://acidtripmediaproductions.com/lmi/index.html I'd like to extend the main center div to go from the top to the bottom and "Frames" all the content within it Whats the easiest way to do that? Would I want to keep the side bar nav where its at if I do this? Basically, I am making a website for someone but I am having a bit of DIV trouble. The part I am having trouble with is the content box. I have a content box that I need to be fixed (width) and it needs to stretch vertically when there is content on the page that will overfill the original page. There is then a div under this content which is a footer type image. This needs to move down when the content fills the above box.. I can't get this too work, all it does is strech horizontally, and when I stretch it vertically it just shows up blank... Any ideas? First, I'm no expert, but I can work my way around a bit of HTML If you're familiar with myspace pages, great! I'm working on a band profile, which is trickier than a user profile (at least, if you want it to look legit): http://www.myspace.com/489097511 It still needs a lot of work, but the reason I'm looking for help is the bottom of the page (user information, online now, last logged in, general info...etc) I'm curious as to how I can place a layer over it, on which I can post whatever I want I can't seem to get a div to cover that area, and if I do, it only ever appears under all the info I want to cover. Any help is much appreciated! Dear friends i have in big trouble. so i want yours help. i make one website. i put there many HTML codes. i put there .. not image click HTML code .. now when i configuration my main page the HTML codes not opend. but i do inside pages configurations. but i put ,,, not image click HTML code ,,, on main page so i want give me HTML code i put on my site. they all HTML code stoped working or dead .when i delet ... not image click HTML code ... after i remove HTML stoped working code. i hope some 1 help me awatings yours I am currently working on a website for my fraternity and am using geocities as a temp service to get my site correct before I get a .org name. For some reason Internet Explorer won't show anything, but when you use Mozilla it shows up just fine. I checked to see if it was just geocities that was messed up, but it did the same thing with cjb.net, so I'm stumped. I don't know what's wrong with my code, everything seems fine, there's no deprecated tags or anything of that nature. Here's a link to the website. Any help would be greatly appreciated. First I want to say that this forum is great and has been alot of help. I also want to thank bsxiong for his help already. If I could send you a beer electronically, I sincerely would. I had two problems initially, and one has been fixed very easily. Thank you. However, the solution to the other still eludes me. I don't have the page on the domain yet, and can't until it's finished. I uploaded the link to geocities so that you can see the page. I didn't include the style sheet, but hopefully this gives the general layout of the page. http://www.geocities.com/thecyberrev/newly.html On the page, there is a pic to the left below the top banner. Below the pic is the bold text, "Home". Below that text is a thin divider line and more text that reads, "Building organizations that build lives.". Basically all I am trying to do is move the text, Home to the left of the pic and enlarge it so as to act as a title for the page. (This would below the blue header banner in the large white blank area) Everything I seem to do either puts the text just below or just above the pic. What am I doing wrong? I think it's something very simple but it's eluding me. Please excuse my ignorance. Any advise would be greatly appreciated. I'm in a beginners HTML course. I need to put an image next to a table on the same line. From what I've read, I think I have to make a table within a table to make this work. I realize CSS would be better but it's an HTML class and this is what the teacher wants. <table border="1"> <tr> <td>Link</td> <td>Link</td> <td>Link</td> </tr> <tr> <td>Name</td> <td>Name</td> <td>Name</td> </tr> </table> Now I need the image on the right side of that table. How would that work? If I align it to the right, it goes on the right side of the page. I need it next to the table, with only a tiny space in between. Any help? I also need the table to stay exactly the same. When I tried different ways of putting the image inside the table it just screwed up the sizing of the table. Thanks. Hi I'm trying to make a menu that has sub-menus within it. It will be a vertical menu and right now I'm still working it out so it's not as graphically pleasing as I intend it to be. But before I go any further in the menu I'm trying to figure out how to get the submenu to have links in it. I was just wondering if someone could lend their input on how to get the sub-menus to have links.Here's the Code(I included the style in the page)- Code: <html>
<head><style>
#menu {
width:100px;
text-align:center;
position:absolute;
left: 50px;
margin:2em auto;
z-index:99999;
border-right:10px #000000;
}
.box {
position:relative;
z-index: 99999;
border-right:10px #000000;
}
#menu a, #menu a:visited {
text-decoration:none;
background-color:#fff;
color:#c00;
display:block;
width:140px;
height:21px;
font-size:14px;
border:1px solid #fff;
border-right:10px #000000;
padding:5px;
}
* html #menu a, * html #menu a:visited {
width:150px;
height:35px;
w\idth:88px;
he\ight:16px;
border-right:10px #000000;
}
#menu a span {
display:none;
}
#menu a:hover {
border-right:10px #000000;
}
#menu a:hover span.left,
#menu a:hover span.right { /*outside area of arrow*/
display:block;
position:absolute;
height:0;
width:0;
overflow:hidden;
border-top:8px solid #fff;
border-bottom:8px solid #fff;
}
#menu a:hover span.left { /*arrow*/
left:5px;
top:5px;
border-left:8px solid #c00;
}
#menu a:hover span.right {
left:150px;
top:5px;
border-right:8px solid #c00;
}
* html #menu a:hover span.left,
* html #menu a:hover span.right {
width:8px;
height:16px;
w\idth:0;
he\ight:0;
}
#menu a:hover span.lk { /* extra infor spot*/
display:block;
position:absolute;
left:140px;
top:0;
padding:5px;
width:150px;
background-color:#fff;
color:#000;
border:1px solid #234;
}
</style></head><body>
<div id="menu" style="z-index:9999999;">
<br><br><br><br><br>
<div class="box">
<a href="#nogo">Item 1
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 1
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 2
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 2
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 3
<span class="left">dhsf</span>
<span class="right">dshsdg</span>
<span class="lk">
Description of link 3
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 4
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 4
</span>
</a>
</div>
<div class="box">
<a href="#nogo">Item 5
<span class="left"></span>
<span class="right"></span>
<span class="lk">
Description of link 5
</span>
</a>
</div>
</div>
</div></body><html>
Thanks for your input. Okay, as you can see from my screenshot, my problem is that the two images in the bottom cells are not at the very bottom, i am not sure how i align them so that they are. And heres the code: Code: <html>
<head>
<title>
Fun Maths
</title>
<style type="text/css">
<!--
body
{
background: #336699;
}
p
{
text-align: justify
}
-->
</style>
</head>
<body>
<div align="center">
<table border="0" width="500" height="100%" bgcolor="#FFFFFF" cellspacing="0" cellpadding="0">
<tr height="15">
<td>
<img src="whiterb1.gif" border="0" />
</td>
<td>
</td>
<td>
<img src="whiterb2.gif" border="0" />
</td>
</tr>
<tr colspan="3">
<td>
Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
</td>
</tr>
<tr height="15">
<td>
<img src="whiterb3.gif" valign="bottom" border="0" />
</td>
<td>
</td>
<td>
<img src="whiterb4.gif" border="0" />
</td>
</tr>
</table>
</div>
</body>
</html>
On my website, I use javascript to allow pages to open up in new pop up windows, which have a fixed height and width. For example, this page: http://treehousetees.webng.com/0301.htm. On this page the following buttons will open a new window: Contact View Shopping Cart Size Chart Add to Cart So I have four buttons all using the same javascript to open a window. Since all 4 buttons refer to the same javascript, all of the windows open with the same height and width. So my question is, how can I edit the height and width of each individual window? For example, I want the 'contact' window that pops up to be smaller. Sorry if my question is a bit confusing... But I would appreciate any and all help regarding this matter. ok i was wondering whats wrong with my background could some1 tell me if thiers something wrong with my code, the problem i have is the background appearing i do everything it says to but it still dosent work <html xmlns="http.thewaywardgamer.com> <head> <title>the way of the gamer</title> </head><body> <html> <body background="image.jpg"> <p align="center"><font size="50"><font color="#cccc80"><b>WELCOME TO GAMERWORLD</b> </font></p> <p> </body> <SCRIPT TYPE="text/javascript"> <!-- function dropdown(mySel) { var myWin, myVal; myVal = mySel.options[mySel.selectedIndex].value; if(myVal) { if(mySel.form.target)myWin = parent[mySel.form.target]; else myWin = window; if (! myWin) return true; myWin.location = myVal; } return false; } //--> </SCRIPT> <FORM ACTION="../cgi-bin/redirect.pl" METHOD=POST onSubmit="return dropdown(this.gourl)"> <SELECT NAME="gourl"> <OPTION VALUE="">Choose a Destination... <OPTION VALUE="http://www.purezc.com" >purezc <OPTION VALUE="http://www.youtube.com" >youtube <OPTION VALUE="http://www.miniclips.com" >miniclips <option VALUE="file:///C:/Documents%20and%20Settings/Owner/Desktop/games.html">bunker </SELECT> <INPUT TYPE=SUBMIT VALUE="Go"> </FORM> <p> <p align="left"><font size="4"><font color="#660066">hello all and welcome to the world of gamers.where nintendo is our god.</font></P> <MULTICOL COLS=3> <UL> <lI><A HREF="links.html">Click Here for My Favorite Links</A> <li><A HREF="games.html">Click Here for Flash Game bunker</a> </UL> </MULTICOL> <br> <br> <br> <br> <body> Our address by FAN mail:<P> <ADDRESS> p.o box 183,perkinsvile vermont </ADDRESS> </body> <body> <!-- Begin Google Search --> <input type="hidden" name="cx" value="partner-pub-6155056320102818mfj3qxh2mm" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="ISO-8859-1" /> <input type="text" name="q" size="25" /> <input type="submit" name="sa" value="google search" /> <!--img src="/acustom/google.gif" border="0" alt="Google" style="vertical-align:top;" /--> <!-- END Google Search --> </html I'm having trouble getting the same look for my site in both Firefox and IE. Currently, the site looks great in Firefox. It looks just as I would like it. The nav links are all lined up on the left, and the login area is nice. However, when I view it in IE, things are different. The nav links all seem to be centered somehow, causing them to not line up very well. The login area is not as tidy either - the text input boxes are different sizes, even though they are both marked to hold 10 characters. Anyone have any idea how I can get the look that is working in Firefox to also work in IE? The website URL is www.learn-korean-now.com Thanks. I have this coding: <table style="display:inline;border-collapse:collapse;border:0"><tr> <td style="padding:0"><img src="transparent.gif" align="center" width="1" height="200" style="background:red"> </td></tr></table> But the red line is on the top left when I need it in the center middle.....can someone please help me get it into the center middle..or is there another way of making that line but more easy and simple? Thanks! So I'm exceptionally new to html. I'm trying to get rid of the space between two table rows, so the images in them sit flush. Can anyone help? I and new to the forum - I am a bit disappointed in myself for not solving this myself However any assistance is appreciated I purchased a Template and tweaked the psd file to make a secondary page, I was able to delete some slices to trim the page down to what I want http://www.naturalstone.ca/index_do.html the large white space on the right I would like to remove the reference to the jpg image and insert bgcolor="#5F0401" into the <td rowspan="8> because I plan to add content that will scroll well down that page ------code ------- <td rowspan="8"> <img src="images2/index_do_03.jpg" width="549" height="680" alt=""></td> ----------- Every time I try to edit the <td rowspan="8"> it totally screws up the left menu and the page itself any ionfo appreciated - I am about to eat the keyboard over this ~ian I built my page using Firefox to view it and it looks how I want it but in IE (and possibly all other browsers?) it doesn't look right. My html and css validates (with W3C), so I guess I'm relying on a Firefox bug or something. Here's the page: individual.utoronto.ca/nicolemorgan One of the problems seems to be that in Firefox, on my web page, a certain table cell is defined by the width of the top cell in the same column and wraps its contents (which is text), whereas in IE the width definition isn't recognized and the text isn't wrapped. My temporary solution is to manually break the lines of text so that they fit within the cell dimensions, but this feels messy. (The column in question is where the tan-coloured blocks are on the left side of the page.) Other problems are that some of the cells don't line up, and there is a thin line between two certain cells in IE but not Firefox. Is there some basic principle I'm missing, or is my code just messy, or what? |
|||||||