Anzeige

div zentrieren

div zentrieren | PSD-Tutorials.de

Erstellt von wolfs, 20.10.2009.

  1. wolfs

    wolfs Nicht mehr ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    165
    Geschlecht:
    männlich
    Ort:
    Eifel
    Kameratyp:
    Canon A540, Olympus E-420 DZ
    div zentrieren
    Irgendwie komm' ich hiermit nicht klar. Hab schon einiges an Tipps und Hinweisen, die ich hier und im I-Net gefunden hab' probiert, aber es ändert sich nix.

    Der gesamte Content soll in einem div-Bereich - in dem andere div-Bereiche untergebracht sind - zentriert im Browser dargestellt werden. Aber das einzige was ich erreiche, ist, dass ich absolute Werte in Pixel angeben kann. Was mach' ich falsch?

    Hier ist mal der HTML-Quelltext:
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    5. <!-- TemplateBeginEditable name="doctitle" -->
    6. <title>Willkommen bei Blumen Schildgen </title>
    7. <!-- TemplateEndEditable -->
    8. <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    9. <link href="../css/screen.css" rel="stylesheet" type="text/css" />
    10. <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    11. <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    12. </head>
    13.  
    14. <body>
    15. <div id="hintergrund">
    16.   <div id="logo"></div>
    17.   <div id="navleiste">
    18.     <ul id="MenuBar1" class="MenuBarHorizontal">
    19.       <li><a href="#">Home</a> </li>
    20.       <li><a href="#" class="MenuBarItemSubmenu">Galerie</a>
    21.         <ul>
    22.           <li><a href="../hochzeit.htm">Hochzeit</a></li>
    23.           <li><a href="../trauer.htm">Trauer</a></li>
    24.           <li><a href="../deko.htm">Dekorationen</a></li>
    25.           <li><a href="../tischdeko.htm">Tischdekorationen</a></li>
    26.         </ul>
    27.       </li>
    28.       <li><a href="../tipps.htm">Tipps</a>        </li>
    29.       <li><a href="../angebote.htm" class="MenuBarItemSubmenu">Angebote</a>
    30.         <ul>
    31.           <li><a href="../angebote.htm">Angebote</a></li>
    32.           <li><a href="../neuheiten.htm">Neuheiten</a></li>
    33.         </ul>
    34.       </li>
    35.       <li><a href="../ueberuns.htm">&Uuml;ber uns</a></li>
    36.       <li><a href="../kontakt.htm">Kontakt</a></li>
    37.       <li><a href="../impressum.htm">Impressum</a></li>
    38.     </ul>
    39.   </div>
    40.   <div id="bildplatzhalterobenrechts"></div>
    41.   <div id="bildlinks"></div>
    42.   <div id="textfeld"></div>
    43.   <div id="filmstreifen"></div>
    44. </div>
    45.  
    46. <script type="text/javascript">
    47. <!--
    48. var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
    49. //-->
    50. </script>
    51. </body>
    52. </html>
    53.  
    und hier die CSS:
    Code (Text):
    1. body {
    2.  
    3. }
    4.  
    5.  
    6. #hintergrund {
    7.     position:absolute;
    8.     width:900px;
    9.     height:550px;
    10.     z-index:1;
    11.     background-image: url(../bilder/schildgen.jpg);
    12.     text-align: left;
    13.     margin:auto;
    14.     margin-left: 30px;
    15. }
    16. #logo {
    17.     position:absolute;
    18.     width:450px;
    19.     height:70px;
    20.     z-index:1;
    21. }
    22. #navleiste {
    23.     position:absolute;
    24.     width:900px;
    25.     height:25px;
    26.     z-index:2;
    27.     top: 71px;
    28. }
    29. #bildplatzhalterobenrechts {
    30.     position:absolute;
    31.     width:440px;
    32.     height:70px;
    33.     z-index:3;
    34.     left: 451px;
    35. }
    36. #bildlinks {
    37.     position:absolute;
    38.     width:450px;
    39.     height:432px;
    40.     z-index:4;
    41.     left: 0px;
    42.     top: 97px;
    43. }
    44. #textfeld {
    45.     position:absolute;
    46.     width:439px;
    47.     height:262px;
    48.     z-index:5;
    49.     left: 451px;
    50.     top: 97px;
    51. }
    52. #filmstreifen {
    53.     position:absolute;
    54.     width:439px;
    55.     height:156px;
    56.     z-index:6;
    57.     left: 451px;
    58.     top: 360px;
    59. }
    60.  
    Ich hoffe, dass mir einer von euch helfen kann und mir erklärt, wo mein Fehler liegt.
     
    #1      
  2. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    div zentrieren
    AW: div zentrieren

    Code (Text):
    1. #hintergrund {
    2.     position:relative;
    3.     width:900px;
    4.     height:550px;
    5.     background-image: url(../bilder/schildgen.jpg);
    6.     text-align: left;
    7.     margin:0 auto;
    8. }
    width und margin:auto zentriert ein blockelement.
     
    #2      
  3. wolfs

    wolfs Nicht mehr ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    165
    Geschlecht:
    männlich
    Ort:
    Eifel
    Kameratyp:
    Canon A540, Olympus E-420 DZ
    div zentrieren
    AW: div zentrieren

    Mit width habe ich die Größe des div-Bereichs angegeben. Kann ich den ändern ohne dass die Positionen der anderen div's verlorengehen?

    Hab's gerade probiert. Wenn ich den Wert bei 'width' auf 'Auto' setze, ist nur noch die Navigation vorhanden. Haut leider nicht hin. Noch 'ne Idee?
     
    Zuletzt bearbeitet: 20.10.2009
    #3      
  4. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    div zentrieren
    AW: div zentrieren

    width auf auto setzen???

    wie deutlich muss man denn noch schreiben ?
     
    #4      
  5. centipete

    centipete schiffschaukelbremser

    Dabei seit:
    10.05.2009
    Beiträge:
    65
    Geschlecht:
    männlich
    div zentrieren
    AW: div zentrieren

    @sokie
    hast du noch nie was nicht verstanden?
    sags ihm doch einfach und gut ?

    @wolfs:
    du brauchst "position:relative;" und "margin:0 auto;"

    gruß

    c.
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    div zentrieren
    AW: div zentrieren

    ja, und das schlimme ist, dass ich es auch missverständlich geschrieben habe, deshalb sorry.
    width angeben, und das margin:auto; setzen.
    ich hatte oben schon das entsprechende css notiert.
    sorry nochmal...
     
    #6      
  7. centipete

    centipete schiffschaukelbremser

    Dabei seit:
    10.05.2009
    Beiträge:
    65
    Geschlecht:
    männlich
    div zentrieren
    AW: div zentrieren

    es wird schon alles gut :) (bzw ist)

    angenehmen abend noch!

    c.
     
    #7      
  8. wolfs

    wolfs Nicht mehr ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    165
    Geschlecht:
    männlich
    Ort:
    Eifel
    Kameratyp:
    Canon A540, Olympus E-420 DZ
    div zentrieren
    AW: div zentrieren

    Hab das nochmal so gemacht wie beschrieben. Hat nicht geklappt. Dann hab ich die Werte für 'position' bei allen div-Bereichen, die in diesem div liegen auf 'relativ'. Auch nix.

    Kann es eventuell sein, dass es falsch angezeigt wird, weil es sich um ein .dwt (Template-Datei von Dreamweaver) handelt? Sollte eigentlich nicht sein.
     
    #8      
  9. ixiter

    ixiter WebApp & RIA Entwickler

    Dabei seit:
    03.05.2008
    Beiträge:
    9
    Geschlecht:
    männlich
    div zentrieren
    AW: div zentrieren

    Hilfreich wäre ein Link zu deiner Seite, wenn das möglich ist.
    Ansonsten sagt sokie eigentlich den grundsätzlichen Weg. Die Breite muss angegeben werden und dann margin:0 auto;
    Die 0 gibt den dabei die Abstände oben und unten an, das auto die Abstände rechts und links.
    Die Positionierung mit relative, absolute oder gar nicht, ist hier unerheblich.

    Setzt du die Positionierung dieses divs auf relative, beziehen sich alle absolute positionierten Elemente innerhalb dieses Divs auf die Position dieses Divs.
    Je nach Layout ist aber evtl. die Positinierung mit float und clear sinnvoller. Damit erreichst du auch, dass das umgebende Div "mitwächst". Bei relative und absolute Positionierung ist das nicht der Fall.

    Wie gesagt .. am besten ein Link zur Seite, dann kann man das besser testen und beurteilen.
     
    #9      
  10. wolfs

    wolfs Nicht mehr ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    165
    Geschlecht:
    männlich
    Ort:
    Eifel
    Kameratyp:
    Canon A540, Olympus E-420 DZ
    div zentrieren
    AW: div zentrieren

    Einen Link gibt's noch nicht, da die Seite erst im Entstehungsstadium ist. Wie schon gesagt, in der Vorschau im Firefox ist die Seite nicht zentriert. Der IE zeigt die Seite gar nicht erst an, der kann mit der Endung .dwt nix anfangen. Vielleicht liegt's ja doch daran, dass es eine Vorlage ist.

    Meld' mich nochmal, wenn ich absolut nicht weiterkomme.

    Bis dahin schon mal vielen Dank für die Tipps.
     
    #10      
  11. ixiter

    ixiter WebApp & RIA Entwickler

    Dabei seit:
    03.05.2008
    Beiträge:
    9
    Geschlecht:
    männlich
    div zentrieren
    AW: div zentrieren

    Oh, das hatte ich überlesen.
    Es ist ein großer unterschied, obn du eine Seite lokal als file:/// oder vom Server als http:// anguckst. Der Server sendet immer einen Content-type, so dass der Browser weiß, um welche Art Inhalt es sich handelt. Dann würde auch die Dateiendung keine Rolle spielen. IE versucht alles was es nicht kennt als HTML darzustellen. FF ist da pingeliger.
    Lad die Seite doch in ein Testverzeichnis auf den Server oder beschaff dir einen kostenlosen Webspace für Testzwecke.
    Du solltest deine Seite immer auf einem Server testen, anstatt mit DW oder sonstwie auf dem eigenen Rechner.
     
    #11      
  12. rubberdollemma

    rubberdollemma Noch nicht viel geschrieben

    Dabei seit:
    11.07.2009
    Beiträge:
    12
    Geschlecht:
    männlich
    Ort:
    Koblenz+Düsseldorf
    Software:
    CS4
    Kameratyp:
    Fuji
    div zentrieren
    AW: div zentrieren

    Probiere es doch mit dem

    left:50%;
    margin-left: -500px;

    Das Beispiel gilt bei Contentbreite von 1000px.
     
    #12      
  13. wolfs

    wolfs Nicht mehr ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    165
    Geschlecht:
    männlich
    Ort:
    Eifel
    Kameratyp:
    Canon A540, Olympus E-420 DZ
    div zentrieren
    AW: div zentrieren

    Der Fehler lag, wie vermutet bei mir!

    Ich hab' nicht geschrieben, dass die Seite nicht vertikal sondern horizontal zentriert werden soll. Die Seite soll im Browser von unten und von oben den gleichen Abstand haben. Das vertikale Zentrieren funktionierte nicht, weil ich den Abstand margin-left vorher schon fix angegeben hatte.

    Ist es generell möglich die Seite horizontal zu zentrieren?


    Hab's geschafft! Die Höhe und die Breite hatte ich ja schon angegeben. Nun noch bei 'margin-top' und 'margin-left' die Hälfte der Höhe und der Breite als negative Zahl angeben und 'top' und 'left' mit 50 % eintragen und schon ist die Seite zentriert.

    War ja eigentlich nicht schwer.
     
    Zuletzt bearbeitet: 22.10.2009
    #13      
  14. wolfs

    wolfs Nicht mehr ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    165
    Geschlecht:
    männlich
    Ort:
    Eifel
    Kameratyp:
    Canon A540, Olympus E-420 DZ
    div zentrieren
    AW: div zentrieren

    Hab schon wieder ein Problem mit dem Zentrieren.

    Da ich es nicht fehlerlos hinbekomme, den 'apDiv' horizontal und vertikal zu zentrieren möchte ich wenigstens horizontal zentrieren. Also links und rechts den gleichen Abstand.

    In den 'apDiv1' (position: relativ) habe ich die anderen 'apDiv' absolut reingepackt. 'apDiv1' soll mit 'margin: 0 auto;' zentriert werden. Klappt aber nicht! Kann von euch bitte mal einer nachsehen, wo der Fehler liegt. Hier ist der .html-Text:

    Danke für eure Hilfe:

    Gruß,
    Wolfgang
     
    #14      
  15. maendi

    maendi Noch nicht viel geschrieben

    Dabei seit:
    02.03.2010
    Beiträge:
    1
    Geschlecht:
    weiblich
    div zentrieren
    AW: div zentrieren

    hm background-position:center vllt?

    achso...oder möchtest du die komplette seite mittig schwimmen lassen?
    #vertikal{height: 50%;width: 1px;float:left;margin-bottom: -350px;} /*350 ist hierbei die hälfte der kompletten seitenhöhe*/
    #horizontal {margin-right: auto;margin-left: auto;text-align: left;clear: left;position: relative;width: 900px;height: 700px;}
    und dann:
    <body>
    <div id="vertikal"></div>
    <div id="horizontal">
    blubb
    </div>
    </body>
     
    Zuletzt bearbeitet: 03.03.2010
    #15      
  16. wolfs

    wolfs Nicht mehr ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    165
    Geschlecht:
    männlich
    Ort:
    Eifel
    Kameratyp:
    Canon A540, Olympus E-420 DZ
    div zentrieren
    AW: div zentrieren

    Hallo maendi,

    mit 'background-position: center;' verändert sich gar nix. Der Container ist wie angenagelt in der linken, oberen Ecke.

    Wie ist das mit der anderen Lösung? Mit '#vertikal' bzw. '#horizontal' wird doch die Größe und Position eines Containers beschrieben, oder? Der Container kann aber doch nur eine ID haben. Wie funktioniert das mit den 2 ID?

    Danke schonmal für deine Mühe.
     
    #16      
  17. wolfs

    wolfs Nicht mehr ganz neu hier

    Dabei seit:
    11.06.2008
    Beiträge:
    165
    Geschlecht:
    männlich
    Ort:
    Eifel
    Kameratyp:
    Canon A540, Olympus E-420 DZ
    div zentrieren
    AW: div zentrieren

    Das Problem krieg ich nicht in den Griff. Wenn ich 'margin-left: 100px;' angebe rückt das 'div' schön 100 Pixel vom Rand weg. Es soll aber zentriert sein. Bei 'margin: 0px auto' tut sich gar nix. Woran liegt's?
     
    #17      
x
×
×