Ergebnis 1 bis 10 von 10

Thema: Margin-Top funktioniert nicht

  1. #1
    Großmeister(in) Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Margin-Top funktioniert nicht

    Hallo liebe Foren Helfer,

    ich versuche ein Status Image mit margin-left und margin-top in einem Rahmen an die richtigen Positionen zu bringen. Mit Margin-left klappt es wie man im Bild sieht, jedoch nicht mit Margin-top. Hier wird aus welchen Gründen auch immer über dem überelement der Statusfüllung der Abstand eingebaut, was ja eigentlich nicht sein kann:



    HTML:
    HTML-Code:
    <div class="wrapper">
        <div class="header">
        <img src="img/header.png" alt="..." />
        </div>
        
        <div class="status">
            <div class="statusbar">
            </div>
        </div>
    </div>
    Und die CSS:
    HTML-Code:
    .wrapper
    {
        border:1px solid #A0A0A0;
        background-color:#F5F5F5;
        margin:auto;
        width:500px;
        margin-top:10px;
    }
    .status
    {
        background-image:url(../img/statusbar.png);
        border-bottom:1px solid #A8A8A8;
        width:500px;
        height:70px;
    }
    .statusbar
    {
        background-image:url(../img/statusbarfuellung.png);
        height:47px;
        width:100px;
        margin-left:11px;
        margin-top:12px;
        
    }
    Danke!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    -

  2. #2
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Margin-Top funktioniert nicht

    Innerhalb eines Containers gehört auch ein Padding hin und kein margin. Mit dem Aufbau
    <div>
    <div>
    </div>
    </div>
    verschiebt margin-top beim 2ten immer noch beide. Fals du ein background-image verwendest und du eigtl kein padding gebrauchen kannst gibt es 2 Lösungswege:

    1. ein extra div drumrum für den padding oder
    2. die background-position ändern & den repeat entsprechend anpassen. (was wohl sauberer ist)

  3. #3
    Großmeister(in)
    Themenstarter
    Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Margin-Top funktioniert nicht

    Zitat Zitat von Grevas Beitrag anzeigen
    Innerhalb eines Containers gehört auch ein Padding hin und kein margin.
    Ist das vom W3C mal beschlossen worden bzw. gibt es dafür einen Grund? Die Regelung ist mir neu...

    Zitat Zitat von Grevas Beitrag anzeigen
    Mit dem Aufbau
    <div>
    <div>
    </div>
    </div>
    verschiebt margin-top beim 2ten immer noch beide.
    Wenn das umfassende Div kleiner ist, kann ich mir das auch vorstellen, jedoch ist in meinem Fall das Statusfeld, wo die Füllung rein soll doch deutlich größer. Daher sollte doch eigentlich, auch wenn das innere Div verschoben wird noch genug Höhe vorhanden sein...

    Zitat Zitat von Grevas Beitrag anzeigen
    Fals du ein background-image verwendest und du eigtl kein padding gebrauchen kannst gibt es 2 Lösungswege:

    1. ein extra div drumrum für den padding oder
    2. die background-position ändern & den repeat entsprechend anpassen. (was wohl sauberer ist)
    Danke ich werde mir [2.] mal ansehen. Wäre jedoch schön, wenn du mir obere Fragen beantwortest, damit ich auch verstehe warum
    -

  4. #4
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Margin-Top funktioniert nicht

    Ehrlichgesagt verstehe ich den Grund auch nicht. Hatte das Problem auch mal und konnts nicht nachvollziehen.

    Hab mir dann eine kleine Testseite gemacht, nur eben mit dem Inhalt (um andere Fehlerursachen auszuschließen).
    Ich wollte innerhalb eines <div>'s 2 Bilder (per <img>) reinmachen, mit float:left; - das 2te wollte ich weiter unten haben - aber der margin-top hat mir dann den main-container verschoben warum auch immer...

  5. #5
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Margin-Top funktioniert nicht

    Mal nachdenken. Wenn man es nicht von oben drücken kann, zieht man es von unten!
    Code:
    margin-bottom: -10px;
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  6. #6
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Margin-Top funktioniert nicht

    Das ist immernoch keine Erklärung.

    Funktionieren tuts auch nicht :P selbst erstmal nachdenken Tobse...


    Die Erklärung hab ich jetzt mal rausgefunden - es liegt daran, dass #status keinen Inhalt hat - schreibt man irgendwas rein - wie z.B. &nbsp; funktioniert es wie man es erwartet , ist echt lange her, dass ich dieses Experiment gemacht hab *g* (sprich: kA was ich da fürn verwurschtelten quark versucht hab)

  7. #7
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Margin-Top funktioniert nicht

    @Grevas:
    Ohhh, es funktioniert wunderbar, bei mir zumindest....
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  8. #8
    Großmeister(in)
    Themenstarter
    Avatar von Darkxor
    Registriert seit
    17.11.2007
    Ort
    NRW
    Beiträge
    663
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Margin-Top funktioniert nicht

    Irgendwie strange dann hätte zumindest das margin-left auch nicht gehen sollen

    Danke!
    -

  9. #9
    König(in) Avatar von Grevas
    Registriert seit
    20.04.2009
    Ort
    In meiner Wohnung.
    Alter
    30
    Beiträge
    1.039
    Danke
    0
    Bekam 5 mal "Danke" in 5 Postings

    Standard AW: Margin-Top funktioniert nicht

    Tobse, ich hab den Code von Darkxor genommen und die images mit nem color ersetzt, es ging nicht. Entweder du hast es selbst in etwa so nachgebaut oder du willst mich veräppeln


    Komisch ist es schon, ja. Aber das ist ja nichts neues - imo ist HTML noch nicht fertig entwickelt *g* (allein schon die Tatsache, das dynamische/flüssige Layouts fast nicht ohne Tables auskommen leitet mich zu dieser Aussage - oder kennt jemand eine CSS Methode wie man feste Pixelwerte und Prozentangaben ohne Tables vermischt und dabei immer noch auf 100% Breite kommt? Ich nicht...)

  10. #10
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: Margin-Top funktioniert nicht

    Ich hatte das Problem auch. Hier ein beispiel: klick mich! und wird hier eingesetzt. Da ist oft negatives margin/padding drin und es ist mein werk...
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

Ähnliche Themen

  1. Antworten: 6
    Letzter Beitrag: 12.09.2009, 21:02
  2. DNS funktioniert nicht!
    Von incendium im Forum Webhoster - Provider - (free) Webspace - Server - Domain
    Antworten: 4
    Letzter Beitrag: 29.03.2008, 12:02
  3. GIF funktioniert in IE nicht
    Von arnim im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 28.06.2007, 20:57
  4. dtd und css in php funktioniert im IE nicht!!!
    Von im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 09.06.2007, 16:33
  5. Funktioniert nicht…
    Von SlimShady im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 25.12.2005, 23:43

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •