Ophelia: Meine Elemente wollen nicht so wie ich -__-"

Hallo zusammen.

Ich habe ein Problem, meinem ersten HTML/CSS Projekt. Ich fuchse mich gerade so in die Materie hinein und da wollen aber zwei meiner Boxen, nicht so wie ich. Was ich auch tue, ich komme nich dahinter.

Der HTML Ausschnitt:

  
<div id="hauptboxrahmen">  
  <div id="hauptbox">  
    <div id="textbox">  
      TEXT  
    </div>  
  </div>  
</div>

Und betreffende Teil der CSS:

  
#hauptbox  
{  
width : 1000px;  
height : 600px;  
margin-left : 60px;  
margin-top : 100px;  
background-image:url(bg.jpg);  
background-repeat: no-repeat;  
}  
  
#hauptboxrahmen  
{  
width : 1120px;  
height : 780px;  
top : 0px;  
left : 50px;  
background-image:url(AVENIDAwall2_157.gif);  
background-repeat:repeat;  

Das Problem ist, dass die Hauptbox sich immer mit verschiebt. Egal was ich mach, ich krieg keinen Abstand zwischen der oberen Kante der ersten und der zweiten box hin.
Ich hoffe mir kann jemang helfen und ich habe nicht all zu großen Müll verzapft xD

  1. Ich hoffe mir kann jemang helfen und ich habe nicht all zu großen Müll verzapft xD

    ich denke du hast noch nicht realisiert, dass es die elemente <html> und <body> gibt, die man auch wunderbar formatieren kann

    top : 0px;
    left : 50px;
    hat nur effekt, wenn das element positioniert wurde (absolute, fixed oder relative)

    wenn du das ganze als visuelles beispiel liefern kannst ("design") und ggf deinen bisherigen fortschritt online stellen kannst, wirds mit dem helfen leichter - ggf ist dein ansatz einfach nur ungeschickt

  2. Der HTML Ausschnitt:

    <div id="hauptboxrahmen">
      <div id="hauptbox">
        <div id="textbox">
          TEXT
        </div>
      </div>
    </div>

      
    1\. eine Div-Suppe ist nicht viel besser als ein Tabellenlayout. Nutze passende Elemente, dann brauchst du evtl. nichtmal IDs  
    2\. Du schreibst kein Wort über das verwendete Betriebessystem und den Browser. Sollten wir es jetzt in allen Browsern testen, ob evtl. das Gleiche passioert, wie bei dir?  
    3\. ein Link zum Ansehen wäre schön, da du nur einen Ausschnitt aus deinem HTML angibst, der Rest der Seite aber ebenfalls Auswirkungen auf die Darstellung haben kann.
    
    1. http://www.harajuku-compliments.com/erste.htm

      da das beispiel...
      Mit absolute habe ich schon gearbeitet, für das Logo usw.

      Relative hats nich gebracht und da es so wie ich es bisher gemacht habe, dem am nächsten kam, wie ich es mir vorstelle, habe ich es so belassen und dachte das der Fehler vielleicth ganz simple ist.

      Momentan teste ich auf Firefox 2.0.0.17
      Mein Betriebssystem ist Win XP Pro, Service Pack 2...

      1. Momentan teste ich auf Firefox 2.0.0.17

        Dann vestehe ich niocht, wieso dir die Ausgaben in der Fehlerkonsole entgangen sind:

        ------------------------------------------
        Warnung: Selektor erwartet.  Regelsatz wegen ungültigem Selektor ignoriert.
        Quelldatei: http://www.harajuku-compliments.com/erste.htm
        Zeile: 7

        Warnung: Unerwartetes Dateiende beim Suchen nach 'Schließendes } eines ungültigen Regelsatzes'.
        Quelldatei: http://www.harajuku-compliments.com/erste.htm
        Zeile: 10

        Warnung: Unbekannte Eigenschaft 'marging'.  Deklaration ignoriert.
        Quelldatei: http://www.harajuku-compliments.com/stylesheet.css
        Zeile: 31

        Warnung: Deklaration erwartet, aber ':' gefunden.  Übersprungen bis zur nächsten Deklaration
        Quelldatei: http://www.harajuku-compliments.com/stylesheet.css
        Zeile: 36
        -------------------------------------------

        Wenn dein Code nicht fehlerfrei ist, wie soll er dann korrekt arbeiten?

        1. Warnung: Selektor erwartet.  Regelsatz wegen ungültigem Selektor ignoriert.
          Quelldatei: http://www.harajuku-compliments.com/erste.htm
          Zeile: 7

          Warnung: Unerwartetes Dateiende beim Suchen nach 'Schließendes } eines ungültigen Regelsatzes'.
          Quelldatei: http://www.harajuku-compliments.com/erste.htm
          Zeile: 10

          Warnung: Unbekannte Eigenschaft 'marging'.  Deklaration ignoriert.
          Quelldatei: http://www.harajuku-compliments.com/stylesheet.css
          Zeile: 31

          Warnung: Deklaration erwartet, aber ':' gefunden.  Übersprungen bis zur nächsten Deklaration
          Quelldatei: http://www.harajuku-compliments.com/stylesheet.css
          Zeile: 36

          Wenn dein Code nicht fehlerfrei ist, wie soll er dann korrekt arbeiten?

          Stimmt wohl. Fehler 1 und 3 konnte ich beheben, aber der rest ist ein von dreamweaver erstelltes java script für nen mouseovereffekt. Ich habe das also erstmal wieder rausgenommen.

          Darf ich fragen, dur was du dir diese fehlermeldungen anzeigen lässt?

          1. Stimmt wohl. Fehler 1 und 3 konnte ich beheben, aber der rest ist ein von dreamweaver erstelltes java script für nen mouseovereffekt. Ich habe das also erstmal wieder rausgenommen.

            a) wenn du dreamweaver verwendest, verwende niemals die wysiwyg-ansicht oder verwende niemals die quelltextansicht - noch besser, verwende dreamweaver nicht, nutze einen ordentlichen texteditor

            b) verwende css für rollover-effekte anstatt irgendwelcher vorgefertigter, noch dazu schlechter, javascripte mit MM_präfix (Zitat #1299)

            Darf ich fragen, dur was du dir diese fehlermeldungen anzeigen lässt?

            ich vermute er verwendet die fehlerkonsole von firefox - alternativ hilft  dir sicher der "web developer toolbar" (eine firefox-extension)

            1. Stimmt wohl. Fehler 1 und 3 konnte ich beheben, aber der rest ist ein von dreamweaver erstelltes java script für nen mouseovereffekt. Ich habe das also erstmal wieder rausgenommen.

              a) wenn du dreamweaver verwendest, verwende niemals die wysiwyg-ansicht oder verwende niemals die quelltextansicht - noch besser, verwende dreamweaver nicht, nutze einen ordentlichen texteditor

              b) verwende css für rollover-effekte anstatt irgendwelcher vorgefertigter, noch dazu schlechter, javascripte mit MM_präfix (Zitat #1299)

              Darf ich fragen, dur was du dir diese fehlermeldungen anzeigen lässt?
              ich vermute er verwendet die fehlerkonsole von firefox - alternativ hilft  dir sicher der "web developer toolbar" (eine firefox-extension)

              Okay...
              Die extension habe ich mir runtergeladen und das scrip ist nun fehlerfrei. Das die vorgefertigten von dreamweaver nix taugen, habe ich nun auch festgestellt, aber nunja. Für ansichten lasse ich mir das erstmal vom firefox lokal darstellen.
              Aber das ursprünglich genannte problem habe ich nun immernoch. Kann jemand vielleicht mal in den code reinschauen und mir sagen, wie ich das vielleicht besser schreiben könnte.
              Ich geb zu ich bin noch nicht 100%ig mit allen angaben vertraut, aber ich kann halt auhc nur zusamenfassungen lesen, was für was gut ist und ausprobieren.

              1. Aber das ursprünglich genannte problem habe ich nun immernoch.

                das problem behebst du vermutlich, in dem du diesem hinweis nachgehst

                Kann jemand vielleicht mal in den code reinschauen und mir sagen, wie ich das vielleicht besser schreiben könnte.

                entferne dinge wie '<font face="Verdana, Arial, Helvetica, sans-serif">' für solche sachen ist css zuständig und nutze entsprechendes markup dafür

                überschriften, listen, tabellen, absätze - du hast momentan nur absätze, sonst nix

                für dein menü nutze eine <http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=listenbasierende navigation> - wie du den rollover-effekt mit css machst, hab ich dir bereits gezeigt

                entferne das onload aus dem body-element sowie die farbangabe (die gehört auch ins css-file)

                rücke deinen code sauber ein (jede unterebene mit einem vorangestellten tabulator oder einen festen anzahl an leerzeiche, wobei tabulatoren imho besser sind, da sich jeder die tabbreite selst einstellen kann)

                <html>  
                  <head>  
                    <title />  
                  </head>  
                  <body />  
                </html>
                

                ersetzte

                <div id="logo"><img src="logo.png" alt="Logo" width="460" height="161" border="0"></div>

                durch ein <h1>Ophelia Art, Make-Up Design</h1> und nutze eine image-replacement-technik (gilder-levin oder phark)

                nutze &nbsp; nicht zur formatierung oder sonstiges sondern lediglich im korrekten sinn als geschütztes leerzeichen

              2. Hallo,

                Aber das ursprünglich genannte problem habe ich nun immernoch.

                Das Stichwort lautet immer noch Collapsing Margins.
                »(...) Dies gilt analog auch für verschachtelte Block-Level-Elemente. Wenn ein Element innerhalb seines Ahnenelements direkt an der oberen bzw. unteren Kante des Ahnenelements liegt und die Randabstände beider Elemente nicht durch padding oder border voneinander getrennt sind, dann fallen die aneinander grenzenden margin-Flächen zusammen.«
                -> Gib dem äußeren Element border-top oder padding-top. 1px reicht. Bei border die Farbe natürlich so wählen, dass die border nicht als solche erkennbar ist.

                Mathias

          2. Darf ich fragen, dur was du dir diese fehlermeldungen anzeigen lässt?

            Mit dem Tool, was eigentlich jeder Webentwickler installiert hat:

            Web Developer Toolbar 1.1.6

            Ansonsten empfehle ich zusätzlich Firebug, Console2 und, falls Bedarf, die XML Developer Toolbar.

  3. Hi,

    Ich habe ein Problem, meinem ersten HTML/CSS Projekt. Ich fuchse mich gerade so in die Materie hinein und da wollen aber zwei meiner Boxen, nicht so wie ich. Was ich auch tue, ich komme nich dahinter.

    Stichwort: collapsing margins

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.