|
HTML - Image Not Displaying In Browser?
Hello all, I am not understanding the coding for the relative path for my image from the index.html page. I have an image which I gave the name "jesus.jpg" and this image is located in my pc in the folders
c://mike'sdocs/websites/church/churchimages/jesus.jpg The index.html file is in the "church" folder and the image itself "jesus.jpg" is in the "churchimages" folder. so the code I am using is <img src="churchimages/jesus.jpg" /> but it does not show in Firefox's browser, help please? I tried other images in that same folder but same result, what could be wrong here please? Similar TutorialsHello! Please ceck: http://htlounge.net/testing Near to logo is a adsense banner.. 468x60. In IE and Opera is displaying ok! But in Firefox not.. It is a white space! What is the problem! Thank you! I'm making a webpage that has a photo gallery on it. I found a very nice photo gallery to use at cssplay.co.uk. The gallery uses a Div in order to work. I nested the div inside of a table so that I could create the look that I wanted to. However, the footer of my webpage won't show up, no matter what I try to do. Does anyone have any suggestion? Thanks P.S. Sorry I had to take out some of the code so that it would post. here is the code: HTML Code: <!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>
<title>Galleries</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-type" content="en" />
<title>Galleries Home</title>
<link href="../../CSS/Table_Header_Style_Sheet.css" rel="stylesheet" type="text/css" />
<link href="../../CSS/Marquee Style Sheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../JS/ie5.js"></script>
<script type="text/javascript" src="../../JS/DropMenu1.js"> </script>
<!--THE CODE FOR THE PHOTO GALLERY BELOW IS THANKS TO STU NICHOLLS AT [url]http://www.cssplay.co.uk/[/url] -->
<style type="text/css">
body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}
table.dm1 { background: url( "http://i1131.photobucket.com/albums/m541/Mitch_Guzman/JetDragsterLogoWatermark2-1-1.png?t=1306259715") no-repeat; background-position:center }
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at [url]http://www.cssplay.co.uk/menu/lightbox.html[/url]
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
/* slides styling */
.photo {width:635px; text-align:left; position:relative; margin:0 auto;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}
.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}
.photo ul.topic li.active a
{color:#000; background:#bbb;}
.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}
.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}
.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}
.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
.table {
height: 100%;
width: 1000px;
}
table.background { background: url("http://i1131.photobucket.com/albums/m541/Mitch_Guzman/JetDragsterLogoWatermark2-1-1.png?t=1306259715") no-repeat; background-position:center }
body,html {
margin:0;
padding:0;
height:100%;
}
table.background { background: url("http://i1131.photobucket.com/albums/m541/Mitch_Guzman/JetDragsterLogoWatermark2-1-1.png?t=1306259715") no-repeat; background-position:center }
a:link {
color: #94D4FF;
text-decoration:none;
}
a:hover{
color:#FF0;
}
a.header:link {
background:none;
color: #00C;
}
a.header:hover {color:#FF0; background:none; }
<!--This allows the color of the links to change when you hover over them a:visited {
color: #94D4FF;
}
-->
</style>
</head>
<body background="../../Images/CarbonFiber.jpg" link="#94D4FF" vlink="#94D4FF" alink="#94D4FF">
<div id="header" align="center">
<img src="../../Images/jdp.pr.erau.edu_Header.jpg" width="1000" height="95" />
<table background="../../Images/Table header Background.jpg" align="center" border="none" height="50" width="1000" cellpadding="0" cellspacing="0">
<tr align="center">
<th>
<a href="../Home/Home Page.htm" class="header">Home Page</a>
</th>
<th>
<a href="../Research/Research home.htm" class="header">Research</a>
</th>
<th>
<a href="Galleries Home.htm" class="header">Galleries</a>
</th>
<th>
<a href="../JDP Calendar/JDP_Calendar.htm" class="header">Calendar</a>
</th>
<th>
<a href="../Contact Us/Contact Us.htm" class="header">Contact Us</a>
</th>
</tr>
</table>
</div>
<table class="background" border="0" bordercolor="#0000FF" align="center" style="width: 79.25%;" cellspacing="10" height="750">
<tr>
<td align="center" valign="top">
<div class="photo">
<ul class="topic">
<li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>
<ul>
<li><a href="#bird1"><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></a></li>
<li><a href="#bird2"><img src="lbox/bird2.jpg" alt="" title="" /></a></li>
<li><a href="#bird3"><img src="lbox/bird3.jpg" alt="" title="" /></a></li>
<li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /></a></li>
<li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /></a></li>
<li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /></a></li>
<li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /></a></li>
<li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /></a></li>
<li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /></a></li>
<li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /></a></li>
<li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /></a></li>
<li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /></a></li>
<li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /></a></li>
<li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /></a></li>
<li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /></a></li>
<li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
</div>
[color="Red"]This is the part I'm not sure about.[/color]
</td>
</tr>
<tr style="background-color:transparent; vertical-align:text-top" align="center" >
<td colspan="3" style="font-size:12px" valign="top">
<a href="../../Home/Home Page.htm">Home</a> |
<a href="../../Research/Research home.htm">Research</a> |
<a href="../../Galleries/Galleries Home.htm">Galleries</a> |
<a href="../../Calendar/Calendar.htm">Calendar</a> |
<a href="../../Contact Us/Contact Us.htm">Contact Us</a>
<br />
<p>Copyright © 2011 Embry Riddle Jet Dragster Project <br />
Embry-Riddle, Prescott, AZ. All Rights Reserved <br />
Designed by: <a href="mailto:mguzman9294@gmail.com">Mitch Guzman</a> </p>
</td>
</tr>
<div id="ads"></div>
</table>
</body>
</html>
I am having problems viewing any images on the browser and don't know why so I am starting from scratch. I have placed an image titled "jesus.jpg" into a folder named "church" on my C drive, the relative path is C:/mike'sdocs/websites/church just to be sure I checked the image's properties and it confirms the image is a jpg file, I copied this image into Apache's htdocs folder where I placed the index file and this is all I am getting, the pic itself does not show, all I am seeing where the image should be is a rectangular bordered box on a transparent background with a small icon of a dog-eared page with 3 colored tiny symbols in it, what could be wrong here please? This is not an Apache issue, I was getting this same problem before just using Firefox's browser and I was told to install a webserver which is why I installed apache which is working fine as I can see any changes made to the text on my index page in Notepad. The code I am using is: <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <img src="jesus.jpg" width="144" height="50" /> </body> </html> Hi all, just came here to ask why is it that when I try to open my HTML file in Internet Explorer, which I created in note pad, it comes up with the code I typed it rather than displaying the actual page? Like for example I typed in this... <html> <head><title>Interspecies Conflict Videos</title></head> <body> <div align="center"> <img src="web logo.jpg" alt="Web Header" /> </div> </body> </html> And all I got was the code you see above you, there was no picture or anything. Hey guys. I need a little help with my HTML image rotator. Everything works fine, except the images don't show up on the right slide. All 4 images show up on the first slide. I can't figure out what's wrong. Any help will be greatly appreciated. Code: <!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
#sliderwrap {
height: 403px;
}
#sliderleft {
width: 10px;
height: 100%;
float: left;
background: #efefef;
border: 1px solid #ccc;
}
#sliderleft div {
height: 100px;
border-bottom: 1px solid black;
}
#slidercontent {
position: relative;
width: 650px;
height: 100%;
float: left;
border: 1px solid black;
overflow: hidden;
}
#sliderimages {
position: absolute;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#sliderimages img {
display: block;
}
.s0 #slide0,
.s1 #slide1,
.s2 #slide2,
.s3 #slide3 {
background: #ccc;
}
.s0 #sliderimages {top: 0 }
.s1 #sliderimages {top: -500px}
.s2 #sliderimages {top: -1000px}
.s3 #sliderimages {top: -1500px}
</style>
<script>
var slide = 0;
var interval_id = 0;
function stop_timer() {
clearInterval(interval_id);
if (this.getAttribute("data-slide")) {
slide = parseInt(this.getAttribute("data-slide"));
document.getElementById("sliderwrap").className = "s" + slide;
}
}
function start_timer() {
clearInterval(interval_id);
interval_id = setInterval(
function() {
slide = (slide + 1) % 4;
document.getElementById("sliderwrap").className = "s" + slide;
},
3000
);
}
window.onload = function() {
start_timer();
var el = document.getElementById("slidercontent");
var divs = document.getElementById("sliderleft").getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onmouseover = stop_timer;
divs[i].onmouseout = start_timer;
}
el.onmouseover = stop_timer;
el.onmouseout = start_timer;
}
</script>
</head>
<body>
<div id="sliderwrap" class="s0">
<div id="sliderleft">
<div id="slide0" data-slide="0"></div>
<div id="slide1" data-slide="1"></div>
<div id="slide2" data-slide="2"></div>
<div id="slide3" data-slide="3"></div>
</div>
<div id="slidercontent">
<div id="sliderimages">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Hi! I've been working with html for a couple of years, but working with XML, C#, ASP.Net for the past three months and I may be exhausted, but for the life of me I cannot see why the image is not displaying for this page. See code below: <table width="100%" border="0"> <tr> <td align="center"><font face="Times, Arial, Helvetica"><a href="picLHVSMFP.htm" target="main"><img src="../images/picSHVSMFP.jpg" width="324" height="500" alt="Harmony Village - Sheppard - Main Floor Plan" border="0"> </a></font></td> </tr> <tr> <td> </td> </tr> <tr> <td align="center"><font color="#000000">Harmony Village - Sheppard - Main Floor Plan</font></td> </tr> <tr> <td> </td> </tr> <tr> <td align="center"><a href="picHVSFP4.htm"><img src="../images/rightarrow.gif" width="11" height="10" border="0"></a> <font color="#003333"><a href="future.htm">Future Projects</a></font> <a href="picHVSFP2.htm"><img src="../images/leftarrow.gif" width="11" height="10" border="0"></a> </td> </tr> </table> I have underlined and bolded the image that is not displaying. The other images on the page are displaying and the links work and I have triple-checked the spelling and opened the image with Adobe Photoshop multiple times. I have even tried decreasing the image size, although larger images have displayed on the website without problems. Is there a syntax problem that I am just not seeing? I have attached the image as well. Thanks!!! I've had a few different problems with this page. In an earlier version, I had the bottom content contained in a div called 'bottom'; however, in IE this created an unwanted gap between the two top divs and the bottom one that I couldn't figure out how to get rid of. So I tried something else, and I thought I had it figured out. This layout works well enough in FF ((still needs a bit of work, but nothing I don't already know how to do, just haven't gotten to it yet)), but it displays weird in IE. I know that adding the proper doctype fixes the problem, but I don't have that option. The webhost I have to work with isn't the best, and thus I need a way to make this display properly in quirks mode in IE. My problem is the image that appears on it's own row in the middle of the page, it should be in the same row as the two images directly below it. Here's my code: Code:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Berean Baptist Church</title>
<style type="text/css">
#all{
width: 755px;
}
img{
border: 0px;
}
a.default:hover{
cursor: default;
}
#D_1091040261286 {
display: none;
}
#firstright{
float: right;
height: 230px;
width: 240px;
}
#firstleft{
float: left;
height: 230px;
width: 504px;
}
#bottom{
text-align: center;
height: 560px;
width: 762px;
}
#tablist{
padding: 0px 0px 3px 0px;
margin-top: 5px;
margin-left: 1px;
font: bold 10px Verdana;
}
.buttons{
font: bold 10px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
color: white;
text-decoration: none;
padding: 3px;
margin-left: 0px;
border: 1px solid black;
background-color: #69090A;
}
#tablist li a:hover{
color: #b1272a;
background-color: #efefd1;
cursor: pointer;
}
#linkboxes {
background-color: transparent;
border: 1px solid black;
}
#linkboxes td {
border: 1px solid;
}
#beforeyouattend a {
background: url(/images/10000/3000/914BE/user/beforeyouattend.gif);
display: block;
width: 220px;
height: 28px;
}
#beforeyouattend a:hover {
background: url(/images/10000/3000/914BE/user/beforeyouattendhover.gif);
display: block;
width: 220px;
height: 28px;
}
#weeklybulletin a {
background: url(/images/10000/3000/914BE/user/weeklybulletin.gif);
display: block;
width: 220px;
height: 28px;
}
#weeklybulletin a:hover {
background: url(/images/10000/3000/914BE/user/weeklybulletinhover.gif);
display: block;
width: 220px;
height: 28px;
}
#volunteeropportunities a {
background: url(/images/10000/3000/914BE/user/volunteeropportunities.gif);
display: block;
width: 220px;
height: 28px;
}
#volunteeropportunities a:hover {
background: url(/images/10000/3000/914BE/user/volunteeropportunitieshover.gif);
display: block;
width: 220px;
height: 28px;
}
#pastorsblog a {
background: url(/images/10000/3000/914BE/user/pastorsblog.gif);
display: block;
width: 220px;
height: 28px;
}
#pastorsblog a:hover {
background: url(/images/10000/3000/914BE/user/pastorsbloghover.gif);
display: block;
width: 220px;
height: 28px;
}
#employmentopportunities a {
background: url(/images/10000/3000/914BE/user/employmentopportunities.gif);
display: block;
width: 220px;
height: 28px;
}
#employmentopportunities a:hover {
background: url(/images/10000/3000/914BE/user/employmentopportunitieshover.gif);
display: block;
width: 220px;
height: 28px;
}
#enter a {
background: url(/images/10000/3000/914BE/user/enter.gif);
display: block;
width: 14px;
height: 28px;
}
#enter a:hover {
background: url(/images/10000/3000/914BE/user/enterhover.gif);
display: block;
width: 14px;
height: 28px;
}
#photo {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="all">
<div id="firstright">
<div align="center">
<form style="margin-bottom: 5px;" method="get" action="http://www.google.com/search">
<input id="google" name="q" type="text" size="20" maxlength="255" value="Google search" onfocus="select();" /><img src="/images/10000/3000/914BE/user/google.gif" style="margin:0px; padding:0px;"/>
<div style="margin-top: 7px; margin-bottom: 8px;"><input type="submit" value="Search" />
<input type="checkbox" name="sitesearch" value="bbcfnc.org"/><font size="2">only search </font>
</div>
</form>
<table cellspacing="2" cellpadding="0" id="linkboxes" width="240">
<tr>
<td align="center" valign="middle"><div id="beforeyouattend"><a href="/10000/3000/914BE/welcome"></a></div></td>
<td width="14px" height="28"><div id="enter"><a href="/10000/3000/914BE/welcome5"></a></div></td>
</tr>
<tr>
<td align="center" valign="middle"><div id="weeklybulletin"><a href="/images/10000/3000/914BE/user/ThisWeeksBulletin.pdf"></a></div></td>
<td width="14px" height="28"><div id="enter"><a href="/10000/3000/914BE/ministry10"></a></div></td>
</tr>
<tr>
<td align="center" valign="middle"><div id="volunteeropportunities"><a href="/10000/3000/914BE/floating4"></a></div></td>
<td width="14px" height="28"><div id="enter"><a href="/10000/3000/914BE/floating4"></a></div></td>
</tr>
<tr>
<td align="center" valign="middle"><div id="pastorsblog"><a href="http://pastorseansblog.blogspot.com/"></a></div></td>
<td width="14px" height="28"><div id="enter"><a href="http://pastorseansblog.blogspot.com"></a></div></td>
</tr>
<tr>
<td align="center" valign="middle"><div id="employmentopportunities"><a href="/10000/3000/914BE/floating6"></a></div></td>
<td width="14px" height="28"><div id="enter"><a href="/10000/3000/914BE/floating6"></a></div></td>
</tr>
</table>
</div>
</div>
<div id="firstleft">
<div>
<a id="links" class="pointer" href="#links"><img width="500" height="200" id="photo" src="/images/10000/3000/914BE/user/homepagegallery01.gif" /></a>
<ul id="tablist">
<li><a class="buttons" id="previousbutton" onclick="prev()" onmouseover="number=1; changecontent();" onmouseout="number=2; changecontent();">PREVIOUS</a></li>
<li><a class="buttons" id="pausebutton" onclick="pause()" onmouseover="number=3; changecontent();" onmouseout="number=4; changecontent();">PAUSE</a></li>
<li><a class="buttons" id="nextbutton" onclick="next()" onmouseover="number=5; changecontent();" onmouseout="number=6; changecontent();">NEXT</a></li>
<li><a class="buttons" id="servicetimes" onmouseover="number=7; changecontent()" onmouseout="number=8; changecontent()" href="/10000/3000/914BE/floating5"> SUNDAY WORSHIP SERVICES: 8:30am, 10:45am, 6:00pm</a></li>
</ul>
</div>
</div>
<img align="middle" height="3px" width="185px" src="/images/10000/3000/914BE/user/blank.png"/><br>
<a href="http://www.e-giving.org/start.asp?id=1556"><img src="/images/10000/3000/914BE/user/egiving.gif" alt="E-giving" align="middle" width="185" height="185" hspace="0" vspace="0" ></a>
<a href="/10000/3000/914BE/staff1"><img id="welcome" align="middle" onmouseover="number=9; changecontent()" onmouseout="number=10; changecontent()" height="187px" width="370px" src="/images/10000/3000/914BE/user/Welcome-To-Berean.gif"/></a>
<a href="http://www.bbcfnc.org/media/media/recent.php"><img id="sermonconnect" onmouseover="number=11; changecontent()" onmouseout="number=12; changecontent()" src="/images/10000/3000/914BE/user/sermonsonline.gif" alt="Connect" title="Connect" align="middle" width="185" height="185" hspace="0" vspace="0" ></a><br/>
<img align="middle" height="5px" width="740px" src="/images/10000/3000/914BE/user/blank.png"/><br>
<a href="/10000/3000/914BE/history"><img src="/images/10000/3000/914BE/user/UPWARD-box.gif" alt="Upwards" align="middle" width="185" height="185" hspace="0" vspace="0" /></a>
<a href="/10000/3000/914BE/ministry5"><img src="/images/10000/3000/914BE/user/Berean-Baptist-Academy.gif" alt="Berean Baptist Academy" align="middle" width="185" height="185" hspace="0" vspace="0" /></a>
<a href="/10000/3000/914BE/ShowCalendarMonth"><img src="/images/10000/3000/914BE/user/calendar.gif" alt="Calendar" align="middle" width="185" height="185" hspace="0" vspace="0"/></a>
<a href="/10000/3000/914BE/ministry6"><img src="/images/10000/3000/914BE/user/AWANA-box.gif" alt="Awana" align="middle" width="185" height="185" hspace="0" vspace="0" /></a><br>
<img align="middle" height="5px" width="740px" src="/images/10000/3000/914BE/user/blank.png"/><br>
<div align="center"><img src="/images/10000/3000/914BE/user/BereanCampusPanorama.JPG" width="753" height="172"></div>
</div>
</body>
</html>
I need a solution that doesn't cause the page to display wrong in Firefox, and I'd prefer not to have to use a browser-detection script to document.write different HTML in. I know that would work and I could do that, but I think it would work just as well to stick to the table-based layout that's up on our site now rather than bothering with extra scripts. This is a mixed html, database, and php question. I found this image: http://img.gsmarena.com/vv/pics/sams...eternity-1.jpg And I would like to display it so that the screen part is 240x400 and I would like to run a java app in the screen part. I also want the "?app=whatever" at the end of the url to find the link to "whatever" in a database and use that link for the address to the java app. Finally, I want to set up this database so it contains the name, description, category, link to jad file, and link to jar file of each app. This is my first post here by the way. Hi. I have a question regarding my site. If you click on the link using IE you will see that the images in my tables are cut off on the right, and haven't been scaled at all... In Google Chrome they appear fine. Here is the HTML code snippet: Code: <table>
<tbody>
-snip-
<table>
<tr>
<td>
<div class="large">
<a href="http://picasaweb.google.com/lh/photo/QnqiMcSvmlR_osQplmz-Iw?authkey=Gv1sRgCNbCzI295-KBIg&feat=directlink" target="_blank">
<img class="large" src="http://lh3.ggpht.com/_lPPWxJaDX_0/S1tmkLXjmBI/AAAAAAAAAVA/782xI-SkNVQ/s640/step1-2.jpg" alt="CashCrate offers page." title="CashCrate offers page.">
</img>
</a>
</div>
</td>
</tr>
</table>
-snip-
</tbody>
</table>
And here is some css code: Code: div.large {
width: 100%;
height: 200px;
border: none;
margin-top:6px;
margin-bottom:6px;
overflow: auto;
}
img.large {
width: 98%;
height-max: 600px;
padding: 2px;
border: ridge;
border-color: #66E066;
}
I'm wanting to know what I need to add/change to make the images appear right in all browsers(I've only tested in IE and Chrome). If you need any more info about my page, ask . Thanks. Hello everybody, I hope you can help me before I pull my hair out! I was about to create a site in Dreamweaver CS3 and decided to add a background image to it via CSS. But whenever I try to preview the index page, I do not see the background image. I have tried to preview it on Firefox, Internet Explorer 7, and Safari. But I cannot see the image at all. What's more frustrating is that the background image displays just fine on the Dreamweaver design preview. I feel like it is taunting me. I have also tried to upload the specific files to a webserver and it still does not display. I have tried to change the image from a jpeg to a png to a gif and still no luck. Before I go on about what else I have tried let me give you some information about my site. I have 3 files: index.html layout.css bg.png Site layout as follows: /index.html /css/layout.css /images/bg.png index.html contains - -------------------------- <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/layout.css" rel="stylesheet" type="text/css" /> </head> <body> asdf </body> </html> ------------------------ layout.css contains- ------------------------ @charset "utf-8"; /* CSS Document */ body { background: url("/images/bg.png"); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } and bg.png is the background image in question. and heres a link to an online upload: http://www.geocities.com/cssnoob69/ What I don't understand is that another site I have built in Dreamweaver with the same CSS background-image declaration works just fine. I have even tried to use the background for that site on the new site but even that does not work. I have tried to find help on google but nothing I found helped. Any help is appreciated and thanks to all who tries to help me out! Here is the link: http://www.averytrips.com/socal.html I've got a TR with a background image applied to it. The background image is supposed to look like this: http://www.averytrips.com/trbg.png Clearly the TDs are messing it up, but I can't for the life of me figure out why. With the help of javascript im making a bookmark button. To show the button i use to img src to link to the correct folder/file. When i test the bookmarker on a test website it works perfectly, but it doesn't work when i copy/paste the code to the real website. The test website folder looks like this: test.html images/favo.png The real website looks the same as the test website: index.php images/favo.png The bookmark code is: <a href="javascript:bookmarksite('MyWebsite', 'http://www.MyWebsite.nl')"> <img src="images/favo.png" alt="bookmark" width="47" height="33" border="0" /></a> There is also some javascript code in the <head> but it's not necessary to post the code here because the bookmark script itself works. The 'real' website shows me a 'can't find image'-picture, which obviously means i've made a mistake linking to the .png file. Hopefully someone can help me out here because i'm puzzled. I've double checked the names of the folders and files so no mistake there. edit// Ok; i came up with the idea of adding a <base href> to the <head> of the index.php The entire code looks like this: <head> <base href="don't know what to write here"> </head> <body> <a href="javascript:bookmarksite('MyWebsite', 'http://www.MyWebsite.nl')"> <img src="images/favo.png" alt="bookmark" width="47" height="33" border="0" /></a> </body> I'm supposed to tell the browser where to look. In the img src i've explained where the favo.png is. The problem is that i have no idea what to write in the <base href>. When i access the ftp i have to click through several folders to get to the folder of the 'real' website. When i write the names of the folders in the <base href> the problem remains. Right click on the 'can't find image' it gives me an url of the website: http://www.MyWebsite.nl/MyWebsite/images/favo.png Which isn't the same as the folders i have to access on the ftp server. The order of the folders on the ftp server is as follows: public_html/MyWebsite/templates/MyWebsite/MyWebsite/images/favo.png Must be someone out there who can help me solve this html problem. Hello .. First I must say "Excuse me" if I posted in a wrong room...... I searched many threads for some information regarding the best programming technologies for displaying an image slideshow on a home page. Please let me know if you have any do's or dont's related to this. With some many technologies available to display an image slideshow I want to make sure I choose the right method so SE's dont stumble when indexing my site. Thank You ! Hi, I'm building a web site for someone. At the top of the page is the logo and some flowing lines going from left to right on screen. If you look he http://www.chrisvanochten.com/clients/voicecontrol/ and start resizing your browser window then you would see the content at the bottom moves along so that it is always in the center. The problem I have is that the image on the top will not do this. This is because it's a background image. I want the image to be positioned so that the logo is above the latest news section. I have tried using a normal image and aligning it to the center (scroll down on the page above for this) but the image is always anchored to the left of the screen if the image is larger than the browser window. Is there anyway to set the background image so that it is anchored in position and that it will run off both the left and right hand side of the screen (as opposed to just the right hand side)? I just found out that a site I built for a nonprofit isn't working properly on Internet Explorer or Firefox. It does work on Safari. It appears the client-side image maps are the problem. I used <map> and <area> inside <img>. Here is some of my code: <img src="About.jpg" width="1100" height="825" usemap="about" /> <map name="about" /> <area shape="rect" coords="285,29,316,50" href="" title="HOME" alt="Home" /> <area shape="rect" coords="383,29,460,50" href="" title="FOR TEACHERS" alt="For Teachers" /> </map> (URLs removed intentionally to protect client's privacy.) I was going by the book, Beginning HTML, XHTML, CSS, and JavaScript, by John Duckett, published in 2010. According to this book, this is the recommended type of image map. It says this code should be compatible with today's most popular browsers. So does this type of image map simply not work on Internet Explorer and Firefox? Or is there something wrong with my code? What type of image map does work with all the major browsers? I'm working on a site which requires a art images to be display centred, and I've been using CSS as much as I can. The content is displayed in a centred div of fixed width, with another div inside it to carry the content. Code: #container {
width: 650px;
position: relative;
/*margin: 0 auto;*/
margin:0 auto;
margin-top: -15px;
margin-bottom: -15px;
padding: 0px;
border: 0px;
background-image:url("images/basiclayoutimages/basicbackground.jpg");
background-repeat: repeat-y;
background-color: #b6463a;
display:block;
z-index: 1;
}
#content {
width: 630px;
position: relative;
margin: 20px;
margin-bottom: 10px;
margin-top: 10px;
padding: none;
border: none;
background-image: url('images/basiclayoutimages/Page Top 2.jpg');
background-repeat: no-repeat;
background-color: transparent;
z-index: 0;
display: block;
}
In Firefox, Internet Explorer, Opera and Konqueror on Windows and Linux the images display perfectly. However, in Mac Firefox, the images are shifting well to the right and refusing to be centred at all. Are there any specific Mac issues with image layout? The css for the images is this: Code: img {
border: 2px solid #1D7155;
/*margin-left: 70px;*/
margin: 15px;
}
img.display {
position: relative;
margin: 0 auto;
text-align:center;
display: block;
}
I've tried setting the old html align=center, along with absolute positioning and a number of other things, to no avail. Are there any tricks I can use to get the thing working? Any tips greatly appreciated. [edit] I should mention that there is a fixed banner of menus across the top of page, absolutely positioned, so the art images are not the only objects on any given page. There is a caption and "previous" "next" links beneath the images too. hi. i'm trying to use a background image as the footer to a site, and i can't figure out how to anchor an image to be at the bottom of the browser window, regardless of scroll position. is there a way to do this? thanks in advance. Hello, I have a graphic background with image buttons ("img" inside an "a href" link). By default, when you right click a button (or left click and move pointer out), the browser paints a selection rectangle, painted with dotted lines, that remains there. The same selection is visible when you click the image button, until the new page loads. You can see it even on the top round buttons of this forum. It looks really bad on my page because the image buttons are ment to be part of the background, and such a selection is out of style. Is there a way I can instruct the browser not to paint this selection? Some CSS style or some other property? Thanks! Alex Hi there, I have put a youtube video source in dreamweaver, and was wondering if anyone could tell me how i make it so the browser window the video is in clings to the video, i.e the frame is the exact size of the video. Also, however this is done, would it be the same code with images? Thanks in advance, Rob Here is the code <body> <td><a href="<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NIktYSst2mw"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/NIktYSst2mw" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object> </body> </html> Hi the website is showing up fine but there should be a repeater background image , and it doesnt show up in browser at all . Been working on it for 4 hours now. Please help me.. website link: http://extramoney.net16.net/instructions.html What do you need to fix ? Html code ? Image name: repeater.jpg and it is uploaded to hosting space . Thanks in advance for answers , Michael |
|||||||