Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 1944 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Link RollOver (hover)

Thread title: Link RollOver (hover)
Closed Thread    
    Thread tools Search this thread Display Modes  
04-06-2007, 02:34 AM
#1
Mizan is offline Mizan
Mizan's Avatar
Status: Member
Join date: Jul 2006
Location: Bronx, NY
Expertise:
Software:
 
Posts: 299
iTrader: 0 / 0%
 

Mizan is on a distinguished road

Send a message via AIM to Mizan Send a message via MSN to Mizan

  Old  Link RollOver (hover)

For some reason, when i hover over this link, the image does not show correctly.
I need help with this :-o
I am fairly new to CSS, so please excuse my sloppy code.

Here's 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>
<link rel="stylesheet" type="text/css"
href="global.css" />
<title>Valkros Design</title>
<meta http-equiv="Content-Type" content="text/html; ch****t=iso-8859-1" /><style type="text/css">
</head>
<body>
<div id="nav"><a href="index.html">Home</a> &nbsp&nbsp&nbsp| &nbsp&nbsp&nbsp <a href="index.html">Portfolio</a> &nbsp&nbsp&nbsp| &nbsp&nbsp&nbsp <a href="index.html">Services</a>&nbsp&nbsp&nbsp | &nbsp&nbsp&nbsp <a href="index.html">Resources</a>&nbsp&nbsp&nbsp |&nbsp&nbsp&nbsp <a href="index.html">Contact</a> &nbsp&nbsp&nbsp| &nbsp&nbsp&nbsp <a href="index.html">Partners</a></div>
<div id="logo"></div>
<div id="content">
<h2 class="head">Welcome Everyone</h5>
<p class="grey">Posted on April 6, 2007 at 12:44pm</p>
<p class="head">Hello Everyone, I would like to welcome all of you to my web design portfolio.<br /> I do quality web design and clean code. Some code that I know are xHTML, and CSS<br />I also can code in wordpress as well as skin your blog.<br /> For any more addtional information, feel free to E-mail me or Instant Message me at:</p>

<p class="head">E-Mail: Valkros [at] Gmail [dot] com <br />
AIM: Valor Necros <br />
MSN: Valkros [at] Gmail [dot] com</p>

<p class="head"> If you would like to view my previous work I have done in the past for web designing,<br /> prints, or logos, please click the portfolio link in the navigation. <br />If you would like free resources such as free templates in .PSD format or brushes, patterns, etc.<br /> Please view the resources link. These resources are only for personal use. <br />Please do not make a profit out of the resources or redistribute, resell them. Thank You.</p>



</div>
<div id="footer">
<div align="center>hello</div>
</div>
</body>

</html>
Here's the CSS:

Code:
body {
background: url(images/bg.gif) repeat;
}

#logo {
background: url(images/logo.gif);
width: 269px;
height: 160px;
margin-top: -76px;
margin-left: 20px;
}

#nav {
background: url(images/nav.gif) repeat-x;
font-family: arial, verdana, new times roman, sans-serif;
font-size: 13px;
color: #FFFFFF;
height: 56px;
padding-left: 350px;
padding-top: 20px;
}

#content {
background: url(images/content.gif) repeat-x;
padding: 10px;
padding-left: 15px;
height: 479px;
margin-top: 20px;
}

#footer {
background: url(images/footer.gif) repeat-x;
height: 104px;
}

p.head {
font-family: Arial, verdana, "times new roman", sans-serif;
font-size: 13px;
color: #666666;
}

h2.head {
font-family: "futura light";
color: #C02121;
margin: 0px;
padding: 0px;
}

p.grey {
font-family: arial;
font-size: 11px;
color: #666666;
margin: 0px;
padding: 0px;
}

a:link {
color: #FFFFFF
}     

a:visited {
color: #FFFFFF
}  

a:hover {
background: url(images/roll.gif);
width: 69px;
height: 56px;
color: #CC3333;
}   

a:active {
background: url(images/roll.gif);
}
And just to make it easier to see, the a:hovers are here:

Code:
a:link {
color: #FFFFFF
}     

a:visited {
color: #FFFFFF
}  

a:hover {
background: url(images/roll.gif);
width: 69px;
height: 56px;
color: #CC3333;
}   

a:active {
background: url(images/roll.gif);
}

04-06-2007, 10:29 AM
#2
Julian is offline Julian
Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:
 
Posts: 5,572
iTrader: 0 / 0%
 

Julian is on a distinguished road

  Old

Do you have a live link to your work so far?

04-07-2007, 02:10 AM
#3
Mizan is offline Mizan
Mizan's Avatar
Status: Member
Join date: Jul 2006
Location: Bronx, NY
Expertise:
Software:
 
Posts: 299
iTrader: 0 / 0%
 

Mizan is on a distinguished road

Send a message via AIM to Mizan Send a message via MSN to Mizan

  Old

Yeah, i do. Here it is:

http://www.valkros.bravehost.com/

I fixed it kinda, looks like i had to use padding., but it looks weird when u roll over it. It pushes the words aside

Help lol

04-07-2007, 03:17 AM
#4
Julian is offline Julian
Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:
 
Posts: 5,572
iTrader: 0 / 0%
 

Julian is on a distinguished road

  Old

It is shifting to the right because you have different values for your right/left hover padding:
Code:
a:hover {
padding:19px 5px 20px 10px;
Maybe try:
Code:
padding: 19px 0 20px;
Fixed it for me

04-07-2007, 06:24 PM
#5
Mizan is offline Mizan
Mizan's Avatar
Status: Member
Join date: Jul 2006
Location: Bronx, NY
Expertise:
Software:
 
Posts: 299
iTrader: 0 / 0%
 

Mizan is on a distinguished road

Send a message via AIM to Mizan Send a message via MSN to Mizan

  Old

Ah, i c. It works for me now. But it still looks weird .

The whole images does not show.

04-07-2007, 06:41 PM
#6
Andrew R is offline Andrew R
Status: Request a custom title
Join date: Dec 2005
Location: Arizona
Expertise:
Software:
 
Posts: 5,200
iTrader: 17 / 95%
 

Andrew R is on a distinguished road

  Old

Try display: block; in the a attribute.

04-08-2007, 12:11 AM
#7
Mount Tropolis is offline Mount Tropolis
Status: Junior Member
Join date: Jun 2006
Location:
Expertise:
Software:
 
Posts: 56
iTrader: 0 / 0%
 

Mount Tropolis is on a distinguished road

Send a message via AIM to Mount Tropolis Send a message via MSN to Mount Tropolis

  Old

Nope, it only makes it worse

04-08-2007, 10:33 PM
#8
Julian is offline Julian
Status: Simply to simplify
Join date: Apr 2005
Location: Foxton, Manawatu, New Zealand
Expertise:
Software:
 
Posts: 5,572
iTrader: 0 / 0%
 

Julian is on a distinguished road

  Old

Well try having padding on the images, but also have the same padding on the navigation text.

Closed Thread    


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed