Ok been given a new website todo from my college and its quite a simple site to make although Ive come into a problem near the begining of the building.
As far as i know when you display a <li> as inline it sits side by side and if you set it to display as block it sits on top of each other.
now I am trying to code the navigation on the top of the site as block(left standard) and the footer as inline although when I use the code footer_navigation,li{display :inline;}.
it effects both list even though it should be only the child <li> to its parent footer_navigation
I will post the full css code below I sure theres a simple fix to the problem thanks in advance.
@charset "utf-8";
/* CSS Document */
/* Master function */
*{margin:0; padding:0;}
/* Text formating */
p{font-size:1em; padding:10px;}
a{}
h1{ font-size: 2.5em; padding:10px;}
h2{ font-size: 1.5em; padding:15px;}
h3{ font-size: 1.5em; padding:10px;}
h4{ font-size: 1.2em; padding:10px;}
h5{ font-size: 1em; padding:5px;}
ul{ font-size:1em; list-style:none; text-decoration:none;}
/* Main layout */
body{}
#wrapper{ width:1000px; margin:0px auto; padding:20px; background:#060;}
#header{ width:1000px; margin:5px auto; padding:5px; background:#039;}
#content{ width:1000px; margin:5px auto; padding:5px; background:#9C0;}
#footer{width:1000px; margin:5px auto; padding:5px; background:#666;}
/* Elements within main layout */
#banner{width:650px; height:200px; background:#0FF;}
#navigation{ width:350px; height:200px; background:#F0F; float:right;}
#navigation,li{display:block;}
#navigation_animation{ width:350; height:200px; background:#F00; float:right;}
#introduction_animation{ width:920px; height:500px background:#966;}
#pdf{}
#table{}
#footer_navigation{}
#footer_navigation a {}
#footer_navigation a:hover{}
#footer_navigation, ul {}
#footer_navigation,li {display:inline;}