Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 15 von 40
  1. #1
    Avatar von bine
    bine ist offline Lounge-Member
    registriert
    06-07-2002
    Ort
    Schleswig-Holstein
    Beiträge
    5.902

    zentrieren und positionieren

    Okay, da mach ich mal den Anfang.
    Ich möchte ja auch gern tabellenloses Webdesign ausprobieren.
    Hatte aber schon ein grundsätzliches Problem.

    Ein image in einem div, welches auf position top:125px sitzen soll, und gleichzeitig horizontal zentriert innerhalb des Browserfensters.

    zentrieren mit text-align:center war ja nicht das Problem
    Aber positon:absolute ging nicht damit zusammen es blieb dann immer links sowie ich position:absolute verwendete.

    Wie macht man es richtig?
    bine

  2. #2
    Avatar von Comet
    Comet ist offline Administrator
    registriert
    17-09-2001
    Ort
    Austria | Westendorf
    Beiträge
    2.182

    AW: zentrieren und positionieren

    hi bine,

    das mit position:absolute is so ne Sache, das div sitzt dann immer bei 0, 0 im Browser also ganz links oben.
    Die Kombination die du dir wünscht wollte ich auch schon manchmal anwenden hab es aber aufgegeben, da dies, glaub ich, nur in Kombination mit JS möglich ist, also mit JS die Mitte des Bildschirms bestimmen und dann demendsprechend positionieren.
    Korrigiert mich wenn ich falsch liege
    ..:::Andi:::..

  3. #3
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: zentrieren und positionieren

    Das geht schon, ist nur etwas sehr trickey.
    Man muß die genaue Bildgröße wissen.
    Davon ist es abhängig.
    Dann beginnt die Fummelei.
    Ist nämlich immer schwierig, absolute und relative Werte zu vermischen.
    Ich probiere das nachher mal.
    Ergebnis später am Tag...

  4. #4
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: zentrieren und positionieren

    Aaaaalso,
    habe jetzt intensiv probiert und es ist nicht einfach,
    vor allem wenn man die übrigen Daten nicht hat.
    Fakt ist: ich hab's nicht hingekriegt in der Zeit,
    die ich darauf verwendet habe.
    Doch dann fiel es mir wie Schuppen aus den Haaren.
    Man denkt einfach zu oft zu kompliziert.
    Lösungsvorschlag:
    Man macht erstmal eine Ebene über 100 Prozent Breite und 125 Pixeln Höhe.
    Diese Ebene ist unser "Abstandshalter".
    Darunter kommt eine Ebene, in die das Image reinkommt.
    Mit text-align:center natürlich.
    Und Voila, Bild mittig mit 125 Px Abstand von oben.
    Das macht insgesamt auch nur wirklich Sinn,
    wenn man sein ganzes Layout mit CSS macht.
    Tabellen nur zur Unterstützung, z.B. für Formulare etc., wenn überhaupt.
    Will man zusätzlichen Inhalt dazu tun, empfiehlt es sich,
    mit z-index zu arbeiten und sich an dem Image zu orientieren.
    In dem Fall müßten beide divs einen sehr niedrigen index haben,
    damit man andere divs mit einem höheren index drüber positionieren kann.
    Code:
    <html>
    <head>
    <title>bine</title>
    <style type="text/css">
    body
    {
      padding:0px;
      margin:0px;
    }
    div.abstandebene
    {
      width:100%;
      height:125px;
      z-index:0;
    }
    div.bildebene
    {
      width:100%;
      height:auto;
      position:absolute;
      text-align:center;
      z-index:0;
    }
    </style>
    </head>
    <body>
    <div class="abstandebene"></div>
    <div class="bildebene">
    <img src="demo.jpg" border="0" width="200px" height="200px">
    </div>
    </body>
    </html>

  5. #5
    Avatar von dipser
    dipser ist offline Lounge-Member
    registriert
    23-06-2002
    Ort
    Osnabrück
    Beiträge
    673

    AW: zentrieren und positionieren

    Vorweg, ich finde es relativ blöd Text/Bilder in die Mitte des Brausers zu bringen, aber gut, viele Musterer stehen drauf, Splashes in die Mitte zu bringen.

    Ich hatte vor ein paar Tagen hier dieses gepostet:
    http://forum.jswelt.de/showpost.php?...57&postcount=5

    Der Nachteil war, dass jemand sagt im Opera wird der Splash am unteren Rand angezeigt.

    Eine andere Möglichkeit für Bilder ist, das Bild als Hintergrund festzulegen und dieses dann zu positionieren.
    Code:
    background-image:url(image.png); 
    background-repeat:no-repeat;
    background-position:50% 50%;
    Tschau

  6. #6
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: zentrieren und positionieren

    @dipser:
    Deine Meinung in allen Ehren, aber das war ja nicht die Frage von bine.
    Sie will ja nix center/center haben.
    Und wenn das Pic ein Verweis sein soll, nutzt ihr Dein Tipp nix.

  7. #7
    Avatar von dipser
    dipser ist offline Lounge-Member
    registriert
    23-06-2002
    Ort
    Osnabrück
    Beiträge
    673

    AW: zentrieren und positionieren

    Ich habe es so verstanden, dass sie das bild zentriert unter dem ersten div haben möchte. Wenn dem der Fall sein sollte, sollte es schon helfen, was ich gepostet habe, ansonsten ignorier mich.

  8. #8
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: zentrieren und positionieren

    Zitat Zitat von bine
    Ein image in einem div, welches auf position top:125px sitzen soll, und gleichzeitig horizontal zentriert innerhalb des Browserfensters.
    @dipser:
    Ich kann Dich nicht ignorieren.
    Dazu sind Deine Beiträge viel zu interessant...

  9. #9
    Avatar von planet4
    planet4 ist offline Kaiser
    registriert
    06-06-2002
    Ort
    Regensburg
    Beiträge
    1.417

    AW: zentrieren und positionieren

    hallo,
    @dkadenz: dein Vorschlag mit dem 100% breiten div klappt ja, aber du brauchst die Abstandsebene nicht, wenn du diese bildebene noch positionierst:
    HTML-Code:
    div.bildebene{
    {
      width: 100%;
      height: auto;
      position: absolute;
      top: 125px;
      text-align: center;
      z-index: 0;
    }
    und dass es anders als mit solchen Tricks nicht funktionieren kann, is eigentlich logisch, wenn in css bei Positionierung die obere linke Ecke genommen wird... ...
    css muss noch verbessert werden

    planet4.

  10. #10
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: zentrieren und positionieren

    @planet4:
    Nee, geht nicht im NS und Mozilla.
    Zitat Zitat von planet4
    ...und dass es anders als mit solchen Tricks nicht funktionieren kann, is eigentlich logisch, wenn in css bei Positionierung die obere linke Ecke genommen wird...
    Die Aussage kann ich nun gar nicht nachvollziehen.
    Fängt es bei HTML unten-rechts an???
    Geändert von dkdenz (30-06-2004 um 14:11 Uhr)

  11. #11
    Avatar von Comet
    Comet ist offline Administrator
    registriert
    17-09-2001
    Ort
    Austria | Westendorf
    Beiträge
    2.182

    AW: zentrieren und positionieren

    Das is ja das tolle daran, da glaubt man man hats geschafft und dann sowas, ne du, ich bin noch immer bei tables, da kenn ich die Tücken der Browser.
    ..:::Andi:::..

  12. #12
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: zentrieren und positionieren

    @Comet:
    Dann probier mal die Vorgabe von bine,
    ohne Blindgifs und Styles zu nehmen...
    Geändert von dkdenz (30-06-2004 um 13:59 Uhr)

  13. #13
    Avatar von planet4
    planet4 ist offline Kaiser
    registriert
    06-06-2002
    Ort
    Regensburg
    Beiträge
    1.417

    AW: zentrieren und positionieren

    Zitat Zitat von dkdenz
    @planet4:
    Nee, geht nicht im NS und Mozilla.
    doch, muss ich dir wohl screenshot schicken, mein neuester Mozilla, siehe Anhang...
    der völlig unbegreifliche Trick dabei ist:
    schreibe ich:
    top: 125px; dann geht es, schreibe ich
    top: 125 px; also mit Leerzeichen, dann geht es nicht im NS und Mozilla,
    probier's mal, das Ergebnis würd mich interessieren

    ...und das mit dem "oben links": wenn ich in 'einfachem' html mit align="center"
    irgendein div oder Bild zentriere, dann sitzt es doch in der Mitte, oder? da ist also
    nicht der obere linke Punkt entscheidend...

    planet4.
    Angehängte Grafiken Angehängte Grafiken

  14. #14
    Avatar von dkdenz
    dkdenz ist offline Foren-Gott
    registriert
    13-04-2004
    Ort
    Lübeck
    Beiträge
    12.050

    AW: zentrieren und positionieren

    Aaaalso, bei IE 7.11, Firefox 0.8 und NS 7 geht da nix.
    Opera trau' ich mich erst gar nicht zu gucken.
    Im Übrigen schreibe ich immer ohne Leerzeichen.

    @planet4:
    Nachtrag:
    Muß mich berichtigen.
    Habe Dein Bsp. genommen und getestet:
    Opera 7.11 geht nicht.
    Moz 1.8a1 geht nicht.
    NS 7.0 geht nicht.
    Firefox 0.8 geht nicht.
    IE 6.0 geht.
    Geändert von dkdenz (30-06-2004 um 16:58 Uhr)

  15. #15
    Avatar von planet4
    planet4 ist offline Kaiser
    registriert
    06-06-2002
    Ort
    Regensburg
    Beiträge
    1.417

    AW: zentrieren und positionieren

    ...war jetzt nicht firefox so ungefähr dasselbe wie Mozilla? Moz. als Nur-Browser??
    also es geht bei mir im Mozilla 1.7, im Netscape 6.1, im Opera 7.11...
    ( Browserkompatibilitätsabchecken das hab ich ja so was von satt ...)

    planet4.

Seite 1 von 3 123 LetzteLetzte

Ähnliche Themen

  1. Tabelle zentrieren
    Von bine im Forum Allgemeines
    Antworten: 3
    Letzter Beitrag: 26-07-2004, 11:49
  2. webgallerie mit css positionieren
    Von jsgreenhorn im Forum Allgemeines
    Antworten: 13
    Letzter Beitrag: 09-12-2003, 13:04
  3. Antworten: 2
    Letzter Beitrag: 28-05-2003, 17:08
  4. seite zentrieren
    Von Kriegr im Forum Allgemeines
    Antworten: 5
    Letzter Beitrag: 25-04-2003, 23:29
  5. bild positionieren
    Von sanchez im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 17-02-2003, 11:21

Lesezeichen

Berechtigungen

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