[CSS] - Container positionieren

Dieses Thema im Forum "Webmaster Hilfe / Programmierer Forum" wurde erstellt von _Emperor_, 27.04.2008.

  1. #1 _Emperor_, 27.04.2008
    _Emperor_

    _Emperor_ Erfahrener Benutzer

    Dabei seit:
    27.04.2008
    Beiträge:
    120
    Zustimmungen:
    0
    Hallo,

    ich bekomme es einfach nicht hin, die im Bild zu sehenden Container zu realisieren: Mir ist wichtig, dass das Layout sowohl horizontal als auch vertikal zentriert ist.
    Was mache ich falsch?

    Vielen Dank
    _Emperor_


    ---


    @charset "utf-8";
    /* CSS Document */

    #container
    {
    width: 800px;
    height: 500px;
    background-color: #FF0000;

    /* Anweisungen zum horizontalen *und* vertikalen zentrieren */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -250px;
    }

    #header
    {
    width: 800px;
    height: 250px;
    background-color: fuchsia;

    /* Anweisungen zum horizontalen *und* vertikalen zentrieren */
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -250px;
    }

    #navigation
    {
    width: 590px;
    height: 25px;
    background-color: green;
    float:right;

    /* Anweisungen zum horizontalen *und* vertikalen zentrieren */
    position: absolute;
    top: 50%;
    right: 50%;
    margin-right: -400px;
    margin-top: 0px;
    }


    #gfx
    {
    width: 210px;
    height: 250px;
    background-color:black;
    float:left;

    /*Anweisungen zum horizontalen *und* vertikalen zentrieren */
    position: absolute;
    top: 290px;
    left: 260px;
    margin-left: 0px;
    }
     

    Anhänge:

  2. AdMan

    schau mal hier: Windows-Wartungs-Tool. Viele Probleme lassen sich damit einfach beheben. Oftmals ist der PC dann auch schneller!
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  3. #2 xandros, 27.04.2008
    xandros

    xandros IT Consultant, Cisco Registered Partner
    Moderator

    Dabei seit:
    05.07.2007
    Beiträge:
    25.889
    Zustimmungen:
    91
    Ort:
    Umkreis Duisburg, neben Mannheim, hinter Hamburg
    wenn du uns jetzt noch verrätst, wie du die Klassen auf der Seite ansprichst, damit man sieht, wie die Container verschachtelt sind, dann kann man auch etwas dazu sagen.

    Die reinen CSS-Angaben sind da nicht sehr aussagekräftig, da die Klassen beliebig in verschiedenen Containern ineinander oder separat verschachtelt werden können. Dementsprechend reagieren dann auch die Positionsangaben absolut zum Browserfenster oder zum Elternelement.

    Im schlimmsten Fall überdecken sich die Elemente durch die Top 50%/ Left 50% Angaben einfach nur....
     
  4. #3 _Emperor_, 27.04.2008
    _Emperor_

    _Emperor_ Erfahrener Benutzer

    Dabei seit:
    27.04.2008
    Beiträge:
    120
    Zustimmungen:
    0
    <div id="container"></div>

    <div id="header"></div>

    <div id="navigation"></div>

    <div id="gfx"></div>

    Das angehängte Bild ist ein Photoshop-Werk. *duck*
    Zwei Container fehlen also noch.
     
  5. #4 Blaxxun, 27.04.2008
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    Mach erst nen großen Container, der zentriert ist und dann positionierst du die anderen Container in diesem Container.


    Du zentrierst Vertical und Horizontal und willst dann floaten, wie soll das gehn?
    Bring das bitte mal online, als zusammenhängendes Dokument, hab keine Lust mir das lokal abzuspeichern.
     
  6. #5 _Emperor_, 27.04.2008
    _Emperor_

    _Emperor_ Erfahrener Benutzer

    Dabei seit:
    27.04.2008
    Beiträge:
    120
    Zustimmungen:
    0
    Ich habe jetzt mal eine weitere Möglichkeit ausprobiert: Fürchte aber, dass mir wieder alles kaputt geht, wenn ich die anderen Container platziere.
    Was darf ich machen und was nicht: Irgendwelche Tipps?

    Edit: Ich habe nochmal eine neue Version hoch geladen. Wie Ihr seht, schaffe ich

    <div id="navigation">
    <div id="pics">
    <div id="text">

    nicht richtig zu positionieren. Kann doch nicht mehr so schwer sein, oder?
     
  7. #6 Blaxxun, 27.04.2008
    Blaxxun

    Blaxxun aka Noisy

    Dabei seit:
    06.11.2005
    Beiträge:
    6.171
    Zustimmungen:
    0
    <div id="distance"></div>

    Was soll der Div bringen?


    Übrigens hab ich dir das schnell mal gemacht, dass der #container sowohl vertikal als auch horizontal zentriert ist:
    Den anderen Container brauchst du nicht. Und in deinen Haupt Container setzt du dann die anderen Container, die sollten sich dann nur darin bewegen, das ist doch was du wolltest oder?
     
  8. #7 _Emperor_, 27.04.2008
    _Emperor_

    _Emperor_ Erfahrener Benutzer

    Dabei seit:
    27.04.2008
    Beiträge:
    120
    Zustimmungen:
    0
    Das basiert auf diesem Tutorial ist IMHO irgendein Workaround. Ich haue es raus.

    Danke Dir.

    So wie ich das sehe, kommt es quasi primär auf

    an - das hatte ich als einziges nicht.

    Jein. Mein primäres Problem (siehe auch Edit oben): Ich habe nochmal eine neue Version hoch geladen. Wie Ihr seht, schaffe ich

    <div id="navigation">
    <div id="pics">
    <div id="text">

    nicht richtig zu positionieren. Kann doch nicht mehr so schwer sein, oder?
     
  9. #8 _Emperor_, 27.04.2008
    _Emperor_

    _Emperor_ Erfahrener Benutzer

    Dabei seit:
    27.04.2008
    Beiträge:
    120
    Zustimmungen:
    0
    Da, ich habe es!

    Fragt jetzt nicht, woran ich gescheitert bin ... :D

    Danke auf jeden Fall!
     
  10. AdMan

    Es ist generell erstmal empfehlenswert alle ggf. veralteten oder fehlerhaften Treiber zu scannen und auf neue zu aktualisieren. Hier kannst du einen Treiber-Scanner downloaden. Das erspart oftmals viel Ärger und hilft gegen diverse Probleme.
    Registrieren bzw. einloggen, um diese und auch andere Anzeigen zu deaktivieren.
  11. b3ast

    b3ast Erfahrener Benutzer

    Dabei seit:
    25.06.2007
    Beiträge:
    698
    Zustimmungen:
    0
    ich kann keine einzige datei öffnen, auf die du verlinkt hast. aber schön dass es jetzt funktioniert, glückwunsch.
     
  12. #10 _Emperor_, 03.05.2008
    _Emperor_

    _Emperor_ Erfahrener Benutzer

    Dabei seit:
    27.04.2008
    Beiträge:
    120
    Zustimmungen:
    0
    Ich musste den GMX-Domain Namen ändern und nachdem es eh funktionierte ...

    Allerdings hörte ich, dass man die vertikale Zentrierung eigentlich nicht verwenden sollte!?
     
