nicht angemeldet
Hallo zusammen,
ich versuche gerade, ein Zweispalten-Layout mit Head und Foot über CSS zu realisieren. Links steht dabei eine per JS integrierte Navigation, grafisch per eigenem Hintergrund abgehoben. Der Text in der "Hauptbox" wird nun aber leider immer erst unterhalb der Navigation begonnen (wenn auch horizontal daneben). Wie kann ich erreichen, dass Navigation und Inhalt auf gleicher Höhe beginnen?!?
Hier mal der Code:
index.htm:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Intranet</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="layout.css">
<style type="text/css"></style>
<script language="JavaScript" type="text/javascript">
<!--
function outline(id)
{
if(document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = '';
}
else
{
document.getElementById(id).style.display = 'none';
}
}
//-->
</script>
</head>
<body>
<div id="page">
<h1>TOOLS</h1>
<div id=navi>
<script language="javascript" src="navi.js"></script>
</div>
<div id="content">
<h2>Herzlich Willkommen...</h2>
<p>... auf den Tool-Seiten!</p>
</div>
<p id="footer">Intranet</p>
</div>
</body>
</html>
layout.css:
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center; /* Zentrierung im Internet Explorer */
}
div#page {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 960px;
padding: 0;
background: #ffffe0 url(background.gif) repeat-y;
border: 2px ridge silver;
}
html>body div#page {
border-color: gray; /* Farbangleichung an den Internet Explorer */
}
h1 {
font-size: 1.5em;
margin: 0; padding: 0.3em;
text-align: center;
background-color: #fed;
border-bottom: 1px solid silver;
}
ul#navi {
font-size: 0.83em;
float: left; width: 200px;
margin: 0 0 1.2em; padding: 0;
}
ul#navi li {
list-style: none;
margin: 0; padding: 0.5em;
}
ul#navi a {
display: block;
padding: 0.2em;
font-weight: bold;
}
ul#navi a:link {
color: black; background-color: white;
}
ul#navi a:visited {
color: #666; background-color: white;
}
ul#navi a:hover {
color: black; background-color: #eee;
}
ul#navi a:active {
color: white; background-color: gray;
}
div#content {
margin: 0 0 1em 220px;
padding: 0 1em;
border: 5px black;
}
* html div#content {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
margin-bottom: 0;
boder: 5px black;
}
div#content h2 {
font-size: 1.2em;
margin: 0.2em 0;
color: navy;
}
div#content p {
font-size: 1em;
margin: 1em 0;
}
p#footer{
clear: both;
font-size: 0.83em;
margin: 0; padding: 0.1em;
text-align: center;
background-color: #fed;
border-top: 1px solid silver;
}
navi.js:
<!--
//edit the links as you would with regular html but remeber the '/" changes and follow the examples as a guide
document.write('<div><a href=# onclick=outline('projectA') return false><b>Projekt A</b></a>');
document.write('<br><span id=projectA style=display:none>');
document.write(' Aktuelles<br>');
document.write(' Informationen<br>');
document.write(' Software/Downloads<br>');
document.write(' AddOn<br>');
document.write(' Kontakt');
document.write('</span></div>');
document.write('<div><a href=# onclick=outline('projectB') return false><b>Projekt B</b></a>');
document.write('<br><span id=projectB style=display:none>');
document.write(' Aktuelles<br>');
document.write(' Informationen<br>');
document.write(' Software/Downloads<br>');
document.write(' AddOn<br>');
document.write(' Kontakt');
document.write('</span></div>');
document.write('<div><a href=# onclick=outline('projectC') return false><b>Projekt C</b></a>');
document.write('<br><span id=projectC style=display:none>');
document.write(' Aktuelles<br>');
document.write(' Informationen<br>');
document.write(' Software/Downloads<br>');
document.write(' AddOn<br>');
document.write(' Kontakt');
document.write('</span></div>');
//-->
Gunnar Bittersmann