luder: doch nicht so die beste idee? (position:absolute)

hallo,
ich bastelle z.zt. an einer homepage und stehe vor einem problem was wohl den weiter bau der homepage komplett lahmlegt.
das problem ist folgendes:
die seite wird in einem popup geöffnet (nicht hauen!) und funktioniert dort wunderbar, ebenfalls da wo mein problem entsteht.
ich habe eine gallery erstellt wo viele verschieden große bilder (vorallem in der höhe!) angezeigt werden. die sind "durchgemischt" und werden im fenster betrieb auch sehr schön und korrekt wie sie es sollen angezeigt.
öffne ich aber die seite mit normaler auflösung werden die bilder aus der seite "rausgerissen".

ich zeige einfach mal den code:

<style type="text/css">
  * {
   margin: 0px;
   padding: 0px;
  }
  body {
   background-color:#e2d9c1;
  }
  #content {
   text-align:left;
  }
  #header, #inhalt, #footer, #navi {
   width:1000px;
   text-align:left;
   margin-left:auto;
   margin-right:auto;
  }
  #inhalt {
   width:900px;
   height:820px;
   padding:50px;
   padding-top:10px;
   padding-bottom:10px;
   background-image:url(grafik/02.jpg);
   font-family:Verdana,Arial,Helvetica,sans-serif;
   font-size:11px;
   color: #000000;
  }
  #navi {
   width:900px;
   padding:50px;
   padding-top:10px;
   padding-bottom:10px;
   background-image:url(grafik/02.jpg);
   font-family:Verdana,Arial,Helvetica,sans-serif;
   font-size:11px;
   color: #000000;
  }
  #impressum {
   text-align:center;
  }
 </style>

[...]

<div id="inhalt">
  <div style="position:absolute; top:350px; left:70px;">text<br>
  <img border="1" src="grafik/grafik.jpg" alt=""></div>
 </div>

