HTML - Bg Image Won't Show

It displays fine in Firefox - what am I doing wrong?
(the image in question is 1/3 of the way down floated to the right of 'Snowshoeing and Winter Walking'
It works if I pop the div inside the h2 tag but doesn't validate...

http://www.colletts.co.uk/new_winter/slidedivcmh.html

Code:

div.floatedright { width: 238px; float: right; margin-left: 21px;}

.righttext {width: 100%; display: inline; text-align:right; color: #211d70; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; line-height:normal; font-style:italic; float:right; font-weight:normal; letter-spacing:normal; text-transform: none;}

HTML Code:

<div class="clearer"></div>

	</div>
           <div class="floatedright">
<a rel="shadowbox" href="img/snowshoeing_in_the_dolomites_arabba.jpg" title="Ideas &amp; Information, Maps &amp; Route Laminates" class="option"><img src="img/snowshoeing_in_the_dolomites_arabba_sella.jpg" alt="Snowshoeing on the Sella Shelf above Arabba" width="238" height="267" longdesc="http://www.colletts.co.uk/images/colhol_map.jpg" /></a>
<div class="righttext">Snowshoeing above Arabba</div>
</div>   
          <h2 class="minortitle"><a href="http://www.colletts.co.uk/winter/winter_snowshoeing.html">Snowshoeing</a> and <a href="http://www.colletts.co.uk/winter/winter_snowshoeing.html">Winter Walking</a></h2>   

		    <p>And yet this area is not the exclusive terrain of skiers. Away from the ski fields, a separate winter paradise unfolds for walkers, snowshoers and cross-country skiers. Delightful trails meander alongside rivers and streams, through woodland and across winter meadows between enchanting Tyrolean hamlets and villages, which huddle around the spires of their picturesque churches.</p>
            <p>Higher up, snowshoers experience the exhilaration of virgin snow on a labyrinth of waymarked routes, traversing the hidden snowfields, which undulate between a seemingly unbroken rim of spectacular peaks. Here, you could hear a pin drop, but for the vocal appreciation that persists amongst walkers and is the inevitable result of such an inspirational situation.<br /></p>

I'm just curious if anyone knows how to do this.

Basically what I want to do is have a series of links (lets say one, two, three, and so on) and when you click one of those links, the image below those links change to the respective link (if you click one, a picture of the number one shows up, if you click two, well you get the idea). How would I go about doing this?

How I want this laid out:

Link
Link
Link
[-Image-]



Thanks

I want to use HTML to make the following task...

I little link, when someone clicks on it, it displays an image at the top of it
(Not load a whole new page with an image)

Example

Say you have this link linky
I want when people click on it, it displays an image above it

Can this be done using HTML?

Thanks

Hi all
i have an upload form, and when the upload button/image is clicked to upload the file, i would like to have this cool ajax loader that just moves with some text under it saying "uploading...please wait". What is the easiest and best way to do this? I have looked all around javascript, etc and cant seem to find a perfect simple solution. I am adding this in my .tpl file

THanks

Hey,

If you have a background image in a table set to no-repeat, is there anyway you can show another background image when it has finished repeating?

For instance:

------------------
|.......................|
|.......................|
|.......................|
|.......................|
|.........BG..1......|
|.......................|
|.......................|
|.......................|
|.......................| (background finishes here)
|------------------|
|------------------|
|------------------|
|------------------|
|-----BG 2-------|
|------------------|
|------------------|
|------------------|
... and repeat background 2 for the remainder of the div/td?

Thanks,
Oli

Hi,
I am trying to figure out why my background image is not showing up on my header...

my website is http://www.mytodostuff.com

I created the image to be 900px by 100px, and it should fit perfectly in the header div...but its not.

Does anybody know why?

i put the pic in my assets folder, its called 'banner.jpg'

why?

thanks

There are 5 copies of the same images are placed in a folder i.e. large(1024*768),medium(500*375),small(240*180),thu mnail(75*75),square(100*50) in size....
The following code upload number of Geocoded images(square size) when the page loads.I want when someone click on the any Geocoded image on the page ,it should show the large image(1024*768) of the same.And further click on the large image it must show again the square size image of the same.
Following is the actual code.It is in .js file
.

var epsg4326 = new OpenLayers.Projection("EPSG:4326");
var OSVMain = (function() {
var map, markers, map_move_timeout;
var photos = {};
function mapChange() {
if( map_move_timeout )
clearTimeout(map_move_timeout);
map_move_timeout = setTimeout(mapChangeTimeout, 500);
updateLinks();
}
function updateLinks() {
var center = OSV.getMapCenter(map);
var zoom = map.getZoom();
$('#permalink').attr('href',OSV.getURLBase()+'?lat ='+center.lat+'&lon='+center.lon+'&zoom='+zoom);
$('#kmllink').attr('href',getLocateLink('kml'));
}
function getLocateLink(format) {
var extent = OSV.getMapExtent(map);
var url = OSV.getURLBase()+'/api/photos/locate.'+format+'?bbox=';
url += [ extent.left, extent.bottom, extent.right, extent.top].join(',');
return url;
}
function mapChangeTimeout() {
map_move_timeout = null;
var url = getLocateLink('json');
$.get( url, null, photosLoaded, 'json' );
}
function photosLoaded(json) {
var new_photos = {};
var size = new OpenLayers.Size(50, 50);
var offset = new OpenLayers.Pixel(-25, -25);
for( var i = 0, l = json.length; i < l; ++i ) {
var p = new OSVPhoto(json[i]);
if( photos[p.data.id] ) {
new_photos[p.data.id] = photos[p.data.id];
photos[p.data.id] = null;
} else {
var position = new OpenLayers.LonLat(p.data.lon,p.data.lat);
var icon = new OpenLayers.Icon(p.url('square'), size, offset);
p.marker = new OpenLayers.Marker(position.clone().transform(epsg4 326, map.getProjectionObject()), icon);
new_photos[p.data.id] = p;
markers.addMarker(p.marker);

}
}
for( var k in photos ) {
var p = photos[k];
if( p && p.marker )
markers.removeMarker(p.marker);
}
photos = new_photos;
}
function setup() {
var vectors;
var popup;

map = new OpenLayers.Map($('#map').get(0), {
controls: [
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()
],
units: "m",
maxResolution: 156543.0339,
numZoomLevels: 20,
displayProjection: new OpenLayers.Projection("EPSG:4326")
});

var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", {
displayOutsideMaxExtent: true,
wrapDateLine: true
});
map.addLayer(mapnik);

var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender", {
displayOutsideMaxExtent: true,
wrapDateLine: true
});
map.addLayer(osmarender);

var numZoomLevels = Math.max(mapnik.numZoomLevels, osmarender.numZoomLevels);

var start = OSV.getStartLocation();
var numzoom = map.getNumZoomLevels();
if (start.zoom >= numzoom) start.zoom = numzoom - 1;
map.setCenter(start.pos.clone().transform(epsg4326 , map.getProjectionObject()), start.zoom);
OSV.setupMapEventHandlers(map);
map.events.register("moveend", map, mapChange);
map.events.register("zoomend", map, mapChange);
mapChange();



markers = new OpenLayers.Layer.Markers("Markers", {
displayInLayerSwitcher: false,
numZoomLevels: numZoomLevels,
maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
maxResolution: 156543,
units: "m",
projection: "EPSG:900913"
});
map.addLayer(markers);

}
return {
setup: setup,
1:1
};
})();
$(function(){
OSVMain.setup();
});



Any suggestions ?
Thanking you

Hi there,

I'm experiencing a strange problem in IE with the show-hide layers behavior. I have 4 layers, each with images inside them which are meant to link to other pages. This works fine in Firefox but not so in IE. The odd thing is that when you hover over the images in IE the link appears in the status bar and if you right click and choose "open link" it does work. The site is here www.patons.org/v2/ and its the images at the top that I'm talking about. Any help would be much appreciated.

Thanks,

Alex

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

I'm not new to HTML but I'm definitely still a beginner. So, please don't expect me to know exactly what your talking about.

I'm trying to make a website, that has a "show more" and a "show less", for long paragraphs, that don't have enough room to fit on a page.

Here's my code:

head:

Code:

<style type="text/css">
<!--
#wrapper {
}
a {
cursor:pointer;
}
-->
</style>

<script type="text/javascript">
<!--
function switchMenu(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != "none" ) {
		el.style.display = 'none';

	}
	else {
		el.style.display = '';
	}
}

function hide(){
document.getElementById("seemore1").style.display='none';
}
//-->

body:

Code:

<body onload="hide();">

content:

Code:

<div id="seemore1"><font color="white">..and it will display more content in a new paragraph..</font></div><a onclick="switchMenu('seemore1');" 

title="Test"><font color="white">Show More</font></a>

