XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Fußzeile überlappt linke Navigation (http://xhtmlforum.de/showthread.php?t=41803)

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>&nbsp;</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">&nbsp;Start&nbsp;</a>
</li>
<li><a href="#Link_1" class="top" title="Link_1">&nbsp;Link_1&nbsp;</a>
</li>
<li><a href="#Link_2" class="top" title="Link_2">&nbsp;Link_2&nbsp;</a>
</li>
<li><a href="#Link_3" class="top" title="Link_3">&nbsp;Link_3&nbsp;</a>
</li>
<li><a href="#Link_4" class="top" title="Link_4">&nbsp;Link_4&nbsp;</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>&nbsp;</td>
<td>&nbsp;</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;">&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Detailseite_1">Detailseite 1-1</a></td>
<td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Detailseite_2">Detailseite 1-2</a></td>
<td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-1</td>
<td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-2</td>
<td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-3</td>
<td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-4</td>
<td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-5</td>
<td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-6</td>
<td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-7</td>
<td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;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 />&copy; 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
}


fricca 08.09.2006 11:13

Sorry, aber das ist grauenvoll unübersichtlich.
Reduzier deinen Code auf das nötigste, rück deinen Code ein, validier ihn. CSS bitte klein und untereinander.
Hier sind Menschen, keine Maschinen.
Danke.

Zu deinem Problem: entferne die absoluten Positionierungen beim Inhaltsbereich und bei der Fußzeile. Dein float und clear sind sonst wirkungslos.
Wenn du die Fußzeile nach den Inhaltsbereich setzt, nicht hinein, dann kannst du dir den negativen margin sparen.

DirkHamburg 08.09.2006 13:59

Hallo!
Danke für den schnellen Tipp - wenn ich die Fußzeile nach dem Inhaltsbereich setze, dann richtet sie sich aber leider nur nach der Höhe der linken Navi aus, aber nicht an der Content-Höhe.

Die Fußzeile sollte möglichst unter linker Navi und Content sitzen.

Hier nochmal die beiden Codes, weiter eingedampft und strukturiert.

Die HTML-Seite:

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>
  <!-- Linker Inhaltsbereich mit linkem Logo und linker Buttonleiste -->
  <div id="left" >
    <img src="./logo.gif"  width="176" height="129" alt="Logo"></img>
    <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ü 9</a></li>
    </ul>
  </div>
  <div id="Inhalt" >
    <!-- DIV "top": Titellogo mitte und rechts -->
    <div id="top" >
      <img src="./top.jpg" id="Logo" width="227" height="106" title="" alt="Logo" ></img>
      <img src="./logo_neu.gif"  id="re_logo" height="96" width="167" alt="Logo" ></img>
      <!-- Titelleiste rechts mit Buttons für Mehrsprachigkeit -->
      <ul id="mehrsprachigkeit" >
        <li><img src="./de.gif" title="" width="16" height="12" alt="De" ></img></li>
        <li>&nbsp;</li>
        <li><img src="./gb.gif" title="" width="16" height="12" alt="En" ></img></li>
      </ul>
      <!-- Titelleiste mitte mit TOP-Navigation -->
      <ul id="top_navigation" >
        <li><a href="#Startseite" class="top" title="Startseite">&nbsp;Start&nbsp;</a></li>
        <li><a href="#Link_1" class="top" title="Link_1">&nbsp;Link_1&nbsp;</a></li>
        <li><a href="#Link_2" class="top" title="Link_2">&nbsp;Link_2&nbsp;</a></li>
        <li><a href="#Link_3" class="top" title="Link_3">&nbsp;Link_3&nbsp;</a></li>
        <li><a href="#Link_4" class="top" title="Link_4">&nbsp;Link_4&nbsp;</a></li>
      </ul>
      <br />
    </div> <!-- DIV top -->

    <!-- DIV id="micronavi": Anzeige der Micro-Navigation. -->
    <div id="micronavi" >
      <a href="#startseite" class="micronavi" >Startseite</a> > Datentabelle
    </div>

    <!-- DIV id="content": Hier erscheint der Seiteninhalt  -->
    <div id="content" style="position:absolute">
      <h1>Datentabelle </h1>
      <table  border="1" cellspacing="0"  >
        <tr>
          <td>&nbsp;</td>
          <td>&nbsp;</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;">&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Detailseite_1">Detailseite 1-1</a></td>
          <td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;<a href="#Detailseite_2">Detailseite 1-2</a></td>
          <td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-1</td>
          <td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-2</td>
          <td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-3</td>
          <td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-4</td>
          <td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-5</td>
          <td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-6</td>
          <td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-7</td>
          <td align="right"  style="white-space:nowrap;">&nbsp;&nbsp;&nbsp;&nbsp;Zelleninhalt 1-8</td>
        </tr>
      </table>

      <a href="javascript:history.back()">Zurück</a>

      <!-- DIV id="copyright": Copyright-Vermerk -->
      <div id="copyright">
        &copy; 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 das test.css:

Code:

body {
    padding: 0.5em;
    font-size: 100.01%;
    margin: 0px;
    color: black;
    font-family: verdana, sans-serif;
}


/* 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: 0px;
    margin: 0.25em;
    list-style-type: none;
}

ul#left_navigation a {
    border-right: black 1px solid;
    border-top: white 1px solid;
    border-left: white 1px solid;
    border-bottom: black 1px solid;
    padding: 0.5em;
    display: block;
    font-weight: bold;
    color: black;
    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;
    border-top-color: black;
    border-right-color: white;
    color: white;
    background-color: gray;
}




/* top-navigation */


ul#top_navigation {
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    padding: 0px;
    font-size: 0.7em;
    margin: 0px;
    margin-right: 15.15em;
    background-color: #205671;
    text-align: center;
}

ul#top_navigation li {
    padding: 0px;
    display: inline;
    margin: 0px;
    list-style-type: none;
}

ul#top_navigation a {
    border-top-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    border-right-width: 0px;
    padding-right: 2em;
    padding-left: 2em;
    padding-bottom: 0px;
    padding-top: 0px;
    font-weight: bold;
    color: white;
    background-color: #205671;
    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 {
    margin-left: -21.1em;
    clear:both;
    padding-left: 0.7em;
    font-size: 0.7em;
    padding-top: 0.5em;
    position: absolute;
}



/* seitenstand */


div#stand {
    margin-left: -21.1em;
    margin-top: 1.8em;
    padding-left: 0.7em;
    font-size: 0.7em;
    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: #000000;
    background-color: #ffffff;
}


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;
    border-left-width: 0px;
    border-bottom-width: 0px;
    border-right-width: 0px;
    padding-left: 0.4em;
    font-size: 0.7em;
    right: 0.6em;
    margin: 0em;
    width: 13.8em;
    position: absolute;
    top: 117px;
    height: 13px;
    background-color: #bfbfbf;
    text-align: center;
}
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;
}


fricca 08.09.2006 14:04

Zitat:

Zitat von DirkHamburg
wenn ich die Fußzeile nach dem Inhaltsbereich setze, dann richtet sie sich aber leider nur nach der Höhe der linken Navi aus, aber nicht an der Content-Höhe.

Solange #content absolut positioniert ist, wird sich das auch nicht ändern. Siehe mein Vorposting.

DirkHamburg 08.09.2006 14:13

Hallo nochmal!

Du hast recht - wenn das position:absolute im content raus ist, funktioniert das mit der Fußzeile.
Dann macht leider die überbreite Tabelle beim IE (der hier maßgeblich ist...) Probleme. Die verschiebt sich nach unten und fängt erst unter der linken Navigation an, so dass zwischen Überschrift und Tabelle Leerraum entsteht.

Viele Grüße,
Dirk

fricca 08.09.2006 14:20

Zitat:

Zitat von DirkHamburg
Dann macht leider die überbreite Tabelle beim IE (der hier maßgeblich ist...) Probleme. Die verschiebt sich nach unten und fängt erst unter der linken Navigation an, so dass zwischen Überschrift und Tabelle Leerraum entsteht.

Wenn du für den IE arbeitest, dann nimm bitte kein XHTML 1.1, sondern 1.0.
http://schneegans.de/web/xhtml/

Die überbreite Tabelle ist ein nerviges Problem im IE. Mit diesem Prinzip sollte es klappen:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Titel</title>

<style type="text/css">

* {
    margin:0;
    padding:0;
    }

body {
    padding-left:12em;
    }

* html #wrap {
    height:1%;                    /* hasLayout */
    }

#navi {
    width:12em;
    float:left;
    background:red;
    height:10em;                /* only for demo */
    margin-left:-12em;
    margin-right:1px;            /* needed for clear in NN 6/7 */
    }

* html #navi {
    position:relative;            /* make visible */
    display:inline;                /* doubled float-margin */
    margin-right:0;
    }

#content {
    float:left;
    width:100%;
    margin-left:-1px;            /* needed for clear in NN 6/7 */
    }

* html #content {
    margin-left:0;
    }

#content table {
    width:120%;
    }

#content td {
    border:1px solid black;
    }

#footer {
    clear:both;
    margin-left:-11.5em;
    }

* html #footer {
    display:inline-block;        /* hasLayout + full width */
    position:relative;            /* make visible */
    }

</style>

</head>
<body>

    <div id="wrap">

        <div id="navi">
            Navigation
        </div>
        <div id="content">
            Inhaltsbereich
            <table>
                <tr>
                    <td>Zelle</td>
                </tr>
            </table>
        </div>

        <div id="footer">
            Fußzeile
        </div>

    </div>

</body>
</html>


DirkHamburg 11.09.2006 12:30

Vielen Dank, Fricca ---
Du hast mir sehr geholfen, so funktioniert es prima!

Viele Grüße aus Hamburg...


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:03 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023