Anfänger CSS Problem mit position?

  • Anfänger CSS Problem mit position?

    Hallo.

    Neu hier und gleich ein Anfänger Problem :)

    Ich
    habe eine kleine Seite mit css erstellt. Dabei soll Links ein Bild
    angezeigt werden. Rechts sind kleine Bilder ( Vorschau ). Per
    javascript wird das große Bild durch klicken auf ein Vorschaubild
    ausgetauscht.

    Mein Problem ist folgendes. Wenn ich die Seite lade sitzt das große Bild unten rechts. Es soll aber mittig sein. Wenn
    ich
    dann ein Vorschaubild anklicke rutscht das große Bild (welches auch
    ausgetauscht wird) an die richtige Stelle(mittig). Bei weiteren
    anklicken
    von Vorschaubildern stimmt die Position auch wieder. Wenn ich die Seite
    neu lade springt es wieder unten rechts hin. Wie bekomme ich
    es hin das das Bild beim laden der Seite auch an der richtigen Stelle ist?

    Hier der Code der html Seite und der CSS Code.

    Quellcode

    1. html, body {
    2. background-color: #A9BED2;
    3. margin: 0px;
    4. padding: 0px;
    5. height: 100%;
    6. font-size: 18px;
    7. font-family: Book Antiqua;
    8. color: #ffffff;
    9. overflow: auto;
    10. }
    12. A:link {text-decoration: none; color: #ffffff;}
    13. A:visited {text-decoration:none; color: #ffffff;}
    14. A:active {text-decoration:none; color: #ffffff;}
    15. A:hover {text-decoration:none; color: #ffffff;}
    17. .navi {
    18. font-family: Book Antiqua;
    19. color: #ffffff;
    20. font-size: 30px;
    21. }
    23. /*Navigation*/
    24. #navigation {
    25. position: absolute;
    26. top: 5px;
    27. right: 20px;
    28. width: 600px;
    29. height: 20px;
    30. text-align: right;
    31. }
    32. #navigation ul {
    33. list-style-type: none;
    34. font-style: inherit;
    35. font-variant: small-caps;
    36. font-weight: bolder;
    37. }
    38. #navigation li {
    39. display: inline;
    40. }
    42. /*Banner*/
    43. #banner {
    44. position: absolute;
    45. top: 5px;
    46. left: 10px;
    47. width: 380px;
    48. height: 35px;
    49. text-align: center;
    50. }
    51. #banner a {
    52. font-family: Book Antiqua;
    53. font-size: 40px;
    54. font-style: bold;
    55. }
    57. /*Bildvorschau*/
    58. #bildvorschau {
    59. position: absolute;
    60. top: 100px;
    61. right: 10px;
    62. width: 212px;
    63. height: 300px;
    64. }
    66. /*anzeige großes Bild*/
    67. #bildg {
    68. position: absolute;
    69. top: 100px;
    70. left: 300px;
    71. }
    72. #bildg img {
    73. border: 3px solid #FFFFFF
    74. }
    Alles anzeigen


    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    2. <html>
    3. <head>
    4. <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    5. <title>Augenblicke</title>
    6. <link href="../style.css" rel="stylesheet" type="text/css" />
    7. <script type="text/javascript">
    8. <!--
    9. window.onload = showImage;
    10. function showImage() { // v1.0
    11. if (!document.getElementsByTagName) return true;
    12. var allImages = document.getElementsByTagName("img");
    13. for (var i=0, anImage; anImage=allImages[i]; i++) {
    14. if (anImage.className == "anzeigen") {
    15. var bigImageBox = document.getElementById("bildg");
    16. anImage.onclick = function() {
    17. bigImageBox.innerHTML = '<img src="' + this.parentNode.href + '" />';
    18. return false;
    19. }
    20. anImage.parentNode.onfocus = function() {
    21. bigImageBox.innerHTML = '<img src="' + this.href + '" />';
    22. return false;
    23. }}}}
    24. -->
    25. </script>
    26. </head>
    27. <body>
    28. <div id="navigation">
    29. <ul>
    30. <li><a href="erste.html">Erste Blicke</a></li>
    31. <li><a href="ueber.html">Über mich</a></li>
    32. <li><a href="gaestebuch.html">Gästebuch</a></li>
    33. <li><a href="kontakt.html">Kontakt</a></li>
    34. </ul>
    35. </div>
    36. <div id="banner">
    37. <a href="erste.html">Blicke</a>
    38. </div>
    39. <div id="bildvorschau">
    40. <a href="erste/image01.jpg"><img class="anzeigen" src="erste/vorschau/image01.jpg"></a>
    41. <a href="erste/image02.jpg"><img class="anzeigen" src="erste/vorschau/image02.jpg"></a>
    42. <a href="erste/image03.jpg"><img class="anzeigen" src="erste/vorschau/image03.jpg"></a>
    43. </div>
    44. <div id="bildg">
    45. <img src="erste/image01.jpg" name="bildg" id="bildg">
    46. </div>
    47. </body>
    48. </html>
    Alles anzeigen


    Wenn mir jemand helfen könnte wäre ich sehr dankbar.

    Schonmal Danke und Schöne Grüße
    pr0

    PS: Ich bin zu blöd den HTML Code hier einzufügen :(

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von pr0j3ctx ()