CSS help needed....

bnwrx · Post by **bnwrx** » Sat 05 Apr 2014 12:29 pm

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>

duke · Post by **duke** » Sat 05 Apr 2014 12:49 pm

May I suggest, you try validating your pages first?

http://html5.validator.nu/?doc=http%3A% ... source=yes

bnwrx · Post by **bnwrx** » Sat 05 Apr 2014 12:54 pm

duke wrote:May I suggest, you try validating your pages first?

http://html5.validator.nu/?doc=http%3A% ... source=yes

I know they are a mess..I am trying, but it is a long process for me.....

duke · Post by **duke** » Sat 05 Apr 2014 1:22 pm

Ok, but, you have to realise those errors may/will effect your displayed page and need addressing first.

MackerelSky · Post by **MackerelSky** » Sat 05 Apr 2014 3:48 pm

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

bnwrx · Post by **bnwrx** » Sat 05 Apr 2014 3:57 pm

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....

MackerelSky · Post by **MackerelSky** » Sat 05 Apr 2014 4:20 pm

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

bnwrx · Post by **bnwrx** » Sat 05 Apr 2014 4:35 pm

I was using a test page, not the real page.....however I just uploaded your suggestion to the site....no change....

MackerelSky · Post by **MackerelSky** » Sat 05 Apr 2014 5:10 pm

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

bnwrx · Post by **bnwrx** » Sat 05 Apr 2014 6:10 pm

Thanks for your input....Will try later....Ran out of time for today

Cumulus Support

CSS help needed....

CSS help needed....

Re: CSS help needed....

Re: CSS help needed....

Re: CSS help needed....

Re: CSS help needed....

Re: CSS help needed....

Re: CSS help needed....

Re: CSS help needed....

Re: CSS help needed....

Re: CSS help needed....