|
HTML - Changing Site Graphic
On some websites where you type in the link and you are on the site in front of the link where normally E for the internet they change it to an image. Here is an example http://www.bf2player.com click on the link and look at the address bar.
HOW CAN I DO THAT. Please Help MCBGamer. Similar TutorialsHi 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! Hello, I would like to make my two column web page into 3 columns and dont know how to do this. It is a template and I cannot figure out where to put the <td>. My site is online and then I hope to delete this link if it is possible. Please no negative remarks as I am notlooking for visitors I just want help. please. ] Here is the code I want to put into the code but not sure where to put it to get the 3rd column. I hope someone will be kind enough to help . thanks. <td width="200"> <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <p> <a href="index.html">Home</a> </p> </td> </tr> </table> I'm starting to develop a (rudimentary) website for my sis. I've noticed a little graphic glitch in IE only. What's the best forum to post my question? HTML? CSS? Here's the page in question: http://www.coldvalleyfarm.com/sheep.htm In IE only, at the bottom of the left row of pictures, there's a small white square with a white dot in the middle. Any idea what could be causing that? I've validated the pages, but I know IE isn't always compliant. This is with IE 7.0, btw. Thanks in advance! I'm attempting to center the logo / table located at the top of the page. I tried several various forms of alignment commands, all with no success. Any help is appreciated. Site: http://blog.camhabib.com Hi guys, I'm very new here - literally just searched the web for help on this problem which has been plaguing me for some time... I'll post the code below, but basically, the div_id centre_image, the body text and the right hand side graphics are correctly formatted just in the wrong place! I need them to be to the right hand side of the Left hand menu... I'm hoping I make sense!? There is CSS as well but not sure whether or not this is a CSS issue or html! I would be really greatful if someone could help me out. I'm fairly new to website design but am trying my best using various tutorials on the web and compile something half decent! Thanks in advance, Graham. 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>Double Glazing | Windows | Doors | Conservatories | Rooftrim</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="email_header"><a href=" mailto: xxxx@zurichtitanium.com">xxxx@zurichtitanium.com</a></div>
</div>
<div id="blue_banner">
<h1>Double Glazing Worcester</h1>
</div>
<div class="cleaner"></div>
<div id="menu_wrap">
<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Doors</a></li>
<li><a href="#">Conservatories</a></li>
<li><a href="#">Rooftrim</a></li>
<li><a href="#">Get a Quote</a></li>
</ul>
</div>
</div>
<div id="holder">
<div id="lhs_menu_wrap">
<div id="windows_menu">
<ul>
<li><a href="#">Sleek White</a></li>
<li><a href="#">Woodgrain Collection</a></li>
<li><a href="#">Specialist Finishes</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Energy Saving</a></li>
<li><a href="#">Maintenance Free</a></li>
<li><a href="#">The Logical Choice</a></li>
</ul>
</div></div>
<div id="centre_image">
<div id="centre_LHS_pic"></div>
<div id="centre_RHS_pic"></div>
<div id="getquote_button"><a href="#">Get a Free Quote...</a></div>
</div>
<div id="RHS_Content">
<div id="rhs_window_offer">Double Glazed Windows...<div id="win_text1"><a href="#">Get Quote</a></div></div>
<div id="rhs_cons_offer">Your New Conservatory...<div id="win_text2"><a href="#">Get Quote</a></div></div>
<div id="rhs_trim_offer">Transform Your Roofline...<div id="win_text3"><a href="#">Get Quote</a></div></div>
<div class="guarantee_logo"></div>
</div>
<div id="body_text">
If you are considering enhancing your home, you owe it to yourself to get a professional consultation. At Zurich Titanium we pride ourselves on giving you exactly what you want. Whether it be treating yourself and your home to new <h2>double glazing windows</h2>, <h2>doors</h2>
or a <h2>conservatory</h2>, invite us to show you what we can do. We guarantee you won't be disappointed.
<p>We offer a fully customisable suite of Home Improvement Products, tailor made for your home, to ensure you get what you want and need, and not wasting money on features you'll never use. With our own highly skilled installers, we are able to keep quality control in house, enabling us to give, as standard, the unrivalled <b>Zurich Titanium 10 Year Guarantee</b> on all work undertaken.</p> <p>Our bespoke quotation service, available totally free of charge, will allow you to design the windows or doors, conservatory or roofline, most suited to your home, give you an accurate assessment of the work involved, and of course an exact price.</p>
<div id="body_footer"></div>
</div>
</div>
<div id="footer">Zurich Titanium Home Enhancements Ltd, Registered in England and Wales xxxxxxxx. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</div>
</body>
</html>
And CSS to follow... It may be somewhat rough around the edges; different hints and tips put together from across the web! Thanks so far Michael... Hi Am here to look for some help about a problem I can't seem to "overcome" in the layout of my website. I put the background in bright pink so the problem kinda "jumps" to the eye. It is available here : http://www.guitarbattle.fr/gb_test.html or you can also copy and paste this code in an HTML document and see how it behaves (this is a full copy of the source code of that page linked above) : HTML Code: <HTML> <HEAD> <TITLE>Guitar Battle</TITLE> </HEAD> <body bgcolor=ff00ff> <br><br> <center> <table CELLSPACING="0" CELLPADDINg="0" BORDER="0"> <tr> <TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_haut.jpg"> </TD> </tr> <tr> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_gauche.jpg"> </TD> <TD> <img src="http://www.guitarbattle.fr/interface_situ.jpg"> </TD> <TD> <img src="http://www.guitarbattle.fr/interface_prin.jpg"> </TD> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_video.jpg"> </TD> <TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_droite.jpg"> </TD> </tr> <tr> <TD colspan="2"> <img src="http://www.guitarbattle.fr/interface_part.jpg"> </TD> </tr> <tr> <TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_bas.jpg"> </TD> </tr> </table> </center> </HTML> I hope someone can tell me what mistake I did that makes the various parts not well aligned and loosing 1 to 3 pixels here and there. Thanks a lot ! OK what I need to do is find a way to make a specific graphic change automatically on a certain date and change again on another date. A client of mine is having me design his logo so that the logo resembles the season eg: On Christmas his logo would include a Santa Clause and on Halloween there would be a pumpkin within his logo etc... You get the idea... I want to design each logo and have them change at the appropriate time of year. Thank you all in advance In Opera, IE 8, and Chrome, a single graphic image on my webpage apprears distorted. It looks fine in Firefox. The website is the main page of cousincouples.com and the problem is the yellow pixels/yellow line at the very bottom left of the page (Left of the copyright information). One of the graphics appears to wrap within the cell! If anyone could point me in the right direction, I would appreciate it. Hey guys I'm having a terrible time getting some graphic logos to layout. I know the coloring right now is not looking up to par either so don't judge me too bad I have a header div with a nav div inside and then a content div below this with a swf slide show inside. Basically inside the header div I have 5 graphics and then a nav div nested inside below that. My problem is that I want 2 of the logos aligned to the left and close to centered up/down inside the header div, then I want the main masthead logo centered in the middle of the header div up/down and left/right, and finally I want the other 2 logos floated right and centered up/down. I'm trying various methods and the best I have so far shows the middle masthead logo not correctly centered, and the 2 left logos floating left, but the far 2 right logos do not show up at all. The page is located at http://www.atlanta-web.com and I'll past all of my code below. index.html snippet Code:
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink="#000080" alink="#800000" leftmargin="0" topmargin="5" marginleft="0" margintop="5">
<script type="text/javascript" src="fsmenu_commented.js"></script>
<script type="text/javascript" src="menuset.js"></script>
<link rel="stylesheet" type="text/css" href="listmenu_h.css" />
<link rel="stylesheet" type="text/css" href="listmenu_h_settings.css" />
<style type="text/css">
#navitoolbarcontainer a {
line-height: 16px;
}
</style>
<div id="header">
<img class="award1" src="nahb.gif" /><img class="award2" src="gahomebuilders.gif" />
<center><img src="Jhomes.jpg" /></center>
<img class="award3" src="southernlivingmember_sm.gif" /><img class="award4" src="lobb.gif" />
<!-- START TOP TOOLBAR -->
<!--<div id="heightcontainer"></div>-->
<div style="width: 100%;" id="navitoolbarcontainer">
<div style="margin: 0px; padding: 0px; width: 100%;">
<div id="navitile" style="width: 100%;">
<ul class="menulist" id="listMenuRoot" style="height:22px;">
<li style="margin-top:0px;">
<a class="gt" href="index.html" style="font-size: 10px; font-family: arial,verdana,helvetica; text-decoration:none;"> <b>Jeffery Homes Inc.</b> </a>
<ul id="listMenu-id-1">
.
.
.
NAV Bar HTML Cut for space sake
.
.
.
<div style="margin-top: 0px;" id="lightgrey">
</div>
</div>
</div>
</div>
</div>
<div id="content" style="width: 100%; background-color: #6B6637">
<div id="slideshow">
<object width="600" height="350">
<param name="movie" value="slideshow1.swf" wmode="transparent">
<embed src="slideshow1.swf" width="600" height="350" wmode="transparent">
</embed>
</object>
<br />
<br />
</div>
</div>
<!-- END TOP TOOLBAR -->
css file1 Code: @charset "UTF-8";
a.gt{ text-decoration:none}
a.gt:hover{text-decoration:none}
a.gt:visited{text-decoration:none}
a.gt:link{text-decoration:none}
a.gt:active{text-decoration:none}
#header { margin: 0px; padding: 0px; width:100%; min-width:830px; width:100%; background-color: #AFAB73; position: absolute; left: 0px; top:0px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 0}
.award1 { float:left }
.award2 { float:left }
.award3 { float: right }
.award4 { float: right }
#navitile{width:820px; margin-left:0px; height:22px; background-repeat:repeat-x; position:absolute; color: #F2FFE4; left:0px; top: 0px; font-family:arial,verdana,helvetica; font-size:8px; white-space:nowrap; }
#navtile a{ color: #F2FFE4 }
#navitoolbarcontainer{width:100%; min-width:830px; width:100%; height:22px; position:absolute; top: 100px; left:0px; font-family:arial,verdana,helvetica; font-size:8px; background-image:url('background_end_fixed.png'); background-repeat:repeat-x; white-space:nowrap; margin:0px; padding:0px; z-index:1000}
#navitoolbarcontainer a{color: #F2FFE4}
#content {margin: 0px; padding: 0px; width:100%; min-width:830px; width:expression('100%'); position: absolute; left: 0px; top: 122px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 1}
#slideshow {
margin: 0 auto;
position: relative;
top: 30px;
height: 480px;
width: 600px;
}
#heightcontainer{position:relative; height:17px; width:99%; background:transparent;}
#globalform{padding:0px; margin:0px}
#lightgrey{text-align:left; color: #F2FFE4; text-indent:5px; background-image:url('background_end_fixed.png')}
#lightgrey .inputglobal{font-size:9px; font-size:expression('8px'); text-align:left; margin-top:0px; margin-left:2px; background-repeat:no-repeat}
#lightgrey .inputglobal:hover{font-size:9px; text-align:left; margin-top:0px; background-color:#ccc}
#lightgrey a{font-family:sans-serif; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; top:1px; top:expression('-2px'); position:relative}
#lightgrey a:link{text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px}
#lightgrey a:visited{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
#lightgrey a:active{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
#lightgrey a:hover{display:inline; text-decoration:none; color:#fcf2ca; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}
A lot of this css is for the menus that i found on a site and have highly modifed, but I've used class/id's for most of everything so it should be easy to see what is what. Thanks for any help that you all can provide. This site has been a godsend for getting help. I created a sliced image / navigation in Fireworks CS5 and implemented it on a page with success. I then attempted to implement the same code to the header of a WordPress theme, giving me some issues. The actions work correctly, but the images are significantly lower, blocking a portion of the remaining page, and not correctly aligned with one another. I checked for conflicts in the CSS, as well as other simple errors, but couldn't really find what the cause was. Any suggestions? Homepage (correctly displayed graphic): http://camhabib.com WordPress (incorrectly displayed): http://blog.camhabib.com I am wondering if it is possible to create an INDEX.HTML to redirect to another website? I would like it to display the redirected site, but if possible keep to the original address.. e.g. A site named www.mysite.com, with an INDEX.HTML to redirect to www.othersite.com, which displays OTHERSITE with www.mysite.com in the address bar. Hope I explained ok, any responce would be much appricated! Thanks! I need to make it so when you click on the image map it changes the image and changes the image map. I am ONLY using html and javascript is not an option. I am shure it is something stupid... <code> <img src="image.gif" id="image" border="0" name="image" usemap="#tour" /> <map name="tour"> <area shape="circ" coords="46,39,20" onClick=" document.getElementById('image').src='flag1.jpg'; document.getElementById('image').useMap='tour2'; <!--NOT WORKING ^?!--> "> </map> <map name="tour2" id="tour2"> <area shape="rect" coords="590,325,650,408" onClick="document.getElementById('image').src='flag.jpg';"> </map> </code> why???! throwing in another random question I can't change the cursor with image maps either... onMouseOver="this.style.cursor='help'" inside my code is not changing anything... when I highlight the mouse over the image map section... Hi everyone. Whenever i go to http://www.smokethosetires.com/ it goes to index.php. How can i get it so when i enter my url my homepage is home.php Hello HTMLforum this is my first post. I'm looking for a code that changes the title of the page constantly, like you often see on defaced webpages... Thanks I have been a hobbyist web developer for a lil bit but I have been looking for this info but I dont think my search terms are corrent... What I want to do is make a page that has the side menu, Header, Footer. Stay the same but have links and pages that would change inside the content part of the site. Embarrassingly what I have been doing is making copies of the index file for each page . I Know there must be a better way. If someone could shed some light on my problem. Bradley How do i change the circled text in a browser? EDIT: Its a Pop-up.. I'm trying to build a site where you can change the .css I found one way that works but the problem is that, when you click on a link, it automaticly changes back to the default .css file in stead of the one that the person was using... this is the code I used: <head> <link title="style1" rel="stylesheet" href="style1.css" type="text/css" /> <link title="style2" rel="alternate stylesheet" href="style2.css" type="text/css" /> <link title="style3" rel="alternate stylesheet" href="style3.css" type="text/css" /> <script type="text/javascript"> function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } } </script> </head> and in the body: <a style="cursor:pointer" onclick="setActiveStyleSheet('style1');"><img src="images/a1.jpg" alt="a1" width="30" height="30" /></a> <a style="cursor:pointer" onclick="setActiveStyleSheet('style2');"><img src="images/a2.jpg" alt="a2" width="30" height="30" /></a> <a style="cursor:pointer" onclick="setActiveStyleSheet('style3');"><img src="images/a3.jpg" alt="a3" width="30" height="30" /></a> I could use some help... Do you know that happens when a visitor does click one of the Link and change the text next? |
|||||||