But, I also want to change the "Show More" text, to "Show Less" after it has been clicked, so people know to click it again, to shrink it. This is what I tried to add to it, but it failed.

head:
Code:

<script type="text/javascript">

oldTextAry = new Array();

function changeText (fieldObj, newTexStr) {
if (newTexStr == fieldObj.innerHTML) {
fieldObj.innerHTML = oldTextAry[fieldObj.id];
} else {
oldTextAry[fieldObj.id] = fieldObj.innerHTML;
fieldObj.innerHTML = newTexStr;
}
}

</script>

body:
Code:

<a href="#" onclick="changeText(this,'Show Less');" id="text1link">Show More</a>

I tried the most simple thing that I thought of.. was adding both around the text, but, obviously that didn't work..

Does anyone know of any solution to my problem?

Hello all!

I'm working for school at an website, and I've a problem.. I've made a link, when you click on it it open some tekst information. I would this 4 time, just only the first one works...! Even if you click at the secound, third or forth link, it opens the first one

Anybody can help?

Here is the code;

In the head;

Code:

<script type="text/javascript">function showcodes(a,codediv){   var divje = document.getElementById( codediv );   if (divje.style.display == "block")   {      divje.style.display = "none";      a.innerHTML='Klap uit';   }   else   {      divje.style.display = "block";      a.innerHTML='Klap in';   }}</script>

And in the body;

Code:

<span style="cursor: pointer;" onclick="showcodes(this,'div_tekst');"><font color="FF0000">Klik hier!</font></span><div id="div_tekst" style="display: none;">


              <font color="#FF9900">
              Wil je even snel weten wat voor weer het is? Hier een overzichtje!<br><br>
              Hier zie je wat voor weer het momenteel is, als je je muis erbij houd, zie je een 
              paar gegevens!
              <br><br>
              <IFRAME SRC="http://gratisweerdata.buienradar.nl/hetweer.php" NORESIZE 
              SCROLLING=NO HSPACE=0 VSPACE=0 FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 
              WIDTH=50 HEIGHT=40></IFRAME>
              <br><br>
              <script 
              src=http://m.fileindex.nl/files.js>
              </script>
              <br><br>
              <IFRAME SRC="http://www.fileindex.nl/iframe.php?
              style=&bgcolor=FFFFFF&link=0000FF" NORESIZE SCROLLING=YES HSPACE=0 VSPACE=0 
              FRAMEBORDER=0 MARGINHEIGHT=0 MARGINWIDTH=0 WIDTH=250 HEIGHT=100></IFRAME><font>
</div>

I hope someone could help me!

Edit*; here is the example; http://informaticacase.freehostia.com/ (click in the example on 'het weer')

Hi all --

I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.

I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.

I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.

Help! How do I get rid of this white space but still keep the link on the image??

[I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having]

Thanks in advance!
//kl

PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner.

CSS:
Code:

<style type="text/css">
<!--
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/blue.bg.png);
background-repeat: repeat;
background-color: #009;
}
.oneColFixCtr #container {
width: 1000px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
color: #333;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
 
</head>

Nav Banner:
NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space...
Code:

<body class="oneColFixCtr">
 
<!-- MAIN NAVIGATION BANNER -->  
<!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br />

i made this site today and for some strange reason, it will not show up in IE AT ALL!!!!!what is wrong with it?
heres link
http://ascskate.ueuo.com/testpage.htm
and code
HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>pixelbypixeldesigns | welcome to pixelbypixeldesigns
<style type="text/css">
<!--

 body,td,th {
	font-family: "Century Gothic";
	font-size: 12px;
        font-weight: bold;
	color: #FFFFFF;
	background-repeat: no repeat;
}
body {
	background-color: #000000;
	background-image: url(bg.jpg);
        
 }
#Layer2 {
	position:absolute;
      	top:0px;
	width:750px;
	height:100%;
	z-index:1;
	left:216px; 
      
                
        
}
#layer1 {
        width:100%;
        top:0px;       
        height:50px;
        z-index:2;
        left: 216px;
       
}

#footer {
       position: absolute;
       bottom: 0;
       width:800px;
       height:25px;
       z-index:3;
      
}
#drop {
padding:0;
margin:0;
height:2em;
list-style-type:none;
border-left:1px solid #FFFFFF;
}
#drop li {
float:left; 
width:5em; 
height:2em;
line-height:2em;
border-right:1px solid #00000;
position:relative;
text-align:center;
}
#drop li a, #drop li a:visited {
display:block;
text-decoration:none; 
color:#FFFFF;
}
#drop li a span, #drop li a:visited span {
display:none;
}
#drop li a:hover {
border:0; /* needed to trigger IE */
color:#000000;
}
#drop li a:hover span {
display:block;
width:5em;
height:2em;
text-align:center;
position:absolute; 
left:-2px; 
top:-3px; 
color:#00000; 
cursor:pointer;
}

.date {
	font-size: 20px;
	font-weight: bold;
	color: #FF0000;
	border-top-style: none;
	border-right-style: none;	
	border-left-style: none;
 
	border-bottom-color: #FFFFFF;
	font-family: "Century Gothic";
	border-bottom-width: 1px;
}
a:link {
	color: #FFFFFF;
	text-decoration: none;
}
a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
a:hover {
	color: #990000;
	background-color: #FFFFFF;
	text-decoration: none;
}
a:active {
	color: #FFFFFF;
	text-decoration: none;
}

//-->
</style>
</head>
<body>


<div id="layer2">

<div align="left"><img src="top.png"></center>
<center><ul id="drop">
<li><a href="#nogo">About</a></li>
<li><a href="#nogo">Porfolio</a></li>

<li><a href="#nogo">Contact</a></li>
<li><a href="#nogo">Links</a></li>
<li><a href="#nogo">FAQ</a></li>
</ul></center>
</div>

<p class="date">10.25.06</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi ut massa. Fusce eleifend facilisis tortor. Nullam quis urna. Quisque sagittis ligula. Etiam commodo neque vel mauris. Quisque ac nunc. Fusce laoreet mi in velit gravida accumsan. Cras venenatis feugiat enim. Sed mattis mattis odio. Ut mattis cursus augue. Morbi eros leo, luctus et, semper sed, aliquam ut, lacus. Praesent et urna ac dolor egestas eleifend. Curabitur aliquam eleifend neque. Fusce sed odio. Nullam sapien. 


Nullam libero urna, accumsan vel, tempus sit amet, pharetra sit amet, quam. Proin cursus. Ut neque sapien, venenatis eget, adipiscing ac, gravida quis, nisl. Sed nec magna. Nulla dignissim mollis libero. Cras gravida lectus a enim. Etiam eleifend suscipit pede. Nulla facilisi. Etiam nec augue vitae dui venenatis eleifend. Nunc malesuada interdum lorem. Sed porta nibh pharetra nunc. Suspendisse eu dolor. Donec auctor. Praesent pulvinar orci non urna. Donec ornare vestibulum lectus. Vivamus rhoncus, justo vel ornare feugiat, libero felis rutrum nisi, in vulputate mi orci non lectus. 
<p><a href="#">test link</a></p>

Etiam velit dolor, condimentum et, faucibus in, condimentum sit amet, magna. Suspendisse lobortis volutpat turpis. Integer nisi augue, feugiat quis, sagittis non, posuere ac, dui. Pellentesque id turpis id ante fermentum laoreet. Vivamus at arcu. Vivamus at purus vitae elit fringilla euismod. Duis nec nisi. Cras non nisi et augue blandit posuere. Sed dignissim ornare purus. Cras mollis, turpis id vulputate pretium, mauris mi tempus urna, sit amet dapibus risus risus vel mauris. Ut massa. Quisque eleifend. Praesent vel urna. Nam ornare ligula sit amet velit. Cras dolor nulla, nonummy sit amet, congue sed, commodo id, sapien. Ut quis eros eget mi molestie ornare. Nulla venenatis quam a lorem. Praesent non neque quis elit bibendum ultrices. Praesent eleifend dolor quis ligula. 







</div>


<div id="footer" align="right"><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Portfolio</a> | <a href="#">Contact</a> | <a href="#>Links</a> | <a href="#">FAQ</a>
</body>


</html>

Hi, I would like to write something for a forum or a blog and I would like the URL not to show in the text, but when you click on the underlined subject, it would go to the page you want it to. I see it all the time, but don't know how to not show the URL (http://www.etc.) in the paragraph. I will be writing this in text format, not html format ( I do html all the time) Please help. Thanks.