Thema: [CSS] - Container positionieren
Besucher kamen mit folgenden Suchen
  1. css container positionieren

    ,
  2. css zusammenhängende container

Die Seite wird geladen...

[CSS] - Container positionieren - Ähnliche Themen

  1. CSS Auflösung inakzeptabel!

    CSS Auflösung inakzeptabel!: Hey liebe Community, ich habe vor kurzem mein BS neu aufgespielt, vorher war dort Win 8 Pro 64 Bit installiert, leider musste ich aber aufgrund...
  2. Spezielle Navigation (Html / Css)

    Spezielle Navigation (Html / Css): Wunderschönen Guten Abend. Ist es möglich das Menü von dieser Seite Musicbase.fm - Clubsection ohne JavaScript, also nur mit HTML & CSS, zu...
  3. CSS externe methode

    CSS externe methode: Hey leute ich lerne gerade CSS und bei der ecternen methode wird die style.css nicht ausgelesen was mach ich falsch? Code: <!DOCTYPE HTML PUBLIC...
  4. Css sheet

    Css sheet: Guten Tag, Ich würde gerne wissen, ob es ein schnelles und kostenloses System wie ein Software oder einen Dienst auf einer Website, die schnell...
  5. CSS Auslagern in IE

    CSS Auslagern in IE: Guten Abend, habe vor einigen Tagen diesen Code gefunden: <!--[if IE 6]><style type="text/css">@import url(/style/css/ie6.css);<![endif]-->...