|
HTML - Link Problems.
Ive made my main navigation linkable. The problem is that it has gaps between the images and when i view the page and clink on one of the links everything slides into place and fits. Why is this happenening and how could I sort it?
I have set img { border: none; }. Still doesnt help though. Code:
<html>
<head>
<style type="text/css">
img
{
border: none;
}
.content
{
padding: 20px 20px 20px;
}
.nav
{
padding: 10px 20px 6px;
font-size: 12px;
}
<!-- links style -->
a:link
{
color: #000000;
text-decoration: none;
}
a:visited
{
color: #000000;
text-decoration: none;
}
a:hover
{
color: #FFFFFF;
text-decoration: none;
}
</style>
<title> Eportfolio </title>
</head>
<body background="images/bg.jpg">
<table align="center" cellspacing="0" cellpadding="0">
<tr>
<td width="652"><img src="images/eportfolio-v1_02.gif"></td>
</tr>
<tr>
<td> <a href="Index.html"><img src="images/eportfolio-v1_04.gif"></a> <a href="Publications.html"> <img src="images/eportfolio-v1_05.gif"></a> <img src="images/eportfolio-v1_06.gif"><a href="Evidence.html"><img src="images/eportfolio-v1_07.gif"></a><a href="Review.html"><img src="images/eportfolio-v1_08.gif"></a></td>
</tr>
<tr>
<td height="35" background="images/eportfolio-v1_09.gif" class="nav">
<span style="margin-right: 20px;"><a href="#">Danceometer</a></span>
<span style="margin-right: 20px;"><a href="#">Music database</a></span>
<span style="margin-right: 150px;"><a href="#">Invitation</a></span>
<span style="margin-right: 20px;"><a href="#">Sponsorform</a></span>
<span style="margin-right: 20px;"><a href="#">Make a catch</a></span>
<span style="margin-right: 20px;"><a href="#">Playlist</a></span>
</td>
</tr>
<tr> <td background="images/eportfolio-v1_10.gif" class="content">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</td>
</tr>
</table>
</body>
</html>
The image is attached below Thanks. Similar TutorialsWhen I try to make one of my blogger photos (More Free) link to the website of that person, it also makes the "Sponsors & Partners" text link to the same site. http://www.ballermag.com/ It appears to be wrapping around to the next line. Am I missing something? If someone could help straighten this out, I would appreciate it. I can code a regular hyperlink ok, but I want to make the page that the hyperlink leads to open in a new window that loads under the current page. How can I do that? I a little new to this but I am useing coffe cup HTML editor 2008 I have seen a website which suits my needs and its just the out line i am interested in the following lines I cannot amend for some reason please tell me why? <link rel="shortcut icon" href="/wp-content/themes/alesca/favicon.ico"/> there are three other lines starting with link rel= if I try to amend them in html editor it changes eveything thanks xstation I have never encountered this problem before and can't figure it out. I've created an include file that holds my left nav. It's a table that holds various images that are links. But the last two buttons (that are simple and small gifs) I've created will not render at all in IE6. In view source it shows the table tags fine, but strips out the image tags for those buttons. The really weird thing is that everyone else can see the images on their computers in Firefox, IE6 and IE7, Mozilla, etc... Also, if I take the actual links out of the href tag and leave it blank, the images show up fine. What the heck is wrong with my browser??? I'm having trouble trying to resolve a minor issue with the color scheme for the text links of my web site. There are text-based links in more than one part of the site, and these links are set against different colors (tan, white, and green). Setting the link colors inside the body tag (alink= vlink= link=) didn't go well because, the color scheme that works for the green background didn't work for other areas of the site. I'm sure there's a simple answer to this, and I'll welcome any assistance. And I'll be happy to provide any additional information if needed. this is my page http://web.vtc.edu/users/cjb06271/CI...nal/order.html there are several things I would like to happen. 1. the right collumn background to be where the right collumn should be(so other links in navbar) 2.The test between the roach pictures to be alligned with the top rather than bottom of pictures (so smaller windows can see) 3. When you size the window smaller than the text, a scroll bar appears, and when you scroll the background no longer exists. If I put it on auto the background will only go as far as the text does. 4. (nice but not required)The cocroachs to be alligned to the left and right of the top bar respectively, and the text in the middle. 5. (nice but not required) the right column background image is being cut in half (as does the top one if you size small enough). any way to make the images ignore the collumns? don't worry about the colors I will be changing them soon I have several links on my site, all in the form of <a href="http://www.mywebsite.com">mywebsite</a> How do I need to change it such that a new instance of the browser is used in which the linked site is displayed. Ive been working on a website in my free time, and I have been wondering if it's possible to hover over a link, and change the text color of another link. A picture of one of my web pages is shown in the link below. http://i223.photobucket.com/albums/d...screenshot.jpg I want to be able to hover over something from the side navigation bars and have various links in the bottom naviational bar change color. So like hovering over Blood Elf, would make Death Knight, Mage, Paladin, Warlock, Priest, Rogue, Hunter turn red Does anyone know how to do this? or even know if it is possible? Hi, I'm newly registered and seeking some assistance. I'm working on a website for a client and come across an issue. The following is my iFrame code: Code: <div id="iframez"> <iframe src="main.html" width="100%" height="400px" name="framez"></iframe> </div> I have a link that is at the bottom of the page that is supposed to load in the iFrame when clicked upon. The code is as follows: Code: <a href="somelink.html" target="framez">some link</a> What I want is when the link is clicked that it loads in the iframe (this works as intended) AND I want the page to scroll up to the iframe. I tried doing this without success: Code: <a href="somelink.html#iframez" target="framez">some link</a> This is interpreted as #iframez in somelink.html, and not the page its on. Is there any way around this? Thanks for your patience. Hi im not sure if this can be done i have created some buttons to use as links and once i put the a href code in a box appears around the button can i remove this and how plz you can see example of what i mean on my website i have made Home and Contact clickable but i want to remove the box thats around the button if possible http://dreamteam0708.co.uk/ for info: im coding my own html in notepad, not using any programs or anything and my hosting doesnt support php etc Hi, I am facing some problem. I am currently doing a html template. But I don't seem to be able to solve the gap problem I am facing (View my snapshot), can anyone help me? Thanks alot! Snapshot file: http://i49.tinypic.com/3t3eo.jpg 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css">
<title>Darren Ng - Future Pilot</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<h1><a href="index.html"><span>Darren's</span> Website</a></h1>
<table><tr> <ul id="menu">
<li><a class="current" href="#">Home</a></li>
<li><a href="#">Practice</a></li>
<li><a href="#">Attorneys</a></li>
<li><a href="#">Accidents</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About Us</a></li>
</tr></table></div>
<div class="clr"></div>
</div>
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<td align="center" valign="middle"><table width="1000" height="550" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td width="1000" height="360" align="center"><img src="images/header.gif" width="1000" height="360" hspace="0" vspace="0" border="0" align="top" usemap="#MapMap"></td>
</tr>
CSS File: Code: body {
font: .74em Tahoma, Verdana, Sans-Serif, Arial;
color: #7f7f7f;
background-image: url('images/bodypixel.gif');
background-repeat: repeat;
}
h1 { font: normal 5em "Trebuchet MS", Helvetica, Arial; }
p { margin: 0 0 15px; line-height: 1.6em; }
a { outline: 0; color: #304D6F; text-decoration: none; }
li { list-style: none; }
li a, img { display: block; }
img { outline: 0; border: 0; }
#wrapper { width: 984px; margin: auto; }
.clr { clear: both; }
#logo { float: left; padding: 30px 15px; }
#logo h1 a { color: #fff; }
#logo h1 a span { color: #808080; }
#menu { height: 44px; padding: 5px 0 0 4px; }
#menu li { float: left; font-size: 1.3em; text-transform: uppercase; }
#menu li a { color: #888; margin: 0 50px 0 0; }
#menu li a:hover { color: #fff; }
#menu li a.current { color: #fff; }
take a look at this and can anyone tell be why it does this in ie it look fine in firefox and safari http://nathanoconnor.co.uk/kartingchampionships/site/ thanks Hi everyone, I recently landed myself a job as a web manager. It's been a long time since I done it however, as I've had children to bring up and so on - i'm a bit rusty but getting through it okay. I've hit a snag however and I'm wondering if anyone can help me... The website i'm charged with watching over works completely fine bar one problem, and its not even a big problem - just a bit annoying. One of the images, when opened in Chrome, floats to the left when it is supposed to be central. This is the only image to do this on the website in any browser. Has anyone got any tips for me? Hi guys, now i know this is my first post here, i have joined because i am really stuck and i would really appreciate any help. First off, just so you know - i know near enough nothing about HTML I am busy designing my site and i cant go much further as there is one issue really bugging me. My website is vBulletin (yes i know its PHP) and im using another script called vBadvanced CMPS (a portal mosification). I have tried to add a navigation bar to the left of my forums and it works! Only problem is, it really breaks up the forum. Take a look for yourself Link Notice the way its all broken up at the bottom? Anyway, i posted my problem on both the vBulletin & vBadvanced websites without much luck. One of the admins told me that i needed to get some errors fixed (all 109 of them)... I managed to narrow the errors down to 67 all in all. Here I really am stuck guys and im sure these errors will be relatively easy to fix for someone who has experience with HTML/PHP. if anybody needs me to i can paste the vBulletin templates that are causing the problems Any help would be great. Thanks Can anyone suggest how i fix the problem i have here with IE? HTML Code: <body> <div id="container"> <div id="header"> <img src="images/thePlacePromotion.jpg" alt="The Place Promotion Agency for Gloucestershire" width="960" height="80" /> </div> <div id="middle"> <a href="http://www.glosfirst.co.uk"><img src="images/Middle.jpg" alt="We're building a new website, meanwhile here's a link to the current Gloucestershire First website." width="960" height="578" border="0" /></a> </div> <div id="bottom"> <a href="http://www.glosfirst.co.uk"><img src="images/slogan.jpg" alt="We're building a new website, meanwhile here's a link to the current Gloucestershire First website." width="960" height="80" border="0" /></a> </div> </div> </body> CSS is: Code: body {
background-color: #96be3f;
}
#container {
width: 970px;
background-color: #96be3f;
height:auto;
margin: auto;
}
#header {
width: 960px;
padding: 20px auto;
margin: auto;
}
#middle {
width: 960px;
height: 567px;
margin: auto;
}
#bottom {
width: 960px;
height: 80px;
margin: auto;
}
the top header on IE is over to the right! Thanks Hurley Hi everyone I hope some of you pros can help me out here? When you go to my site www.iMaciForums.com with IE 6 the text is all misaligned, I had the same problem with IE 7 & but I fixed that its just IE6 now. So could you take a look and let me know whats wrong with it, because it's driving me crazy Thanks. I recently bean using ssi instead of frames and i now have an issue... I do not know how to keep the menubar on the left hand side at the top... see as my page streaches it centers itself in the midle of the screen... i am using tables to create a framelike effect without the issues that frames create My OS is windows 7 64bit and have installed: - internet explorer 9 - Mozilla Firefox - Google Chrome My website is getting displayed correctly on Firefox and Chrome but is a bit of a mess on IE9 If you could have a look and let me know if there is anything I could do, would be much appreciated. Here is one page of my site that is bothering me: http://www.dashony.com/Solar%20panel...0projects.html Please check out the white menu, ( SpryMenuBarVertical ) using IE and one of the other 2. Thanks! Let me state my problem. Under my links which is under the banner, it says My Tickets, and User it seems in Internet Explorer it shows an extra 2px border on the bottom. Something to do with the height I assume. Now in firefox there is a 10px gap in between the Ticket Deck banner and the Links Bar. Also I can't keep to get the copyright centered for some reason :s . Here is the html: Code: <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html><head><title>Ticket Deck v. 1.0 beta</title>
<link href='index.css' rel='stylesheet' type='text/css' />
<body>
<div id='header'>
<div id='tlogo'><div id='logo'></div></div>
<div id='links'>
<ul>
<li><a href='#'><img src='images/linksmy.gif' width='91' height='25' alt='My Tickets'></a></li>
<li><a href='#'><img src='images/linksuser.gif' width='83' height='25' alt='User Area'></a></li>
</ul>
</div>
</div>
<br />
<div id='memberbar'>
<div id='textmargin1'>
test
</div>
</div>
<br/>
<div id='container'>
<div id="content">Welcome to Ticket Deck's Ticket System. What is listed below is your ticket's summary clicking on the subject title will
bring you directly to your ticket.<br/>
<div id="tickets"><div id="tbar"><div id="textmargin">Ticket Summary</div></div>
<div id="tcontain">
<table width='100%' cellpadding='3' cellspacing='1' id='toutline'>
<tr>
<th width='5%'>id</th>
<th width='30%'>Subject</th>
<th width='10%'>Priority</th>
<th width='23%'>Starter</th>
<th width='15%'>Status</th>
<th width='10%'>Dept #</th>
</tr>
<tr>
</table>
</div>
<br/>
<center>Welcome Guest! Please login to view your tickets!</center>
</div>
</div>
<div id="nav"><div id="navbar"><div id="textmargin">Login</div></div>
<div id="textmargin">
Username: <br/>
<input type="text" name="username" size="25" /><br />
Password: <br/>
<input type="text" name="username" size="25" /><br /><br />
<input type="hidden" name="do" value="new">
<center>
<input type="submit" name="Submit" value="Login" />
<input type="reset" name="reset" value="Reset" /><br/>
</center>
</div>
<div id="navstrip"><div id="textmargin">Ticket Statistics</div></div>
lovely stats here
<br/>
<div id="navstrip"><div id="textmargin">Ticket Statistics</div></div>
Update: Ticket Deck re
</div>
<div id="copyright">
<center>Powered by <a href="#">Ticket Deck</a> v. 1.0 Beta 1</center>
</div>
</div>
</div>
</body>
The CSS Code: body {
background: #f8f8f8;
color: #8a6600;
font: 12px verdana, arial, sans-serif;
margin: 0px;
padding: 0px;
}
a img {
border:0;
}
div#tlogo {
background-image: url(images/tlogo.gif);
width: 100%;
height: 25px;
}
div#logo {
background-image: url(images/logo.gif);
width: 197px;
height: 25px;
margin-left: 25px;
}
div#links {
height: 25px;
min-height: 25px;
width: 100%;
background-image: url(images/linksbg.gif);
padding: 0;
margin-top: 1px;
}
div#links ul {
list-style:none;
}
div#links ul li {
float:left;
}
div#header {
height: 51px;
}
div#container {
color: #ebba34;
height: 200px;
min-height: 100%;
width: 830px;
margin: auto;
}
* html #container {
height:100%;
}
*html #copyright {
position: absolute;
bottom: 0px;
}
div#date {
margin-right: 10px;
float:right;
}
div#nav {
color: #1b90b7;
border: 1px solid #61a5b9;
float: left;
width: 220px;
background: #e5f9ff;
}
div#navbar {
border: 1px solid #61a5b9;
width: 216px;
color: #1b90b7;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
height: 23px;
background-image: url(images/nav.gif);
}
div#navstrip {
width: 100%;
background-image: url(images/nav.gif);
height: 23px;
border-top: 1px solid #1b90b7;
border-bottom: 1px solid #1b90b7;
}
div#textmargin {
margin-left: 2px;
margin-top: 4px;
}
div#textmargin1 {
margin-left: 2px;
margin-top: 6px;
}
div#tickets {
background: #ffebb3;
width: 602px;
border: 1px solid #e8af3a;
float: right;
}
div#tbar{
width: 598px;
background-image: url(images/t_bar.gif);
height: 23px;
border: 1px solid #e8af3a;
margin-left: 1px;
margin-right: 1px;
margin-top: 1px;
}
div#tcontain{
width: 599px;
height: 18px;
margin-left: 1px;
margin-right: 1px;
}
div#content {
width: 602px;
color: #8a6600;
float: right;
}
div#memberbar {
color: #1b90b7;
style: bold;
width: 80%;
height: 28px;
background: #e5f9ff;
border: 1px solid #61a5b9;
margin:auto;
}
div#toutline {
border: 1px solid #cde1ed;
}
#copyright {
text-align: center;
height:20px;
position: absolute;
bottom: 0px;
position: bottom;
}
table,
tr,
td {
background: transparent;
font-size: 12px;
font-family: verdana, arial, sans-serif;
}
table th {
background: #fadc89;
font-size: 12px;
font-family: verdana, arial, sans-serif;
font-weight: normal;
text-align: left;
padding: 2px;
}
table th a {
color: #003E67 !important;
text-decoration: none;
}
Any help is appreciated . I know that this isn't valid xhtml I haven't gone that far in fixing it to make it valid, just trying to fix the obvious problems. Thanks, Brian |
|||||||