zurück zur Startseite
  

Registrieren Hilfe Benutzerliste Suchen Heutige Beiträge Alle Foren als gelesen markieren

Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Fußzeile überlappt linke Navigation

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.09.2006, 10:51
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 08.09.2006
Beiträge: 4
DirkHamburg befindet sich auf einem aufstrebenden Ast
Frage 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
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.09.2006, 11:13
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard
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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.09.2006, 13:59
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 08.09.2006
Beiträge: 4
DirkHamburg befindet sich auf einem aufstrebenden Ast
Standard
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;
}
Geändert von DirkHamburg (08.09.2006 um 14:05 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.09.2006, 14:04
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard
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.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.09.2006, 14:13
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 08.09.2006
Beiträge: 4
DirkHamburg befindet sich auf einem aufstrebenden Ast
Frage
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
Mit Zitat antworten
  #6 (permalink)  
Alt 08.09.2006, 14:20
Erfahrener Benutzer
XHTMLforum-Kenner
  
Registriert seit: 28.01.2005
Beiträge: 11.778
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard
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>
Geändert von fricca (08.09.2006 um 14:23 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 11.09.2006, 12:30
Neuer Benutzer
neuer user
Thread-Ersteller
  
Registriert seit: 08.09.2006
Beiträge: 4
DirkHamburg befindet sich auf einem aufstrebenden Ast
Daumen hoch
Vielen Dank, Fricca ---
Du hast mir sehr geholfen, so funktioniert es prima!

Viele Grüße aus Hamburg...
Mit Zitat antworten
Antwort

« Vorheriges Thema | Nächstes Thema »
Themen-Optionen
Ansicht
Linear-Darstellung Linear-Darstellung

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Navigation safari CSS 12 20.04.2011 12:11
Float-Problem? mischaef CSS 33 20.10.2010 17:20
TopNavi, linke Navigation & Navi im Footer...Probleme mit der Reihenfolge... pamou CSS 4 24.07.2008 19:32
Javascript UL Navigation im IE6 ven CSS 7 29.04.2008 16:29
Container mit 2 Container darin -> Hintergrund anzeigen bendar CSS 4 05.04.2005 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:48 Uhr.

Datenschutzerklärung - Impressum - Archiv - Nach oben

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

© Dirk H. 2003 - 2020