zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Realtive Bildhöhe und -breite einer jQuery Slideshow

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.03.2013, 22:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.04.2008
Beiträge: 14
Riedi2008 befindet sich auf einem aufstrebenden Ast
Standard Realtive Bildhöhe und -breite einer jQuery Slideshow

Hallo Leute,

ich bräuchte mal bitte eure Hilfe, da ich absolut keine Idee mehr habe, wie ich mein Problem lösen kann. Ich habe eine jQuery-Slideshow mit zur Zeit festen Bildgrößen.

Ich möchte jedoch die Größe der Bilder in Prozentwerten angeben, jedoch fliegt mir dann das komplette Layout um die Ohren.

Übersicht halber habe ich mein Problem auf folgende Zeilen gekürzt:

HTML-Code:
<html>
  <head>
    <script src="lib/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="lib/jquery-ui-1.10.2.min.js" type="text/javascript"></script>
    <style>
      #slideshow {
        background: red;
        position: relative;
        width: 300px;
      }
      .slide {
        position: absolute;
        top:0;left:0;right:0;bottom:0;
      }
      .slide img {
        float: left;
        width: 100px;
        height: 100px;
      }
      .clear {
        clear: both;
      }
    </style>
    <script>
      $(document).ready(function() {
        $('#slideshow').height($('img').outerHeight());
        $("#slideshow > div:gt(0)").hide();

        setInterval(function() { 
          $('#slideshow > div:first')
            .fadeOut(3000)
            .next()
            .fadeIn(3000)
            .end()
            .appendTo('#slideShow');
          },  5000);
        });
      </script>
    </head>
    <body>
      <div id="slideshow">
        <div class="slide">
          <img src="">
          <h2>Slide 1</h2>
          <p>Beschreibung</p>
          <div class="clear"></div>
        </div>
          <div class="slide">
          <img src="">
          <h2>Slide 2</h2>
          <p>Beschreibung</p>
          <div class="clear"></div>
        </div>
      </div>
  </body>
</html>
Änder ich nun die Höhe und Breite der Bilder wie folgt, passt sich die Höhe des Containers #slideshow und die Bilder werden nicht mehr angezeigt. Ich verstehe allerdings nicht ganz warum. Ich kann auch nicht nachvollziehen von welchen Angaben die 10% genommen werden, aber wahrscheinlich liegt darin auch das Problem.

Code:
.slide img {
  float: left;
  width: 10%;
  height: 10%;
}
Ich hoffe ihr könnt mir weiterhelfen und sagen, wie ich irgendwie eine relative Bildergröße realisieren kann.

Viele Grüße
Riedi
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.03.2013, 22:50
Standardkatze
XHTMLforum-Kenner
 
Registriert seit: 06.02.2007
Beiträge: 1.821
gato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nettgato ist einfach richtig nett
Standard

Deinem Dokument fehlt ein Doctype, z.B.

HTML-Code:
<!DOCTYPE html>
__________________
Über Internet Explorer 8:
Noch bis 8. April 2014 wird der Internet Explorer 6 mit Sicherheitsupdates versorgt.
Bereits jetzt kann dieser Browser aber vollständig durch den IE8 ersetzt werden. Ältere Betriebssysteme und Browserversionen werden von Microsoft nicht mehr unterstützt.
Auch Programme, die den IE7 benötigen, sind kein Argument gegen IE8, da dieser über entsprechende Kompatibilitätsschichten verfügt.
Ab sofort gilt daher der Internet Explorer 8 als vorausgesetzer Mindeststandard.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 25.03.2013, 23:51
Benutzerbild von plastiko
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 26.12.2007
Ort: Hannover
Beiträge: 945
plastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblickplastiko ist ein Lichtblick
Standard

Zitat:
Zitat von Riedi2008 Beitrag anzeigen
Ich kann auch nicht nachvollziehen von welchen Angaben die 10% genommen werden,...
Wenn ich dein Beispiel ohne Bilder zusammenbaue (+ doctype und jquery-1.9.1.min.js ), ergeben 10% von #slideshow (300px * 100px) 30px * 10px.
Baue die Testseite besser selber zusammen und zeige den Link dazu.

Lesetipp: http://xhtmlforum.de/40080-f-r-frage...twortende.html
__________________
MfG
Jens

Geändert von plastiko (26.03.2013 um 00:05 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Wie jQuery Slideshow mehrfach einfügen? MythTakes Javascript & Ajax 5 04.05.2012 17:29
Ladezeitenstatus-Bild bei JQuery Slideshow möglich? MarkusStar Javascript & Ajax 2 19.04.2010 21:44
jquery slideshow uwehamburg Javascript & Ajax 3 28.05.2009 12:37
3 Spalten | Aussen: variable Breite; Mitte: feste Breite dreamshocker CSS 9 17.08.2005 16:23


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:43 Uhr.