aziloni: Bildposition

Man soll ja auch mal die Anderen fragen....

Deshalb bin ich jetzt hier eingestiegen. Also Hallo und Grüße in die Runde...
Mein Kenntnisstand : Leicht fortgeschrittener Anfänger.
Nur damit die Schläge bitte etwas dosiert werden :D

Mein Problem:
Ich möchte einen Container mit Bild einfügen, so daß er direkt am oberen Bildrand "klebt". Und mit float:left oben bleibt, aber verschiebbar ist, wenn was dazukommt. Wie auf der Gardinenstange :-)

In IE und Mozilla ok, in Opera hängt es 8px darunter. Da kann ich  mit margin-top:0px etc. operieren, wie ich will. Das ist doch aber ein gültiger CSS-Befehl?

Zwei Erklärungen noch:

  • Ich habe, wie sichs gehört, ca. eine Stunde im Archiv und auch so noch ein bissel gesucht, aber genau dazu nix gefunden. Ja freilich, ich kann auch was überblättert haben. Sicher sogar :-(
  • Mit Quelltext werfen wollt ich nicht gleich, liegt aber bereit.

Bitte um Frustabbau,
Aziloni.

  1. Hallo aziloni.

    In IE und Mozilla ok, in Opera hängt es 8px darunter. Da kann ich  mit margin-top:0px etc. operieren, wie ich will. Das ist doch aber ein gültiger CSS-Befehl?

    Nö. In CSS gibt es keine Befehle, nur Selektoren, Regeln, Regelsätze, Eigenschaften und Werte.

    Opera <= 9 setzt hier und da einen von 0 abweichenden Wert für padding.
    Setze dies für alle in Frage kommenden Elemente auf den entsprechenden Wert.

    (Meine persönliche allgemeine Vorgehensweise sieht wie folgt aus:

    * {  
      margin:0;  
      padding:0;  
    }
    

    Dies notiere ich am Anfang jeder meiner Stylesheets. Damit muss ich nicht mehr auf eventuell werksseitig gesetzte Abstände achten und kann meine eigenen nach Bedarf setzen.)

    Einen schönen Donnerstag noch.

    Gruß, Ashura

    --
    Last Tears Keep Calling
    See Angels Falling
    Black Shadows In Your Head
    And One Eye For The Dead
    1. Hallo Ingrid.

      Opera <= 9

      Recht sinnfrei.

      Natürlich meinte ich Opera < 9(TP1).

      Einen schönen Donnerstag noch.

      Gruß, Ashura

      --
      Last Tears Keep Calling
      See Angels Falling
      Black Shadows In Your Head
      And One Eye For The Dead
      1. Hab meinen Text aus Versehen oben reingehängt,
        sorry.

  2. In IE und Mozilla ok, in Opera hängt es 8px darunter. Da kann ich  mit margin-top:0px etc. operieren, wie ich will.

    aziloni,
    Wenn übergeordnete Elemente wie html und body im Browserdefault von 0 verschiedene Werte für margin/padding haben, ja. ;-)

    Das ist doch aber ein gültiger CSS-Befehl?

    Nein, es gibt in CSS keine „Befehle“; ist ja keine Programmiersprache.

    Live long and prosper,
    Gunnar

    --
    „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
  3. Hallo, Gunnar,
    hallo Ashura,

    Hui, das geht ja hier wie das oder so ähnlich, danke.

    Ist schon klar - no Befehle. Aber ich bin Elektroniker, da kann mir sogar das Wort Anweisungen mal rausrutschen :D
    Nee im Ernst, ich bin da zu lax, ok.

    Ich stell dann doch mal den QT rein, So wie er jetzt nach hundert Fehlversuchen aussieht. Eine Galerie, hierfür freilich gekürzt.

    ------------------------------
    .............
    <style type="text/css">
    body
      {
       background-image:url(shared/back_mh.jpg);
       background-repeat:repeat-x; margin-top:0px;
       }

    .holder
       {
       width: auto; height: 330px;
       padding-left: 10px; padding-right:10px;
       margin-left: 90px; margin-top:0px;
       position:relative; top:50px; float:left;
       background:darkred; color:gold;
       border-width:1px; border-style:solid; border-color:red;
       font-family:arial; font-weight:normal; font-size:18px;
       white-space:nowrap
       }

    .rgtpic
       {
       width: auto; height: auto;
       position:relative; top:0px; float:left;
       padding: 0px; margin:0px; margin-top:0px; margin-left: 90px;
       border-width:0px; border-style:none; border-color:transparent;
       }
    -->
    </style>
    </head>

    <body bgcolor="darkgreen" onload="self.focus();">

    <div class="holder" style="">
    <img src="shared/invisi1010.gif" alt="" height="5" width="100" border="0" /> <br>
    <a href="#zzz" onClick="window.open('gallery/01.html','XYZ','toolbar=no und so weiter etc. .....>
    <img src="gallery/m1_wueste1_001.jpg" alt="" height="180" width="176" border="0" />
    </a><br>
    Click &#9650;
    </div>

    <div class="rgtpic" style="">
    <img src="shared/monigal_rgt.jpg" alt="" height="445" width="498" border="0" />
    </div>

    <div class="holder" style="">
    <img src="shared/invisi1010.gif" alt="" height="5" width="100" border="0" /> <br>
    <a href="#zzz" onClick="window.open('gallery/02.html','XYZ','toolbar=no und so weiter etc. .....>
    <img src="gallery/m1_wueste3_001.jpg" alt="" height="180" width="166" border="0" />
    </a><br>
    Click &#9650;
    </div>
    ..............
    Da seht ihr auch, warum ich kein "absolute" nehmen kann.
    Ich hätt ja kein Problem, wenn sich das Hintergrund-Tile mit absenken würde...

    bg,
    aziloni.

    1. Hallöchen,

      Hui, das geht ja hier wie das oder so ähnlich, danke.

      hä? ;-)

      Ich stell dann doch mal den QT rein, So wie er jetzt nach hundert Fehlversuchen aussieht. Eine Galerie, hierfür freilich gekürzt.

      Juhuuuu! Endlich mal einer, der das Wort "Galerie" mit der richtigen Anzahl von 'l' schreiben kann!

      body
        {
         background-image:url(shared/back_mh.jpg);
         background-repeat:repeat-x; margin-top:0px;
         }

      So, da geht's doch schon los: An margin-top hast du gedacht, gut. Aber was ist mit padding (Innenabstand)? Den hast du nicht berücksichtigt, also gilt der Defaultwert des Browsers, also meistens ein Wert >0px.

      .holder
         {
         width: auto; height: 330px;
         padding-left: 10px; padding-right:10px;
         margin-left: 90px; margin-top:0px;
         position:relative; top:50px; float:left;
         background:darkred; color:gold;
         border-width:1px; border-style:solid; border-color:red;
         font-family:arial; font-weight:normal; font-size:18px;
         white-space:nowrap
         }

      Noch ein Kandidat. Als neutrales Blockelement hat ein div wahrscheinlich ein Default-padding und margin von 0 - aber willst du dich darauf verlassen?

      <body bgcolor="darkgreen" onload="self.focus();">

      Warum legst du die Hintergrundfarbe nicht auch mit CSS fest, was doch naheliegend wäre?

      <div class="holder" style="">

      Ein leeres style-Attribut? Das ist IMHO völlig zweckfrei. Zumal inline-Styles sowieso nicht gerade vorteilhaft sind. Du hast doch einen separaten style-Block weiter oben - also vergiss das zusätzliche style-Attribut!

      <img src="shared/invisi1010.gif" alt="" height="5" width="100" border="0" /> <br>

      Auch das border="0" kannst du im CSS regeln, zumal das der Defaultwert ist, den man also auch ganz weglassen könnte.

      <img src="shared/monigal_rgt.jpg" alt="" height="445" width="498" border="0" />

      Du verwendest XHTML? Sicher? Das br-Element sah nicht danach aus...
      So long,

      Martin

      --
      Ich wollt', ich wär ein Teppich. Dann könnte ich morgens liegenbleiben.
      1. <img src="shared/invisi1010.gif" alt="" height="5" width="100" border="0" /> <br>

        Auch das border="0" kannst du im CSS regeln, zumal das der Defaultwert ist, den man also auch ganz weglassen könnte.

        Martin,
        Eher nicht. Wo käme dann der blaue Rand bei <a href="foo"><img src="bar" alt="baz" /></a> her?

        Live long and prosper,
        Gunnar

        --
        „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
        1. Hallo Gunnar,

          <img src="shared/invisi1010.gif" alt="" height="5" width="100" border="0" /> <br>
          Auch das border="0" kannst du im CSS regeln, zumal das der Defaultwert ist, den man also auch ganz weglassen könnte.

          Eher nicht. Wo käme dann der blaue Rand bei <a href="foo"><img src="bar" alt="baz" /></a> her?

          der Einwand ist berechtigt, wenn das img-Element in einem Link steckt. Bei einem _nicht_ verlinkten img-Element, wie im obigen Beispiel, unterscheidet sich die Darstellung mit border="0" jedoch in keiner Weise von der Darstellung bei fehlendem border-Attribut. Bei dem blauen Rahmen muss es sich also um eine CSS-Regel im Default-Browserstylesheet handeln, die nicht auf img als Selektor angewendet wird, sondern auf a img. Jedenfalls hat img allein ohne weitere Festlegungen kein border.

          So long,

          Martin

          --
          Was ist wichtiger: Die Sonne oder der Mond?
          Der Mond. Denn er scheint nachts. Die Sonne dagegen scheint tagsüber, wenn es sowieso hell ist.
          1. der Einwand ist berechtigt, wenn das img-Element in einem Link steckt. Bei einem _nicht_ verlinkten img-Element, wie im obigen Beispiel, unterscheidet sich die Darstellung mit border="0" jedoch in keiner Weise von der Darstellung bei fehlendem border-Attribut.

            In der Tat, Martin.

            Bei dem blauen Rahmen muss es sich also um eine CSS-Regel im Default-Browserstylesheet handeln, die nicht auf img als Selektor angewendet wird, sondern auf a img.

            So kompliziert hatte ich gar nicht gedacht. Es ist aber noch komplizierter: im Firefox ist es jedenfalls a:link img.

            Live long and prosper,
            Gunnar

            --
            „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
            1. im Firefox ist es jedenfalls a:link img.

              Keinesfalls. Eher a[href] img. Oder a:link img, a:visited img, …

              Live long and prosper,
              Gun*Ingrid*nar

              --
              „Weisheit ist nicht das Ergebnis der Schulbildung, sondern des lebenslangen Versuchs, sie zu erwerben.“ (Albert Einstein)
      2. Hallo Martin,

        Juhuuuu! Endlich mal einer...

        Ja, ich brauch halt net dezent auf latente inglish-Kenntnisse hinweisen :D

        So, da geht's doch schon los: An margin-top hast du gedacht, gut. Aber was ist mit
        padding (Innenabstand)? Den hast du nicht berücksichtigt, also gilt der Defaultwert
        des Browsers, also meistens ein Wert >0px.

        Es kann doch nicht waaahhh sein !!!
        Aber es mußte ja so eine Schusselei bei mir sein!
        Natürlich ist default padding mal größer null, mal nicht.
        Aber solange die Browser nicht für User geschrieben werden, sondern um sich gegenseitig zu profilieren, wird man halt reinfallen mit sowas. Leider hab ich noch einen störenden Job und will dann schnell mal abends...nun ja.

        Margin:0px hatte ich allerdings schon mal drin, brachte aber nix, habs dann aus Schlankheitsgründen wieder rausgetan.

        Warum legst du die Hintergrundfarbe nicht auch mit CSS fest,
        was doch naheliegend wäre?

        Ja, solche Ausputzarbeiten müssen eh noch kommen. Historie halt. Genau wie das Style"", da hatt ich was getestet. <br> kommt auch noch dran. Sorry.

        zumal das der Defaultwert ist, den man also auch ganz weglassen könnte.

        Da hatte ich aber schon mal irgendwo Ärger damit. Muß ich nochmal dran...etwas später...

        --
        > Ich wollt', ich wär ein Teppich. Dann könnte ich morgens liegenbleiben.
        Oh, ja...
        Also, Martin, ein riesiges Dankeschön !
        Tschö in die Runde,
        der Aziloni.