Ergebnis 1 bis 3 von 3

Thema: Positionierung von Bildern

  1. #1
    HTML Newbie
    Registriert seit
    05.06.2013
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Positionierung von Bildern

    Guten Tag,
    ich schlage mich schon länger mit einem CSS-Problem herum.
    Ich möchte auf einer Seite kleine Vorschaubilder mit der hover-Funktion vergrößern.
    Das ganze wäre auch kein Problem, wenn nicht die kleinen Bilder im dann grossen Bild sichtbar wären.
    Ich möchte also, dass wenn ich über das kleine Bild mit der Maus fahre, daraus ein grosses Bild wird, und zwar im Vordergrund, ohne dass noch ein kleines Bild angezeigt wird. Die kleinen Bilder möchte ich nebeneinander und untereinander anordnen.
    Mit der Positionierung: absolute klappt es eben nicht.
    Gefallen würde mir, dass ich das grosse Bild in die Mitte der Seite platziere, immer an der gleichen Stelle – aber eben total im Vordergrund.
    Kann mir da jemand helfen?
    Zum besseren Verständnis habe ich den Code hier noch mal dargestellt.
    Vielen Dank im voraus
    Matthias
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]http://www.w3.org/TR/html4/strict.dtd[/URL]">
    <html lang="de">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>
    Infobox</title><style type="text/css">
    <!--img {
    border:none;
    }
    #box_1{
    position:fixed; top:20px;height:75px;width:100px;
    }
    #box_1 div{
    display:none;
    }
    #box_1:hover div{
    display:block;width:300px;position:absolute;top:20 px;left:20px;
    }
    #box_2{
    position:fixed; top:20px;left:150px;height:75px;width:100px;
    }
    #box_2 div{
    display:none;
    }
    #box_2:hover div{
    display:block;width:300px;position:absolute;top:20 px;left:20px;
    }
    #box_3{
    position:fixed; top:250px;height:75px;width:100px;
    }
    #box_3 div{
    display:none;
    }
    #box_3:hover div{
    display:block;width:300px;position:absolute;top:20 px;left:20px;
    }
    #box_4{
    position:fixed; top:375px;height:100px;width:75px;
    }
    #box_4 div{
    display:none;
    }
    #box_4:hover div{
    display:block;width:300px;position:absolute;top:20 px;left:20px;
    }-->
    </style>
    </head>
    <body>
    <div id="box_1"><a href="#"><img src="01klein.jpg" width="100" height="75" alt="bild"/></a> 
    <div><p><img src="01gross.jpg" width="1160" height="700" alt=""/></p></div></div>
    <div id="box_2"><a href="#"><img src="03klein.jpg" width="100" height="75" alt="bild"/></a>
    <div><p><img src="03gross.jpg" width="1160" height="700" alt=""/></p></div></div>
    <div id="box_3"><a href="#"><img src="04klein.jpg" width="100" height="75" alt="bild"/></a>
    <div><p><img src="Bilder/Test/04gross.jpg" width="1160" height="700" alt=""/></p></div></div>
    <div id="box_4"><a href="#"><img src="05klein.jpg" width="75" height="100" alt="bild"/></a>
    <div><p><img src="05gross.jpg" width="700" height="1160" alt=""/></p></div></div>
    </body>
    </html>
    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
    Samurai Avatar von Bleistift
    Registriert seit
    20.03.2012
    Alter
    22
    Beiträge
    235
    Danke
    0
    Bekam 4 mal "Danke" in 4 Postings

    Standard AW: Positionierung von Bildern

    Code:
    div#box_1 img:hover {
        width: größerebreite;
        height: größerehöhe;
        top...
    }
    Oder du gibst deinen Divs eine Position und Größe an und stellst das Bild auf width="100%" und height="100%" somit passt sich das Image dann automatisch an.

    Das Ding ist das das echt unsauber aussehen kann ^^
    Ich würde dafür JavaScript nehmen, das Bild einem onmouseover oder onclick zuweisen und dementsprechend über JS ein neues Element erstellen was du in den Vordergrund stellst
    Wenn absolute nicht funzt, versuch es mal mit relative ^^


  3. #3
    Interessierte/r Avatar von Friedel
    Registriert seit
    18.09.2008
    Ort
    Weingarten/Pfalz
    Beiträge
    114
    Danke
    1
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: Positionierung von Bildern

    Hallo.

    Du hast das ganze imho recht umständlich mit vielen Divs aufgebaut. Das wäre bestimmt auch einfacher gegangen. Außerdem verschachteslst du unnötigerweise auch noch Textabsätze in deine Divs. Aber darum geht es ja nicht.

    Außerdem hast du ein paar Fehler in deinem Quellcode. Laut Doctype soll das Html4.1 sein.
    HTML-Code:
    <img ... alt="bild"/>
    Aber in allen Bildern benutzt du einen schließenden Slash nach XHtml-Syntax. Das darf man in Html nicht.

    Dass dein großes Bild vor dem kleinen ist, erreichst du mit z-index. Das große Bild muss einen höheren z-index bekommen, als das kleine.

    Ich empfehle als Lektüre http://www.ohne-css.gehts-gar.net/0012.php. Da geht es zwar nicht speziell um Fotos, aber natürlich kann man in die Tooltips auch Fotos machen und als Trägerelement ein verkleinertes Bild benutzen.

Ähnliche Themen

  1. CSS Positionierung
    Von jensnrw im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 17.05.2009, 17:32
  2. CSS Positionierung
    Von JackD im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 27.03.2008, 13:13
  3. CSS Positionierung
    Von daniel8888 im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 07.12.2007, 13:22
  4. Positionierung
    Von happychillkroete im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 24.09.2006, 17:56
  5. css positionierung
    Von im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 11.01.2005, 19:24

Stichworte

Berechtigungen

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