HTML - E-mailings With Absolute Links To Images

I am working on making a website, and learning as I go. I have been trying to figure out how I would make links and images appear in the same section of many different pages using code.

Is this possible in HTML/CSS, which are the only languages I have any experience in.

If you need anymore information, let me know and I'll add more details.

I'm trying to position text, links and pictures to follow one after the other, but it doesn't work.


I want to see

"Homepage" on the left corner of my webpage
"Next" on the right corner of my webpage

Unfortunately this command doesn't work properly.

<div style="text-align:left;solid 2px #ff0000;"><a href="F:\Webcomic\Website Folder\NWvisuals-Index.html"> Home</a> <p align=right><a href="F:\Webcomic\TheEyeoftheWorld3.html">Next</a></div></p>

It makes the "Next" go down a line, instead of being in the same line of the "Homepage".



Also, on that vein, is there any way I can align images and text on the same line without using spaces*?

As in:

<p align="left">Hello</p> <p align="center">Hello</p> <p align="right">Hello</p>

But they all should stay on the same line. Any guides, or even links to tutorial about my issue would be appreciated. I've been trying to google for a while, it's becoming frustrating.


*I think the problem with spaces is that people with different resolution would see the text in different places than I want them to see.

Hello everybody,

maybe someone can help me with a problem on my site. There is a form on the page where the user can select images from a dropdown list, it looks like this:

Code:

<FORM NAME="form">
<SELECT NAME="selbox" SIZE="1" ONCHANGE="imgchange()"> 
<OPTION VALUE="cards/gifs/deck1">Essential</OPTION> 
<OPTION VALUE="cards/gifs/fool">0</OPTION> 
<OPTION VALUE="cards/gifs/magician">I</OPTION>
<OPTION VALUE="cards/gifs/priestress">II</OPTION>
<OPTION VALUE="cards/gifs/empress">III</OPTION> 
</SELECT>
</FORM>
</TD>
<TD VALIGN="TOP" ALIGN="CENTER"><BR>
<FORM NAME="frm">
<INPUT TYPE="text" SIZE="18" NAME="indate"><P><INPUT TYPE="button"
VALUE="show me" ONCLICK="getcard()"></P>
</FORM>

Now I would like to put a link on each image when it is shown on the page, so that the user can click on it and get the 'explanation window'.

How should I write the links when the url should load in a popup window?

The link for one image would look like this:

Code:

<A HREF='javascript:cards("cards/fool.html")' ONFOCUS="this.blur();">xxx</A>

Right now I do not even manage to open a link in the same window, let alone in a pop up..

Any help would be greatly appreciated,

thanks for reading!

Yatkha

Hello,

I'm using this tutorial on creating an ipod-esque "cover flow" photo album for a presentation I'm putting together:
http://www.elated.com/articles/cover...ss-and-jquery/

What I'm trying to figure out is how do I make each image a clickable link that will open a url in a new window. I know the code is Code:

<a href="URL" target="_blank"</a>

but I have no idea where to begin and end the tags. I either need it where I can click on each picture, or the text under each picture so that each one has a separate URL that opens in a new window. thanks

Hi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones.

So my question is: How hard is this to do? Is this something I need to hire someone to do for me?

Thanks in advance for any advice!

First off, hello, this is my first post. Here is the code im using, which works great until i minimize the page. Seems like the shoutbox doesnt minimize with the rest of the page and it actually stays at position,I know i know thats why its called absolute. But how can i get my html code boxes to minimize and configure properly with the rest of the page? Thx for any help

Code:

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="devilleather" src="http://www5.shoutmix.com/?devilleather" width="960" height="400" style="position:absolute; top:285px; left:350px"> frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?devilleather">View shoutbox</a>
</iframe>
<!-- End ShoutMix -->

Hi guys, I'm a newb here, and I'm trying to create a table with a fixed position like this one

http://www.adachiu.me/

I have made one, but if I resize the window it will move into the table and look all wrong.
This website that I have provided does not do that; it will go up and down with the page when you scroll, and if you resize than it will not move into the table.

Does anybody know how to fix this?

Thanks
Sean

Hi,

I am looking for the easiest and reliable solution to make the "View on Google Maps" image to look like here
http://www.dublinbynumbers.com/troubleshooter.html
instead of here http://www.dublinbynumbers.com/categories/cinemas

The solution should work in both IE/FF and any screen resolution.

Thanks in advance for your help,
Sorin

could someone please help me out!

I just need this flash code

<embed
allowScriptAccess="never"
src="http://www.amarasoftware.com/slideshow.swf" quality=high pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash"
width="200"
height="200">
</embed>

to have an absoulte postion on it...

thank you. I would greatlly appreciate your help

Hello everyone,
I've go this code here for positioning the "comments and frieands" together in in a scroll box at the bottom of the page.

But I'd like to put it in a sertante position. Could anyone plaese help me find out were and what to put in this code.

And for more information this is a code I want to put within a "div" image and place it in relation to were the image is (0,0) not were the page starts (0,0).

--------------------------------------------------------------------------------------------------------
<i class=i>
<a href="http://xiii.us/ms/center-friends-and-comments"</a>scroll center friends and comments</a></i>
</td></tr></table>
</td></tr></table>
</td></tr></table>
<div class="myDClassFC">
<table><tr><td>
<table class="off"><tr><td>
<table><tr><td>
<style>
.i {display:none;}
div.myDClassFC {height:400px; overflow:scroll; overflow-x:hidden}
</style>
<i class="i">!-END Block to put Friends and Comments in a Scroll Box-! </i>
-----------------------------------------------------------------------------------------------------


