zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIVs überlappen sich nicht

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.12.2011, 12:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2011
Beiträge: 4
webwurm befindet sich auf einem aufstrebenden Ast
Frage 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:


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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.12.2011, 15:30
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

das ganze in 2 div's (links und rechts) packen
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.12.2011, 16:38
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2011
Beiträge: 4
webwurm befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #4 (permalink)  
Alt 13.12.2011, 16:51
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.12.2011, 17:11
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Du musst das mit absoluter und relativer Positionierung "ausrichten".
Die relative Positionierung ist wichtig, damit das absolut positionierte Element nicht am Browserrand ausgerichtet wird.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #6 (permalink)  
Alt 13.12.2011, 17:30
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von Manfred62 Beitrag anzeigen
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
Mit Zitat antworten
  #7 (permalink)  
Alt 13.12.2011, 17:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2011
Beiträge: 4
webwurm befindet sich auf einem aufstrebenden Ast
Standard

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...
Mit Zitat antworten
  #8 (permalink)  
Alt 13.12.2011, 17:49
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.134
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Zitat:
Zitat von webwurm Beitrag anzeigen
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.
Angehängte Grafiken
Dateityp: jpg relativ.jpg (35,4 KB, 10x aufgerufen)

Geändert von Manfred62 (13.12.2011 um 17:56 Uhr) Grund: EDIT ergänzt
Mit Zitat antworten
  #9 (permalink)  
Alt 14.12.2011, 11:32
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.12.2011
Beiträge: 4
webwurm befindet sich auf einem aufstrebenden Ast
Standard

@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?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

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
Divs überlappen?? meGa CSS 13 05.12.2007 22:08
Überlappen von Divs =( Meditak CSS 3 29.05.2007 01:00
Problem beim überlappen von div's!? grobi77 CSS 16 12.02.2007 18:33
Zwei divs mit formelementen überlappen sich nicht??? Heavenfighter (X)HTML 1 17.02.2005 10:47
Divs überlappen sich Endzeittrauma CSS 1 07.06.2004 18:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 18:46 Uhr.