PDA

View Full Version : CSS Rollover problem! ><



fallenmedia
Jul 11th, 2009, 05:55 AM
Okay guys so I have used this css rollover code on other websites of mine and it worked flawlessly but when I try to use this on my current complete css website nothing really shows up, the div is empty.

Is there any reason why this shouldn't work?


#xxx {
background-image: url("images/ro_home1.png"); no-repeat 0 0;
position:absolute;
left:28px;
top:0px;
width:136px;
height:30px;
display: block;
}

#xxx:hover
{
background-position: 0 -30px;
}
#xxx span
{
display: none;
}

SB65
Jul 11th, 2009, 09:06 AM
background-image: url("images/ro_home1.png"); no-repeat 0 0;

should be:


background: url("images/ro_home1.png") no-repeat 0 0;

fallenmedia
Jul 11th, 2009, 09:03 PM
Hey thanks for the reply,
although it did not seem to work. it now shows up in firefox and it rolls over but it is pushed to the left(outside its div???????). And in IE it seems to not want to rollover at all!

http://fallenmedia.net/ccp2 (http://fallenmedia.net/ccp2)

please take a look at the code from this page :/ I am clueless because I have not run into this problem before

i must be screwing something up?

SB65
Jul 12th, 2009, 11:19 AM
It's not working in IE, almost certainly because you have no doctype (http://www.alistapart.com/articles/doctype/) in your html. IE requires a doctype in order to render your html correctly.

Your #ro-home is not sitting outside its parent div. #container actually starts 40px or so to the left of your centred column. Try giving it a height and a border to illustrate this. Or use Firebug.

Two more general comments which might help:

1. You have an awful lot of absolute positioning in your css which is probably making things harder. Have a look at this (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).
2. It's easier and more semantic to use an unordered list for your menu. This would remove all the divs that you have and make your markup a lot cleaner and easier to maintain. This article (http://css.maxdesign.com.au/listamatic/)'s got lots on lists and menus.

fallenmedia
Jul 13th, 2009, 04:25 AM
It's not working in IE, almost certainly because you have no doctype (http://www.alistapart.com/articles/doctype/) in your html. IE requires a doctype in order to render your html correctly.

Your #ro-home is not sitting outside it's parent div. #container actually starts 40px or so to the left of your centred column. Try giving it a height and a border to illustrate this. Or use Firebug.

Two more general comments which might help:

1. You have an awful lot of absolute positioning in your css which is probably making things harder. Have a look at this (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/).
2. It's easier and more semantic to use an unordered list for your menu. This would remove all the divs that you have and make your markup a lot cleaner and easier to maintain. This article (http://css.maxdesign.com.au/listamatic/)'s got lots on lists and menus.

Wow thanks for the reply.
Fixed the IE bug :thumbsup:



Your #ro-home is not sitting outside it's parent div. #container actually starts 40px or so to the left of your centred column. Try giving it a height and a border to illustrate this. Or use Firebug.

What do you mean it is not sitting outside its parent div? What should I do?

SB65
Jul 13th, 2009, 10:12 AM
What do you mean it is not sitting outside its parent div? What should I do?

#ro-home is positioned within #container, 28px in from the left hand edge of #container, as your css requires. It doesn't look like this, but that's because the left hand edge of your centre column is not the left hand edge of #container. #container also includes #leftbar01, which is 43px wide, and it is this that displays the edge of the column on the screen, not #container.

A very quick solution would be to change the absolute positioning on #ro-home with left:43px instead of left:28px. However, see links on my earlier post about the issues that you may run into with absolute positioning.

fallenmedia
Jul 13th, 2009, 08:57 PM
Thanks man. You know your ****!

Okay, so I am very new to CSS. In fact, the only reason I am using absolute positioning is because Imageready generates code that way. What other ways are there to put together a site with CSS?

fallenmedia
Jul 14th, 2009, 04:01 AM
Also, is there a way to make a div a link without using
width:100%;
height:100%;

For some reason it makes my buttons flash between the button and the background color.

And what percentage of the web surfing population disables their Javascript?

I have found <div id="ro-home" onclick="location.href='#" style="cursor:pointer;"> works very well, i wouldnt mind using it if I knew how many have it disabled.

SB65
Jul 14th, 2009, 10:46 AM
the only reason I am using absolute positioning is because Imageready generates code that way. What other ways are there to put together a site with CSS?

Don't know about ImageReady, but it's possible that it allows you to edit the code directly, so you can change the html and css to do exactly what you want, rather than editing it in Design view or whatever.

There's nothing to stop you just editing html and css files using Notepad or another text editor. Most people around here will advise you not to trust the design view in ImageReady, Dreamweaver or whatever, because chances are it won't look the same as through a "real" browser.


Also, is there a way to make a div a link without using
width:100%;
height:100%;

A better solution might be to get rid of the divs altogether and make the anchor <a> tag the block on its own. Have a look at this code as an alternative approach for the menu:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<style type="text/css">
body{font-family:Arial, helvetica, sans-serif;font-size:small;font-weight:bold}

#menu{padding:0;margin;0;list-style-type:none;width:816px;margin:0 auto}/*remove the bullets and indent from the list*/

#menu li{float:left;width:136px}/*use float to make the list horizontal*/

#menu a {
display:block;/*make the link a block element*/
text-decoration:none;/*remove the default underline on the link text*/
background:transparent url(http://fallenmedia.net/ccp2/images/ro_home1.png) no-repeat;
width:136px;
height:22px;
padding-top:8px;/*use padding-top just to bring the text down a little within the box so it fits with the green margn at the top*/
text-align:center;/*centre the text horizontally*/
line-height:22px;/*centre the text vertically within the 22px allotted*/
color:black}

#menu a:hover {background-position:0 -30px}
</style>
</head>

<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Application</a></li>
<li><a href="#">Why Factor?</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</body>
</html>

Several points to make here:

1. There are no divs at all...
2. The code is a LOT shorter, even with the extra css to make the menu horizontal. It's easier to understand and easier to maintain.
3. Using text for the links rather than separate images means you only need one background image which you can uses for all the links, and also means a better experience for people using screen readers, and arguably, better for search engines.
4. There's no absolute positioning - if I wanted to add another menu item I just need to alter the widths of the <a> tags and possibly the <ul>. With your current code you would have to change each of your current menu divs.

I hope this doesn't read as preachy...:D

A lot of people, including me, start out using lots of absolute positioning, because that's the way Dreamweaver etc builds code in design view (and in fact my first post here got a reply about the pitfalls of absolute positioning as well.....). However, once you start to get a bit more understanding, you're better off without it in most situations.

Similarly keeping your code nice and clean makes it a whole lot easier to understand it and maintain it, particularly if you're coming back to it after a gap.

fallenmedia
Jul 15th, 2009, 01:13 AM
There's nothing to stop you just editing html and css files using Notepad or another text editor. Most people around here will advise you not to trust the design view in ImageReady, Dreamweaver or whatever, because chances are it won't look the same as through a "real" browser.


I'm not underestimating your skill, but how would you make a graphic website using images in notepad? Lets say my site for example? I'm into creating graphically seamless websites and it seems to me like it would be immensely frustrating trying to line up images (re-editing images in photoshop, and back to notepad) I know we're getting into the core fundamentals of webdesign, and i don't mean to pick your brain too much. Do you hardcoding notepadders' design in photoshop? Or simply use code for everything? I just don't get that. Maybe I suck?

On to your impressive nav code! That looks very tempting to switch over to that. Would I have to recode my entire site to insert that code? Could i simply delete my button divs(ex. <div id="ro-home">) and insert that code?(Obviously i'd have to make some changes)

Also, I ran into another small problem. Uh oh, I know.
Since my content is going to be scrolling, I need my background image to be fixed, i searched google and found some code and i used this..........

#main-content {
background: url("images/main_content.png");
background-repeat:no-repeat;
background-attachment:fixed;
position:absolute;
left:50px;
top:201px;
width:535px;
height:627px;
overflow:auto;
}

........... But now when viewed in firefox or IE it throws the BG image to the top left corner of the website, outside of the #main-content div, i can only see the bottom right corner of the BG image in #main-content, and the rest is dark gray(my body bg image). What could be causing this?

I see you spent some time(maybe not much) writing that code, thank you very much! SB65, you're great.

fallenmedia
Jul 15th, 2009, 02:53 AM
Update to #main-content BG problem: It seems when I took out "background-repeat:no-repeat; background-attachment:fixed;" it made it so the BG was fixed in firefox, but in IE it still moves.... Hmmmmmmmmmmmmmmm

2nd Update: added your nav, I love it:
http://fallenmedia.net/cp_cable/test/ccp2.htm

Notice in Firefox #main-content bg is fixed, in IE it is not.............. ???
Also, in Firefox, content is pushed down a hair below where scroll begins, is this because scroll: auto?

SB65
Jul 15th, 2009, 11:00 AM
how would you make a graphic website using images in notepad? Lets say my site for example? I'm into creating graphically seamless websites and it seems to me like it would be immensely frustrating trying to line up images (re-editing images in photoshop, and back to notepad) I know we're getting into the core fundamentals of webdesign, and i don't mean to pick your brain too much. Do you hardcoding notepadders' design in photoshop? Or simply use code for everything? I just don't get that.

