...

View Full Version : hover not working properly



dazd
05-12-2011, 08:20 AM
Hey all,

got a question, i am currently learning to code html and css so bare with me.
I am trying to put a hover button behind my ul menu
here are my codes,
HTML

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

CSS

#menu a:hover {
background:url(images/button.png) no-repeat;
display:block;
text-align:center;
line-height:35px;
width:115px;
height:62px;
}

would that be right? the button displays when hovered but it's glitchy as all hell. when you hover over it, the button image and all the ul menus move all over the place. If I leave my mouse over, lets say Home, the ul menus and button will start to blink all over the top of the content page.

what am I doing wrong?

Thanks

coothead
05-12-2011, 09:05 AM
Hi the dazd,

there is bound to be strange behaviour on hover, you are changing an inline element to block. :eek:

Make the settings before hover instead...


#menu a {
display:block;
width:115px;
height:62px;
line-height:35px;
text-align:center;
}
#menu a:hover {
background:url(images/button.png) no-repeat;
}

coothead

dazd
05-12-2011, 07:26 PM
Wonderful, that did it.
but the hover button is not showing directly behind the text, it shows the button directly below the text of the ul menu when you hover over it.
How do I change that? Would I change the position of the button? If so, how would I change it?

Thanks again



Hi the dazd,

there is bound to be strange behaviour on hover, you are changing an inline element to block. :eek:

Make the settings before hover instead...


#menu a {
display:block;
width:115px;
height:62px;
line-height:35px;
text-align:center;
}
#menu a:hover {
background:url(images/button.png) no-repeat;
}

coothead

coothead
05-12-2011, 09:05 PM
Hi there dazd,

can we see your "button.png" image, it will enable us to then see your problem. ;)

coothead

dazd
05-12-2011, 09:19 PM
I got it to work :) I just put padding on the top of the ul menus and it pushed them down right into the button.

Got another question for you. For some reason I cannot get my footer out of my container box, if I add a background-color in the css for my #footer it puts a background color behind all of my col1, col2, col3 divs.

Here is my html,

<div id="container">
<div id="page">

<div id="header">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

<div class="headerStyle"><center><h1> Welcome to our Website! </h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida eget sagittis massa. Suspendisse congue rhoncus odio, varius venenatis augue posuere vitae. Proin sit amet pretium eros. Aliquam erat volutpat. In hac habitasse platea dictumst. Duis sagittis pharetra rhoncus. Pellentesque nec ligula lacus. Suspendisse nisl lorem, hendrerit non lobortis eget, volutpat nec tortor. Donec id purus metus, eget fermentum neque. </p></center>
</div>
</div>
<!-----------end header----------->

<div id="colImages">
<div class="col1">
<h3 class="port"> Professional Designs </h3>
<a href="#"><img src="images/img1.png" alt="Image One"/></a>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida eget sagittis massa.</p>
</div>
<div class="col2">
<h3> Professional Services </h3>
<a href="#"><img src="images/img2.png" alt="Image Two"/></a>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida eget sagittis massa.</p>
</div>
<div class="col3">
<h3> Professional Teams </h3>
<a href="#"><img src="images/img3.png" alt="Image Three"/></a>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida eget sagittis massa.</p>
</div>
</div>
<!----------end colImages----------->
</div>
<div id="footer">
<small> Copyright &copy; 2010 All Rights Reserved. </small>
</div>
</div>

and here is my css

body {
background: #ffffff;
}

p {
color: white;
font-family:arial, verdana, georgia;
font-size:15px;
}

h1 {
font-family: georgia, arial, verdana;
font-size: 28px;
color: #002838;
}

h3 {
font-family: arial, verdana, georgia;
}

ul {
list-style-type: none;
}

li {
font-family: georgia, arial, verdana;
float:left;
}

a {
text-decoration: underline;
}

a:hover {
color:white;
text-decoration:none;
}

li, a {
text-align:center;
color:black;
}

ul#menu {
margin:0px;
padding:0px;
position:absolute;
right:525px;
}


#menu a {
display:block;
width:115px;
height:62px;
line-height:35px;
text-align:center;
padding-top:11px;
}

#menu a:hover {
background:url(images/button.png) no-repeat;
}

/********** end etc styles ************/

#container {
background:#767676;
width:1100px;
margin:0 auto;
border:solid 5px black;
}

#header h1 {
padding-top:80px;
}

#header p {
padding: 0 100px 0 100px;
line-height:20px;
}

#colImages {
float:left;
display:inline;
}

#colImages, small {
margin:0 auto;
}

.col1, .col2, .col3 {
float:left;
width:350px;
padding-left:10px;
}

.col3, img {
padding-left:20px;
}

p.text {
line-height:22px;
margin:0px 5px 0px 22px;
width:320px;
}

#footer {
}


Hi there dazd,

can we see your "button.png" image, it will enable us to then see your problem. ;)

coothead

coothead
05-12-2011, 10:00 PM
Hi there dazd,

does this help...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
background:#fff;
}
#container {
width:1100px;
padding-bottom:10px;
border:solid 5px #000;
margin:auto;
background:#767676;
overflow:hidden;
}
p {
color:#fff;
font-family:arial,verdana,georgia,sans-serif;
font-size:15px;
}
h1 {
font-family:georgia,arial,verdana,sans-serif;
font-size:28px;
color:#002838;
}
h3 {
font-family:arial,verdana,georgia,sans-serif;
}

ul {
list-style-type:none;
}

li {
font-family:georgia,arial,verdana,sans-serif;
float:left;
}
li, a {
color:#000;
text-align:center;
}
a:hover {
color:#fff;
text-decoration:none;
}
ul#menu {
margin:0;
padding:0;
position:absolute;
right:525px;
}
#menu a {
display:block;
width:115px;
height:62px;
line-height:35px;
text-align:center;
padding-top:11px;
}
#menu a:hover {
background:url(images/button.png) no-repeat;
}

/********** end etc styles ************/

#header h1 {
padding-top:80px;
}
#header p {
padding:0 100px;
line-height:20px;
}
.headerStyle {
text-align:center;
}
#colImages {
float:left;
display:inline;
}
#colImages, small {
margin:auto;
}
.col1, .col2, .col3 {
float:left;
width:350px;
padding-left:10px;
}
.col3, img {
padding-left:20px;
}
p.text {
width:320px;
margin:0 5px 0 22px;
line-height:22px;
}
#footer {
width:1090px;
margin:auto;
font-size:12px;
line-height:28px;
}
</style>

</head>
<body>

<div id="container">

<div id="header">

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

<div class="headerStyle">
<h1> Welcome to our Website!</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida
eget sagittis massa. Suspendisse congue rhoncus odio, varius venenatis augue posuere vitae. Proin sit
amet pretium eros. Aliquam erat volutpat. In hac habitasse platea dictumst. Duis sagittis pharetra
rhoncus. Pellentesque nec ligula lacus. Suspendisse nisl lorem, hendrerit non lobortis eget, volutpat
nec tortor. Donec id purus metus, eget fermentum neque.
</p>
</div>
</div>
<!-- ---------end header--------- -->

<div id="colImages">
<div class="col1">
<h3 class="port"> Professional Designs </h3>
<a href="#"><img src="images/img1.png" alt="Image One"></a>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat
pretium gravida eget sagittis massa.
</p>
</div>
<div class="col2">
<h3> Professional Services</h3>
<a href="#"><img src="images/img2.png" alt="Image Two"></a>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat
pretium gravida eget sagittis massa.
</p>
</div>
<div class="col3">
<h3> Professional Teams</h3>
<a href="#"><img src="images/img3.png" alt="Image Three"></a>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat
pretium gravida eget sagittis massa.
</p>
</div>
</div>
<!-- --------end colImages--------- -->

</div>

<div id="footer">Copyright &copy; 2010 All Rights Reserved.</div>
</body>
</html>

