Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

Thema: Seitenelemente mittig mit CSS positionieren

  1. #1
    Lori
    Gast

    Unglücklich Seitenelemente mittig mit CSS positionieren

    Hallo liebe CSS-Profis,

    ich bin blutige CSS-Anfängerin und versuche mich an einer Seite, die mittig zentriert angezeigt werden soll. Hier zeige ich Euch mal ein Bild, wie ich mir die Seite vorgestellt habe, nur, dass alle Elemente mittig zentriert angezeigt werden sollten und nicht links:

    Sollzustand, nur mittig statt links:



    Die aktuelle Baustelle ist hier zu finden:
    http://grafikstadt.de/test/index.html

    Lösungsansätze:
    Natürlich habe ich viel ausprobiert, um der Lösung näher zu kommen. Beispielsweise habe versucht, alle Elemente statt mit "absolute" mit "fixed" zu positionieren, mit dem Ergebnis, dass sich alles auf der Seite verschiebt, wenn eine zu große oder zu kleine Auflösung gewählt wird.
    Weiterhin habe ich versucht, alle Inhalte in einen Wrapper zu stecken (diese Lösung stammt aus einem Buch, das ich mir gekauft hatte), der mittig zentriert ist.
    Das führte dazu, dass die Buttons ebenfalls mittig ausgerichtet wurden und der Text nicht mehr in den dafür vorgesehenen Flächen liegt.
    Dann wollte ich mit unsichtbaren gif-Bildchen einen festen Abstand zwischen den Elementen erzwingen; sieht leider auch furchtbar aus bei manchen Auflösungen

    Insgesamt arbeite ich nun seit 6 Wochen an dem Problem und weiß mir keine Hilfe mehr, außer Eurem Forum. Alle Zwischenergebnisse meiner Bemühungen habe ich noch und kann sie Euch gerne posten, falls das etwas hilft. Der aktuelle Zustand sieht noch am "besten" aus, da zumindest alles korrekt angezeigt wird, leider eben nur nicht zentriert.

    Den Quellcode habe ich stark vereinfacht und ein bisschen kommentiert, damit er leichter zu lesen ist.
    Ich wäre Euch für jeden Tipp sehr dankbar, bin wirklich verzweifelt

    Vielen herzlichen Dank und liebe Grüße,
    Lori
    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
    Bandit
    Gast

    Standard AW: Seitenelemente mittig mit CSS positionieren

    Schon mal wichtig: http://validator.w3.org/check?verbos...t%2Findex.html
    Die ganzen absoluten Positionierungen sind schlecht, damit handelt man sich in der Regel nur Probleme ein.
    Das könnte passen: http://www.css4you.de/wslayout1/ex0003.html

  3. #3
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: Seitenelemente mittig mit CSS positionieren

    Hallo,

    das geht am einfachsten, wenn du deine Seite in ein <div>-Element setzt, das dann mittig positionert wird.

    html:
    <div id="seite">
    ....
    </div>

    css:
    #seite { position: relative; padding: 0; margin: 10px auto 0 auto;
    }


    Das Hauptmenü würd ich nicht in einzelne <div>s packen, sondern als
    <ul id="hauptnavi">
    <li><a href="...">1.Menüpunkt</a></li>
    ....
    </ul>


    Das Interface-Bild würd ich dieser Liste als Hintergrund unterlegen:
    css:
    padding:...px ...px 0 ...px; background:transparent url(../images/interface.jpg) no-repeat; background-position: ...px ...px;
    Mit Padding (innenpolster und background-position kannst du es dann ganz elegant anpassen.

    LG Matthias Scharwies

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Seitenelemente mittig mit CSS positionieren

    Zitat Zitat von resteverwerter Beitrag anzeigen
    das geht am einfachsten, wenn du deine Seite in ein <div>-Element setzt, das dann mittig positionert wird.
    Das ist gar nicht nötig.
    Das oberste Element einer Seite ist das Element html. Die Seite befindet sich im Element body.
    Also kann man auch das body-Element zentrieren und die gesamte Seite sitzt mittig.
    Man hat sogar noch noch das html-Element zur Verfügung um den entstehenden Rahmen links und rechts einen anderen Hintergrund zu geben, für visuelle Effekte.

  5. #5
    Lori
    Gast

    Standard AW: Seitenelemente mittig mit CSS positionieren

    Hallo Ihr Lieben,

    vielen herzlichen Dank schon einmal für Eure Lösungsansätze! Ich werde mich gleich mal an die Umsetzung machen.
    Wenn ich alles mittig zentriere, sind aber doch meine Buttons auch mittig ausgerichtet, stimmt das?
    Die sollen ja aber in die für die vorgesehenen Felder der Interface-Grafik (nicht mittig).
    Wie kann ich das verhindern?

    Vielen Dank und Gruß,
    Lori

  6. #6
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: Seitenelemente mittig mit CSS positionieren

    kein Problem,
    die css-Formatierung

    margin: 0px auto;

    gilt nur für das betroffene Element.

    Alle anderen fangen wieder links oben an, außer du formatierst sie anders.


    LG Matthias Scharwies

  7. #7
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: Seitenelemente mittig mit CSS positionieren

    Body zu zentrieren ist auf längerer Sicht keine gute Idee. Also lieber Finger weg.

  8. #8
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Seitenelemente mittig mit CSS positionieren

    Zitat Zitat von djheke Beitrag anzeigen
    Body zu zentrieren ist auf längerer Sicht keine gute Idee. Also lieber Finger weg.
    Das höre ich jetzt zum ersten mal, hast du da auch ein gutes Argument dafür?

  9. #9
    reteverwerter
    Gast

    Standard AW: Seitenelemente mittig mit CSS positionieren

    Ich habe es einmal ausprobiert den body selbst zu zentrieren, und dann lieferte die Web-Developer-Toolbar nur noch Schrott beim Lineal, so dass ich wieder ein <div id=seite> eingefügt habe.
    Warum das so ist, weiß ich aber auch nicht. In google hab ich auch nichts dazu gefunden.
    LG Matthias Scharwies

  10. #10
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Seitenelemente mittig mit CSS positionieren

    Das mit dem Lineal ist ja dann ein Fehler in der Web-Developer-Toolbar, hat aber ja nichts damit zu tun, was djheke gesagt hat.

Ähnliche Themen

  1. hompage mittig
    Von interprices im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 21.04.2012, 00:12
  2. CSS Objekt mittig positionieren auf 100% Background
    Von Der kleine Frosch im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 18.03.2012, 10:21
  3. Bild mittig in div ausrichten
    Von Kämpfer im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 15.11.2009, 17:20
  4. Tabelle mittig positionieren
    Von nhl-hockey-king im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 30.04.2007, 16:12
  5. Mittig im Frame
    Von Lollana im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 26.05.2005, 22:08

Stichworte

Berechtigungen

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