Haui: Unerwünschter obriger Abstand innerhalb eines DIV-Elements

Habe die Ehre!

Ich habe in kleines Problem, das ich weder verstehe noch lösen kann. Ich habe schon einiges ausprobiert und nach derartigen Problemen/Lösungen gesucht, ohne Erfolg.

Es handelt sich um einen unerwünschten obrigen Abstand innerhalb eines DIV-Elements:

Unerwünschter Abstand

Der CSS-Code dazu:

.contentBg  
	{margin: 0px;  
	padding: 10px;  
	background-color: #cba574;}

Der HTML-Code dazu:

<div class="contentBg">  
				Hier gehts weiter:  
				<p></p>  
				[Menu=SubMenu]  
			</div>

Auch wenn ich Padding auf 0px setze, bleibt der obrige Abstand bestehen.

Kann mir jemand weiter helfen?

Besten Dank im Voraus

Haui

  1. Mahlzeit Haui,

    Der CSS-Code dazu:

    .contentBg

    {margin: 0px;
    padding: 10px;
    background-color: #cba574;}

      
    Ich behaupte mal, dass das nicht der vollständige für dieses Element relevante CSS-Code ist. Was sagen die Entwicklertools, Firebug bzw. ähnliche Hilfsmittel dazu? Welche Eigenschaften hat das <div>-Element TATSÄCHLICH im Browser? Und woher erbt es diese ggf.?  
      
      
    MfG,  
    EKKi  
    
    -- 
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    
    1. Also gut, vll. hilft der vollständige Code mehr weiter.

      <?xml version="1.0" encoding="UTF-8"?>  
      <!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 name="description" content="EDELSTOFF - The next Generation ...just good rockin' shit!" />  
      	<meta name="keywords" content="edelstoff, the next generation, just good rockin shit, memmingen, musik, rock, roll, punk, funk, rnb, rhythm, blues, pop, cover" />  
      	<meta name="author" content="Sebastian Hau" />  
      	<meta name="publisher" content="EDELSTOFF - The next Generation" />  
      	<meta name="copyright" content="EDELSTOFF - The next Generation" />  
      	<meta name="language" content="deutsch" />  
      	<meta name="robots" content="index" />  
      	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />  
        
      	<title>EDELSTOFF - The next Generation ...just good rockin' shit!</title>  
        
      	<link rel="stylesheet" type="text/css" href="./css/main.css" />  
        
      </head>  
        
      <body>  
        
      	<div id="header">  
      		<img src="./images/main/guitarAmp.gif" alt="EDELSTOFF - The next Generation ...just good rockin' shit!" id="guitarAmp" />  
      		<img src="./images/main/logo.gif" alt="EDELSTOFF - The next Generation ...just good rockin' shit!" id="logo" />  
      		<img src="./images/main/microphone.gif" alt="EDELSTOFF - The next Generation ...just good rockin' shit!" id="microphone" />  
      	</div>  
        
      	<div id="mainMenu">  
      		[Menu=MainMenu]  
      	</div>  
        
      	<div id="contentScreen">  
      		<div id="subMenu">  
      			<div class="contentBg">  
      				Hier gehts weiter:  
      				<p></p>  
      				[Menu=SubMenu]  
      			</div>  
      		</div>  
      	</div>  
        
      </body>  
        
      </html>
      
      @import url('standardtags.css');  
      @import url('menu.css');  
      @import url('content.css');  
        
        
      /* HEADER */  
      #header  
      	{position: relative;  
      	top: 0px;  
      	width: 1000px;  
      	height: 200px;  
      	margin: auto;}  
        
      #header img#logo  
      	{position: absolute;  
      	top: 5px;  
      	right: 60px;  
      	border-width: 0px;}  
        
      #header img#guitarAmp  
      	{position: absolute;  
      	top: 12px;  
      	left: 0px;  
      	border-width: 0px;}  
        
      #header img#microphone  
      	{position: absolute;  
      	top: 5px;  
      	right: 0px;  
      	border-width: 0px;}  
      /* HEADER */  
        
        
      /* SCREEN (Positionieren von SubMenu und Content) */  
      #contentScreen  
      	{position: relative;  
      	top: 20px;  
      	width: 1000px;  
      	margin: auto;}  
        
      .contentBg  
      	{margin: 0px;  
      	padding: 10px;  
      	background-color: #cba574;}  
      /* SCREEN */  
        
        
      /* MENU (Positionierung des MainMenus) */  
      #mainMenu  
      	{position: relative;  
      	top: 0px;  
      	width: 1000px;  
      	height: 50px;  
      	margin: auto;}  
        
      #subMenu  
      	{position: relative;  
      	top: 0px;  
      	width: 200px;  
      	margin: 0px;  
      	padding: 10px;  
      	background-image: url('../images/main/contentFrame.jpg');}  
      /* MENU */  
        
        
      /* CONTENT (Positionierung des Contents innerhalb des SCREENs) */  
      #content  
      	{position: absolute;  
      	top: 0px;  
      	left: 220px;  
      	width: 745px;  
      	margin-bottom: 20px;  
      	padding-left: 20px;  
      	background-image: url('../images/main/contentBg.gif');  
      	background-repeat: repeat-y;}  
      /* CONTENT */  
        
        
      /* TurnPage */  
      .buttonBack  
      	{float: right;  
      	border-width: 0px;}
      
      1. Also gut, vll. hilft der vollständige Code mehr weiter.

        Du hast bereits 2x einen Hinweis erhalten, wie du dein Problem selbst lösen kansnt - hast du das schon probiert oder sollen wir mal machen, weil du keine Lust hast?

        1. Also gut, vll. hilft der vollständige Code mehr weiter.

          Du hast bereits 2x einen Hinweis erhalten, wie du dein Problem selbst lösen kansnt - hast du das schon probiert oder sollen wir mal machen, weil du keine Lust hast?

          Ich arbeite seit gestern an der Lösung des Problems, ohne Erfolg. Auf Firebug konnte mich nicht weiter helfen. Bei Problemen führt mich der letzte Weg in Foren. Ich dachte man hilft sich noch gerne gegenseitig, sollte dies nicht der Fall sein, entschuldige ich mich für die gestohlene Zeit!

          1. Hallo,

            Auf Firebug konnte mich nicht weiter helfen.

            aber das, was Firebug dir verrät, und was dir nicht hilft, das hilft möglicherweise einem Fachmann. Also warum gibst du diese Details nicht weiter?

            Ich dachte man hilft sich noch gerne gegenseitig

            Ja, sicher. Aber du solltest bei Nachfragen auch mitarbeiten, indem du wenigstens die Information zur Verfügung stellst, die vielleicht eine Hilfe ermöglicht.

            Sich nicht auskennen, oder bei einem Problem nicht weiterkommen, ist keine Schande. Gezielte Nachfragen zu ignorieren, hilft aber auch nicht.

            So long,
             Martin

            --
            Wer mit dem Finger droht, sollte ihn am Abzug haben, und nicht in der Nase.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          2. Ich arbeite seit gestern an der Lösung des Problems, ohne Erfolg. Auf Firebug konnte mich nicht weiter helfen. Bei Problemen führt mich der letzte Weg in Foren. Ich dachte man hilft sich noch gerne gegenseitig, sollte dies nicht der Fall sein, entschuldige ich mich für die gestohlene Zeit!

            Und du bist dabei nicht auf die Idee gekommen, die das Element umgebenden Elemente anzuschauen? ;)

            Gruss

            1. Ich bin selbstverständliche sämtlich obergeordneten DIV-Layer nach und nach durchgegangen, habe sie mir angesehen und diese getestet. Leider ohne Erfolg. Der rot umrahmten Bereich bleibt bestehen.

              Sinn der Sache ist, dass der "Holzrahmen" der mit Positions- und Breitenangaben für die entsprechenden Design-Elemente (Menu-, Content- und ähnliche Bereiche) entsprechend versehen wird. Der "contentBg"-Bereich soll sich dann diesen Positions- und vorallem Breitenangaben anpassen mit einem rundrum gleichen Abstand von 10px. Der Inhalt der entsprechenden Bereich soll aber natürlich nicht mit einem großen Abstand beginnen.

              Ich hoffe nun, ich konnte mich jedem verständlich ausdrücken und wäre froh sinnvolle Tipps und keine patzigen Antworten zu erhalten!

              1. Ich bin selbstverständliche sämtlich obergeordneten DIV-Layer nach und nach durchgegangen, habe sie mir angesehen und diese getestet. Leider ohne Erfolg. Der rot umrahmten Bereich bleibt bestehen.

                Du findest aber genau dort die Antwort auf dein Problem.
                Du kannst Firebug bedienen? Der zeigt dir nämlich an, welches Element welche Abstände (margin,padding) erzeugt.

                Ich hoffe nun, ich konnte mich jedem verständlich ausdrücken und wäre froh sinnvolle Tipps und keine patzigen Antworten zu erhalten!

                Wenn du uns einen Link zu einem Onlinebeispiel hättest, dann könnte man sich das kurz anschauen.

          3. Ich arbeite seit gestern an der Lösung des Problems, ohne Erfolg. Auf Firebug konnte mich nicht weiter helfen. Bei Problemen führt mich der letzte Weg in Foren. Ich dachte man hilft sich noch gerne gegenseitig, sollte dies nicht der Fall sein, entschuldige ich mich für die gestohlene Zeit!

            Es wäre das Mindeste gewesen, dass du das im Ausgangsposting erwähnst - einfach den Quelltext hinrotzen bringt keinem etwas.

            Du schickst deinen Browser übrigens in den http://de.selfhtml.org/css/formate/box_modell.htm#doctype_switch@title=Quirksmode.

            #subMenu ist übrigens ein guter Lösungsansatz der 10 Pixel erklären würde.

          4. Hi,

            Ich arbeite seit gestern an der Lösung des Problems, ohne Erfolg. Auf Firebug konnte mich nicht weiter helfen. Bei Problemen führt mich der letzte Weg in Foren. Ich dachte man hilft sich noch gerne gegenseitig

            Und ich dachte, wenn man Webdesign als Dienstleistung anbietet und sich brüstet, „auf eine 10 jährige Erfahrung im Bereich Web-Design“ (sic) zurück zu blicken, könnte man wenigstens mit den gängigen Tools umgehen.

            Oder alternativ, zumindest so intelligent sein, das Problem wenigstens für andere nachvollziehbar zu machen (und damit zeigen, dass man die Tipps für Fragende berücksichtigt hat), in dem man bspw. ein Online-Beispiel bereit stellt, statt nur zwei wenig aussagekräftige Bröckchen HTML und CSS zu präsentieren.

            MfG ChrisB

            --
            RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
      2. Mahlzeit Haui,

        auch wenn das Problem eventuell nicht mehr besteht, noch ein paar Anmerkungen - und wenn sie nur für das nächste Mal sind:

        Also gut, vll. hilft der vollständige Code mehr weiter.

        Nein, vollständiger Code hilft in den seltensten Fällen - das ist in den Tipps für Fragende (die Du im Übrigen wirklich gerne beherzigen darfst!) auch erklärt: "Gerne wird es gesehen, wenn der Quellcode auf die für das Problem notwendigen Stellen reduziert wird, schließlich hat kaum jemand Lust, sich in hunderte Zeilen unnötigen Code einzuarbeiten."

        [code lang=html]<?xml version="1.0" encoding="UTF-8"?>
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

        Wie bereits gesagt wurde, ist Quirks-Mode eigentlich niemals eine gute Idee. Mit der erwähnten 10-jährigen Erfahrung solltest Du das eigentlich wissen. Zumindest aber solltest Du wissen, was das bedeutet und was Du zu tun hast.

        <div id="mainMenu">
        [Menu=MainMenu]
        </div>

        Du hast ein Client-seitiges Problem (Darstellung im Browser). Server-seitiger Code (und dazuzählen auch derartige "Templates" wie von Dir gezeigt) ist da vollkommen irrelevant. Aussagekräftig ist einzig und allein der Code, der wirklich im Browser ankommt und von diesem interpretiert wird.

        Aber wem erzähle ich das, schließlich hast Du ja 10 Jahre Erfahrung auf dem Gebiet ...

        Und jetzt noch ein paar persönliche Anmerkungen:

        Dass Du bereits mit Firebug (o.ä.) herumprobiert hast, hättest Du auch in Deinem Ausgangsposting erwähnen können - dann hätte man Dich nicht auf derartige Tools hinzuweisen brauchen.

        Wenn Du Probleme hast, diese Hilfsmittel zu nutzen, dann solltest Du das in Deinem Ausgangsposting auch erwähnen ("Ich habe mir das bereits mit Firebug angeschaut, aber irgendwie werde ich daraus nicht schlau. Folgendes wird mir angezeigt: $INSERT_FIREBUG_OUTPUT_HERE Kann mir da jemand weiterhelfen?").

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
  2. Auch wenn ich Padding auf 0px setze, bleibt der obrige Abstand bestehen.

    Der Abstand kommt von "irgendwo anders" her.

    Kann mir jemand weiter helfen?

    Mit dem von dir gezeigten Code nicht, nein.

    Am besten lässt sich das mit einem Entwicklungswerkzeug herrausfinden: Web Inspector, Dragonfly, Firebug ...

  3. So, um nun den Wind etwas abflachen zu lassen. Jeder hier weiß, das sich bei fast täglichen Veränderungen und Weiterentwicklungen ständig neue "Problemchen" entstehen können. Diese zu lösen oder zu umgehen bedarf es oft Tricks auf die man im ersten Moment nicht kommt. Ich bin mir im klarren, dass ein Großteil von Forenbesucher sich meist nicht ausgiebig genug um Ihr Problem kümmern wollen und denke, sie posten kurz ihr Problem und bekommen nach ein paar Minuten die Lösung serviert. Zu solchen Menschen gehöre ich nicht. Ich möchte stets selbst auf die Lösung meiner Problem kommen. Jedoch geht das nicht immer und hierfür finde ich Plattformen wie diese äußerst ansprechend. Jedoch finde ich es schade, dass man von jedem Posting (oft) pauschal davon ausgeht, dass es sich um einen "faulen Programmierer" handelt. Und wenn man vergisst eine Angabe zur Lösungsfindung patzig angesprochen und teilweise beleidigt wird.

    Sollte ich jemanden auf dem Slips getreten sein, was nach dem Aufschaukel passieren konnte, möchte ich mich herzlich dafür entschuldigen.4

    Ich habe seit meinem ersten Posting ohne Pause weiter nach dem Fehler gesucht und getestet und konnte das Problem nun doch selber lösen.

    Danke!

    P.S.: Ich biete keine Dienstleistungen in Bereich Web-Design an.

    1. So, um nun den Wind etwas abflachen zu lassen. Jeder hier weiß, das sich bei fast täglichen Veränderungen und Weiterentwicklungen ständig neue "Problemchen" entstehen können.

      Du meinst, dass man einen mutmaßlichen padding in einem übergeordneten ELement nicht findest?

      Diese zu lösen oder zu umgehen bedarf es oft Tricks auf die man im ersten Moment nicht kommt.

      Wenn ein Zimmermann einen Nagel nicht einschlagen oder eine Kindergartenpädagogin keine Schuhbänder binden kann ist das etwa dasselbe.

      Zu solchen Menschen gehöre ich nicht.

      Augenscheinlich schon - ansonsten hättest du dir die Mühe gemacht dein Problem zu beschreiben und nicht einfach den Quelltext hingerotzt.

      Ich möchte stets selbst auf die Lösung meiner Problem kommen.

      Und dennoch verlangst du die Lösung - obwohl dir mittlerweile nun mehrfach direkt und indirekt gesagt wurde, woran es vermutlich liegt.

      Jedoch geht das nicht immer und hierfür finde ich Plattformen wie diese äußerst ansprechend. Jedoch finde ich es schade, dass man von jedem Posting (oft) pauschal davon ausgeht, dass es sich um einen "faulen Programmierer" handelt.

      Jeder "Programmier" der nicht hochgradig "faul" ist, ist ein schlechter Programmierer :p die faulheit sollte sich aber darauf beschänken, sich nicht selbst zu wiederholen. Und natürlich sollte man ein gewisses Grundmaß an Höflichkeit mitbringen und wissen, dass auch andere Programmierer naturgemäß faul sind und nicht sicher nicht umsonst arbeiten werden.

      Und wenn man vergisst eine Angabe zur Lösungsfindung patzig angesprochen und teilweise beleidigt wird.

      Meine erste Antwort war sachlich und höflich - auch die von EKKi war ebenfalls fundiert und nicht patzig oder beleidigend.

      Anstatt dich mit den Ratschägen auseinanderzusetzen ballerst du einfach mal deinen (unvollständigen) Quelltext hin und gedenkst nichtmal zu erwähnen, dass du bereits versucht hast, mit Entwicklungswerkzeugen zu arbeiten und das dein eigentliches Problem ist.

      Sollte ich jemanden auf dem Slips getreten sein, was nach dem Aufschaukel passieren konnte, möchte ich mich herzlich dafür entschuldigen.4

      Du trittst dir höchstens selbst auf den Schlips wenn du Hilfe benötigst und keine relevanten Informationen rausrückst oder dich mit den Antworten beschäftigst.

      Du sagst selbst, dass du selbst auf die Lösung kommen willst - was soll man denn noch machen, außer dir dir exakte Antwort zu geben?

      Ich habe seit meinem ersten Posting ohne Pause weiter nach dem Fehler gesucht und getestet und konnte das Problem nun doch selber lösen.

      Und was war es? Lässt du uns dumm sterben, lagen wir richtig oder doch vielleicht falsch?

      P.S.: Ich biete keine Dienstleistungen in Bereich Web-Design an.

      Ich hab' mich auch gefragt, wo das herkommt.

      1. Ich hab' mich auch gefragt, wo das herkommt.

        Der Chris hat sich Hauis E-Mail-Adresse genauer angeschaut und so auf seine Seite gefunden. Dort schreibt Haui von seiner 10-jährigen Erfahrung im Webdesign. Kann schon so rüber kommen als ob er da Dienstleistungen anbieten würde.

        Gruss