Page 1 of 1
CSS help needed....
Posted: Sat 05 Apr 2014 12:29 pm
by bnwrx
I've made a"dropdown" menu list with some CSS, however when you mouseover it, the page moves down. I've tried using "position;absolute" in the CSS, but then the dropdown goes "across" the page. I'd simply like to have the dropdown, show the sub-menu without moving other content on the page.
Any help appreciated....
Here is my CSS code: and how it appears here(at the very top of page:
http://woodlandweather.org/
<style type="text/css">
ul{
padding: 0;
list-style: none;
}
ul li{
float: right;
width: 180px;
text-align: center;
}
ul li a{
display: block;
padding: 5px px;
color: #ffcc00;
background: #000000;
text-decoration: none;
font-family: "Comic Sans MS", cursive, sans-serif; font-size: 18px;
}
ul li a:hover{
color: #000;
background: #ffcc00;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
</style>
Re: CSS help needed....
Posted: Sat 05 Apr 2014 12:49 pm
by duke
Re: CSS help needed....
Posted: Sat 05 Apr 2014 12:54 pm
by bnwrx
I know they are a mess..I am trying, but it is a long process for me.....
Re: CSS help needed....
Posted: Sat 05 Apr 2014 1:22 pm
by duke
Ok, but, you have to realise those errors may/will effect your displayed page and need addressing first.
Re: CSS help needed....
Posted: Sat 05 Apr 2014 3:48 pm
by MackerelSky
That has kind of a clever look to it.
Try putting your all of your CSS above the closing </head> tag and not at the top of your html
Brad
Re: CSS help needed....
Posted: Sat 05 Apr 2014 3:57 pm
by bnwrx
MackerelSky wrote:That has kind of a clever look to it.
Try putting your all of your CSS above the closing </head> tag and not at the top of your html
Brad
Tried your idea....same results....
Re: CSS help needed....
Posted: Sat 05 Apr 2014 4:20 pm
by MackerelSky
bnwrx wrote:
Tried your idea....same results....
You didn't leave it their long, I can 99.9% guarantee you that in between the head tags is where that goes.
Code: Select all
<head>
<META HTTP-EQUIV="refresh" CONTENT="900; URL=http://woodlandweather.org/"/>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Woodland Park weather data" />
<script>
var dayPct = (+'12:48'.split(':')[0] + '12:48'.split(':')[1] / 60) / 24 * 100;
var duskPct = (+'13:43'.split(':')[0] + '13:43'.split(':')[1] / 60) / 24 * 100;
duskPct -= dayPct;
var nightPct = 100 - dayPct - duskPct;
duskPct /= 2;
document.getElementById('daylightChart').innerHTML = '<img src="http://chart.apis.google.com/chart?' +
'chs=75x75' +
'&chtt=day/night' +
'&chts=000000,12' +
'&chma=0,0,0,0' +
'&chd=t:' + duskPct + ',' + dayPct + ',' + duskPct + ',' + nightPct +
'&cht=p3' +
'&chp=' + (Math.PI - (dayPct + duskPct * 2) / 100 * Math.PI) +
'&chf=bg,s,FFFFFF00' +
'&chco=F046A1,FFD700,F046A1,303060' +
'" alt="day/night ratio"/>';
</script>
<script>function reloadPage() { location.reload(); }</script>
<script language="JavaScript" src="wz_jsgraphics.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript" src="dbimages/dashboard.js"></script>
<script language="JavaScript1.2" type="text/javascript" src="dbimages/boxover.js"></script>
<script type="text/javascript" src="bt-forecast-cu.js"></script>
<script language="JavaScript" src="wz_jsgraphics.js" type="text/javascript"></script>
<script type="text/javascript" src="bt-sager-cu.js"></script>
<script type="text/javascript" src="bt-sager.js"></script>
<meta name="keywords" content="Cumulus, Woodland Park weather data, weather, data, weather station" />
<title>Woodland Park weather</title>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-26057863-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style type="text/css">
ul{
padding: 0;
list-style: none;
}
ul li{
float: right;
width: 180px;
text-align: center;
}
ul li a{
display: block;
padding: 5px px;
color: #ffcc00;
background: #000000;
text-decoration: none;
font-family: "Comic Sans MS", cursive, sans-serif; font-size: 18px;
}
ul li a:hover{
color: #000;
background: #ffcc00;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
</style>
</head>
Since it's CSS, your browser could have cached the old way you had it setup. control F5 to try again
Brad
Re: CSS help needed....
Posted: Sat 05 Apr 2014 4:35 pm
by bnwrx
I was using a test page, not the real page.....however I just uploaded your suggestion to the site....no change....
Re: CSS help needed....
Posted: Sat 05 Apr 2014 5:10 pm
by MackerelSky
That's where it belongs Bob, you can leave it there and start ticking off the errors on the page as Duke suggested, seem to be a few. But once you start correcting them, more will go away and you have a couple concerning your 'list' for your drop down also.
Your 'doctype' in the first line is goofy
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
should probably look like
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
That might clear up quite a bit of problems
Brad
Re: CSS help needed....
Posted: Sat 05 Apr 2014 6:10 pm
by bnwrx
Thanks for your input....Will try later....Ran out of time for today