coothead

dazd
05-12-2011, 10:34 PM
Yes that did it, thank you!

Now I got another question, I am trying to add an active button on my ul.
How would I go about doing that? I added a class of active to all of my li menus and then added the background-image in css but it displays the button off of the li menus. when I tried to correct then with a padding or margin it moves the whole li menu and not only the button image.

edit: also, if I wanted to add something to the background of my site, like a simple paragraph <p> Follow us on Social Networks: </p> then a few images below it, but I would the position fixed, so when you scroll down it stays in the same place on the background.
How would I go about doing that in my html and css?

:/
I have troubles with css,
Thank you for all the help coothead!!


Hi there dazd,

does this help...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
background:#fff;
}
#container {
width:1100px;
padding-bottom:10px;
border:solid 5px #000;
margin:auto;
background:#767676;
overflow:hidden;
}
p {
color:#fff;
font-family:arial,verdana,georgia,sans-serif;
font-size:15px;
}
h1 {
font-family:georgia,arial,verdana,sans-serif;
font-size:28px;
color:#002838;
}
h3 {
font-family:arial,verdana,georgia,sans-serif;
}

ul {
list-style-type:none;
}

li {
font-family:georgia,arial,verdana,sans-serif;
float:left;
}
li, a {
color:#000;
text-align:center;
}
a:hover {
color:#fff;
text-decoration:none;
}
ul#menu {
margin:0;
padding:0;
position:absolute;
right:525px;
}
#menu a {
display:block;
width:115px;
height:62px;
line-height:35px;
text-align:center;
padding-top:11px;
}
#menu a:hover {
background:url(images/button.png) no-repeat;
}

/********** end etc styles ************/

#header h1 {
padding-top:80px;
}
#header p {
padding:0 100px;
line-height:20px;
}
.headerStyle {
text-align:center;
}
#colImages {
float:left;
display:inline;
}
#colImages, small {
margin:auto;
}
.col1, .col2, .col3 {
float:left;
width:350px;
padding-left:10px;
}
.col3, img {
padding-left:20px;
}
p.text {
width:320px;
margin:0 5px 0 22px;
line-height:22px;
}
#footer {
width:1090px;
margin:auto;
font-size:12px;
line-height:28px;
}
</style>

</head>
<body>

<div id="container">

<div id="header">

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

<div class="headerStyle">
<h1> Welcome to our Website!</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat pretium gravida
eget sagittis massa. Suspendisse congue rhoncus odio, varius venenatis augue posuere vitae. Proin sit
amet pretium eros. Aliquam erat volutpat. In hac habitasse platea dictumst. Duis sagittis pharetra
rhoncus. Pellentesque nec ligula lacus. Suspendisse nisl lorem, hendrerit non lobortis eget, volutpat
nec tortor. Donec id purus metus, eget fermentum neque.
</p>
</div>
</div>
<!-- ---------end header--------- -->

<div id="colImages">
<div class="col1">
<h3 class="port"> Professional Designs </h3>
<a href="#"><img src="images/img1.png" alt="Image One"></a>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat
pretium gravida eget sagittis massa.
</p>
</div>
<div class="col2">
<h3> Professional Services</h3>
<a href="#"><img src="images/img2.png" alt="Image Two"></a>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat
pretium gravida eget sagittis massa.
</p>
</div>
<div class="col3">
<h3> Professional Teams</h3>
<a href="#"><img src="images/img3.png" alt="Image Three"></a>
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae erat
pretium gravida eget sagittis massa.
</p>
</div>
</div>
<!-- --------end colImages--------- -->

</div>

<div id="footer">Copyright &copy; 2010 All Rights Reserved.</div>
</body>
</html>

coothead

dazd
05-12-2011, 11:09 PM
I don't know how I was able to do it, but I figured out how to add a paragraph and images for social networks to the background. the position is not fixed, because my page isn't long enough to scroll down yet. But so far so good :)

I just added a position of absolute and then added some padding to the top to move it down. :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum