Auf Thema antworten 2026

Beitrag

<blockquote data-quote="susiH" data-source="post: 1720921" data-attributes="member: 254055">hi,ich möchte auf meiner startseite eine jquery slideshow einbinden. das problem ist aber, das nur ein smaler streifen des bildes angezeigt wird und auch nur ein einziges bild, obwohl mehrere bilder eingebunden sind. außerdem sollen die bilder in der höhe immer bildschirmfüllend sein, aber die werden immer zu groß angezeigt.hier mal der html code[HTML]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot;&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;title&gt;artdreamers&lt;/title&gt;&lt;!-- slider --&gt;&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot; src=&quot;js/easySlider1.7.js&quot;&gt;&lt;/script&gt;&nbsp; &nbsp; &lt;script type=&quot;text/javascript&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&quot;#slider&quot;).easySlider({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; auto: true, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; continuous: true&nbsp;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &lt;/script&gt;&lt;!-- ende slider --&gt;&lt;link href=&#039;http://fonts.googleapis.com/css?family=Puritan:regular,italic,bold,bolditalic&#039; rel=&#039;stylesheet&#039; type=&#039;text/css&#039;&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;container&quot;&gt;&lt;div id=&quot;content&quot;&gt;&lt;div id=&quot;slider&quot;&gt;&lt;ul&gt;&lt;li&gt;&lt;img src=&quot;bilder/7.jpg&quot; /&gt;&lt;/li&gt;&lt;li&gt;&lt;img src=&quot;bilder/8.jpg&quot; /&gt;&lt;/li&gt;&lt;li&gt;&lt;img src=&quot;bilder/9.jpg&quot; /&gt;&lt;/li&gt;&lt;li&gt;&lt;img src=&quot;bilder/10.jpg&quot; /&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;!-- slider --&gt;&lt;/div&gt; &lt;!-- content --&gt;&lt;/div&gt; &lt;!-- container --&gt;&lt;div id=&quot;menu&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;slidemenu&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;titel&quot;&gt;&lt;a href=&quot;#&quot;&gt;shootings&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;titel&quot;&gt;&lt;a href=&quot;#&quot;&gt;grafikdesign&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div class=&quot;links&quot;&gt;&lt;a href=&quot;#&quot;&gt;name&lt;/a&gt;&lt;/div&gt;&nbsp; &nbsp; &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/HTML]und die css[HTML]html, body&nbsp; &nbsp; {&nbsp; &nbsp; font-family: &#039;Puritan&#039;, arial, serif;&nbsp; &nbsp; width:100%;&nbsp; &nbsp; height:100%;&nbsp; &nbsp; background-color:#ffffff;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; }img&nbsp; &nbsp; {&nbsp; &nbsp; border:0;&nbsp; &nbsp; }&nbsp; &nbsp; #menu&nbsp; &nbsp; {&nbsp; &nbsp; position:fixed;&nbsp; &nbsp; top:250px;&nbsp; &nbsp; padding:25px;&nbsp; &nbsp; &nbsp; &nbsp; width:100px;&nbsp; &nbsp; height:auto;&nbsp; &nbsp; background-color:#FFF;&nbsp; &nbsp; opacity:.7;&nbsp; &nbsp; z-index:100;&nbsp; &nbsp; }&nbsp; &nbsp; #slidemenu&nbsp; &nbsp; {&nbsp; &nbsp; color:#333;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; .links&nbsp; &nbsp; {&nbsp; &nbsp; margin-left:25px;&nbsp; &nbsp; font-size:14px;&nbsp; &nbsp; line-height:1.5;&nbsp; &nbsp; }&nbsp; &nbsp; .links a:link&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; color:#333;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; }.links a:active&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; color:#33cc33;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; }.links a:hover&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; color:#33cc33;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; }.links a:visited&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; color:#333;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; }&nbsp; &nbsp; .titel&nbsp; &nbsp; {&nbsp; &nbsp; margin-top:10px;&nbsp; &nbsp; }&nbsp; &nbsp; .titel a:link&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; color:#333;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; }.titel a:active&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; color:#33cc33;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; }.titel a:hover&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; color:#33cc33;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; }.titel a:visited&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; color:#333;&nbsp; &nbsp; text-decoration:none;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #container&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; width:100%;&nbsp; &nbsp; height:100%;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; position:relative;&nbsp; &nbsp; text-align:left;&nbsp; &nbsp; background:#fff;&nbsp; &nbsp; z-index:1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #content&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; z-index:2;&nbsp; &nbsp; }&nbsp; &nbsp; #slider ul, #slider li,&nbsp; &nbsp; {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; list-style:none;&nbsp; &nbsp; z-index:3;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; #slider li&nbsp; &nbsp; { &nbsp; &nbsp; &nbsp;&nbsp; width:100%;&nbsp; &nbsp; height:100%;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; overflow:hidden; &nbsp; &nbsp; z-index:4;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; #prevBtn, &nbsp; &nbsp; {&nbsp; &nbsp; display:block;&nbsp; &nbsp; vertical-align:middle;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; left:50px;&nbsp; &nbsp; z-index:1000;&nbsp; &nbsp; }&nbsp; &nbsp; #nextBtn&nbsp; &nbsp; {&nbsp; &nbsp; display:block;&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; right:50px;&nbsp; &nbsp; vertical-align:middle;&nbsp; &nbsp; z-index:1000;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; [/HTML]danke schon mal für eure mühe</blockquote>

[QUOTE="susiH, post: 1720921, member: 254055"] hi, ich möchte auf meiner startseite eine jquery slideshow einbinden. das problem ist aber, das nur ein smaler streifen des bildes angezeigt wird und auch nur ein einziges bild, obwohl mehrere bilder eingebunden sind. außerdem sollen die bilder in der höhe immer bildschirmfüllend sein, aber die werden immer zu groß angezeigt. hier mal der html code [HTML] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="style.css"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>artdreamers</title>  <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider").easySlider({ auto: true, continuous: true }); }); </script>  <link href='http://fonts.googleapis.com/css?family=Puritan:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'> </head> <body> <div id="container"> <div id="content"> <div id="slider"> <ul> <li><img src="bilder/7.jpg" /></li> <li><img src="bilder/8.jpg" /></li> <li><img src="bilder/9.jpg" /></li> <li><img src="bilder/10.jpg" /></li> </ul> </div> </div>  </div>  <div id="menu"> <div id="slidemenu"> <div class="titel"><a href="#">shootings</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="titel"><a href="#">grafikdesign</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> <div class="links"><a href="#">name</a></div> </div> </div> </body> </html> [/HTML] und die css [HTML] html, body { font-family: 'Puritan', arial, serif; width:100%; height:100%; background-color:#ffffff; margin: 0; padding: 0; overflow: hidden; } img { border:0; } #menu { position:fixed; top:250px; padding:25px; width:100px; height:auto; background-color:#FFF; opacity:.7; z-index:100; } #slidemenu { color:#333; } .links { margin-left:25px; font-size:14px; line-height:1.5; } .links a:link { color:#333; text-decoration:none; } .links a:active { color:#33cc33; text-decoration:none; } .links a:hover { color:#33cc33; text-decoration:none; } .links a:visited { color:#333; text-decoration:none; } .titel { margin-top:10px; } .titel a:link { color:#333; text-decoration:none; } .titel a:active { color:#33cc33; text-decoration:none; } .titel a:hover { color:#33cc33; text-decoration:none; } .titel a:visited { color:#333; text-decoration:none; } #container { width:100%; height:100%; margin: 0; padding: 0; position:relative; text-align:left; background:#fff; z-index:1; } #content { z-index:2; } #slider ul, #slider li, { margin: 0; padding: 0; list-style:none; z-index:3; } #slider li { width:100%; height:100%; margin: 0; padding: 0; overflow:hidden; z-index:4; } #prevBtn, { display:block; vertical-align:middle; position:absolute; left:50px; z-index:1000; } #nextBtn { display:block; position:absolute; right:50px; vertical-align:middle; z-index:1000; } [/HTML] danke schon mal für eure mühe [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 7, ▼ = 3, ◇ = 2 und die Summe von ▲ und ▼ durch ◇ geteilt wird, was ist das Ergebnis?