nun meine frage. kann man die ausrichtung der bilder irgendwie auf die mitte, also "center" auslegen und nicht per browser rand?
oder, die ausrichtung an das "<div id="inhalt">"?
wenn das nicht möglich ist, welche möglichkeiten gibt es sonst?
ich möchte den besuchern der seite die option anbieten die seite im fenster aufzurufen, oder im selben fenster wie die index.html, wegen popup blockern und leuten die tatsächlich kein javascript installiert haben.

  1. Hi,

    Vielen Dank für Deinen Lösungsansatz, der recht gut angedacht wohl nicht nur mir erscheint. Leider war er, mir persönlich, schon ZU kompliziert, jedenfalls zum auf die Schnelle Nachvollziehen. Liegt allein an MEINER Geduld. Es soll nicht missverstanden werden als "Ich hab' Deinen Thread nicht gelesen, und geb Dir trotzdem mal ne Antwort.Ich pick' mir im folgenden mal einen Teil Deiner Problemstellung auf:

    1. Kann man die Ausrichtung der Bilder auf die Mitte, also "center" auslegen? Welche möglichkeiten gibt es?
    2. Ich möchte die Option anbieten die Seite in einem separaten Popupfenster aufzurufen, oder aber in demselben Fenster wie die index.html. Dies wg.Popup-Bblockern und Leuten, die JS teilweise/temporär deaktiviert haben.

    Ad 1:
    ------------------------------------------------------------------------
     CSS
        .h552 { height:552px; min-height:552px; max-height:552px }
        .w850 { width :850px; min-width :850px; max-width :850px }

    #zentriert {
          /*position:absolute;*/
          position:relative;
          top:50%;
          left:50%;
          width :850px; min-width :850px; max-width :850px;
          height:555px; min-height:555px; max-height:555px;
          margin-left:-425px;
          margin-top:-277px;
         }

    und dann 'im' HTML:

    <body>

    <div id="zentriert" style="vertical-align:middle;" align="center" valign="middle">

    <!-- AB JETZT IST ALLES ZENTRIERT: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

    <div class="w850 h552">

    Bilder, Fliesstext, andere DIVs, usw. usw ...

    </div></div></body>

    -----------------------------------------------------------------
    Soweit der Kern der Sache, m.E. Trotzdem noch EVTL. nötig in CSS:

    * { margin:0px; padding:0px;border:0px;
         background-color:transparent;
         overflow:hidden;
         vertical-align:top;
         text-align:left;
         }
     html   { height       : 100%  }
     body   { min-height   : 101%;
              font-size    : 100.01%;
              position     : relative;
              color        : #fff;
              background   : #000;
              text-align   : left;
              border       : 0px solid #000000;
              }

    td,div,img {
        margin:0px; padding:0px; border:0px; overflow:hidden;
        vertical-align:top; text-align:left;
        }

    Ad 2:
    ---------------
    OK, mit Dank zu den Akten.

    Wäre schön, wenn Du das mal testen könntest, was ich da fabriziert habe. Wenn's
    geklapppt hat wäre Deine fertige Lösung hier interessant, m.E. Also bitte, sag' ich mal jetzt, so. Das Ganze als Gedankenanstoß, mit der Hoffnung, nichts mißverstanden, Dich nicht sinnentstellt zitiert, und all' DIE Teile aus meiner "index.html" gepAsted zu haben, die ein ähnliches Problem HIER gelöst haben.

    Best regards
    Christian

    1. Hi,

      Vielen Dank für Deinen Lösungsansatz, der recht gut angedacht wohl nicht nur mir erscheint. Leider war er, mir persönlich, schon ZU kompliziert, jedenfalls zum auf die Schnelle Nachvollziehen. Liegt allein an MEINER Geduld. Es soll nicht missverstanden werden als "Ich hab' Deinen Thread nicht gelesen, und geb Dir trotzdem mal ne Antwort.Ich pick' mir im folgenden mal einen Teil Deiner Problemstellung auf:

      1. Kann man die Ausrichtung der Bilder auf die Mitte, also "center" auslegen? Welche möglichkeiten gibt es?
      2. Ich möchte die Option anbieten die Seite in einem separaten Popupfenster aufzurufen, oder aber in demselben Fenster wie die index.html. Dies wg.Popup-Bblockern und Leuten, die JS teilweise/temporär deaktiviert haben.

      »»
      »»

      Ad 2:

      OK, mit Dank zu den Akten.

      Wäre schön, wenn Du das mal testen könntest, was ich da fabriziert habe. Wenn's
      geklapppt hat wäre Deine fertige Lösung hier interessant, m.E. Also bitte, sag' ich mal jetzt, so. Das Ganze als Gedankenanstoß, mit der Hoffnung, nichts mißverstanden, Dich nicht sinnentstellt zitiert, und all' DIE Teile aus meiner "index.html" gepAsted zu haben, die ein ähnliches Problem HIER gelöst haben.

      Best regards
      Christian

      hallo,

      erstmal danke, aber...
      ich habe grad deinen lösungsvorschlag probiert und kam damit auch nicht weiter, zwar ist der text nun auf der seite zentriert, ohne das ich ihn mit <center> dazu zwinge, aber die bilder bleiben trotzdem am linken bildrand kleben.
      am schönsten wäre es, wenn die bilder die position zum div rand nutzen würden.
      ein versuch mit % war auch nicht erfolgreich.
      ich poste jetzt einfachmal die url zu dem problemfall:
      http://sergeant-peppers.de/impressionen.html
      bei einer auflösung über 1024*768 werden die bilder nicht mehr im style angezeigt. ich bin langsam mit meinem latein am ende.

      ich wäre um jeden lösungs vorschlag dankbar...

      1. wonderful, just a moment, have to kill that beast ..., könnte dauern, ich hoffe ca. 1h, aber nicht fest versprochen, OK? Also ich werde mich bemühen.

        1. wonderful, just a moment, have to kill that beast ..., könnte dauern, ich hoffe ca. 1h, aber nicht fest versprochen, OK? Also ich werde mich bemühen.

          das kann ich verkraften seit dem ich mich seit über einer woche damit rum ärgere ;)

          1. @@luder:

            das kann ich verkraften seit dem ich mich seit über einer woche damit rum ärgere ;)

            „da mit“ schreibt sich auseinander: „da mit Rum ärgere“.

            Live long and prosper,
            Gunnar

            --
            „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
            1. @@luder:

              das kann ich verkraften seit dem ich mich seit über einer woche damit rum ärgere ;)

              „da mit“ schreibt sich auseinander: „da mit Rum ärgere“.

              Live long and prosper,
              Gunnar

              Darf ich ergänzen? Z.B. Damit ich mich da mit Rum rumärgere?

              Nicht falsch versteh'n. Fand's ganz witzig. By the way, klappt der Link schon?

              1. By the way, klappt der Link schon?

                jupp, klappt, gespeichert, etwas umgeschrieben und für gut befunden!
                vielen dank nochmal!

        2. wonderful, just a moment, have to kill that beast ..., könnte dauern, ich hoffe ca. 1h, aber nicht fest versprochen, OK? Also ich werde mich bemühen.

          OK, danke für Geduld, folgender Link temporär gesetzt:
          www.zinux.de/selfhtml/DrPepper/index.html...
          Klappt der Link schon?

          Wie Du sagtest, absolute Positionierung war vielleicht nicht so nötig, m.E.
          Trotzdem bitte folgendes: Löst DAS Dein Problem? Zumindest im Prinzip? Oder brauchst Du eine noch generischere Lösung?

          Bitte teste mal an, und laß' von Dir lesen. Weil wir beide jetzt schon "Müll" produziert haben. Unsere Links, Bilder usw. helfen niemandem, der unsere Lösung  demnächst im Archiv findet, wenn die URLs nicht mehr stimmen.

          Und: Evtl noch "Clearing" nötig.

          Best regards
          Christian

          P.S.: Uffffffffphhht ...

          1. so, ich habe es ausprobiert, läuft wunderbar.
            hier die funktionierende variante:
            http://www.sergeant-peppers.de/impressionen.html
            und hier die alte:
            http://www.sergeant-peppers.de/impressionen-alt.html
            ich lasse die *-alt.html oben damit jeder sehen kann was das problem war und was die lösung für eben dieses ist.

            ich danke die recht herzlich endlich kann ich weiter arbeiten und die seite fertig stellen.

            1. so, ich habe es ausprobiert, läuft wunderbar.
              hier die funktionierende variante:
              http://www.sergeant-peppers.de/impressionen.html
              und hier die alte:
              http://www.sergeant-peppers.de/impressionen-alt.html
              ich lasse die *-alt.html oben damit jeder sehen kann was das problem war und was die lösung für eben dieses ist.

              ich danke die recht herzlich endlich kann ich weiter arbeiten und die seite fertig stellen.

              Das ist schön. Wirklich: Sehr sehr schön. Trotzdem, könnte mal einer noch wg. dem "Clear:left" kucken, weil ob das alles auch so im IE klappt?

              Also kann ich ja MEIN DrPepperDog wieder löschen, und das werd ich denn irgendwann wohl mal tun. Morgen vielleicht. So, muss jetzt aber.., und Danke für Deinen freundlichen Dank!

              Trotzdem: Eine Antwort gebiert neue Fragen: Ist nach einem "Float:left" i.d.R. ein "Clear:left" anzuraten. Insbesondere hier? Also ich weiss es jetzt einfach nicht, und wenn das dann auch noch jd. g'rade eben mal?

              Best regards
              Christian

              1. so, ich habe es ausprobiert, läuft wunderbar.
                hier die funktionierende variante:
                http://www.sergeant-peppers.de/impressionen.html
                und hier die alte:
                http://www.sergeant-peppers.de/impressionen-alt.html
                ich lasse die *-alt.html oben damit jeder sehen kann was das problem war und was die lösung für eben dieses ist.

                ich danke die recht herzlich endlich kann ich weiter arbeiten und die seite fertig stellen.

                Das ist schön. Wirklich: Sehr sehr schön. Trotzdem, könnte mal einer noch wg. dem "Clear:left" kucken, weil ob das alles auch so im IE klappt?

                Also kann ich ja MEIN DrPepperDog wieder löschen, und das werd ich denn irgendwann wohl mal tun. Morgen vielleicht. So, muss jetzt aber.., und Danke für Deinen freundlichen Dank!

                Trotzdem: Eine Antwort gebiert neue Fragen: Ist nach einem "Float:left" i.d.R. ein "Clear:left" anzuraten. Insbesondere hier? Also ich weiss es jetzt einfach nicht, und wenn das dann auch noch jd. g'rade eben mal?

                Best regards
                Christian

                der i.e. hatte am anfang probleme durch:

                }
                        .h4img{
                            width:100%; text-align:center;background:red;
                            display:block;
                            background:yellow
                        }

                das width:100%; hatte er irgendwie anders berechnet als es der opera tat. als ich es löschte funktionierte es dann endlich und es wurde alles korrekt angezeigt.

              2. so, ... ausprobiert, läuft wunderbar.
                ...die jetzt [ besser, noch nicht perfekt!!! ] funktionierende Variante:
                http://www.sergeant-peppers.de/impressionen.html

                todo4me [#1]: muss ich nochmal ran..., ändert sich noch ständig dort die URL,aber die Zeit;-(((, und macht aber Spaß dort...(-_-)

                ich danke dir, ... endlich...

                DAS IST SCHÖN... Trotzdem, könnte mal einer noch wg. dem "Clear:left" kucken, weil ob das alles auch so im IE klappt?

                NICHT JETZT! todo? Sorry, but.. [#1] not yet done, wie gesagt, die Zeit. Und die verdammten Smileys auch noch lernen ein todooooooo-hu-hu-uuuuh....;-((

                Also kann ich ja MEIN DrPepperDog wieder löschen, und das werd ich denn irgendwann wohl mal tun. Morgen vielleicht.

                Neee, doch noch nicht gelöscht, Ergänzung: In oben skizzierter Lösung ist noch der Attributselektor und der Attributwert für height in #inhalt{...}auszukommentieren. Nein, nicht erklären, ich muss kucken, wie link...

                Aber jetzt so long wiedermal, tschüs;-)............O O O o o ooo..`@_SchneckenZill,abdampfend? .oO .oO .oO? ( Ja, danke. Nein, es ging. )