Probleme beim zentrieren von Grafiken.

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Probleme beim zentrieren von Grafiken.

    Schönen guten Abend.

    Immoment designe ich eine Homepage für einen Kollegen und bin soweit das
    ich die gesliceten Teile zu einer Homepage zusammen setzen kann. Dabei
    verwende ich natürlich HTML und CSS um meine Ziele zu erreichen, welche
    ich mir bereits zum Teil erarbeitet habe, jedoch nun auf ein riesiges
    Problem gestoßen bin das ich absolut nicht in den Griff bekomme.

    Hier mal ein Bild wie es eigentlich aussehen soll:

    pic-upload.de/view-26317391/DP.png.html

    Zur Zeit bin ich an der Index.htm dran und bekomme einfach nicht die
    Bereiche so zentriert wie ich sie gerne hätte. Sobald ich die Größe des
    Fensters vom Browser ändere, verschieben sich z.B die Buttons in der
    Navigation raus aus dem Navigations Bereich, der Header bewegt sich mit
    und drückt sich mit an den Rand und der graue Content Bereich mit dem
    Aktions-Bereich rechts daneben passt ohnehin absolut nicht und der
    Footer war mehr ein Header. Zu dem mir aufgefallen ist das teilweise
    beim aktuallisieren die Buttons sich verstellen auf eine andere Position
    und dort auch benutztbar sind, bis ich wieder aktualisiere und Sie
    zurück an den Ort springen wo sie waren...

    Seit Tagen scheitere ich, so langsam gebe ich es auf. Ich bin mir sicher
    das es an den extrem schlecht geschriebenen Code liegt, in dem sich
    Sachen überschneiden oder ähnliches.

    Ich finde einfach keinen Weg das zu realisieren, dass der Header und die
    Navigation so platziert sind wie sie sollen und der Bereich in der
    Mitte in der Größe der grauen Fläche als Content für Inhalt genutzt
    werden kann (Texte, Bilder, etc).

    Hier einmal mein HTML Code:

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html>
    4. <head>
    5. <title>DEIS-PERFORMANCE</title>
    7. <meta charset="ISO-8859-1">
    8. <meta name="description" content="">
    9. <meta name="author" content="">
    10. <meta name="keywords" content="">
    11. <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)">
    13. <link href="style.css" type="text/css" rel="stylesheet">
    14. </head>
    16. <body>
    18. <header>
    20. <div class="header_png">
    21. <img src="images/header.png" alt="logo">
    22. </div>
    24. <div class="nav_png">
    25. <img src="images/nav.png" alt="on">
    27. </div>
    29. <div class="home_button">
    30. <a class="home_button" href="index.htm"></a><br>
    31. </div>
    33. <div class="chip_button">
    34. <a class="chip_button" href="chiptuning.htm"></a><br>
    35. </div>
    37. <div class="code_button">
    38. <a class="code_button" href="codierung.htm"></a><br>
    39. </div>
    41. <div class="contact_button">
    42. <a class="contact_button" href="contact.htm"></a><br>
    43. </div>
    45. </header>
    47. <IMG class="content" src="images/content.gif" alt="logo">
    48. <IMG class="event_banner" src="images/event_banner.gif" alt="logo">
    50. </body>
    53. </html>
    Alles anzeigen


    Und die dazugehörige CSS:

    Quellcode

    1. body {
    2. background:url(images/background.jpg) left top repeat ;
    3. background-size:auto;
    4. left: 0;
    5. right: 0;
    6. margin: 0 auto;
    8. }
    10. .header_png
    11. {
    12. width: 620px;
    13. margin: 0 auto;
    15. }
    17. .nav_png
    18. {
    19. width: 739px;
    20. margin: 0 auto;
    22. }
    24. /* ############## BUTTONS ############## */
    26. /* Startseite */
    28. a { display:block;
    29. background-image:url(images/home_button.gif);
    30. position: absolute;
    31. width: 107px;
    32. height: 47px;
    33. top: 147px;
    34. left: 95px;
    36. left:-510;
    37. right: 0;
    38. top: 147px;
    39. margin: 0 auto;
    41. }
    43. a:hover { background-image:url(images/home_hbutton.gif); }
    45. a.home_button:link { color:#00f; background-color:transparent; }
    46. a.home_button:visited { color:#00f; background-color:transparent; }
    47. a.home_button:hover { color:#ff0; background-color:#00f; }
    48. a.home_button:active { color:#ff0; background-color:#a03; }
    50. /* Chiptuning */
    52. a.chip_button { display:block;
    53. background-image:url(images/chip_button.gif);
    54. position: absolute;
    55. width: 113px;
    56. height: 47px;
    57. top: 147px;
    58. left: -152px;
    59. }
    61. a.chip_button:hover { background-image:url(images/chip_hbutton.gif); }
    63. a.chip_button:link { color:#00f; background-color:transparent; }
    64. a.chip_button:visited { color:#00f; background-color:transparent; }
    65. a.chip_button:hover { color:#ff0; background-color:#00f; }
    66. a.chip_button:active { color:#ff0; background-color:#a03; }
    68. /* Codierung */
    70. a.code_button { display:block;
    71. background-image:url(images/code_button.gif);
    72. position: absolute;
    73. width: 113px;
    74. height: 47px;
    75. top: 147px;
    76. left: 200px;
    77. }
    79. a.code_button:hover { background-image:url(images/code_hbutton.gif); }
    81. a.code_button:link { color:#00f; background-color:transparent; }
    82. a.code_button:visited { color:#00f; background-color:transparent; }
    83. a.code_button:hover { color:#ff0; background-color:#00f; }
    84. a.code_button:active { color:#ff0; background-color:#a03; }
    86. /* Kontakt */
    88. a.contact_button { display:block;
    89. background-image:url(images/contact_button.gif);
    90. position: absolute;
    91. width: 86px;
    92. height: 47px;
    93. top: 147px;
    94. left: 550px;
    96. }
    98. a.contact_button:hover { background-image:url(images/contact_hbutton.gif); }
    100. a.contact_button:link { color:#00f; background-color:transparent; }
    101. a.contact_button:visited { color:#00f; background-color:transparent; }
    102. a.contact_button:hover { color:#ff0; background-color:#00f; }
    103. a.contact_button:active { color:#ff0; background-color:#a03; }
    105. IMG.content {
    106. display: block;
    107. margin-top: -85px;
    108. margin: -86 auto;
    109. margin-left: 50px;}
    111. IMG.event_banner {
    112. display: block;
    113. margin-top: -85px;
    114. margin: -425 auto;
    115. margin-left: 580px;
    116. }
    Alles anzeigen


    Ich bedanke mich schon einmal herzlich!

    MFG.


    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Yayo ()

  • Moin, vielen Dank für das Example!

    Mittlererweile habe ich es hinbekommen meine Seite über Float dem resizen anzupassen,
    jedoch bin ich jetzt auf folgendes Problem gestoßen.

    Zuerst mal könnt ihr euch diese hier anschauen: cshansen.de.vu (Ist nur eine test Domain/Webspace)

    Ich teste meine Seite immoment auf verschiedenen Geräten von Laptop bis Samsung und Iphone. Dabei ist mir aufgefallen das die Seite scheinbar ordnungsgemäß wie sie soll angezeigt wird, wenn man mit dem Laptop oder Iphone auf sie zugreift. Allerdings scheint das Android durch einen anderen ? Viewport ? anders zu sehen. Dort werden nämlich aus irgendwelchen Gründen die Buttons in falschen Positionen angezeigt.

    Hier mal ein Bild davon: [Blockierte Grafik: http://www11.pic-upload.de/thumb/07.03.15/luvzzwor1myh.png]

    Woran kann das liegen und wie kann ich das Problem lösen ?

    Ich kann über der .css die Positionen der Buttons verändern, dann werden sie theoretisch richtig angezeigt wenn ich sie für Android anpasse. Jedoch sind sie denn natürlich falsch auf Iphone und Desktop/Laptop...

    MFG.