mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 25.04.2024 11:56 Benutzername: Passwort: Auto-Login

Thema: div mit position fixed wird von anderem div überlagert vom 06.06.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> div mit position fixed wird von anderem div überlagert
Seite: 1, 2  Weiter
Autor Nachricht
twenta
Threadersteller

Dabei seit: 06.06.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst So 06.06.2010 02:08
Titel

div mit position fixed wird von anderem div überlagert

 Antworten mit Zitat Zum Seitenanfang
Gute Nacht allerseits,

Ich habe zwei div's nebeneinander. Das linke ist fixiert und das rechte absolut postitioniert.
Code:
#menue {   
        position: fixed;
        width: 210px;
        padding: 0;
        margin: 50px 0 0 0px;
        overflow:auto;
        min-height:520px;
        }

#content {
margin:50px 0 0 212px;
background-image: url('./back.png');
width:788px;
min-height:520px;
padding:15px 7px;
}


Ist das Browser-Fenster nun zu klein und man kann scrollen, dann schiebt sich das rechte div über das Menü (siehe Bils). Leider arbeite ich mit einem transparenten Hintergrund, so dass dadurch die Lesbarkeit verloren geht.
Gibt es eine Möglichkeit, das div ins horizontale scrollen aufzunehmen und nur vertical die position zu fixieren?



  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst So 06.06.2010 02:32
Titel

Re: div mit position fixed wird von anderem div überlagert

 Antworten mit Zitat Zum Seitenanfang
twenta hat geschrieben:
das rechte absolut postitioniert.

Davon weiß Dein CSS-Code allerdings nix.

twenta hat geschrieben:
Ist das Browser-Fenster nun zu klein und man kann scrollen, dann schiebt sich das rechte div über das Menü

Nein, da es margin-left hat. Dein Code geposteter Code funktioniert einwandfrei. Bei weiteren Fragen poste bitte einen Link, der das Problem zeigt.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
twenta
Threadersteller

Dabei seit: 06.06.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 07.06.2010 02:02
Titel

Antworten mit Zitat Zum Seitenanfang
Der Code funktioniert schon, aber das die divs sich überlagern ist nicht so toll.
Klar hat das rechte div ein margin left, aber der wird ja eben beim scrollen ausgeblendet, während der linke div wegen position fixed stabil bleibt.

Ich befürchte das Ganze ist eher ein unlösbares Problem bei der Verwendung von fixierten div's...
Einen Link kann ich leider noch nicht posten. Aber auf dem screenshot ist das Problem doch ausreichend zu erkennen?!

Zuletzt bearbeitet von twenta am Mo 07.06.2010 02:10, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mo 07.06.2010 02:30
Titel

Antworten mit Zitat Zum Seitenanfang
Mir war nicht gleich klar, dass es Dir ausschließlich um das Verhalten beim horiz. Scrollen geht - und das ist tatsächlich unvermeidlich, denn das Element mit pos. fixed wird immer am Viewport ausgerichtet.

Du kannst den unerwünschten Effekt allenfalls etwas eindämmen, indem Du statt width min- und max-width verwendest: Bei einem möglichst geringen Wert für min-width erscheint der Scrollbalken dann erst sehr spät.
  View user's profile Private Nachricht senden
twenta
Threadersteller

Dabei seit: 06.06.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 07.06.2010 02:53
Titel

Antworten mit Zitat Zum Seitenanfang
Danke für die Klärung.

Schade, dass position:fixed kein vollwertiger Ersatz für die zum Glück veralteten frames ist. Ein iframe ist wahrscheinlich eher eine unsaubere Lösung...

Kein Wunder das die meisten inhaltsstarken Seiten ein komplett fließendes Layout verwenden...
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mo 07.06.2010 12:17
Titel

Antworten mit Zitat Zum Seitenanfang
twenta hat geschrieben:
Ein iframe ist wahrscheinlich eher eine unsaubere Lösung

Ja, da würde ich eher ein div mit overflow: auto; neben das Menü stellen, damit erhälst Du den gleichen Effekt wie mit einem iframe.
  View user's profile Private Nachricht senden
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 07.06.2010 13:08
Titel

Antworten mit Zitat Zum Seitenanfang
Hi, alternativ könntes Du auch hergehen und nur den
Contentbereich selbst scrollbar machen und die Scrollbars
praktisch über ein Containerelement simulieren. So z.B:
http://zweitaccount.zw.ohost.de/fixedMenu/

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Menu</title>
<style type="text/css">
<!--
html {
   height:100%;
}
body {
   height:100%;
   overflow:hidden;
}
* {
   margin:0;
   padding:0;
}
#menu {
   position:absolute;
   left:0;
   top:0;
   bottom:0;
   width:200px;
   background:pink;
}
#container {
   position:absolute;
   top:0;
   left:200px;
   right:0;
   bottom:0;
   overflow:auto;
   background:yellow;
}
#content {
   width:600px;
   background:silver;
}
-->
</style>
</head>

<body>
<div id="menu">
   <p>Menu</p>
</div>
<div id="container">
   <div id="content">
      <p>
         <script>for(var i=0;i<1000;i++) document.writeln(' Content'+i);</script>
      </p>
   </div>
</div>
</body>
</html>


Gruß zweitaccount
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mo 07.06.2010 13:21
Titel

Antworten mit Zitat Zum Seitenanfang
zweitaccount hat geschrieben:
nur den Contentbereich selbst scrollbar machen

Sag ich ja *zwinker* Übrigens ist overflow: hidden; für body keine gute Idee, erst recht nicht bei height: 100% *zwinker* (damit sägst Du Dir schnell mal das Menü weg)
  View user's profile Private Nachricht senden
 
Ähnliche Themen [CSS] IE8 mit :after und position:fixed nicht wirklich fixed
[CSS] position:fixed und der IE
Position fixed
IE6 und position:fixed
position fixed im IE7 und eventuell IE6
position:fixed im ie6? Browserhack?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB