✔ Problem mit CSS Positionierung

  • Themenstarter Themenstarter ByeBye 242513
  • Beginndatum Beginndatum
B

ByeBye 242513

Guten Abend,

leider hat sich bei mir ein CSS Positionierung-Fehler eingeschlichen und ich weiß leider nicht was ich auf einmal falsch gemacht habe - früher ging es immer...

Folgendes Problem:
Der Grüne Bereich "Test 123" (siehe Screenshot) ist 20-30 Pixel zu weit unten. Er soll eigentlich den selben Abstand wie links und rechts vom Grünen Bereich haben.
Anscheinend hat es etwas mit float: left; in manchen DIV's zu tun, komme nur nicht auf die Lösung.

HTML-Datei
PHP: 
<div class="container">
  <div class="header">Dienstag, 24.06.2010 - 22:31 Uhr</div>
  <div class="navi">
    <div class="navi_logo"><img src="img/img_logo.jpg" /></div>
    <div class="navi_button"><a href="/" class="navi_button_home">&nbsp;</a></div>
    <div class="navi_button_leer_1"></div>
    <div class="navi_button"><a href="portfolio/" class="navi_button_portfolio">&nbsp;</a></div>
    <div class="navi_button_leer_1"></div>
    <div class="navi_button"><a href="kontakt/" class="navi_button_kontakt">&nbsp;</a></div>
    <div class="navi_button_leer_2"></div>
  </div>
  <div class="content">
    <div class="content_top"></div>
    <div class="content_middle">
	
      <div class="box_titel">
        <div class="box_titel_oben"></div>
        <div class="box_titel_inhalt"><h1>Test 123</h1></div>
        <div class="box_titel_unten"></div>
      </div>

      <div class="box_info">
        <div class="box_info_oben"></div>
        <div class="box_info_inhalt">Test 123</div>
        <div class="box_info_unten"></div>
      </div>

      <div class="box_leistung">
        <div class="box_leistung_oben"></div>
        <div class="box_leistung_inhalt">Test 123</div>
        <div class="box_leistung_unten"></div>
      </div>
      Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. 
    </div>
    <div class="content_bottom"></div>
  </div>
  <div class="footer">...</div>
</div>


CSS-Datei
PHP: 
div.container 			{ margin: auto; width: 888px; }
div.header  				{ width: 848px; height: 26px; margin-bottom: 24px; padding: 10px 20px 2px 20px; text-align: right; font-size: 14px; color: #88C425; }

div.navi				{ width: 888px; }
div.navi_logo  			{ float: left; width: 544px; height: 75px; margin: 8px 0px 0px 6px; padding-left: 18px; background: url(../img_content_top_shadow.jpg) repeat-x bottom; }
div.navi_button  		{ float: left; width: 60px; height: 83px; }
div.navi_button_leer_1  	{ float: left; width: 58px; height: 83px; background: url(../img_content_top_shadow.jpg) bottom repeat-x; }
div.navi_button_leer_2  	{ float: left; width: 18px; height: 83px; margin-right: 6px; background: url(../img_content_top_shadow.jpg) repeat-x bottom; }

div.content				{ float: left; width: 888px;  }
div.content_top			{ width: 100%; height: 20px; background: url(../img_content_top.jpg) no-repeat bottom; }
div.content_middle		{ width: 838px; padding: 0px 26px 15px 24px; background: url(../img_content_middle.jpg) repeat-y; }
div.content_bottom		{ width: 100%; height: 24px; background: url(../img_content_bottom.jpg) no-repeat top; }

div.box_titel			{ width: 840px; margin-bottom: 17px; text-align: center; }
div.box_titel_oben		{ width: 100%; height: 4px; background: url(../img_hover_top.jpg) no-repeat bottom; }
div.box_titel_inhalt	{ width: 820px; background: #88C425; padding: 10px; }
div.box_titel_unten		{ width: 100%; height: 4px; background: url(../img_hover_bottom.jpg) no-repeat top; }

div.box_info			{ width: 840px; margin-bottom: 17px; text-align: justify; }
div.box_info_oben		{ width: 100%; height: 4px; background: url(../img_note_top.jpg) no-repeat bottom; }
div.box_info_inhalt		{ width: 820px; background: #EBEAE1; padding: 10px; }
div.box_info_unten		{ width: 100%; height: 4px; background: url(../img_note_bottom.jpg) no-repeat top; }

div.box_leistung		{ width: 250px; float: right; text-align: justify; margin: 0px 0px 17px 17px; }
div.box_leistung_oben	{ width: 100%; height: 4px; background: url(../img_activity_top.jpg) no-repeat bottom; }
div.box_leistung_inhalt	{ width: 230px; background: #EBEAE1; padding: 10px; }
div.box_leistung_unten	{ width: 100%; height: 4px; background: url(../img_activity_bottom.jpg) no-repeat top; }

div.footer				{ clear: left; clear: both; width: 888px; margin: 10px 0px 10px 0px; text-align: center; font-size: 12px; color: #9F9D96; }
 

Anhänge

  • screen.jpg
    screen.jpg
    126 KB · Aufrufe: 15
Hi,

welches der <div>-Elemente repräsentiert denn die rote Linie?

Möglicherweise liegt es an dem voreingestellten Außenabstand des <h1>-Elements, der auf null zurückgesetzt gehört.

mfg Maik
 
Genau über der roten Linie befindet sich <div class="content_top"></div> und danach soll direkt der Grüne Bereich anschließen.

Habe es gerade mal getestet <h1> zu entfernen, leider ohne Erfolg.
 
Aus FireFox 3.6.4 sieht aber im Internet Explorer 6.0 und 8.0 genau so aus.


Sobald ich <div class="box_titel"> und <div class="box_info"> lösche steht der Inhalt auch wieder in richtiger Position, siehe Screenshot.

geänderte HTML-Datei
PHP: 
....
  <div class="content">
    <div class="content_top"></div>
    <div class="content_middle">

      <div class="box_leistung">
        <div class="box_leistung_oben"></div>
        <div class="box_leistung_inhalt">Test 123</div>
        <div class="box_leistung_unten"></div>
      </div>
      Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. 
    </div>
    <div class="content_bottom"></div>
  </div> 
.....
 

Anhänge

  • screen_2.jpg
    screen_2.jpg
    73 KB · Aufrufe: 8
Ich kann diesen unerwünschten Abstand zu .content_top bei mir ausschließlich im IE6 reproduzieren.

Und die Ursache hierfür findet sich in der height:4px-Regel für .box_titel_oben, die er nicht wie gewünscht interpretiert, da er in dem Element einen Platzhalter mit der voreingestellten Schriftgröße vorsieht, die das festgelegte Höhenmaß überschreitet, und somit das Element höher erscheint.

Lösung: zusätzlich für .box_titel_oben overflow:hidden deklarieren.

mfg Maik
 
Leider auch ohne Erfolg..

Habe jetzt mal den Bereich div.content_middle in rot gehalten (siehe Screenshot), damit es etwas leichter zu erkennen ist.

Nicht wundern das die 1. Textzeile auf einmal über dem grünen Balken ist, habe testweise alle DIV-Boxen mal auf float: left; gesetzt.

EDIT:
Ich finde es auch sehr komisch das es nur bei den DIV'S div.box_titel und div.box_info Probleme macht, jedoch bei div.box_leistung (ist die kleine Box rechts) fehlerfrei dargestellt wird.

CSS-Datei:
PHP: 
div.content				{  float: left; width: 888px; }
div.content_top			{  width: 100%; height: 20px; background: url(../img_content_top.jpg) no-repeat bottom; }
div.content_middle		{  overflow:hidden; width: 838px; padding: 0px 26px 15px 24px; background: url(../img_content_middle.jpg) repeat-y; }
div.content_bottom		{  width: 100%; height: 24px; background: url(../img_content_bottom.jpg) no-repeat top; }

div.box_titel			{  float: left; width: 840px; margin-bottom: 17px; text-align: center; }
div.box_titel_oben		{  overflow: hidden; width: 100%; height: 4px; background: url(../img_hover_top.jpg) no-repeat bottom; }
div.box_titel_inhalt	{  width: 820px; background: #88C425; padding: 10px; }
div.box_titel_unten		{  width: 100%; height: 4px; background: url(../img_hover_bottom.jpg) no-repeat top; }

div.box_info			{  float: left; width: 840px; margin-bottom: 17px; text-align: justify; }
div.box_info_oben		{  width: 100%; height: 4px; background: url(../img_note_top.jpg) no-repeat bottom; }
div.box_info_inhalt		{  width: 820px; background: #EBEAE1; padding: 10px; }
div.box_info_unten		{  width: 100%; height: 4px; background: url(../img_note_bottom.jpg) no-repeat top; }
 

Anhänge

  • Screen_3.jpg
    Screen_3.jpg
    147,6 KB · Aufrufe: 10
Zuletzt bearbeitet von einem Moderator:
HerbertJ hat gesagt.:
Leider auch ohne Erfolg..
Zum Vergrößern anklicken....
Bei mir führt dies im IE6 sehr wohl zum Erfolg.

Firefox (und alle übrigen Browsern) zeigen .box_titel_oben korrekt in der festgelegten Höhe an - also ohne den Zusatz overflow:hidden, den ich hier auch gesondert in einem Conditional Comment für den IE6 notiert habe.

Die rote Linie ist eine border-bottom-Regel für .content_top, und der gelbe Hintergrund besagtes DIV .box_titel_oben.


ie6-vorher.jpg ie6-nachher.jpg ff.jpg
(v.l.n.r.: IE6 voher, IE6 nachher, FF)

Und mein Testcode:
HTML: 
<!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=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-06-25" />

<title>tutorials.de | Problem mit CSS Positionierung</title>

<style type="text/css">
/* <![CDATA[ */
h1 { margin:0; }
div.container             { margin: auto; width: 888px; }
div.header                  { width: 848px; height: 26px; margin-bottom: 24px; padding: 10px 20px 2px 20px; text-align: right; font-size: 14px; color: #88C425; }

div.navi                { width: 888px; }
div.navi_logo              { float: left; width: 544px; height: 75px; margin: 8px 0px 0px 6px; padding-left: 18px; background: url(../img_content_top_shadow.jpg) repeat-x bottom; }
div.navi_button          { float: left; width: 60px; height: 83px; }
div.navi_button_leer_1      { float: left; width: 58px; height: 83px; background: url(../img_content_top_shadow.jpg) bottom repeat-x; }
div.navi_button_leer_2      { float: left; width: 18px; height: 83px; margin-right: 6px; background: url(../img_content_top_shadow.jpg) repeat-x bottom; }

div.content                { float: left; width: 888px;  }
div.content_top            { width: 100%; height: 20px; background: url(../img_content_top.jpg) no-repeat bottom; border-bottom:1px solid red; }
div.content_middle        { width: 838px; padding: 0px 26px 15px 24px; background: url(../img_content_middle.jpg) repeat-y; }
div.content_bottom        { width: 100%; height: 24px; background: url(../img_content_bottom.jpg) no-repeat top; }

div.box_titel            { width: 840px; margin-bottom: 17px; text-align: center; }
div.box_titel_oben        { width: 100%; height: 4px; background: yellow url(../img_hover_top.jpg) no-repeat bottom; }
div.box_titel_inhalt    { width: 820px; background: #88C425; padding: 10px; }
div.box_titel_unten        { width: 100%; height: 4px; background: url(../img_hover_bottom.jpg) no-repeat top; }

div.box_info            { width: 840px; margin-bottom: 17px; text-align: justify; }
div.box_info_oben        { width: 100%; height: 4px; background: url(../img_note_top.jpg) no-repeat bottom; }
div.box_info_inhalt        { width: 820px; background: #EBEAE1; padding: 10px; }
div.box_info_unten        { width: 100%; height: 4px; background: url(../img_note_bottom.jpg) no-repeat top; }

div.box_leistung        { width: 250px; float: right; text-align: justify; margin: 0px 0px 17px 17px; }
div.box_leistung_oben    { width: 100%; height: 4px; background: url(../img_activity_top.jpg) no-repeat bottom; }
div.box_leistung_inhalt    { width: 230px; background: #EBEAE1; padding: 10px; }
div.box_leistung_unten    { width: 100%; height: 4px; background: url(../img_activity_bottom.jpg) no-repeat top; }

div.footer                { clear: left; clear: both; width: 888px; margin: 10px 0px 10px 0px; text-align: center; font-size: 12px; color: #9F9D96; }
/* ]]> */
</style>

<!--[if IE 6]>
<style type="text/css">
div.box_titel_oben { overflow:hidden; }
</style>
<![endif]-->

</head>
<body>

<div class="container">
  <div class="header">Dienstag, 24.06.2010 - 22:31 Uhr</div>
  <div class="navi">
    <div class="navi_logo"><img src="img/img_logo.jpg" /></div>
    <div class="navi_button"><a href="/" class="navi_button_home">&nbsp;</a></div>
    <div class="navi_button_leer_1"></div>
    <div class="navi_button"><a href="portfolio/" class="navi_button_portfolio">&nbsp;</a></div>
    <div class="navi_button_leer_1"></div>
    <div class="navi_button"><a href="kontakt/" class="navi_button_kontakt">&nbsp;</a></div>
    <div class="navi_button_leer_2"></div>
  </div>
  <div class="content">
    <div class="content_top"></div>
    <div class="content_middle">

      <div class="box_titel">
        <div class="box_titel_oben"></div>
        <div class="box_titel_inhalt"><h1>Test 123</h1></div>
        <div class="box_titel_unten"></div>
      </div>

      <div class="box_info">
        <div class="box_info_oben"></div>
        <div class="box_info_inhalt">Test 123</div>
        <div class="box_info_unten"></div>
      </div>

      <div class="box_leistung">
        <div class="box_leistung_oben"></div>
        <div class="box_leistung_inhalt">Test 123</div>
        <div class="box_leistung_unten"></div>
      </div>
      Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text.. Text..
    </div>
    <div class="content_bottom"></div>
  </div>
  <div class="footer">...</div>
</div>

</body>
</html>


mfg Maik
 
Vielleicht solltest du auch mal für einen direkten Gegenvergleich deine Seite irgendwo online zur Verfügung stellen.

Btw, Dienstag war der 22.06., und der 24. am gestrigen Donnerstag ;-)

mfg Maik
 
Also Maik erstmal vielen Dank für deine Geduld und der großartigen Hilfe!

Leider hat es bei mir immer noch nicht funktioniert, also beschloss ich den Code nochmal neu zu überdenken.
Habe dann einiges im CSS geändert und so ist mir aufgefallen, dass der gesamte Grüne Balken länger war als der zulässige Bereich und dadurch ist der Fehler passiert.

Die einfachsten Fehler sind die schlimmsten...:-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück