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

Thema: Zentrieren von DIVs

  1. #1
    Unregistriert
    Gast

    Standard Zentrieren von DIVs

    Hallo

    ich versuche gerade eine Homapage zu erstellen allerdings funktioniert das nicht so wie ich mir das vorgestellt habe. Da ich vor allem im CSS-Bereich Anfänger bin hoffe ich dass ihr mir weiter helfen könnt

    und zwar hab ich einen Container <div id="all"> in dem alle weiteren divs zentriert sein sollten.
    Ich hab das so probiert:

    div#all
    {
    margin-left: auto;
    margin-right: auto;
    }

    aber iwi funktionierts nicht!
    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
    HTML Newbie
    Registriert seit
    21.08.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zentrieren von DIVs

    Hi,
    du musst die DIV's, die zentriert sein sollen, mit margin-left: 0 und margin-right: 0; positionieren, nicht div#all.

    Beispiel:

    HTML-Code:
    <div id="all">
        <div id="header">INHALT</div>
        <div id="main">INHALT</div>
    </div>
    Code:
    div#header {
        margin-left: auto;
        margin-right: auto;
    }
    
    div#main {
        margin-left: auto;
        margin-right: auto;
    }

    Theoretisch reicht auch margin: auto; solange du nach oben und unten kein margin brauchst. Bzw. kannst auch margin: 0 auto 0 auto; angeben.

    Gruß

  3. #3
    Unregistriert
    Gast

    Standard AW: Zentrieren von DIVs

    Danke für die schnelle Antwort!

    Iwi schaff ich es aber immer noch nicht!

    Hier meine HTML-Datei:
    <body>
    <div id="all">
    <div id="header">HEADER</div>

    <div id="website">
    website

    </div><!-- Ende website -->

    </div> <!-- Ende all -->
    </body>

    Der Header soll über die ganze Breite des Bildschirmes gehen, website ist der Rest der Seite da sollen nachher mal ein menü inhallt usw. drinnen sein dieser DIV soll nur 970 breit sein und zentriert sein. Website wird allerdings nicht zentriert!

    Und meine CSS-Datei:

    body {
    background-color: yellow;
    margin: 0;
    }

    #header
    {
    background-color: black;
    color: white;

    }

    #website
    {
    background-color: orange;
    width: 970px;
    margin-left: auto;
    margin-right: auto;

    }

    Ich hoffe ich nerv euch mit meinen Anfänger fragen nicht ^^

  4. #4
    HTML Newbie
    Registriert seit
    21.08.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zentrieren von DIVs

    Damit man es besser lesen kann solltest du deinen code in code-tags reinschreiben. das ist das RAUTE Symbol überm eingabefeld.

    Soweit ich das hier sehe sollte das doch normalerweise funktionieren. Habe es bei mir direkt so nachgebaut und funktioniert.

    Hast du die CSS datei auch richtig eingebunden? Die Farben etc. werden ja angezeigt oder?

    - - - Aktualisiert - - -

    Ok das Problem wird der QUIRKS Modus vom Internet Explorer sein, du nutzt IE oder?

    Dann musst du im CSS noch reinschreiben:

    Code:
    #all {
        text-align: center;
    }
    du musst dann bei allen nachfolgenden objekten angeben, dass der text aber wieder linksbündig sein muss.

  5. #5
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Zentrieren von DIVs

    Zitat Zitat von Diluvian Beitrag anzeigen
    Hi,
    du musst die DIV's, die zentriert sein sollen, mit margin-left: 0 und margin-right: 0; positionieren, nicht div#all.
    Nicht den Wert "0" sondern "auto" wäre hier richtig. Zudem brauchen die Elemente auch noch eine feste Breite. Also in dem Fall hier reicht folgendes:

    Code:
    div#website {
        margin: 0 auto;
        width: 970px;
    }
    Dein HTML-Code soll in jedem Fall valide sein und auch einen gültigen Doctype enthalten. Mit Frickeleien für den IE, wenn Du keinen oder keinen richtigen Doctype angegeben hast, machst Du dir nur das Leben schwerer als es sein müsste.

  6. #6
    HTML Newbie
    Registriert seit
    21.08.2012
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Zentrieren von DIVs

    Zitat Zitat von threadi Beitrag anzeigen
    Nicht den Wert "0" sondern "auto" wäre hier richtig. Zudem brauchen die Elemente auch noch eine feste Breite. Also in dem Fall hier reicht folgendes:
    Sorry, hab mich wohl vertippt. Im CODE-Tag hab ich es korrekt geschrieben. Lässt es sich mit validem Doctype auch ohne text-align zentrieren?

  7. #7
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Zentrieren von DIVs

    Ja natürlich.

  8. #8
    Unregistriert
    Gast

    Standard AW: Zentrieren von DIVs

    ja ich verwende IE

    in den anderen Browsern funktionierts.

    hab jz folgenden DOCTYPE:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    allerdings funktionierts im IE immer noch nicht...

  9. #9
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Zentrieren von DIVs

    Wie sieht der aktuelle Quellcode aus (komplett)?

  10. #10
    Unregistriert
    Gast

    Standard AW: Zentrieren von DIVs

    Sorry aber ich weiß nicht wie die spezielle Code-Schreibweise geht...

    HTML:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="template3.css">
    </head>
    <body>
    <div id="all">
    <div id="header">HEADER</div>

    <div id="website">

    <div id="banner">

    <div id="banner_logo">

    </div>
    </div>
    </div><!-- Ende website -->

    </div> <!-- Ende all -->
    </body>
    </html>

    CSS:
    body {
    background-color: yellow;
    margin: 0;
    }

    #header
    {
    background-color: black;
    color: white;

    }

    #website
    {
    background-color: orange;
    width: 970px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;

    }

    #banner
    {
    margin-left: auto;
    margin-right: auto;
    margin-top: 5px;
    background-color: red;

    width: 950px;
    }

Ähnliche Themen

  1. Divs wechseln
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 30.07.2012, 23:45
  2. Höhe von Divs...
    Von Netvizion im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 16.10.2009, 14:21
  3. Divs nebeneinander + zentrieren
    Von Marco_1987 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 18.04.2009, 21:12
  4. Positionierung von Divs
    Von Webdesignerin im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 20.11.2007, 22:57
  5. 'n paar divs in bestimmter position zusammen zentrieren
    Von Greg10 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 27.08.2007, 17:12

Stichworte

Berechtigungen

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