XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   DIVs überlappen sich nicht (http://xhtmlforum.de/showthread.php?t=66381)

webwurm 13.12.2011 12:45

DIVs überlappen sich nicht
 
Hallo werte Foren-Mitglieder!
Ich weiß, die DIV-Überlappungs-Frage kommt mehrmals täglich - aber ich konnte trotz 2stündigen Googlen und Testen auf keinen grünen Zweig kommen. Vielleicht fehlt mir nur ein kleiner Hint, aber für den wäre ich Euch sehr dankbar.

Zur Erklärung meines Problems hab ich ein Bild angehängt. Das sollte aussagekräftig genug sein:
http://seitenkreativ2.com/_download/frage_01.PNG

Mein HTML-Code bis jetzt:
HTML-Code:

...
<body>
<div id="wrapper">
            <div id="top_left_top">
              <div id="logo"></div>
        <div id="top_menu_left">
                [top_menu_left]</div>
      </div>
            <div id="top_right_top">
                [top_right_top]
          </div>
          <div style="clear:both;"></div>
      <div id="top_left_middle"></div>
      <div id="top_right_middle">
              <p>[top_right_middle] </p>
              <p>sdfasdf</p>
              <p>sdfasdf</p>
...
              <p>asdad</p>
              <p>sadfasdfdasfs</p>
      </div>
      <div id="middle_left">
              <p>[middle_left] </p>
...
              <p>sfasdfasf</p>
      </div>
      <div id="middle_right">[middle_right]</div>
</div>
</body>
...

Mein CSS-Code bis jetzt:
Code:

@charset "utf-8";
/* CSS Document */

html,body {
        height: 100%;
        margin: 0px;
        padding: 0px;
}
body {
        background-repeat: repeat-x;
        background-color: #05274E;
        overflow-x: scroll;
        background-image: url(../used/main_page/background_01.png);
}
#wrapper {
        width: 1100px;
        margin-left: auto;
        margin-right: auto;
        display: block;
}
#top_left_top {
        float: left;
        height: 85px;
        width: 790px;
}
#top_menu_left {
        background-color: #B5C6E1;
        float: right;
        height: 40px;
        width: 330px;
        border: 10px solid #FFF;
        margin-top: 15px;
        text-align: center;
}
#logo {
        float: left;
        height: 71px;
        padding-top: 14px;
        width: 334px;
}

#top_right_top {
        background-color: #FFF;
        float: right;
        height: 58px;
        width: 298px;
        margin-top: 15px;
        margin-bottom: 10px;
        border: 1px solid #05274E;
        text-align: center;
}
#top_left_middle {
        float: left;
        height: 330px;
        width: 790px;
        background-color: #CCC;
}
#top_right_middle {
        float: right;
        width: 280px;
        border: 10px solid #FFF;
        background-color: #B5C6E1;
}
#middle_left {
        background-color: #ECEFF2;
        float: left;
        width: 770px;
        border: 10px solid #FFF;
        margin-top: 10px;
        z-index: 2;
}
#middle_right {
        float: right;
        width: 280px;
        border: 10px solid #B5C6E1;
        background-color: #FFF;
        margin-top: 25px;
        z-index: 5;
        margin-right: 45px;
        position: relative;
}

Ich wäre Euch für jede Hilfe sehr, sehr dankbar!
Lg,
Webwurm

Manfred62 13.12.2011 15:30

das ganze in 2 div's (links und rechts) packen

webwurm 13.12.2011 16:38

Vielen Dank.
Aber das Problem ist, dass ich die Höhe vom DIV rechts darüber ([top_right_middle]) nicht kenne. Auch kenn ich die Höhe von dem betroffenen DIV ([middle_right]) selbst nicht.

Ziel ist, dass das betroffene DIV immer den gleichen Abstand vom oberen DIV hat (z. B. 50 Pixel), egal welche Höhe dies hat...

Manfred62 13.12.2011 16:51

Sorry, keine Ahnung, von was du redest... :?:

Wenn man 2 "Spalten" hat, juckt doch die Höhe nicht.
Wenn man einen bestimmten Abstand braucht, vergibt man diesen halt.

Praktikant 13.12.2011 17:11

Du musst das mit absoluter und relativer Positionierung "ausrichten".
Die relative Positionierung ist wichtig, damit das absolut positionierte Element nicht am Browserrand ausgerichtet wird.

Manfred62 13.12.2011 17:30

Zitat:

Zitat von Manfred62 (Beitrag 507288)
das ganze in 2 div's (links und rechts) packen

mal schnell gemacht, ohne groß zu überarbeiten.
CSS:
Code:

#links {width: 800px; float: left;}
#rechts {width: 300px; float: left;}

HTML-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" lang="de">
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>Spalten Test</title>
 </head>
 <body>
<div id="wrapper">

            <div id="links">
     
      <div id="top_left_top">
              <div id="logo"></div>
        <div id="top_menu_left">[top_menu_left]</div>
      </div>
     
      <div id="top_left_middle"></div>
     
      <div id="middle_left">
              <p>[middle_left] </p>
        <p>...</p>
              <p>sfasdfasf</p>
      </div>
     
    </div>
     
            <div id="rechts">
     
      <div id="top_right_top">[top_right_top]</div>

      <div id="top_right_middle">
              <p>[top_right_middle]</p>
              <p>sdfasdf</p>
              <p>sdfasdf</p>
        <p>...</p>
              <p>asdad</p>
              <p>sadfasdfdasfs</p>
      </div>
     
      <div id="middle_right">[middle_right]</div>
     
    </div>
  </div>


 </body>
</html>

auf 2 divs mehr kommts bei der div-Suppe nicht mehr an

webwurm 13.12.2011 17:45

Danke. Aber der Punkt ist ja, dass sich die beiden Überschneiden. Das funktioniert nicht, wenn ich "links" und "rechts" 2 Spalten mache bzw. bringt es mich nicht weiter.

Ich habs jetzt so gelöst:
Ich hab dem DIV "Wrapper" (das große "Rundherum-DIV") ein position:relative zugewiesen und das zu positionierende DIV dann absolut innerhalb dieses Wrappers positioniert.

Genügt mir grundsätzlich auch fürs Erste; ganz glücklich bin ich aber nicht:
Schaffe ich es irgendwie, dass der Abstand zum (grafisch gesehen) darüber liegenden DIV ([top_right_middle]) immer der gleiche ist, egal, wie hoch dieses ist? Dort soll nämlich ein von TypoScript dynamisch erstelltes Menü rein...

Manfred62 13.12.2011 17:49

Liste der Anhänge anzeigen (Anzahl: 1)
Zitat:

Zitat von webwurm (Beitrag 507345)
Danke. Aber der Punkt ist ja, dass sich die beiden Überschneiden. Das funktioniert nicht, wenn ich "links" und "rechts" 2 Spalten mache bzw. bringt es mich nicht weiter.

Hast du den Code oben überhaupt getestet, mit der css ergänzung??
So sieht das bei mir aus.

EDIT:
Zitat:

Schaffe ich es irgendwie, dass der Abstand zum (grafisch gesehen) darüber liegenden DIV ([top_right_middle]) immer der gleiche ist, egal, wie hoch dieses ist?
Ja. Siehe Code oben.

webwurm 14.12.2011 11:32

@Manfred62: Getestet schon, aber anscheinend war ich nicht genau genug, sorry.
Es funktioniert genau so, wie Du geschrieben hast. Vielen herzlichen Dank!

Ganz versteh ich es aber leider noch nicht:
Warum kann ich aus dem DIV "rechts" plötzlich heraus- und in den linken Bereich hineinragen? Warum verschiebt sich das nicht, wie bei mir immer? Vor allem weil "links" und "rechts" auch keine position-Angabe haben?


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:39 Uhr.

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

© Dirk H. 2003 - 2023