Warum ist das Bild nicht zentriert?

Dieses Thema im Forum "Webdesign" wurde erstellt von 0xffr, 29. Dezember 2011 .

Schlagworte:
  1. 29. Dezember 2011
    moin wollte mal fragen warum mein <div id="headob"></div> nicht zentriert ist...

    wenn ich bei der style.css margin:auto; angebe ist es mittig aber ich kanns doch jetzt nicht bei jedem nachfolgenden bild eingeben -.-

    mfg

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    <title>Unbenanntes Dokument</title>
    </head>
    
    <body>
    <div id="headbg">
     <div id="headob"></div>
    </div><!--END HEADBG-->
    </body>
    </html>
    HTML:
    @charset "utf-8";
    /* CSS Document */
    
     
    
    body {
     font-family:Verdana, Geneva, sans-serif,;
     font-size:12px;
     color:#000;
     background-color:#303030;
     text-align:center;
     margin:0px auto;
    }
    
    #headbg {
     margin:auto;
     background-image:url(Bilder/headerbg.jpg);
     height:305px;
     background-repeat:repeat-x;
     
    }
    
    #headob {
     background-image:url(Bilder/headeroben.jpg);
     width:1109px;
     height:104px;
    }
     
  2. 29. Dezember 2011
    AW: Warum ist das Bild nicht zentriert?

    Gibt es einen Speziellen Grund warum du dort NICHT margin: auto angeben kannst?
     
  3. 29. Dezember 2011
    AW: Warum ist das Bild nicht zentriert?

    ja es kommen unter der div noch sehr viele andere pics die mittig von links nach rechts angeordnet werden sollen...

    und bei jedem bild nochmal margin:auto zu setzten ist das nicht ein wenig umständlich?... kann ich dem body nicht sagen das alles was darin passiert mittig ist?
    wenn ich es dann nciht brauche kann cih es ja extra in der div ändern.
     
  4. 29. Dezember 2011
    AW: Warum ist das Bild nicht zentriert?

    "text-align: center" für inline-elemente (img) sollte reichen.
     
  5. 29. Dezember 2011
    AW: Warum ist das Bild nicht zentriert?

    hab ich doch schon im body .... nur die <div id="headob"></div> ist trotzdem nicht mittig...

    sie ist standart an der linken seite
     
  6. 29. Dezember 2011
    AW: Warum ist das Bild nicht zentriert?

    naja, frau <div> ist auch ein block-element. sie muss per margin:auto positioniert werden.

    wenn sie erstmal mittig positioniert ist, kannst du ihre kinder per "text-align: center" mittig ausrichten lassen. kann aber gut sein, dass die manchmal ein wenig blockig sind, dann musst du mit "display:inline-block" nachhelfen.

    ja der war schlecht
     
  7. 29. Dezember 2011
    AW: Warum ist das Bild nicht zentriert?

    mh naja danke war jetzt so halb hilfreich... ein bsp wäre besser bin noch ziemlicher newbie...

    frau div bekommt keiner kinder.. ^^... sie bekommt freunde die unter ihr stehen

    HTML:
    <div id="headbg">
     
     <div id="headob"></div>
     <div id="headob"></div>
     <div id="headob"></div>
     <div id="headob"></div>
     <div id="headob"></div>
    </div>


    oder ist es einfacher im div headerbg

    eine tabelle mit meinet wegen 11 zeilen zu erstellen darin ein paar spalten wo dann die anderen bilder angeordnet per div reinkommen?

    EDIT:

    habs nun so gelöst

    HTML:
    body {
     font-family:Verdana, Geneva, sans-serif,;
     font-size:12px;
     color:#000;
     background-color:#303030;
     text-align:center;
     margin:0px auto;
    }
    
    #wrapper {
     width:1109px;
     height:auto;
     margin:auto;
    }
    
    #headbg {
     background-image:url(Bilder/headerbg.jpg);
     height:305px;
     background-repeat:repeat-x;
     
    }
    
    #headob {
     margin:auto;
     background-image:url(Bilder/headeroben.jpg);
     width:1109px;
     height:104px;
    }
    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css" /> 
    <title>Unbenanntes Dokument</title>
    </head>
    
    <body>
    <div id="wrapper">
     <div id="headbg">
     <div id="headob"></div>
     </div><!--END HEADBG-->
    </div><!--wrapper end-->
    </body>
    </html>
    BW hast du
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.