Ergebnis 1 bis 10 von 10

Thema: Problem mit Centered Div (!)

  1. #1
    Suicide Clown
    Gast

    Ausrufezeichen Problem mit Centered Div (!)

    Hey,

    Ich redesigne gerade mein Portfolio, und habe ein Problem mit einem Div. Dieses ist gecentered.

    Code:
    .center
    {
        width:  1050px; border: 30px solid #ffffff; text-align: left; position: absolute; left: 50%; top: 0px; margin-left: -525px; background-color: #ffffff;
    }
    In diesem Div(.center) ist ein anderes Div, welches problemlos funktioniert.

    Code:
    #footercomment1
    {
        width: 150px; height: 100px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; background-color: #7d6262; position:absolute; left: 0px  
    }
    Jedoch tritt ein Fehler auf wenn ich ein anderes Div in das Div(.center) einfüge.

    Code:
    .contentdiv
    {
        position: absolute; top: 150px; text-align: left; font-size: 24px;
    }
    Der Fehler wird offensichtlich durch position absolute ausgelöst. (Jedoch ist dieser Tag auch im problemlosen div vorhanden.)

    Hier das genannte Problem:

    Seite ohne Fehler und ohne postion Tag in Div(.contentdiv)


    Seite mit Fehler und mit position Tag in Div(.contentdiv)

    Ich bin ratlos wie ich das Problem lösen könnte....

    Ich würde mich über eure Hilfe freuen.
    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
    Suicide Clown
    Gast

    Standard AW: Problem mit Centered Div (!)


  3. #3
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard AW: Problem mit Centered Div (!)

    Schön... ein Fehler tritt auf...
    Aber welcher Fehler? Hintergund-Farbe?
    Something big is coming. And there will be pirates and ninjas and unicorns...

  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: Problem mit Centered Div (!)

    Warum nicht einfach Relativ positionieren?
    Code:
    #logodiv {
           height: 100px;
           left: 34px;
       position: relative;
      top: 5px;
    }
    .contentdiv {
           font-size: 24px;
           position: relative;
           text-align: left;
           top: 50px;
    }
    Absolut Positionierte Inhalte können andere Elemente nicht beeinflussen.

    Ansonsten, wie schon Dodo schrieb, beschreib uns dein Ziel etwas genauer.

  5. #5
    Suicide Clown
    Gast

    Frage AW: Problem mit Centered Div (!)

    Allgemeines Ziel des Unterfanges ist:
    - Ein horizontal Zentriertes Div, welches vertikal die gesamte Seite umfasst (oben bis unten) zu erstellen.
    - Innerhalb des Div-Elementes sollen andere Div Element mit position: absolute positioniert werden können.


    Meine Bisherigen Schritte:

    1. Ein Div class="center" mit
    Code:
    position: absolute; left: 50%; top: 0px; margin-left: -525px; width:  1050px;
    zu zentrieren

    2. Andere Div-Elemente mit position: absolute in das Div in Punkt 1. einzufügen.

    Der Fehler: Das Div in Punkt 1. umfasste nicht mehr vertikal die Gesamte Seite (oben bis unten) wenn Schritt 2. ausgeführt wurde.

    (konkreter: Beim im Anfangspost genannten Div mit id="footercomment1" passiert kein Fehler wenn es eingefügt ist, jedoch beim im Anfangspost genannten Div mit class="contentdiv" erscheint besagter Fehler)

    Danke im Voraus für eure Hilfe.

  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: Problem mit Centered Div (!)

    Das im Footer funktioniert, weil dieser (div.footer) eine Höhe hat - und eben nicht absolut positioniert wurde. Die Elemente darin sind egal.
    Wenn die Elemente rausragen würden, würdest du das selbe Problem haben (z.B. #footercomment1 { height: 2000px; } )


    Warum testest du nicht das, was ich dir oben geschrieben hab?

  7. #7
    Suicide Clown
    Gast

    Lächeln AW: Problem mit Centered Div (!)

    Zitat Zitat von Grevas Beitrag anzeigen
    Das im Footer funktioniert, weil dieser (div.footer) eine Höhe hat - und eben nicht absolut positioniert wurde. Die Elemente darin sind egal.
    Wenn die Elemente rausragen würden, würdest du das selbe Problem haben (z.B. #footercomment1 { height: 2000px; } )


    Warum testest du nicht das, was ich dir oben geschrieben hab?
    Wahrlich nicht schlecht., die Div-Elemente relativ zu positionieren. Jedoch ergibt sich ein weiteres Problem:

    Wenn ich bei .contentdiv bei top: eine größere Zahl eintrage z.B. 200px dann füllt das .center Div nicht mehr die volle vertikale Fläche aus.


    Beispiel:

    http://www.suicideclown.com/index2.html

  8. #8
    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: Problem mit Centered Div (!)

    mach aus 'top: 200px;" mal 'margin-top: 200px;', dann klappt das auch

  9. #9
    Suicide Clown
    Gast

    Daumen hoch AW: Problem mit Centered Div (!)

    So weit so gut und danke für die bisherige Hilfe.

    ....


    aber: Kleiner Fehler, wenn ich margin-top und position relative verwende werden die 3 Farbigen Boxen unten an der Seite (#footercomment) nichtmehr richtig dargetstellt.

    Ich werde den position tag jetzt einfach weglassen.

    Danke für eure und insbesonere deine Hilfe.

  10. #10
    Suicide Clown
    Gast

    Standard AW: Problem mit Centered Div (!)

    fast vergaß ich es:

    Das Finale Ergebnis könnt ihr auf http://www.suicideclown.com/ ansehen.

Stichworte

Berechtigungen

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