I started out using Dreamweaver to design webpages, using the design view, which is, I guess, pretty similar to using ImageReady. However, the more I got into things, the less I used the design view, because it doesn't display properly, at least in the version I was using. Now I pretty much just use the code view in Dreamweaver, where you're editing the code directly. I then use Firefox to preview the resulting webpage. If you use Firebug (a Firefox add-on) then you can use that to tweak the positioning of images etc while actually viewing the pages, then make the changes permanent within your css file once you're happy.

Scrolling background problem - good one... A possible solution might be to apply overflow:auto and height:627px to the div within #main-content, and remove overflow-auto from #main-content itself. Altternately, just let the #main-content div expand so there isn't a scroll bar on the div, and then just let the user scroll down using the page scrollbar. Personal preference perhaps, but two scroll bars may be confusing for the user.

Finally, text being pushed down in FF. This is due to different default margins on <p> between IE and FF. FF is giving each <p> a default top-margin of 13px, IE isn't. If you use Firebug it's easy to see this. It's generally a good idea to set all your margins and padding to 0, then all browsers are starting from the same point. This can be done by adding a statement:


*{margin:0;padding:0)

at the top of your css.

fallenmedia
Jul 15th, 2009, 09:07 PM
Scrolling background problem - good one... A possible solution might be to apply overflow:auto and height:627px to the div within #main-content, and remove overflow-auto from #main-content itself. Altternately, just let the #main-content div expand so there isn't a scroll bar on the div, and then just let the user scroll down using the page scrollbar. Personal preference perhaps, but two scroll bars may be confusing for the user.

This was my first idea for this website but I never actually found a way to do this. When the div overflowed it expands, but surrounding divs did not(if you know what I am saying), so #main-content would be overlapped by divs below.

When you say div within the #main-content do you mean I should add a div something like this?


<div id="main-content">
<div id="inner-main">
Hey hey hey
</div>
</div>




#main-content {
background: url("images/main_content.png");
position:absolute;
left:50px;
top:201px;
width:535px;
height:627px;
}

#inner-main {
height:627px;
overflow:auto;
}

Is there a term for what i am trying to achieve? so i could find a tutorial on the web

SB65
Jul 16th, 2009, 10:02 AM
Morning...


When you say div within the #main-content do you mean I should add a div something like this?

Your current html has:


<div id="main-content">
<div align="left" class="a12">
<p>Lorem ipsum dolor sit amet, consectetu.....

You could apply overflow:auto and height:627px to this div.


When the div overflowed it expands, but surrounding divs did not(if you know what I am saying), so #main-content would be overlapped by divs below.

This is the problem with absolute positioning - it doesn't allow any elements to move to fit in with expansion/contraction. Your design comprises, basically, a header, including your nav, two columns and a footer, all sitting in a fixed width container. Have a look at this guide (http://bonrouge.com/2c-hf-fixed.php) which explains how to build a simple two column layout.

You could adapt this quite easily to meet your site needs. Because your site has quite a lot of graphics you may end up having to add a few additional divs to the basic layout described above just to allow the multiple background images to work. However, you'll end up with cleaner more maintainable code as a result.

fallenmedia
Jul 21st, 2009, 05:42 AM
Heyyy

I was forced on a design change, got a problem when I was recreating the nav.
I need the nav to show up right beneath the header, and nothing is showing. I may have gotten the dimensions wrong... not sure whats going on tho. :/

check it out
http://fallenmedia.net/cp_cable/revised/

SB65
Jul 21st, 2009, 08:45 AM
Your #nav is sitting underneath the green bar at the top of the screen - because #header is absolutely positioned and hence appears on top of anything else.

Try removing position:absolute from #header.

fallenmedia
Jul 22nd, 2009, 12:56 AM
That kind of fixed the problem, took off absolute positioning, centered header. Looks okay in FF(Still havent finished editing button bg), looks botched in in IE tho. it throws it all over to the right in IE, i'll try centering it.
Take a look: http://fallenmedia.net/cp_cable/revised

SB65
Jul 22nd, 2009, 10:41 AM
Hi there

If you look at the site in IE using the IE developer toolbar you'll see that IE is applying a left margin of 30pt to your #nav. When it looks OK in FF and IE is doing something strange, it's usually either an incorrect or missing doctype or a hasLayout issue.

In your case it looks like the doctype. Try putting


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


at the top of your html.

SB65
Jul 22nd, 2009, 12:20 PM
This has been bugging me for a bit really...here's a quickish bash at redoing this site:


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