Well I appreciate everyones thought.

Dear Forum Readers,
I do not know how this whole forum thing works, and I probably will not be using it much. But I have a very important question to ask you all. If anyone knows, please help me. I searched high and low for a code to place a picture anywhere (out side of the tables) and I finally decided to just use one of the codes that MySpace help pages uses to post banners on your page when you have used their site for codes; and it worked beautifully, the only thing is it will only work on the left side. Here is a link to my page so you can see what I am talking about. MySpace.com/chippycheekschik. The roses on the left, I also want on the right. Will someone kindly help me...I would really appreciate it...:-) My E-Mail is Steph_A_Rios@yahoo.com or AIM SN is ChippyCheeksChik. You may also leave me a message on my MySpace, comment or personal, either will do.

PLEASE contact me if anyone has a solution. Thank you so much.

Sincerely,
Steph R.

What is the best method to center a single (hover over) image link in the absolute center of a browser page? I know there must be something very easy that's going over my head.

Is it easiest via CSS, or html? or neither, or both???

here's my code so far

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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>keep your eyes open</title>
<style type="text/css">

<!--

#centerDIV {
width: 100%;
height: 100%;
vertical-align: middle;
text-align: center;
}


body {
	background-color: #333333;
}

-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>



<body onload="MM_preloadImages('Images/eyesopen.png')">

<div id="centerDIV">

<a href="mailto:info@kyeonyc.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('eyes_closed','','Images/eyesopen.png',1)"><img src="Images/eyesclosed.png" alt="eyes open" name="eyes_closed" width="249" height="247" border="0" class="imageCenter" id="eyes_closed" /></a></div>


</body>
</html>

I have some expanding sections (spans) in my page that expand when clicked with a little javascript changing display to block form hidden. However one section when expanded doesn't move the next section down at all. The next section is not set to absolute or anything so I cannot think why that section isn't moving down when the previous section is expanded.

Have tried everything and previous sections seem to have exact same code and they push down the next section when expanded. Confused.

It's the section

HTML Code:

<h3>Silver Jews Band Website</h3>
				<p class="cntr"><a href="images/sampleWebsite1.png" title="website example"><img src="images/website_thumnail.gif"  alt="Example Website Design"/></a></p>
				<p class="fl">
					<span class="plusArrowPF" onclick ="moreInfo('webSite1') ">click here to expand this section...</span>
					<span id="webSite1">
					text text
					 </span>
				</p>
							
						
				 
				<h3> <br /><br /> Rocky Horror Festival Website</h3>
				 <p class="cntr"><a href="images/sampleWebsite3.png" title="website example"><img src="images/website3Thumbnail.JPG"  alt="Example Website Design"/></a></p>
				 <p class="fl">
					<span class="plusArrowPF" onclick ="moreInfo('webSite2')">click here to expand this section...</span>
					<span id="webSite2">
				text text				</span>
					
				 </p><br /><br />

<h2 class="pfH2" id="programs"><br/><br/>Programs</h2> 
				<hr />
				 etc etc

if you want to view the page to see what I mean it's www.absolute-websites\portfolio.html and it's the section at Rocky Horror Festival.

Thank you.

Hi there, I want my images to have specific positions within my website but so far I seem to get it wrong.

this is the html:
<body>
<div class="top">
</div>
<div class="logo"><img src="img/logo.jpg" /></div>
<div class="wrapper">
<div class="1"><img src="img/1.jpg" width="450" height="450" /></div>
<div class="2"><img src="img/2.jpg" width="215" height="220" /></div>
<div class="3"><img src="img/3.jpg" width="215" height="220" /></div>
<div class="4"><img src="img/4.jpg" width="215" height="450" /></div>
</div>
</body>

this is the css

body {
background-color:#FFFFFF;
color:#000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

.top {
width:100%;
height: 33px;
background-color:#0D0D0D;
}

.logo {
position:relative;
margin: 0 auto;
border: none;
padding:0;
width: 400px;
height: 130px;
margin-top:25px;
}

.wrapper {
position:relative;
margin: 0 auto;
border: none;
padding:0;
width: 900px;
height: 700px;
margin-top: 25px;
}

.1 {
position:absolute;
width: 450px;
height: 450px;
left: 0;
top: 0;
}

.2 {
position:absolute;
left:460px;
width: 215px;
height: 220px;
top: 0;
}

.3 {
position:absolute;
left:460px;
top:230px;
width: 215px;
height: 220px;
}
.4 {
position:absolute;
left: 685px;
width: 215px;
height: 450px;
}

Basically I want something like this site http://www.aardvarkbrigade.com/ where the images seem to be placed in specific positions.

Would be great and I would be thankful if someone could help me

Good afternoon,

I am trying to design my own template for Constant Contact, so I can get away from paying a design fee andstill have a good looking template. Anyways, when I view the template I made using Serif PagePlus it looks good, however when I email it to myself from constant Contact all the images are viewed in one row, one by one. I believe the problem is with the code:

<div style="position:absolute; left:2px; top:2px; width:797px; height:151px;">


Can you please help solve my hair pulling issues with the absolute postioning.