PDA

View Full Version : the mystery of the mouseover text



Dismeeir
Feb 18th, 2010, 11:19 AM
I'm making a website for a small gallery, and i've just started and already i'm having issues. for instance, i want my links to go from black to orange when you mouse over them. this is simple enough, except for some reason, it is counting the text below it as a link as well! on top of that, i'm trying to put the text below the navigation bar to the right in a column, so if anyone could shed some light on that as well that would be great. sorry in advance for the messy code.

the html is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01a//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Gallery 104 Homepage</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="myCSS.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
background-color: #FC6;
}
-->
</style></head>

<body>
<div id="container">

<div id="logo"></div>

<div id="navigation">
<h1><strong><a href="home.html">HOME</a> <a href="about.html"> ABOUT US </a> <a href="artists.html">FEATURED ARTISTS</a> <a href="location.html">LOCATION</a> <a href="contact.html">CONTACT US </a></strong></h1>
</div>
<div id="normal text">
<p><strong>Filler text regarding the websites purpose, giving a short explanation of the gallery. Anything more in-depth can be saved for the about page.</strong></p>
</div>
</div>

</body>

</html>

the css is
/* Generic Selectors */

body {

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 14px;

color: #000000;

background-color: #FFF;

margin:0px; padding:0px;

text-align:center


}


p {
width: 80%;
font-family: "Myriad Pro";

}

h1 {
font-family: "Myriad Pro";
font-size: 18px;
font-weight: bold;
color: #000000;

}




/**************** Pseudo classes ****************/

:link {

color: #000000;

text-decoration: none;

font-weight: bold;

}


li :link {

color: #000000;

text-decoration: none;

font-weight: bold;

}


:visited {

color: #000000;

text-decoration: none;

font-weight: bold;

}


li :visited {

color: #000000;

text-decoration: none;

font-weight: bold;

}


:hover {

color: #FC6;

padding-bottom: 0px;

font-weight: bold;

text-decoration: none;

}

li :hover {

display: block;

color: #FC6;

padding-bottom: 5px;

font-weight: bold;

border-bottom-width: 1px;

border-bottom-style: solid;

border-bottom-color: #C6EC8C;

}


:active {

color: rgb(255, 0, 102);

font-weight: bold;

}


/************************* ID's *************************/

#logo {
background: #36261D url(logo.jpg) no-repeat;
align: center;
height: 100px;
padding: 85px 10px 0px 115px;

}


#navigation {

padding: 0 0 0px 0px; /*top right bottom left*/
margin-left: auto;
margin-right: auto;
left: 184px;
top: 102px;

}

#container {
width: 800px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 1px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
background-color: #EAEAEA;
}

#feat art {
left:272px;
width:110px;
margin-top:50px;
margin-left:-266px;
padding:15px;
top: -40px;
}

#normtext{
{ position:absolute;
visibility:show;
left: 20px; top:
300px;
z-index:2 }

Donkey
Feb 18th, 2010, 04:00 PM
Your code is confused, you aren't using the pseudo classes or the links correctly. Try this for the HTML

<ul>
<li ><a href="home.html">Home</a> </li>
<li ><a href="about.html">About</a> </li>
<li ><a href="artists.html">Featured Artists</a> </li>
<li ><a href="contact.html">Contact Us</a> </li>
</ul>
And this for the CSS

a,
a:link,
a:visited
{
color: #000000;
text-decoration: none;
font-weight: bold;
}



a:focus,
a:hover,
a:active
{
color: #FC6;
display: block;
padding-bottom: 5px;
border-bottom: 1px solid #C6EC8C;
}

It should be somewhere near what you are trying to achieve.
BTW if you are using the strict doctype you should avoid using styling tags like <strong> just do it in the CSS.
I strongly suggest you study your basic html and css before proceeding, there are many free tutorials on line.

Dismeeir
Feb 19th, 2010, 07:22 AM
much appreciated, I'm new to html and I was running on energy drinks and fear by the time I made this code :P I decided to start from the start again using some of what you gave me and its looking a lot better, thanks again.