|
HTML - Another Newbie ?? - Moving An Image In A Table
Okay. I have been experimenting and learning pretty well with the help of the experts here. But now I have run into a little problem that I can't figure out.
So here I am again seeking expert help. I am using a table. In one of the columns (or cell or whatever its the proper terminology) I have an image (for my navigational map). I would like to be able to move the image up in the column. Right now it (the image map) sets much lower than other pages and I would like to have everything look uniformed. Any suggestions? To get a better idea what I am talking about, the page with the image that is low can be seen here. The way I would like it to look can be seen here. Thanks, Vance Similar Tutorialsthe title makes it sounds really confusing. Ok im making my first website, and i need help with a code, (as you can see on www.dalekblaster.co.uk) i have got a section at the top where the images change from one to another. The code is - HTML Code: // Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 5;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'http://www.dalekblaster.co.uk/images/banner/dalekblasternexttime.jpg'
Pic[1] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster2.jpg'
Pic[2] = 'http://www.dalekblaster.co.uk/images/banner/dalekblastersjanexttime.jpg'
Pic[3] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
Now i need help because, i want to link each picture on the slideshow to a differnet page or external site, but im not sure how. (but so they can go to different pages not the same one) can anyone help me? Can someone help me on figuring out how to move the table on my homepage here. I'd like to move the text content that is on the right side, spread across the page and move the form that is on the right side below the content text. Along with this I'd like to leave a column along the right side of the page that is about 1/3 the width of the page, maybe smaller? Would anyone be willing to help me accomplish this? How can I move this table to the right a lttle bit? Thanks. Code: <TABLE cellSpacing=0 valign=top cellPadding=0 width=100% border=0> <TR valign=middle height=10> <TD class=headera1><IMG src="/images/clear.gif" height=1 width=159 border=0></TD> <TD width="100%" align=right class=headera2> </TD> </TR> <TR> <TD class=headera3><IMG src="/images/clear.gif" height=1 width=159 border=0></TD> <TD width="100%" align=right class=headera4> </TD> </tr> <TR valign=top> <TD></TD> <TD valign=left width=795 height=1><IMG src="/images/topimg11.jpg"> <IMG src="/images/topimg2.jpg"></font></TD> </TR> <TR valign=top height=1> <TD colspan=2 class=black><IMG src="/images/clear.gif" height=1 width=100% border=0></TD> </TR> </TABLE> Never mind. I figured it out myself. It's little odd looking but it works and it validates. Hi everyone, I am an illiterate HTML dummy , and I am hoping someone could help me with some code for a page I am working on. Here is my code: HTML Code: <html> <div align="center"> <br><br> <TABLE border="0" cellpadding="0" cellspacing="10"> <tr> <td width="354" valign="top"> <p><I><font face="Trebuchet MS"><font size="4">Babies & Children...</p></I></font></font> <p><font face="Arial">Each day in the life of your child welcomes new changes, and capturing that ephemeral spirit is one of the great joys of our work. No matter what stage your child is at, we create dynamic and timeless images that will be cherished for generations. We photograph your child / children in a relaxed and fun atmosphere, capturing their spirit and personality. </p></font> <p><font face="Arial">Sessions are available at your choice of location. This includes 15 images on CD-ROM - your choice of colour, black & white or sepia, plus an 11" x 14" enlargement.</p></font> <p><font face="Trebuchet MS"><font size="5">$150</p></font></font> <p><font face="Arial"><a href="mailto: [email]info@brischetto.com.au[/email]">Want something different?</a></li></p></font> </td> <td width="252" valign="top"> <img src="http://brischetto-images.smugmug.com/photos/112098330-M.jpg" alt="Anne bridal" width="400" height="272" hspace="0" vspace="0" border="0" class="smborder" /> </td> </tr> </TABLE> </div> </html> This is the page: http://www.brischetto-images.smugmug...allery/2110958 I really want to move the table / text up so it sits underneath my nav bar. Can anyone tell me how to do this?? Thanks!!! How to change this code so that the image moves up and down not side to side on mouse click. Code: <html>
<head>
<script type="text/javascript">
cc=0;
function changeimage()
{
if (cc==0)
{
cc=1;
document.getElementById('image').style.position="absolute";
document.getElementById('image').style.left="0";
}
else
{
cc=0;
document.getElementById('image').style.position="relative";
}
}
</script>
</head>
<body>
<img id="image" onclick="changeimage()" border="0" src="slide2.JPG"/>
</body>
</html>
I have a issue with a google checkout add to cart button. I've added the code from the site and the button appears in the top left hand corner of the screen. I've tried opening the files in frontpage and drag and dropping it, but for some reason the button doesnt show there. If any can help please do. Thanks This is the Html i've got in the page for the part. <html> <img border="0" src="hill.jpg" width="150" height="137"></p> <p> & nbsp;<div class="product"><input value="Metal" class="product-title" type="hidden"><input value="14.99" class="product-price" type="hidden"><div title="Add to cart" role="button" tabindex="0" class="googlecart-add-button"></div></div></p> <div class="product"><input value="Silent Hill" class="product-title" type="hidden"><input value="14.99" class="product-price" type="hidden"><div title="Add to cart" role="button" tabindex="0" class="googlecart-add-button"></div></div> </body> </html> I want to insert an image, but I want it to change to other images after a certain time frame (i.e. 5 seconds) as in a scrolling/moving image?? Can any one tell me how I can do this? I'm not sure if this is even the right forum!! Thanks! I am building a site from scratch, and since I dont have images yet, I am using image placeholders. I havent used frames, which may be my issue, but I used separate images on top for buttons and then a large image in the middle, and then a couple more buttons as images on the bottom of the page. Now when I try to align the middle image to the right so i can put buttons on the left, everything on the bottom half of the page moves to the rght as well, instead of just the middle image. Why is this happening, should i be using 4 separate frames on this page for each section? i am not to familiar with them, so i havent used them so far. Also, alot of the functions for images arent available, is that because they are just image placeholders? Any help would be greatly appreciated. Thanks Hello im new here its good to be here I need your help! I am now learning HTML because i realised how important it is...and im stuck in this thing PHP Code: var alternateContent = 'Welcome to mywebsite' + 'Please download Flash Player to view content.' + '<a href="http://www.adobe.com/go/getflashplayer/">Download Flash</a>'; document.write(alternateContent); // insert non-flash content } // --> </script> <img src="Html_logo.jpg" alt="" width="273" height="46" longdesc="http://Html_logo.jpg" /> </body> </html> this is part of the code ...didnt post it all since it was too much... What i need to do is to color the text yellow "Welcome to my website . Please download Flash Player to view content" I tried <FONT COLOR = "######"> but didnt work... Also how do i add the HTML_logo Above the text ..? Any ideas? I have received so much help from the experts here that I am having a blast trying new things with HTML. But, now I've run into another little problem that I just can't figure out. So here I am again seeking the advice of the experts. I have a table and I am trying to get an image in it. I can get the image in, but because the particular cell that the image is in (as a background btw) is longer than the image, the image repeats itself below the image I want. Other than shortening the cell itself, is there a way to keep this background image from repeating itself within the cell of the table? Thanks, Vance I need a bit of help with some images within the cell of a table. In this cell I have a background image that I am hoping will adjust to fit the varying heights of my table on different pages (some pages have more info and are therefore taller - for lack of a better description). In this same cell, and on top of the background image, I have the navigational image and it all seems to work exactly the way I want it to, with one exception. The exception is that when I view the page, the navigational image is much to low in the cell. I have done a bit of reading and unless I am just flat out not looking in or for the right information, I can't find anything that looks like it could be a solution. You can see what I am trying to explain here. You can see just how low the navigational list is and I would like to have it moved more towards the top of the cell. I am pretty sure that I can move it up if I use a lt of " " but I don't think this would be the best way to go. I am sure there is a way to do this so if any of the experts here have a suggestion as to how to fix this or where to look for information about moving the images around in a cell I would greatly appreciate any help. Thanks, Vance Can anyone explain the rule to me which is governing this behaviour: If you move the attribute style="float: left;" from one table to the other it affects the way the whole div renders. With the attribute, there is no silver background, without it the div renders across the whole page with a silver background. Why would floating a table within the div affect whether the div renders with or without a background colour? 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>Untitled Page </title>
<style type="text/css">
.ItemFill
{
background-color: Silver;
}
</style>
</head>
<body>
<div class="ItemFill">
<table style="float: left;">
<tr>
<td>
Hello World
</td>
</tr>
</table>
</div>
<br />
<div class="ItemFill">
<table >
<tr>
<td>
Hello Two
</td>
</tr>
</table>
</div>
</body>
</html>
For those who may not know, I am trying to teach myself HTML. I have an understanding about some of the basics and now I want to expand on that. I have a navigation map pretty much set up and appears to be working so far. The problem is that when I upload it and view it in IE, the image that I am using has a blue outline around it. To me this indicates a link and it is throwing the whole look of this page off. The code I have so far is as follows: <td width="228" height="811"</td> <img src="../junk/images/a2.jpg" usemap="#navmap"/> <map id="navmap" name="navmap"> <area shape="rect" coords="2,0,243,29" href="index.htm"/> <area shape="rect" coords="1,37,243,68" href="about.htm"/> <area shape ="rect" coords="0,75,243,105" href="outsource.htm"/> <area shape="rect" coords="0,114,243,143" href="bookkeeping.htm"/> <area shape="rect" coords="0,190,243,220" href="computer.htm"/> <area shape="rect" coords="0,229,243,257" href="peachtree.htm"/> <area shape="rect" coords="0,266,243,294" href="web.htm"/> <area shape="rect" coords="0,304,243,332" href="business.htm"/> <area shape="rect" coords="1,341,243,372" a href="contact.htm"/> </map> </td> I would really like to be able to do away with the blue outline around the image so that everything flls back into place. I would appreciate it if someone could take a look at my code and suggest any corrections I need to make to fix this. Thanks for your time, Vance I have been experimenting with a new page setup and I've got a problem I just can't figure out. Anyway, I have an image mapped for navigation on the left-hand side of the page/table. It seems to work fine and everything is fine up to this point. Now I am trying to add another navigational map to the image at the top of my page and when I code it, the map seems to work fine, but either the images or the table gets thrown off and I just can't figure out why it's doing it or how to fix it. The code for the top image map is as follows: <body bgcolor="#000000" text="000000" topmargin="0" leftmargin="0"> <div align="center"> <table border="0" cellpadding="0" cellspacing="0" width="600" height="770"> <tr> <td width="600" height="150" colspan="3"> <img src="http://vance.thebams.org/junk/images/new images/topbg.jpg" usemap="#topmap" border="0"></td> <map id="topmap" name="topmap"> <area shape="rect" coords="51,98,107,119" href="index.html"/> <area shape="rect" coords="121,99,218,119" href="bookkeeping.html"/> <area shape="rect" coords="232,99,357,119" href="payroll.html"/> <area shape="rect" coords="371,99,457,119" href="web.html"/> <area shape="rect" coords="474,98,607,119" href="personal.html"/> <area shape="rect" coords="621,98,710,119" href="contact.html"/> </map> </tr> The page that shows exactly how I want the page to look without the map at the top of the page can be seen here. When I add the image map at the top of the page it ends up looking like this. You'll notice that the area around the pen's tip is off. If anyone has any suggestions as to what I did wrong and how to fix it, I would greatly appreciate it. Thanks, Vance Hello all, I hope I am not repeating any posts but all the alignment issues that I could find being talked about were with tables. I am trying to align an image with a background image to make one apparently continuous image that will repeat across the top of the page. My design works in IE 7 but not in any of the other browsers I am checking with. Netscape 8 or Chrome. I am working with Dreamweaver but have some basic knowledge of code. Here is the website as I am sure that I have not explained myself as well as I could have. http://www.americain100days.com/ Thanks all, Joey Hey Guys, I am a graphic designer and don't know much about HTML (but am taking a class and about to start a few books). I am using tumblr right now and I am try to replace the automated header ("black atom studio") with a jpg banner. Anyone know where in the HTML I would do this and what code I would need to swap in? (the website I am working at is www.blackatomstudio.com ) (not a plug, just incase you guys need to see what I am talking about) Here is the code I need help on. http://snipplr.com/view/8582/blackatoms-tumblr/ Guys, hopefully someone can give me a hand here. bear with me, Im a newbie to html yet Im an intermediate/advanced flash programmer. I learned flash but never learned html the right way and am struggling to make html entrance pages for my flash sites.. I know its usually the other way around. i learned flash first. ok, I have a website I made which is opened in a fixed window. the html index page says "enter here" and that button opens the fixed size window. that works fine. The problem is Im trying to learn the html and whenever i have an image on this index page, ( some graphics and the "enter here" button) it may look centered @ 1024 x768 but at a higher resolution ( 1280 x 1024) it will appear on the top left of the screen. I have been tinkering with dreamweaver but im really confused. I keep seeing all of these sites where everything looks aligned regarless of the screen setting. Im not sure if I should use tables , divs or whatever. i have my website logo as a jpg and some other graphics, and im not sure how to put it into the page so it always looks appropriate no matter what screen setting you are on. There is a company that makes nice websites and their entrance pages are always good. I am gonna attach the url of one of these. I notice that they always use divs, a LOT. Is thsi the right approach? and can someone look at the example and tell me how they are doing it? i dont put the url in the post becuase I do want google or other engines indexing the url to this post (for privacy) Thanks a lot url.zip Here is an image depicting the trouble I'm having: I want to make a table, consisting of many cells. These cells would be fixed, and *very different* in sizes. It's easy to make a no-space table when all the images are exactly the same size, but when you have images with a variety of sizes, the table doesn't fit perfectly. Basically I want to create a collage of images with overlay text on each image. My idea was that I could create a table, and each cell (td) would have a background which is the image. Then I could just type in that cell, so the text would be over the image. Then I'd do this for every one of my images, and a collage would be formed. The problem is, the table makes large white spaces wherever the image sizes don't match! How do I get rid of these spaces, or is there an entirely different code/approach I should be using? Thanks! Here is my current code: HTML Code:
<html>
<head>
<style type="text/css">
table.nospace {
padding: 0; margin: 0;
border-collapse: collapse;
}
table.nospace tr {
padding: 0; margin: 0;
}
table.nospace td {
padding: 0; margin: 0;
}
</style>
</head>
<body>
<TABLE class="nospace" width="2040px" height="2000px" cellspacing="0px" cellpadding="0px">
<TR>
<td valign="top">
<table><tr>
<TD WIDTH="800px" HEIGHT="800px" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="497" BACKGROUND="image" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
<td valign="top">
<table><tr>
<TD WIDTH="700" HEIGHT="467" BACKGROUND="image.jpg" VALIGN="bottom">
<h1><FONT COLOR=#ffffff>Text</FONT></h1>
</TD></tr></table>
</td>
</TR>
</TABLE>
</body>
</html>
I am having some trouble and just can't figure it out. Please look at http://katopia.com/clientfiles/vineandsun/ and see the gaps under the two images of the woman on the right (you can see the gaps best in IE). What is going on? I've told the table cell to be the exact same size as the image. I'm using CSS, too, but I just am not seeing where I went wrong. Thanks for the help! |
|||||||