|
HTML - Swaping Images On Rollover - Template Problem
I'm about to rip my hair out on this one. I'm using Dreamweaver 8. I have navigation that is using image rollovers to swap. My images that are needed for the rollover to work are in my "assets" folder in the "root" directory. However, when I create the actual html page off the template it is looking for the image in "templates/assets" and therefore does not find the image to swap. I have a number of different navigation buttons and I inserted them all the exact same way. This is the only one that is having this issue, the rest work properly.
This is the code that resides on the templates page. Code: <p class="navimage">
<a href="../logset.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Log & Grate Set','','..assets/menu/log_over.jpg'',1)"><img src="../assets/menu/log_default.jpg" alt="Log & Grate Set" name="Log & Grate Set" width="158" height="34" border="0" id="Log & Grate Set" /></a></p>
Notice the Set','','..assets/menu/log_over.jpg. This is the code that is produced when you create an html page from the template. Code:
<a href="logset.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Log & Grate Set',Templates/'','..assets/menu/log_over.jpg'',1
For some reason it is adding the directory templates, and therefore does not find the image. Does anyone know how I can fix this? Thanks, braves07 Similar TutorialsI am working on an ebay template... The images are not displaying whatsoever. Everything is linked properly... look at my html and see if you can figure out what the problem is... http://www.tegbs.com/template.html here is the css: #button { display: block; width: 109px; height: 89px; background-image: url(Images/button.png); background-repeat: no-repeat; } #button:hover { background-image: url(Images/buttonHOVER.png) } here is the html: <a id="button"> <!-- if there is a link then place a HREF next to the ID --> also if you want to preload the images then put this in the html: <img src="button.png" height="89" width="109" class="hiddenPic"> <img src="buttonHOVER.png" height="89" width="109" class="hiddenPic"> and this in the head: (only put this in your head if you are pre loading the images) <style type="text/css"> .hiddenPic {display:none;} </style> Hello everyone! I'm diving head first into XHTML/CSS development. Up until this point I've been designing using only tables, background graphics, and PHP. I have seen the light so I'm now working with XHTML and am proud to say that what I've done so far is XHTML Strict valid! I took a look at phpbb.com's website and saw I really liked the layout and figured, what better practice than to create something like that, so I did! Unfortunatly I'm having trouble duplicating their method for the navbar. If anyone could point me in the direction of how to get the images all in the nav bar's div layer I'd be very thankful. Keep in mind it will need to be rollover/active/rollout classes capable. My website is http://xt-arts.com Thanks so much for your help!! Using a third party tool I have created a bunch of 360 panoramic files that are compiled as SWFs. Here's the code to run one of them: Code: <script type="text/javascript" src="p2q_embed_object.js"></script>
<script id="TourView" name="TourView" type="text/javascript">
<!--
if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {
// Check to see if the version meets the requirements for playback
var flashvars="";
p2q_EmbedFlash('test.swf','350','220','allowFullScreen','true','FlashVars',flashvars);
}
//-->
</script>
I'm trying to find a way, via links, to change the SWF. Right now the script is in a cell in a table. If I use DIV or something else can I re-execute the script with a different SWF file? Right now if re-execute the script it just wipes the page and I get nothing but the new SWF. Any help would be greatly appreciated! Hi, Im had my site redesigned by a designer a while ago, it was working fine till a couple of weeks ago. When the site loads the logo and and links load for a couple of seconds and disappear. My site address is www.broadway-engraving.co.uk. If anyone can help it would be much appiciated. The code for the template is below. Thanks Ashley HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script language="JavaScript">
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_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_findObj(n, d)
{
//v4.0
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 && document.getElementById) x=document.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>
<title>{title}</title>
<META name="description" content="{description}">
<META name="keywords" content="{keywords}">.
<META name="title" content="{title}">
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<LINK REL="STYLESHEET" type="text/css" HREF="templates/{templatenum}/style.css">
<link href="http://www.broadway-engraving.co.uk/main.css" rel="stylesheet" type="text/css">
</head>
<!--DO NOT REMOVE THESE LINES#-->
<SCRIPT LANGUAGE="JavaScript" src="script.js"></SCRIPT>
<!--DO NOT REMOVE THESE LINES#-->
<script language="JavaScript">
<!--
//-->
</script><body {onload} onLoad="MM_preloadImages('karton.gif','homon.gif','proon.gif','aboon.gif','teron.gif','prion.gif','seron.gif','cont.gif','mykarton.gif','conton.gif')">
<!--DO NOT REMOVE THIS JAVASCRIPT OBJECT#-->
{jscript}
<!--DO NOT REMOVE THIS JAVASCRIPT OBJECT#-->
<div class="topanelbelowboder"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="460" height="200" align="left" valign="top" background="logo-sample3--red-style-gra.jpg"><a
href="http://www.broadway-engraving.co.uk/TROPHIES-Football.html"></a><img src="logo-sample3--red-style.jpg" width="354" height="203" alt="Sports Trophies Shop London"></td>
<td width="160" height="200" align="left" valign="middle" background="logo-sample3--red-style-gra.jpg"><table width="160" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="botomnavcolor"><a href="{f3index}">Home</a> » <a href="viewcart.cgi">View Cart »</a></td>
</tr>
</table></td>
<td width="358" height="200" align="right" valign="top" background="logo-sample3-blue-gra-1px.jpg"><table width="300" height="100" border="0" align="left" cellpadding="2" cellspacing="0">
<tr>
<td class="toppanel"><a href="{f3products}">Products</a></td>
<td class="toppanel"><a href="{f3faq}">Faq</a></td>
</tr>
<tr>
<td class="toppanel"><a href="{f3about}">About Us</a></td>
<td class="toppanel"><a href="{f3search}">Search</a></td>
</tr>
<tr>
<td class="toppanel"><a href="{f3terms}">Terms</a></td>
<td class="toppanel"><a href="{f3contact}">Contact</a></td>
</tr>
<tr>
<td class="toppanel"><a href="{f3privacy}">Privacy</a></td>
<td class="toppanel"><a href="{f3orderstatus}">Order Status</a></td>
</tr>
</table></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"></td>
</tr>
</table>
</div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" align="left" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="10"><img alt="Sports Trophies London" src="navigation-menu.gif" width="150" height="23"></td>
</tr>
<tr>
<td width="150"> <!--MENU-->
{menu}
<!--MENU-->
<script>
if (document.layers) {
} else {
// document.write("<BR>");
}
</script>
<img src="clear.gif" border=0 width="9" height="4">
<script>
if (document.layers) {
} else {
// document.write("<BR>");
}
</script></td>
</tr>
<tr>
<td> </td>
</tr>
<td width="150"> </td>
</tr>
</table></td>
<td width="10" height="100%" align="left" valign="top" bgcolor="#A01E20"> </td>
<td width="100%" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign="top"><table width="100%"
border="0"
cellpadding="2"
cellspacing="0"
height="70%"
valign="top">
<tr>
<td b1gcolor="#FFFFFF" align="left" valign="top" width="100%" height="21"><!--Actual Content Table Cell-->
<!--Content-->
{content} {intro}
<!--Content-->
<!--Actual Content-->
</td>
</tr>
<tr>
<td colspan="1" align="center" valign="bottom"> </td>
</tr>
</table></td>
</tr>
<tr>
<td width="99%" valign="bottom" height="100%" align="right"><font class="addressfontcolor">
<!--COMPANY MAILER--->
<!--PLEASE DO NOT REMOVE THE FOLLOWING LINE-->
{companyinfo}
<!--COMPANY MAILER--->
</font></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="6" align="left" valign="top" bgcolor="#A01E20"> </td>
<td width="163" align="left" valign="top"><table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150" height="20"><img alt="Sports Trophies and Gifts" src="cart-contents.gif" width="151" height="23"></td>
</tr>
<tr>
<td height="20">{jscart}</td>
</tr>
<tr>
<td width="150" height="20">{randomft} {randomsp} {randomrp} </td>
</tr>
<tr>
<td width="151" height="20"> </td>
</tr>
<tr>
<td width="151" height="20"> </td>
</tr>
<tr>
<td width="151" height="20"> </td>
</tr>
</table></td>
<td width="19" align="left" valign="top" bgcolor="#A01E20"> </td>
</tr>
</table>
<div class="botomupperboder"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="14%"> </td>
<td width="69%"><table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="600" height="41" background="botom-navigation-panel.png" class="botomnavcolor"> <a href="{f3index}">Home</a> | <a href="{f3products}">Products</a> | <a href="{f3about}">About Us</a> | <a href="{f3contact}">Contact Us</a>| <a href="{f3privacy}">Privacy Policy</a> | <a href="viewcart.cgi">View Cart</a> | <a href="{f3search}">Search</a> | <a href="{filename}#">Links</a></td>
</tr>
</table></td>
<td width="17%"> </td>
</tr>
</table></div>
</body>
</table>
</html>
Hey, I'm coding a template for someone and I was learning how to make everything extendable and I know how to do it now. But, all of the images are spaced out and idk why they are, can anyone help me? http://teamafterglow.com/templates/template7.html Thank you, When creating a file from a template in Dreamweaver CS3, is there anyway to remove all the comment tags around editable regions? So I downloaded this http://www.flashmo.com/preview/flash...humbnail_stack flash template, and the URLs don't work. When I click on a picture, it's supposed to redirect me to a webpage, but when I do this nothing happens. I've tried this with several different flash templates from other websites but the same problem happens. Hello I have an issue with a rollover on my page. I'm building a website for AS level media coursework and need help with a code. The rollover is part of a table and is aimed to play music when the mouse hovers over it, while at the same time switching the image to another... The code for the rollover itself is: Code: <a href="#" onMouseOut="MM_swapImgRestore()""stopSound(0);" onMouseOver="MM_swapImage('Image9','','piece1.jpg',1)""playSound(0);"><img src="piece1hit.jpg" name="Image9" width="156" height="156" border="0"></a>
The bad javascript for the image swap is: Code: <script language="JavaScript" 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>
And finally the even worse coding for the sound is: Code: <SCRIPT LANGUAGE="JavaScript"><!--
var aySound = new Array();
aySound[0] = "Kylie.mp3";
aySound[1] = "fseven.mp3";
IE = (navigator.appVersion.indexOf("MSIE")!=-1 && document.all)? 1:0;
NS = (navigator.appName=="Netscape" && navigator.plugins["LiveAudio"])? 1:0;
ver4 = IE||NS? 1:0;
onload=auPreload;
function auPreload() {
if (!ver4) return;
if (NS) auEmb = new Layer(0,window);
else {
Str = "<DIV ID='auEmb' STYLE='position:absolute;'></DIV>";
document.body.insertAdjacentHTML("BeforeEnd",Str);
}
var Str = '';
for (i=0;i<aySound.length;i++)
Str += "<EMBED SRC='"+aySound[i]+"' AUTOSTART='FALSE' HIDDEN='TRUE'>"
if (IE) auEmb.innerHTML = Str;
else {
auEmb.document.open();
auEmb.document.write(Str);
auEmb.document.close();
}
auCon = IE? document.all.auIEContainer:auEmb;
auCon.control = auCtrl;
}
function auCtrl(whSound,play) {
if (IE) this.src = play? aySound[whSound]:'';
else eval("this.document.embeds[whSound]." + (play? "play()":"stop()"))
}
function playSound(whSound) { if (window.auCon) auCon.control(whSound,true); }
function stopSound(whSound) { if (window.auCon) auCon.control(whSound,false); }
//--></SCRIPT>
I hope someone can resolve my issue for me, for I'm absolutely stumpted by this. I have very limited expertise in coding (as you can see) and would greatly appreciate any help I can recieve. Thank you for your time. Hey guys, I'm a designer trying to code my website which is problem number 1. I'm trying to crreate these solid rollover states for my graphic headers on my nav (about and contact). I found a site that I plugged code from using javascript which i dont' know. The "about" link works fine but the "contact" link effects teh about link instead of targeting itself. Any help you can offer I would really appreciate. Thanks! here's my site: http://www.bru.us.com here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>BRU</title> <link rel="stylesheet" type="text/css" href="bru.css" /> <script type="text/javascript"> var revert = new Array(); var inames = new Array('about','contact'); // Preload if (document.images) { var flipped = new Array(); for(i=0; i< inames.length; i++) { flipped[i] = new Image(); flipped[i].src = "nav/"+inames[i]+"2.gif"; } } function over(num) { if(document.images) { revert[num] = document.images[inames[num]].src; document.images[inames[num]].src = flipped[num].src; } } function out(num) { if(document.images) document.images[inames[num]].src = revert[num]; } </script> </head> <body> <div id="header"> <img src="images/logo_gold.gif" /> </div> <div id="navigation"> <IMG SRC="images/nav_header_design.gif"/><br> <a href="about.html"class="catlink">TowerGroup</a><br> <a href="about.html"class="catlink">PSR</a><br> <a href="about.html"class="catlink">Click&Buy</a><br> <a href="about.html"class="catlink">MCA</a><br> <a href="about.html"class="catlink">Incretin Forum</a><br> <a href="about.html"class="catlink">Mastercard</a><br> <a href="about.html"class="catlink">Baraclude</a><br> <a href="about.html"class="catlink">IconNicholson</a><br> <a href="about.html"class="catlink">FIFA</a><br> <br> <br> <IMG SRC="images/nav_header_other.gif"/><br> <a href="india_photos.html"class="catlink">India</a><br> <br> <br> <a href="about.html"> <img src="nav/about1.gif" name="about" onMouseOver="over(0)" onMouseOut="out(0)"> </a><br><br> <a href="mca.html"> <img src="nav/contact1.gif" name="contact" onMouseOver="over(0)" onMouseOut="out(0)"></a><br> </div> <div id="portfolio"> <IMG SRC="images/towergroupmarketing/tw_moodboard.jpg"/>     </div> <div id="description"> <h1>TowerGroup / Moodboard</h1> <p> When TowerGroup came to us and talked about what they felt differentiated them from other financial institutions, one thing that stood out to me, was that they wanted to communicate that they're analysts are hands-on and accessible. To express this concept in a website, I thought mixing hand-drawn illustrations with photographs would help give the site a more personable feel. </p> </div> <!--Content--> <div style="position:absolute; top:474px; left:499px;"></div> </body> </html> I seem to be having a problem with my image rollover effect in the header of my website. I am using CSS to call in the image. When using IE, the rollover happens much too slow. This doesn't seem to be a problem in firefox or safari. Any suggestions? Site: www.gallantgifts.com CSS: www.gallantgifts.com/css/master.css Thanks!! Hi: We are having a problem with an eBay Custom Storefront template. HTML is not one of my strengths, so if we could get a little help it would be greatly appreciated. At the top of our template it shows our feedback number as well as several icons such as "top rated seller", about me, store icon, etc. This feedback number should change when we get a new feedback, it does not. Everywhere else in eBay the number changes fine and the code looks the same to me. I think the section of code below is the relevant section. The store address is www.connectibles.net if you need to see more code. Or just post a note and I will copy more code. Much thanks, Bill <TABLE id=frameheader cellSpacing=0 cellPadding=0 width="100%" border=0> <TBODY> <TR> <TD><IMG src="http://img.photobucket.com/albums/v145/wpaprints/ebaydesign/left_up.gif"></TD> <TD id=logo><IMG src="http://img.photobucket.com/albums/v145/wpaprints/ebaydesign/logo.gif"> <TD id=r_head width="100%"><B>connectibles is maintained by:</B> <a href="http://myworld.ebay.com/connectibles">connectibles</a><img src="http://pics.ebaystatic.com/aw/pics/s.gif" width="4" border="0">( <a href="http://feedback.ebay.com/ws/eBayISAPI.dll?ViewFeedback&userid=connectibles">6712</a><img src="http://pics.ebaystatic.com/aw/pics/icon/iconGreenStar_25x25.gif" height="25" width="25" class="mbg-star" title="Feedback score is 5,000 to 9,999">) </span> <span class="mbg-l"><b><img src="http://pics.ebaystatic.com/aw/pics/icons/iconTrsMini.gif" height="19" width="56" title="Get fast shipping and excellent service from Top-rated sellers."></b> <a href="http://pages.ebay.com/services/buyandsell/powersellers.html"><img src="http://pics.ebaystatic.com/aw/pics/icon/psIcon_50x25.gif" height="25" width="50" alt="Member is a PowerSeller" title="Member is a PowerSeller" border="0"></a> <a href="http://members.ebay.com/ws/eBayISAPI.dll?ViewUserPage&userid=connectibles"><img src="http://pics.ebaystatic.com/aw/pics/aboutme-small.gif" height="8" width="23" title="About connectibles" border="0"></a> <a href="http://stores.ebay.com/connectibles"><img src="http://pics.ebaystatic.com/aw/pics/icon/iconStoresNW_20x20.gif" height="20" width="20" border="0" title="eBay Store"></a> </span></div></div></div><P><!--*************description*********--> I'm using this template on my Tumblr blog: http://blog.tmimgcdn.com/wp-content/...ute.jpg?9d7bd4 I'm wondering how I can get those boxes to the top so that they are not centered? I've been messing about with the HTML for ages. You'll have to excuse me because I'm a noob at HTML. I appreciate any help! Thanks. I'm not sure this is the correct place to post this question. Please redirect me if it is not. I am trying to use a template for all the pages on my site. I am using Dreamweaver. When I apply the template to a new page, it appends the path of the template directory to all my links, and won't let me edit them. I'm not sure in general how templates are supposed to work. Can I do this without Dreamweaver? Is there a good FAQ on templates somewhere that I can read? Thanks. The website I am working on is he http://radarcartoons.com/test/test.html I want each of those "blips" to change to the other pictures I have of them lit when you rollover it, but I can't figure out how to do a rollover script for multiple images on one page. The names of my alternate files are the same as the regular ones, except they have an _lit.jpg after them. So if it's 2.jpg, then the lit one would be 2_lit.jpg. I will also of course want to make them links to pages which i still have to make, but maybe the code just to make them links and an example link could show me how to get it working. Thanks a lot to anyone who can help me out on my big request! hey not too sure if I am overlooking something but i have my rollover buttons set up fine and they are working but whenever I click on them(my browser is google chrome), they produce a black rectangle just underneath, they also jump a bit when clicked. the site page is www.spaseafoods.com/Untitled-1.html and you will see the link buttons there, here is the code for the buttons; <a href="Untitled-1.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','/cooltext446156370MouseOver.png',1)"><img src="/cooltext446156370.png" name="Image7" width="87" height="39" border="0" id="Image7" /> </a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','/cooltext446156370.png',1)"></a> Hello Folks, I have created a graphic using photoshop CS2 that will form the basis of a webpage. I am a little stuck as to how to include rollover buttons. This is the graphic as it is at the moment: http://magicalwonders.com/colingreen/ With my first attempt at using a background graphic for a website I was able to use a repeating tile in the left hand side bar, and insert basic image buttons for navigation. This time though the situation is a little different, as I am not using a solid colour in the side bar, in favour of a graduated colour image. I have yet to slice the graphic, and will create a slice towards the bottom of the graphic that can be used to repeat - so that any overflow text doesn't break the design. What I'm not sure about is, if the main background image for the side bar, and the repeat background tile can occupy the same cell, both as background images? If they can, then adding rollover buttons should not be a problem. If they can, I'm not sure what the code would look like to handle that. If they can't, I'm wondering what other method can be used to include Rollover navigation buttons. I'd be grateful if someone can advise. Many thanks, Myles I'm trying to make an image appear/change in response to a rollover, but the image is not in the same table as the rollover. I'm trying to redesign the header of my website, and have come up with this draft: bottleweb.org/test I want an image to appear in between the "BOTTLEWEB.ORG" text and the buttons. If for example I move my mouse over the 'forum' button, I want an image corresponding to 'forum' to appear in between the buttons and the "BOTTLEWEB.ORG" test. Is this possible? Hi guys, I created a email template for company usage using html, i put company`s logo in it, it works perfect with outlook and windows live mail, but when i open that email template in browsers, i see .jpg file at the end of the mail message. Is there any way to get rid of this? Thanks. here is a screenshot of my problem: http://img26.imageshack.us/img26/5672/16715830.jpg Hi, I am very new to HTML/CSS so you will have to excuse my uselessness! Please see this webpage http://www.militarystar.co.uk/pages/products.html I set up a UL image in my stylesheet but for some reason this isnt aligning with the text. The star should be next to the text "Available in M/L etc...." but it appears at the left hand side of the page. This is the Stylesheet I am using... body { font-size: 10pt; font-weight: bold; background-color: #336600; color: white; line-height: 14pt; line-left: 5pt; line-right: 5pt; padding-top:5pt; text-align:center; text-indent:24px; } h1 { font: 14pt Verdana; color: white; font-weight: bold; line-height: 20pt; text-align:center; } h2 { font: 10pt Verdana; color: white; font-weight: bold; line-height: 10pt; } h3 { font: 8pt Helvetica; color: white; font-weight: bold; line-height: 10pt; } p { font: 8pt Helvetica; color: white; font-weight: bold; line-height: 10pt; } div.imageleft { float:left; clear:all; text-align:center; font-size:9px; font-style:italic; } img { padding:6px; border:none; } ul{ list-style-image: url(/images/bulletpoint.jpg); } and this is the html <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org.TR/xhtml11/DTD/xhtml11/dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Products</title> <link rel="stylesheet" type="text/css" href="productpagestyles.css" /> </head> <body> <img src="/images/military star logo.jpg" alt="Military Star Logo" /> <h1> Products </h1> <hr /> <p><div class="imageleft"> <a href="http://www.militarystar.co.uk/images/ghillie%20suit.jpg"> <img src="/images/ghillie suit.jpg" alt= "Ghillie Suits" width="200" height="200"/></a> <br/>Click image to enlarge</div> </p> <h1>Great Value Ghillie Suits.</h1> <ul> <li>Available in M/L and XL/XXL.</li> </ul> <a href="http://www.militarystar.co.uk/">Back to the homepage</a> </body> </html> Can anyone advise how to overcome this? Thanks |
|||||||