DirkHamburg |
08.09.2006 10:51 |
Fußzeile überlappt linke Navigation
Hallo!
In folgendem Beispiel möchte ich, dass der Impressum- und Stand-DIV (Zeilen 92 bis 94) entweder unter dem content-Bereich, oder unter der linken Navigation liegt, je nachdem, welches größer ist.
Jetzt wird das Impressum und der Stand nur an der Höhe des contents ausgerichtet, und die Menüpunkte werden überlagert, wenn zu viele Menüpunkte angezeigt werden.
Die Tabelle muss auf jeden Fall in voller Breite angezeigt werden, darf also leider nicht abgeschnitten werden.
Sorry - die Musterseite und das CSS sind etwas umfangreich, weil ich auf ein bestehendes aufsetzen musste.
Ich hoffe, Ihr könnt mir weiterhelfen! Vielen Dank!
Viele Grüße,
Dirk
Hier die Beispielseite:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>Mustertabelle </title>
<link rel="stylesheet" href="./test.css" type="text/css" title="stylesheet" />
</head>
<body>
<a id="LinkeNavigation"></a>
<!-- Hier folgt der linke Inhaltsbereich mit dem linken Logo und der linken Buttonleiste -->
<div id="left" >
<a href="#" id="logo" title="Link zur Startseite" ><img src="./logo.gif" width="176" height="129" alt="Logo"></img></a>
<!-- Die linke Buttonleiste setzt sich aus Aufzählungen zusammen. -->
<ul id="left_navigation" ><li><a href="#Link_zu_menüpunkt_1">Menü 1</a></li>
<li><a href="#Link2">Menü 2</a></li>
<li><a href="#Link3">Menü 3</a></li>
<li><a href="#Link2">Menü 4</a></li>
<li><a href="#Link3">Menü 5</a></li>
<li><a href="#Link2">Menü 6</a></li>
<li><a href="#Link3">Menü 7</a></li>
<li><a href="#Link2">Menü 8</a></li>
<li><a href="#Link3">Menü 9</a></li>
</ul> </div>
<a id="content"></a>
<div id="Inhalt" >
<!-- Im DIV id="top" werden das Titellogo mitte und rechts angezeigt. -->
<div id="top" >
<!-- Titellogo mitte -->
<img src="./top.jpg" id="Logo" width="227" height="106" title="" alt="Logo" ></img>
<!-- Titellogo rechts -->
<a href="#" id="re_logo" target="_blank" title="Logo" ><img src="./logo_neu.gif" height="96" width="167" alt="Logo" ></img></a>
<!-- Horizontale Titelleiste rechts mit Buttons für Mehrsprachigkeit -->
<div><ul id="mehrsprachigkeit" ><li><a href="#De"><img src="./de.gif" title="" width="16" height="12" alt="De" ></img></a></li><li> </li><li><a href="#En"><img src="./gb.gif" title="" width="16" height="12" alt="En" ></img></a></li></ul></div>
<!-- Horizontale Titelleiste mitte mit TOP-Navigation -->
<ul id="top_navigation" >
<li><a href="#Startseite" class="top" title="Startseite"> Start </a>
</li>
<li><a href="#Link_1" class="top" title="Link_1"> Link_1 </a>
</li>
<li><a href="#Link_2" class="top" title="Link_2"> Link_2 </a>
</li>
<li><a href="#Link_3" class="top" title="Link_3"> Link_3 </a>
</li>
<li><a href="#Link_4" class="top" title="Link_4"> Link_4 </a>
</li>
</ul>
<br />
</div>
<!-- DIV id="micronavi": Anzeige der Micro-Navigation. -->
<div id="micronavi" >
<a href="#startseite" class="micronavi" >Startseite</a> > ... > <a href="#unterseite" class="micronavi">Unterseite</a> > Datentabelle </div>
<!-- DIV id="content": Hier erscheint der Seiteninhalt -->
<div id="content" style="position:absolute">
<h1>Datentabelle </h1>
<br/><br/>
<!-- Die Datentabelle muss nicht auf die angezeigte Seitenbreite beschränkt sein, -->
<!-- sondern kann auch darüber hinaus gehen. Das Layout bleibt dadurch unverändert. -->
<table border="1" cellspacing="0" >
<tr>
<td> </td>
<td> </td>
<td align="left" style="font-weight:bold" >Spalte 3</td>
<td align="left" style="font-weight:bold" >Spalte 4</td>
<td align="left" style="font-weight:bold" >Spalte 5</td>
<td align="left" style="font-weight:bold" >Spalte 6</td>
<td align="left" style="font-weight:bold" >Spalte 7</td>
<td align="left" style="font-weight:bold" >Spalte 8</td>
<td align="left" style="font-weight:bold" >Spalte 9</td>
<td align="left" style="font-weight:bold" >Spalte 10</td>
</tr>
<tr>
<td align="right" style="white-space:nowrap;"> <a href="#Detailseite_1">Detailseite 1-1</a></td>
<td align="right" style="white-space:nowrap;"> <a href="#Detailseite_2">Detailseite 1-2</a></td>
<td align="right" style="white-space:nowrap;"> Zelleninhalt 1-1</td>
<td align="right" style="white-space:nowrap;"> Zelleninhalt 1-2</td>
<td align="right" style="white-space:nowrap;"> Zelleninhalt 1-3</td>
<td align="right" style="white-space:nowrap;"> Zelleninhalt 1-4</td>
<td align="right" style="white-space:nowrap;"> Zelleninhalt 1-5</td>
<td align="right" style="white-space:nowrap;"> Zelleninhalt 1-6</td>
<td align="right" style="white-space:nowrap;"> Zelleninhalt 1-7</td>
<td align="right" style="white-space:nowrap;"> Zelleninhalt 1-8</td>
</tr>
</table>
<br/>
<a href="javascript:history.back()">Zurück</a>
<br/>
<!-- DIV id="copyright": Copyright-Vermerk -->
<div id="copyright"><br />© Copyrighthinweis</div><br /><br />
<!-- DIV id="impressum": Link zum Impressum -->
<div id="impressum"><a href="#impressum" title="Impressum/Haftungsausschluss">Impressum/Haftungsausschluss</a> </div>
<!-- DIV id="stand": Stand der Seite. -->
<div id="stand">Stand: 08.09.2006 </div>
</div> <!-- DIV content -->
</div> <!-- DIV Inhalt -->
</body>
</html>
und hier das test.css dazu:
Code:
BODY { PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; FONT-SIZE: 100.01%; PADDING-BOTTOM: 0.5em; MARGIN: 0px; COLOR: black; PADDING-TOP: 0.5em;
FONT-FAMILY: verdana, sans-serif; BACKGROUND-COLOR: white
}
/* Linke Navigation */
DIV#left {
FLOAT: left;
}
UL#left_navigation {
PADDING: 0.25em; FONT-SIZE: 0.7em; MARGIN: 0px; WIDTH: 14.8em; BACKGROUND-COLOR: white;
}
HTML UL#left_navigation {
PADDING-LEFT: 0.25em; WIDTH: 14.8em
}
UL#left_navigation LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0.25em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
UL#left_navigation A {
BORDER-RIGHT: black 1px solid; PADDING: 0.5em; BORDER-TOP: white 1px solid; DISPLAY: block; FONT-WEIGHT: bold; BORDER-LEFT: white 1px
solid; COLOR: black; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: #eeeeee; TEXT-DECORATION: none; WIDTH: 13.1em;
}
HTML UL#left_navigation A {
WIDTH: 13em! important
}
UL#left_navigation A:hover {
BORDER-LEFT-COLOR: black; BORDER-BOTTOM-COLOR: white; COLOR: white; BORDER-TOP-COLOR: black; BACKGROUND-COLOR: gray;
BORDER-RIGHT-COLOR: white
}
/* Top-Navigation */
UL#top_navigation {
BORDER-TOP-WIDTH: 0px; PADDING: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 0.7em; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; MARGIN-RIGHT:
15.15em; BACKGROUND-COLOR: #205671; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px
}
UL#top_navigation LI {
PADDING: 0px; DISPLAY: inline; MARGIN: 0px; LIST-STYLE-TYPE: none
}
UL#top_navigation A {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 2em; PADDING-LEFT: 2em; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px; COLOR: white; PADDING-TOP: 0px; BACKGROUND-COLOR: #205671; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: none
}
HTML UL#top_navigation A {
WIDTH: 1em
}
HTML UL#top_navigation SPAN {
WIDTH: 1em
}
UL#top_navigation A:hover {
COLOR: #205671; BACKGROUND-COLOR: white
}
/*Micro-Navigation */
DIV#micronavi {
FONT-SIZE: 0.7em
}
DIV#micronavi A {
TEXT-DECORATION: none
}
DIV#micronavi A:hover {
TEXT-DECORATION: underline
}
/* Inhalt-Bereich */
DIV#Inhalt {
PADDING-RIGHT: 1em; PADDING-LEFT: 1em; PADDING-BOTTOM: 0px; MARGIN: 0px 0em 0px 11em; PADDING-TOP: 0px
}
HTML DIV#Inhalt {
HEIGHT: 1em
}
DIV#content {
FONT-SIZE: 0.8em
}
DIV IMG {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
}
/* Impressum */
DIV#impressum {
clear:both; PADDING-LEFT: 0.7em; FONT-SIZE: 0.7em; MARGIN-LEFT: -22.1em; PADDING-TOP: 0.5em; POSITION: absolute
}
/* Seitenstand */
DIV#stand {
MARGIN-TOP: 1.8em; PADDING-LEFT: 0.7em; FONT-SIZE: 0.7em; MARGIN-LEFT: -22.1em; PADDING-TOP: 0.5em; POSITION: absolute
}
/* Copyright */
DIV#copyright {
FLOAT: right
}
BR.clear {
CLEAR: both
}
.unsichtbar {
FONT-SIZE: 0em; LEFT: -5000px; POSITION: absolute
}
A:link {
COLOR: #043baa; TEXT-DECORATION: underline
}
A:visited {
COLOR: #043baa; TEXT-DECORATION: underline
}
A:hover {
BACKGROUND: #eeeeee; COLOR: #043baa; TEXT-DECORATION: underline
}
A:active {
COLOR: #043baa; TEXT-DECORATION: underline
}
H1 {
FONT-SIZE: 1.2em; LINE-HEIGHT: 120%
}
CAPTION {
FONT-WEIGHT: bold; FONT-SIZE: 1em; PADDING-BOTTOM: 0.4em; TEXT-ALIGN: left
}
#re_logo {
RIGHT: 8px; POSITION: absolute; TOP: 8px
}
#re_logo:hover {
COLOR: #000; BACKGROUND-COLOR: #fff
}
DIV#right {
DISPLAY: none
}
HTML TABLE {
BORDER-COLLAPSE: collapse
}
.extern {
MARGIN-TOP: 4px; MARGIN-LEFT: 4px
}
.unsichtbar {
DISPLAY: none
}
UL#mehrsprachigkeit {
BORDER-TOP-WIDTH: 0px; PADDING-LEFT: 0.4em; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 0.7em; RIGHT: 0.6em; BORDER-BOTTOM-WIDTH: 0px; MARGIN:
0em; WIDTH: 13.8em; POSITION: absolute; TOP: 117px; HEIGHT: 13px; BACKGROUND-COLOR: #bfbfbf; TEXT-ALIGN: center; BORDER-RIGHT-WIDTH: 0px
}
HTML UL#mehrsprachigkeit {
WIDTH: 13.75em
}
UL#mehrsprachigkeit LI {
DISPLAY: inline; LIST-STYLE-TYPE: none
}
UL#mehrsprachigkeit A {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: none
}
|