If I set the <div> properties nothing seems to work. But if I set properties in the h1.navigation, the border and backcolor show up.
The following html code is within the <body> tag:
This doesn't show a border or backcolor, nor can I position it anywhere.
<div class="navigation_page"> hi </div>
This shows backcolor and border:
<div class="navigation_page"> <h1 class="navigation">hi</h1> </div>
here's the css:
/* ---- Body ---- */ body { margin:0 auto; width:800px; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; background-color:silver; } /* ---- Header ---- */ .header ul, li { display:inline; } div.header{ width:100%; text-decoration:none; background-color:#000070; color:white; margin:0 auto; width:100%; border:2px solid #000070; } img.logo{ float:left; } img.headerleft1{ left: 0%; position: relative; } img.headerleft2{ left:7%; position: relative; } img.headerleft3{ left:12%; position: relative; } img.headerleft4{ left:17%; position: relative; } h1.header{ font-size:250%; color:white; text-align:center; font-weight:bold; } /* ---- Content ---- */ div.content{ width:100%; border:2px solid #000070; margin-top:2em; margin-bottom:2em; background-color:white; padding:1em; } /* ---- Left Sidebar ---- */ div.left{ } td{ width:33%; text-align:center; } /* ---- Navigation ---- */ div.navigation{ background-color:grey; text-align:center; width:100%; margin-top:0; margin-bottom:0; text-decoration:none; color:white; font-size:16pt; font-weight:bold; } /* h1.navigation_title{ position:relative; left:-15%; width:26%; font-size:24pt; font-weight:bold; color:white; float:left; border:2px solid black; background-color:grey; padding :3px; }*/ } div.navigation_page{ background-color:white; width:100%; margin-top:3px; margin-bottom:0; text-decoration:none; color:white; font-size:6pt; border:2px solid #000070; } table.navigation{ width:100%; } td.navigation{ width:33%; text-align:center; } /* ---- Top ----*/ a.top{ float:left; font-size:12pt; } /* ---- Pseudoclasses ---- */ a:link{ text-decoration:none; color:white; } a:visited{ text-decoration:none; color:white; } a:hover{ color:#000070; }
I'm new to web developing so please feel free to comment on anything..
Thanks in advance