<head>
<title>revision2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
*{margin:0;padding:0}
body{background:#ffffff}

.outer {
width:819px;
margin:0 auto;
background:#ffffff url("http://fallenmedia.net/cp_cable/revised/images/leftbar03.png") repeat-y top left;
}

.container {
width:772px;/*changed to be the width of the content without the images*/
margin-left:23px;/*to allow for the left image*/
padding-right:24px;/*to allow for the right image - background on .container*/
background:#ffffff url("http://fallenmedia.net/cp_cable/revised/images/rightbar03.png") repeat-y top right;
position:relative;
}

#nav {
padding:0;
margin:0;
list-style-type:none;
padding-left:23px;/*to allow the left hand image to be used as background*/
margin-bottom:11px;/* add a bottom margin to #nav to replace #bar*/
height:35px;
background:#ffffff url("http://fallenmedia.net/cp_cable/revised/images/revision_05.png") no-repeat top left;
}

#nav li {
float:left;
width:121px
}

#nav a {
display:block;
text-decoration:none;
background: url("http://fallenmedia.net/cp_cable/revised/images/revision_06.png") no-repeat;
width:121px;
height:30px;
padding-top:5px;
text-align:center;
line-height:22px;
color:#696969;
font-family:Arial, helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}

#nav a:hover {
background-position:0 -30px
}

#header {
background: url("http://fallenmedia.net/cp_cable/revised/images/header.png");
margin-left: auto ;
margin-right: auto;
height:190px;
}

#services-title {
height:27px;
background:#ffffff url("http://fallenmedia.net/cp_cable/revised/images/services_title.png");
}

#main-title {
height:27px;
background:#ffffff url("http://fallenmedia.net/cp_cable/revised/images/main_title.png");
}

#services-content {
height:554px;
background:#ffffff url("http://fallenmedia.net/cp_cable/revised/images/services_content.png");
}

#main-content {
height:554px;
background:#ffffff url("http://fallenmedia.net/cp_cable/revised/images/main_content.png");
}

/*new elements from here*/
#services{
float:left;
width:243px;
height:581px;/*height sum of old #services-title/content*/
margin-left:19px;
display:inline;/*sort IE6 float error*/
}

#main{
margin-left:278px;/*from width and margin on #services plus old width of #column2*/
width:477px;
height:581px;
}

#footer{
height:92px;/*height of all the images and the bottom bar*/
background:#ffffff url("http://fallenmedia.net/cp_cable/revised/images/bottombar.png") no-repeat bottom left;
}

#footer img{float:left}

</style>
</head>
<body>
<div class="outer">
<div class="container">

<div id="header">
<img src="http://fallenmedia.net/cp_cable/revised/images/header.png" alt="">
</div>


<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Application</a></li>
<li><a href="#">Why Factor?</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<div id="services">
<div id="services-title">

</div>
<div id="services-content">

</div>
</div><!-- end services -->

<div id="main">
<div id="main-title">

</div>
<div id="main-content">

</div>
</div><!-- end main -->

<div id="footer">
<img src="http://fallenmedia.net/cp_cable/revised/images/unlock.png" width=772 height=36 alt="">
<img src="http://fallenmedia.net/cp_cable/revised/images/copyright.png" width=144 height=33 alt="">
<img src="http://fallenmedia.net/cp_cable/revised/images/userlogin.png" width=463 height=33 alt="">
<img src="http://fallenmedia.net/cp_cable/revised/images/creds.png" width=165 height=33 alt="">
</div><!-- end footer -->

</div><!-- end container -->
</div><!-- end outer -->
</body>
</html>

Not perfect, if you want to use this you'll need to play around with your background images on the #main and #services divs to get the round corners in, and also the images on the edge of the footer.

However, there is no absolute positioning, and there are now 10 divs as opposed to 25 in your current revision. :thumbsup: Hope at least it shows you another way of approaching this....

fallenmedia
Jul 22nd, 2009, 07:35 PM
Wow! thanks man.

I'm gonna give that code a try! It looks so simple but there are some things I don't get.... I'm going to keep messing around with it till i can get it right.

But please bare with the absolute positioning just a little longer! I want to get this site completed, I'm so close to finishing(Its for my family's friends). I'm still having problems with the nav ( http://fallenmedia.net/cp_cable/revised/ ) it looks good now, just not centered correctly, somehow I screwed up on the dimensions... it looks like the width is too much, but when the width is decreased it shows whites spots in between the buttons... Should the width of the the button be directly divisible by the width of the nav?

You've been so much help so far, I feel like I owe you so much!

If you're ever in Southern California please look me up so I can buy you a pint! ;]

SB65
Jul 22nd, 2009, 10:14 PM
It looks fine to me now - maybe you fixed your problem?

fallenmedia
Jul 22nd, 2009, 10:30 PM
Well no, maybe I'm nitpicking but notice the text is not centered inside its button, maybe a few pixels off. Hahah its driving me crazy.

Scriptet
Jul 23rd, 2009, 02:30 AM
Forget the absolute position, you will run into problems...

As for the centered text, the text is centered, it's just your image.
The image is 123pixels wide, yet the width of each link is set to 121pixels wide.