|
CSS - Css Peek-a-boo Links, I Think
I've gone through my nav.php and nav.css files about 100 times and I can't find anything that would cause this error.
This is the nav.php code PHP Code: <?php $section = $_GET['section']; switch($section){ case 'memorial':{ echo " <div id=\"nav\"> <div id=\"nav_main\"> <ul> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"home.php?section=home\">Home</a> </li> <li id=\"memorial_item\"> <ul> <li> <a id=\"memorial_1\" class=\"selected\" href=\"memorial.php?section=memorial\">Memorial</a> <img src=\"image/section.png\" style=\"float:left;clear:left;height:13px;\" alt=\"V.C. Bar\" /> </li> <li> <a id=\"memorial_2\" href=\"memorialkia.php?section=memorial&startpage=1\">K.I.A. WW2</a> </li> <li> <a id=\"memorial_3\" href=\"memorial.php?section=memorial&startpage=1#ENLISTED_DB\">Served WW2</a> </li> </ul> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Members</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"about.php?section=about\">About</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#last_item\">Site Map</a> "; break; } case 'about':{ echo " <div id=\"nav\"> <div id=\"nav_main\"> <ul> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"home.php?section=home\">Home</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Members</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a> </li> <li id=\"about_item\" class=\"selected\"> <ul> <li> <a id=\"about_1\" href=\"about.php?section=about\">About</a> <img src=\"image/section.png\" style=\"float:left;clear:left;height:13px;\" alt=\"V.C. Bar\" /> </li> <li> <a id=\"about_2\" href=\"about.php?section=about&site=submit\">Site</a> </li> <li> <a id=\"about_3\" class=\"about_mid\" href=\"about.php?section=about&b3l=submit\">Branch 3</a> </li> <li> <a id=\"about_4\" class=\"about_mid\" href=\"about.php?section=about&rcl=submit\">R.C.L.</a> </li> <li> <a id=\"about_5\" class=\"about_mid\" href=\"about.php?section=about&jbc=submit\">John B. Croak</a> </li> <li> <a id=\"about_6\" href=\"about.php?section=about&vc=submit\">V.C.</a> </li> </ul> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#last_item\">Site Map</a> "; break; } case 'credits':{ echo " <div id=\"nav\"> <div id=\"nav_main\"> <ul> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"home.php?section=home\">Home</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Members</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"about.php?section=about\">About</a> </li> <li class=\"selected\" id=\"credits\"> <a id=\"credits\" href=\"credits.php?section=credits\">Credits</a> <img src=\"image/section.png\" style=\"float:left;clear:left;\" alt=\"V.C. Bar\" /> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#last_item\">Site Map</a> "; break; } case 'home':{ echo " <div id=\"nav\"> <div id=\"nav_main\"> <ul> <li> <a class=\"selected\" id=\"home\" href=\"home.php?section=home\">Home</a> <img src=\"image/section.png\" style=\"float:left;clear:left;\" alt=\"V.C. Bar\" /> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Members</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"about.php?section=about\">About</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#last_item\">Site Map</a> "; break; } default:{ echo " <div id=\"nav\"> <div id=\"nav_main\"> <ul> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"home.php?section=home\">Home</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"memorial.php?section=memorial\">Memorial</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Members</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#not_complete\">Our Shop</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"about.php?section=about\">About</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"credits.php?section=credits\">Credits</a> </li> <li class=\"nav_item\"> <a class=\"nav_item\" href=\"#last_item\">Site Map</a> "; break; } } echo "</li></ul></div><div id=\"nav_foot\"> <a href=\"http://validator.w3.org/check?uri=referer\">Valid XHTML 1.0!</a> </div></div>"; ?> This is the output of the nav.php file: Code: div id="nav"> <div id="nav_main"> <ul> <li> <a class="selected" id="home" href="home.php?section=home">Home</a> <img src="image/section.png" style="float:left;clear:left;" alt="V.C. Bar" /> </li> <li class="nav_item"> <a class="nav_item" href="memorial.php?section=memorial">Memorial</a> </li> <li class="nav_item"> <a class="nav_item" href="#not_complete">Members</a> </li> <li class="nav_item"> <a class="nav_item" href="#not_complete">Our Shop</a> </li> <li class="nav_item"> <a class="nav_item" href="about.php?section=about">About</a> </li> <li class="nav_item"> <a class="nav_item" href="credits.php?section=credits">Credits</a> </li> <li class="nav_item"> <a class="nav_item" href="#last_item">Site Map</a> </li></ul></div><div id="nav_foot"> <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0!</a> </div></div> and this is the CSS that's been my main target trying to iron out this bug. Code:
#nav{
float:left;
width:122px;
}
#nav a:link, #nav a:visited{
color:#9fb594;
}
#nav_main ul, #nav_main ul li{
padding:0;
margin:0;
list-style-type:none;
text-align:left;
}
#nav_main{
margin:1em 0 0 0;
float:left;
clear:left;
width:122px;
background-image:url('../image/nav_bg.png');
background-repeat:repeat-y;
}
#nav_main p{
padding:0;
margin:0;
}
#nav_foot{
float:left;
clear:left;
width:122px;
height:177px;
margin:auto;
background-image:url('../image/nav_foot.png');
background-repeat:no-repeat;
}
.nav_item{
float:left;clear:both;
}
#memorial_1{
width:105px;height:1em;float:left;clear:both;color:#000;font-weight:600;
}
#memorial_2{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:both;background-color:#1a1121;border-top:thin solid #000;
}
#memorial_3{
text-align:right;height:1em;width:105px;background-color:#1a1121;border-bottom:thin solid #000;padding-bottom:.4em;margin-right:19px;float:right;clear:both;
}
.about_mid{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:left;background-color:#1a1121;
}
#memorial_item{
float:left;clear:both;
}
#about_item{
float:left;clear:both;
}
#about_6{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:left;background-color:#1a1121;border-bottom:thin solid #000;
}
#about_2{
width:105px;height:1em;text-align:right;margin-right:19px;float:right;clear:left;background-color:#1a1121;border-top:thin solid #000;
}
#about_1{
float:left;height:1em;width:105px;clear:both;font-weight:600;
}
#credits{
clear:both;font-weight:600;
}
#home{
clear:both;font-weight:600;
width:105px;float:left;clear:both;
}
.selected{
background-image:url('../image/section.png');background-repeat:no-repeat;
}
I've spent everyday since monday trying to fix this and I can't find anything. It happens in both IE and firefox so I think it's more of a CSS error but I'm convinced it's not in any of these files and they're the only files with styles for the nav. Similar TutorialsSimple question, but i'm trying to create a decent sized space in between my links, and make them white. I can make my links white, but can't seem to change the space inbetween them. HTML Code: div id="bar-links"> <center> <div class="content box1"> <table width="500" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="4"><img src="images/barlist_01.gif" width="500" height="23" alt=""></td> </tr> <tr> <td background="images/barlist_02.gif" width="20"></td> <td background="images/barlist_03.gif" width="456"> </p> <div id="bar-links"> <h4><a href="#" title="Riley's Pub">Riley's Pub</a> <a href="#" title="Ho Down Bar"style="color: #fff">Ho Down Bar</a> <a href="#" title="Depot Square"style="color: #fff">Depot Square Bar</a> <a href="#" title="Egans Pub"style="color: #fff">Egans Pub</a> </h4> </div> </td> <td background="images/barlist_04.gif" width="24"></td> </tr> <tr> <td colspan="4"><img src="images/barlist_05.gif" width="500" height="27" alt=""></td> </tr> </table> </div> CSS Code: #bar-links { text-indent:inherit; text-align:left; }
Hi, If I have the following CSS: body { margin: 0px; padding: 0px; } a:link, a:visited { color: #F36706; text-decoration: none; } a:hover, a:active { color: #F36706; text-decoration: underline overline; } #siteDimention { width: 758px; margin-left: auto; margin-right: auto; padding: 0px; } How come the links in my page aren't changing from the normal blue/purple ones? I'm currently working on a website for college, but I've run into an issue I can't work out. I can't seem to get rid of the default purple box that appears around my links. The HTML: Code: <div id="homelink"><a href="index.html"></a></div> The CSS: Code: #homelink{
position:absolute;
width:53px;
height:17px;
margin-top:25px;
margin-left:70px;
z-index:10;
}
#homelink a{
display:block;
background-image:url(images/links/home.png);
background-repeat:no-repeat;
width:53px;
height:17px;
}
#homelink a:hover{
display:block;
background-image:url(images/links/homehover.png);
width:53px;
height:17px;
}
As you can see, I use a background image for the div and no text for the link. Clicking the background image works fine and takes me to the homepage, however I get the default visited and active link border around it. Is there any way to solve this so that no border appears? question is about CSS and links. I can get underline effect, background change, etc by using .a but i need to have more than one sort of link in my page, e.g. menu links cannot have the same effect as links in the main text. How do i set up more than two link effects? I have set up a CSS file for a website I am building, however, when I click on the links which work correctly (at first) it goes to the desired place, if I go "back" the link turns to a larger italic font. Look here for example. http://www.burrellprolabs.com/newsite.htm if you click on one of the body copy links under "latestNEWS" then go back you will see what I mean. here is my css style for that particular part: .bodycopy { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #575757; text-decoration: none; line-height: 13px; } .bodycopy a:link { color: #BF0000; text-decoration: none; } .bodycopy a:active { color: #BF0000; text-decoration: none; } .bodycopy a:visited { color: #BF0000; text-decoration: none; } .bodycopy a:hover { color: #969696; text-decoration: underline; I was messing around with <ul><li> type nav links, and had some issues with the bullet images I made were too large, so I made it as a background image for the <li> but <li> backgrounds didn't seem to work so well on IE. My question is this, why does everyone use <ul><li> to make their nav links when you can use less code just using <a>'s within a <div>? Here's my code example (bullet.jpg not included, it's just a 30px square I made in photoshop) Code: <html>
<head>
<style type="text/css">
#links li {
text-indent:40px;
list-style-type:none;
}
#links a {
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
#links2 a {
text-indent:40px;
display:block;
line-height:30px;
height:30px;
width:150px;
background:#EEE url('bullet.jpg') no-repeat;
}
#links2 a:hover {
background:#FFF url('bullet.jpg') no-repeat;
}
</style>
</head>
<body>
<div id="links">
<ul>
<li><a href="#">links</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
<div id="links2">
<a href="#">links</a>
<a href="#">link 2</a>
<a href="#">three</a>
</div>
</div>
</body>
</html>
I want to have a hover effect on the links of my page. I'm using an attached stylesheet to define it. Here is the section defining the links: Code:
a:link {
color: red;
text-decoration: none;
}
a:hover {
color: blue;
text-decoration: underline;
}
a:visited {
color: red;
text-decoration: none;
}
a:active {
color: red;
text-decoration: underline;
}
Normal links appear red and is not underlined. When the cursor hovers over a normal link, it appears blue and is underlined. However, visited links do not 'behave' as normal links. They appear red and are not underlined. When hovered over, they do not change color or get underlined. I want visited links to act the same. They only way I could get them to act the same was to do the following: Code:
a.general:link {
color: red;
text-decoration: none;
}
a.general:visited {
color: red;
}
a.general:hover {
color: blue;
text-decoration: underline;
}
a.general:active {
color: red;
text-decoration: underline;
}
This is the only rules IE will obey. But every link need to be defined as instances of class "general". Is there a better way of handling this? I have what seemed to be a simple idea but is turning out to bother me. In my style sheet i want to put a base url followed by a user id Link looks like this Code: http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id= Now in my html i have this Code: <table><tr><td >My name<td >Job position<td >606959150</tr> The last td that has the number in it i want to add to the end of the url posted above i cannot figure our what to put in the css to use as the main link and i want to add another td behind the last one with the number in it with the entirelink which should look like this Code: <a target="_blank" href="http://mywebsite.com/this_folder/remote/html_server.php?xw_controller=hitlist&xw_action=set&target_id=606959150">Link</a> I have to use this for multiple people each one using a unique ID# is there a simple way to do this, the reasoning behind this is that the main link changes once every few months, instead of changing all links i would like to be able to just change the one in the css file and be done with it. i hope i am explaining it correctly. Thanks ahead of time for any help u can provide I am not sure if these links count as navigation or not, so not sure if I should be using the UL element for semantic correctness? <div id="footer_bottom" class="bold"> <a href="sitemap.php" title="Sitemap">Sitemap</a> | <a href="accessibility.php" title="Accessibility Options">Accessibility Options</a> | <a href="http://validator.w3.org/check?uri=referer;verbose=1" rel="external" title="Validate XHTML">XHTML Valid</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" rel="external" title="Validate CSS formatting">CSS Valid</a> </div> My first post Website:www.freewebs.com/weareamazing I can't figure out how to move the links that are at the top of my page (Home, Graphics, Icons, Linking Back, Credits) to the side of my table. I also want to get rid of that line that is under the links. Thank you for your help! Hi, I have CSS document like so: Code: div.menu A:link {
definitions
}
div.menu A:visited {
definitions
}
div.menu A:active {
definitions
}
div.menu A:hover {
definitions
}
And in my HTML document Code: <div class="menu"> Links are then put in here </div> But only the first Link effect works, how come? I tried Google, got few results I were looking for, I know that the Link effects has to be in certain order, and in these websites I found they were in different order tried both but no luck Thanks alot! Hey everyone, I am making a design, and I am almost done, but when I view it in IE 6 and 7, the top links are cut off, I have tried adding padding and margins, but to no eval. Here is how it looks in IE. Here is my code: html4strict Code: Original - html4strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title></title> <style type="text/css"> body { font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif; font-size: 14px; margin: 0; background-color: #EEF3F6; } #container { width: 100%; } #header { background-image: url( head_bg.png ); background-repeat: repeat-x; height: 34px; padding-left: 5px; border-top: 1px solid #eff5f7; border-bottom: 1px solid #bed6e0; } #header h1 { font-weight: bold; color: #666666; font-size: 16px; margin: 0; padding-left: 15px; } #header h2 { font-size: 12px; font-weight: normal; margin: 0; color: #999999; padding-left: 15px; } #menu { background-image: url( menu_bg.png ); background-repeat: repeat-x; height: 38px; margin-top: 2px; text-align: center; border-top: 1px solid #eff5f7; border-bottom: 1px solid #FFFFFF; } #menu a:hover { background-image: url( menu_link_hover.png ); background-repeat: repeat-x; border: 1px solid #4890c8; } #menu a { padding-left: 25px; padding-right: 25px; padding-top: 5px; padding-bottom: 5px; margin-right: 24px; color: #000000; border: 1px dotted #FFFFFF; } #menu li { display: inline; } #menu ul { list-style-type: none; } #main { float: left; clear: right; width: 75%; background-color: #FFFFFF; padding: 15px; border: 1px solid #bed6e0; height: 65%; } #right { float: right; } #right .box { background-color: #f6f9fb; border: 1px solid #bed6e0; padding: 5px; width: 190px; display: block; } </style> </head> <body> <div id="container"> <div id="header"> <h1>asfd</h1> <h2>asdf</h2> </div> <div id="menu"> <ul> <li><a href="">Link</a></li><li><a href="">Link</a></li><li><a href="">Link</a></li><li><a href="">Link</a></li><li><a href="">Link</a></li><li><a href="">Link</a></li><li><a href="">Link</a></li><li><a href="">Link</a></li> </ul> </div> <div id="main"> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> </div> <div id="right"> <div class="box"> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> </div> <br /> <div class="box"> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> asdfasfsdaf<br /> </div> </div> </div> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" I can't get this to work. I've done my site in HTML and CSS and for some reason, any time I try to place an href tag, it doesn't work - no link, no hover, nothing at all. I'm new here and I know you can't post URLs, but if someone could look at this code for me, I'd really appreciate it. Thanks! Jason Guys, no time to introduce myself or anything I've been beating my head with this for half an hour now Baiscly I have a div box 700x20px .. And i want a couple of links to be inside it and aligned in the middle of the div (Vertically). However what works in opera doesnt work in FF and IE (all latest versions). And vice versa. If it works in IE it doesnt work in Opera. here's a screenie i5.tinypic.com/544biwz.jpg i have also upped it online he fotoz.hit.bg/new-transitional.html View Source and you can view the whole css, i still havent moved it to seperate file, cuz im not finished with the desgin itself. Thanks in advance! I reconfigured my css for my work website that i have been working on. But now for some reason my links in my .left h1 wont hover to click sometimes and will some other times. it's getting a bit confusing. I dont know if there is something to do with the code. also my website is www24.brinkster.com/mattphat/ymca3.html Code: <?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<HEAD>
<TITLE>Northwest Connecticut YMCA | We build strong kids, strong families, strong communities.</TITLE>
</HEAD>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #66A7C5;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #333;
margin:10px 100px 10px 100px;
}
a {
text-decoration: none;
color: #004990;
}
a:hover {
text-decoration: underline;
color: #111;
}
#wrap {
margin: 0 auto;
width: 780px;
background: #F0ECEB;
border-top: 7px solid #A3D6F5;
border-bottom: 7px solid #A3D6F5;
border-left: 7px solid #A3D6F5;
border-right: 7px solid #A3D6F5;
}
#header {
height: 309px;
padding: 2px;
}
#header h1 {
font-size: 12px;
letter-spacing: 0px;
padding: 0px 0 0 0;
color: #6C7476;
}
#header h1 a {
color: #aaa;
text-decoration: none;
font-weight: 100;
letter-spacing: -2px;
}
#header h1 a:hover {
color: #111;
}
#header h2 {
font-size: 19px;
color: #111;
padding: 5px 0 0 20px;
letter-spacing: -1px;
font-weight: 100;
}
#menu {
height:70px;
line-height: 30px;
border-top: 7px solid #EE3233;
border-bottom: 7px solid #EE3233;
background: #F0ECEB;
padding: 8px;
}
#menu ul {
list-style-type: none;
padding-left: 20px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
padding: 0 20px 0 0;
text-decoration: none;
font-weight: 100;
font-size: 14px;
color: #004990;
}
#menu ul li a:hover {
color: #004990;
text-decoration: none;
font-weight: 600;
}
#content {
padding: 0 20px 20px 20px;
}
.right {
float: right;
width: 520px;
text-align: justify;
}
.right h2 {
font-size: 12px;
font-weight: 100;
padding: 15px 0 7px 0;
}
.right h2 a {
text-decoration: none;
color: #004990;
}
.right h2 a:hover {
color: #111;
}
.left {
float: left;
width: 200px;
margin-top: 10px;
background: #6C7476;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 28px;
line-height: 28px;
color: #fff;
font-size: 13px;
background: #EE3233;
}
.left ul {
padding: 10px 0 15px 20px;
list-style-type: square;
color: #EE3233;
}
.left ul li a {
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 100;
}
.left ul li a:hover {
color: #fff;
font-weight: 600;
}
#footer {
height: 80px;
line-height: 12px;
background: #6C7476;
text-align: center;
font-size: 11px;
color: #fff;
}
#footer a:link {color: #F0ECEB; text-decoration: underline; }
a:active {color: #F0ECEB; text-decoration: underline; }
a:visited {color: #F0ECEB; text-decoration: underline; }
a:hover {color: #F0ECEB; text-decoration: none; }
</style>
<BODY>
<div id="wrap 2">
<div id="wrap">
<div id="header">
<center>
<img src="YMCA/NWLOGO4.jpg">
<h1>Northwest Connecticut YMCA - Torrington Branch - 259 Prospect St, Torrington CT 06790
</center>
</div>
<div id="menu">
<center>
<img src="(URL address blocked: See forum rules)" width="360" height="15">
<br>
<img src="ymca/miniY.jpg">
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover.src="YMCA/homelink2.jpg" ONMOUSEOUT=rollover.src="YMCA/homelink.jpg">
<img src="YMCA/homelink.jpg" name="rollover" width="89" height="28" border="0"></a>
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover2.src="YMCA/Torringtonlink2.jpg" ONMOUSEOUT=rollover2.src="YMCA/Torringtonlink.jpg">
<img src="YMCA/torringtonlink.jpg" name="rollover2" width="140" height="28" border="0"></a>
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover3.src="YMCA/winstedlink2.jpg" ONMOUSEOUT=rollover3.src="YMCA/winstedlink.jpg">
<img src="ymca/winstedlink.jpg" name="rollover3" width="109" height="28" border="0"></a>
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover4.src="YMCA/cannanlink2.jpg" ONMOUSEOUT=rollover4.src="YMCA/cannanlink.jpg">
<img src="ymca/cannanlink.jpg" name="rollover4" width="93" height="28" border="0"></a>
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover5.src="YMCA/givinglink2.jpg" ONMOUSEOUT=rollover5.src="YMCA/givinglink.jpg">
<img src="ymca/givinglink.jpg" name="rollover5" width="86" height="28" border="0"></a>
<a href="(URL address blocked: See forum rules)" ONMOUSEOVER=rollover6.src="YMCA/aboutuslinks2.jpg" ONMOUSEOUT=rollover6.src="YMCA/aboutuslinks.jpg">
<img src="ymca/aboutuslinks.jpg" name="rollover6" width="104" height="28" border="0"></a>
<img src="ymca/miniY.jpg">
</center>
</div>
<div id="content">
<div class="right">
<span style="font-size : 12px">
<br>
<center>
<img src="ymca/spacer.gif"><br>
Be sure to register for the...
<h2>2009 Sunny Brook 5k Cross-Country <br><i>In Memory of John Ponte</i></h2>
<img src="YMCA/Ponte%20Run.gif" width="360" height="190"><br>
Click Image for .pdf file.<br>
<img src="ymca/spacer.gif">
</center>
<br>
Other Important YMCA info should go here.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</span>
</div>
<div class="left">
<h2>Links :</h2>
<ul>
<li> <a href="(URL address blocked: See forum rules)">Torrington</a></li>
<li><a href="(URL address blocked: See forum rules)">Winsted</a></li>
<li><a href="(URL address blocked: See forum rules)">Cannan</a></li>
<li><a href="(URL address blocked: See forum rules)">Hours of Operation</a></li>
<li><a href="(URL address blocked: See forum rules)">Membership Rates</a></li>
<li><a href="(URL address blocked: See forum rules)">Employment</a></li>
<li><a href="(URL address blocked: See forum rules)">Contact Us!</a></li>
</ul>
<h2>Fall 2009 Program Guide</h2>
<ul>
<a href="(URL address blocked: See forum rules)"><img src="(URL address blocked: See forum rules)" width="160" height="220" border="0"></a>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<center>
<br>
<span style="font-size : 12px">
<a href="(URL address blocked: See forum rules)">Home</a> |
<a href="(URL address blocked: See forum rules)">Torrington</a> |
<a href="(URL address blocked: See forum rules)">Winsted</a> |
<a href="(URL address blocked: See forum rules)">Cannan</a> |
<a href="(URL address blocked: See forum rules)">Giving</a> |
<a href="(URL address blocked: See forum rules)">About Us</a>
<br><br>
2009 Northwest Connecticut YMCA.
<br>
The YMCA is a 501(c)(3) not-for-profit social services organization dedicated to
<br>
building strong kids, strong families and strong communities.
<br><br>
</center>
</div>
</div>
</div>
</BODY>
</HTML>
Hi -- I am in the process of redesigning my website with CSS. And as I was preparing to upload it and test it (looked/worked great in NVU), I found that half of my links do not work. And ... I am a new user, so I can't post links. Gah. To be more clear, I have a menu container and a "whiteboard" container I write most of my content in. All the links in the menu container work perfectly. However, in the whiteboard, it's hit and miss. Strip out the css, and they all work, so it is the css. Try as I might, I can't figure what the problem is. Part of My CSS follows: Code: #menutop {
position: absolute;
width: 247px;
height: 74px;
background: url("menutop.gif") top left;
background-repeat: no-repeat;
top: 269px;
left: 46px;
}
div#menucontainer {
position: absolute;
width: 200px;
height:1080;
background: url("menucontainer.gif");
background-repeat: repeat-y;
padding-left: 15px;
padding-right: 50px;
top: 340px;
left: 46px;
}
#menubottom {
position: absolute;
width: 247px;
height:26;
background: url("menubottom.gif");
background-repeat: no-repeat;
top: 1420px;
left: 46px;
}
#contact {
padding-left: 20px;
}
div#whiteboard {
position: absolute;
width: 530;
background-color: white;
left: 310px;
top: 300px;
padding-bottom: 20px;
border-style: dashed;
border-color: #4080CA;
z-index=100;
}
p
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
padding-left: 20px;
padding-right: 20px;
align: left;
color: #000000;
}
h1, h2, h3
{
font-family:'Century Gothic',Futura,'URW Gothic L',sans-serif;
color: #130139;
padding-left: 20px;
padding-right: 20px;
align: center;
z-index=100;
}
li {
padding-bottom: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
width: 450px;
}
A:link {
background: #E8E8E8;
font-variant: small-caps;
font-family: Arial, Helvetica, sans-serif;
font-color: #061C5E;
font-size: 16px;
font-weight: bold;
}
On my page, it's basically: <div id="whiteboard"> <p><a href="http://www.resafantasyarts.com/wanderingstar/WS1.zip">BOOK ONE</a> </p></div> Any help would be greatly appreciated! If you go to www.brightfusehosting.com/newindex.php you'll see what I mean. The nav menu is screwed up, and the links on the gray tables resemble that almost of the nav bar links. View in IE to replicate the issue. If you look at this page: http://www.cambridge.org/elt/scandinavia/ At the top there are links called Catalogue and Resources. Both which have graphical arrows pointing to them. In any browser other than IE7 the links work. But in IE7 they're just like normal text. I've not coded the page but I'm trying to fix it. I think I've figured out what may be causing it. If I remove the CSS that places the top rounded corner graphics in that div then the links work in IE7 or if I adjust the padding to move the links above the rounded cap graphics then they work. This is the code: Code: .home #main-top { background-image: url("../rx_images/home-main-top-l.gif"); }
.home #main-top-rcap { background-image: url("../rx_images/home-main-top-rcap.gif"); }
I wouldn't have thought there is any reason this code in itself should cause a problem and because there are quite a few stylesheets, I'm not going to link to them all. What I was wondering, are there any known bugs that may be causing this and how it could be fixed? I was just coding this: and all the links appear on new lines... why is that? ARGH! I cant post links just type this: blumoney. latestdot. net/ plb/ pictures. php without the spaces and enters |
|||||||