ubuntuusers.de

via DuckDuckGo

Probleme mit Html und css Code

Status: Gelöst | Ubuntu-Version: Ubuntu 9.10 (Karmic Koala)
Antworten |

lestat0585

Anmeldungsdatum:
28. April 2009

Beiträge: Zähle...
Zitieren
22. April 2010 17:18

Hallo erstmal,

ich hoffe das zählt für euch auch zum programmieren.

Ich arbeite an einer Internetseite und versuche ein Slideshow einzubauen. Ich habe mich für diese entschieden http://smoothgallery.jondesign.net/showcase/gallery/#myGallery-picture%282%29.

So habe dann wie in der Anleitung http://smoothgallery.jondesign.net/getting-started/ die Daten eingegeben. Siehe hier:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script src="scripts/mootools.v1.11.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" > 

<script src="scripts/jd.gallery.set.js" type="text/javascript"></script>
<meta name="generator" content="Bluefish 1.0.7">
<meta name="author" content="André">
<meta name="date" content="2010-04-22T17:09:27+0200">
<meta name="copyright" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="expires" content="0">
<meta http-equiv="refresh" content="5; URL=http://">
</head>
<body>

<div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
    <h2>Brugges 2006</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/brugges2006/1.jpg" class="full" alt= "bla"/>
      <img src="images/brugges2006/1-mini.jpg" class="thumbnail" alt= "bla"/>
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/brugges2006/2.jpg" class="full" alt= "bla"/>
      <img src="images/brugges2006/2-mini.jpg" class="thumbnail" alt= "bla"/>
    </div>
  </div>
  <div id="gallery2" class="galleryElement">
    <h2>Stock Photos</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/stock/77196_6784.jpg" class="full" alt="Item 1 Title">
      <img src="images/stock/77196_6784_002.jpg" class="thumbnail" alt="thumbnail of Item 1 Title">
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/stock/165392_5486.jpg" class="full" alt="Item 2 Title">
      <img src="images/stock/165392_5486_002.jpg" class="thumbnail" alt="thumbnail of Item 2 Title">
    </div>
  </div>
</div>

</body>
</html>

Zugegeben ich habe nicht viel Ahnung von Html. Aber eigentlich war der Code Valid aber die Ausgabe bringt rein gar nix.

Vielen Dank für die Hilfe

André

Kuehly

Anmeldungsdatum:
15. Oktober 2006

Beiträge: Zähle...
Zitieren
22. April 2010 20:14

Hi André,

also erst mal: Welche Version von der Galerie hast du runter geladen? Wenn du Version 2.1dev genommen hast, hat die Datei mootools.v1.11.js einen anderen Namen. Die heißt wohl jetzt mootools-1.2.1-core-yc.js.

Die ganzen Meta-Tags könntest du erst-mal raus nehmen. Vor allen das hier nervt, weil dann nach 5 Sekunden versucht wird die Seite "http://" zu öffnen: 

1
<meta http-equiv="refresh" content="5; URL=http://">

Um die Gallery dann zu starten ist der dritte Schritt in der Anleitung wichtig. Du musst einen Der Codeblöcke in den Head aufnehmen. Also zum Beispiel: 

1
2
3
4
5
6
7
8
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.addEvent('domready', startGallery);
</script>

In der dritten Zeile musst du myGallery mit der ID von deiner Gallery ersetzen. In dem Fall also myGallerySet.

Bei mir funktioniert es danach.

Gruß, Jan

lestat0585

(Themenstarter)

Anmeldungsdatum:
28. April 2009

Beiträge: 66
Zitieren
22. April 2010 20:51

Vielen Dank erstmal für die schnelle Antwort.

So das ist mein überarbeiteter Code aber irgendwie gehts immer noch nicht. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" > 

<div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
    <h2>Brugges 2006</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      
      <a href="#" title="open image" class="open"></a>
      <img src="images/brugges2006/1.jpg" class="full" />
      <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/brugges2006/2.jpg" class="full" />
      <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
    </div>
  </div>
  
  <div id="gallery2" class="galleryElement">
    <h2>Stock Photos</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
     
      <img src="images/stock/77196_6784.jpg" class="full" alt="Item 1 Title">
      <img src="images/stock/77196_6784_002.jpg" class="thumbnail" alt="thumbnail of Item 1 Title">
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/stock/165392_5486.jpg" class="full" alt="Item 2 Title">
      <img src="images/stock/165392_5486_002.jpg" class="thumbnail" alt="thumbnail of Item 2 Title">
    </div>
  </div>
</div>

<script src="scripts/jd.gallery.set.js" type="text/javascript"></script>

<script type="text/javascript">
function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
timed: false
});
}
window.addEvent('domready', startGallery);

</script>  


</head>
<body>


  </div>
</div>

</body>
</html>

Ist die Frage ist der 2. Teil in der Anleitung wichtig. Oder nonsens. Und die nächste Frage wo füge ich die Teile ein?????

Kuehly

Anmeldungsdatum:
15. Oktober 2006

Beiträge: 282
Zitieren
22. April 2010 22:23

Hi,

ich Head-Bereich einer Seite stehen immer Informationen über die Seite. Zum Beispiel der Titel, CSS-Styles oder Java-Script. Im Body steht der Inhalt.

Die ganzen divs stellen Inhalt da und müssen deshalb im Body stehen. Außerdem muss man bei der Version wohl auch noch die Datei mootools-1.2-more.js einbinden. Eine funktionierende Version würde also so aussehen: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" > 

<script src="scripts/jd.gallery.set.js" type="text/javascript"></script>

<script type="text/javascript">
function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
timed: false
});
}
window.addEvent('domready', startGallery);

</script>  

</head>
<body>

<div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
    <h2>Brugges 2006</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      
      <a href="#" title="open image" class="open"></a>
      <img src="images/brugges2006/1.jpg" class="full" />
      <img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/brugges2006/2.jpg" class="full" />
      <img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
    </div>
  </div>
  
  <div id="gallery2" class="galleryElement">
    <h2>Stock Photos</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      <a href="#" title="open image" class="open"></a>
     
      <img src="images/stock/77196_6784.jpg" class="full" alt="Item 1 Title">
      <img src="images/stock/77196_6784_002.jpg" class="thumbnail" alt="thumbnail of Item 1 Title">
    </div>
    <div class="imageElement">
      <h3>Item 2 Title</h3>
      
      <p>Item 2 Description</p>
      <a href="#" title="open image" class="open"></a>
      <img src="images/stock/165392_5486.jpg" class="full" alt="Item 2 Title">
      <img src="images/stock/165392_5486_002.jpg" class="thumbnail" alt="thumbnail of Item 2 Title">
    </div>
  </div>
</div>

</body>
</html>

Gruß, Jan

lestat0585

(Themenstarter)

Anmeldungsdatum:
28. April 2009

Beiträge: 66
Zitieren
23. April 2010 08:23

Hallo Jan ,

Danke nochmal für deine Hilfe. Mit was schaust du das an wenn es bei dir funktioniert.

Ich habe mal folgendes getestet.

<!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>
<style>

<script src="../../../jon1012-smoothgallery-205a5d5/scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="../../../jon1012-smoothgallery-205a5d5/scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="../../../jon1012-smoothgallery-205a5d5/scripts/jd.gallery.js" type="text/javascript"></script>
<link> rel="stylesheet" href="../../../jon1012-smoothgallery-205a5d5/css/jd.gallery.css" type="text/css" media="screen" </link>

<script src="../../../jon1012-smoothgallery-205a5d5/scripts/jd.gallery.set.js" type="text/javascript"></script>

<script type="text/javascript">

function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
timed: false
});
}
window.addEvent('domready', startGallery);

</script>
</style>
</head>
<body>
<div id="Gallery">
  <div id="gallery1" class="galleryElement">
    <h2>Disneys Velocity</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      
      <a href="http://www.socialmediarelease.de/wp-content/gallery/splitsecond-screenshots/thumbs/thumbs_docks_racing_16.jpg" title="open image" class="open"></a>
      <img src="http://www.socialmediarelease.de/wp-content/gallery/splitsecond-screenshots/docks_racing_16.jpg" width="540" height="320" border="0" alt=""  class="full">
      <img src="http://www.socialmediarelease.de/wp-content/gallery/splitsecond-screenshots/thumbs/thumbs_docks_racing_16.jpg" class="thumbnail" />
    </div>
    </div>
    </div>
    
    </body>

Ich habe jetzt auch ein besseres Programm was mich mehr unterstützt. Aber wenn ich den Code im Browser starte kommt nur 1 großes Bild was neben einem kleinen Bild ist. Woran liegt das? Kann der Browser auf die mootools etc. nicht zugreifen. Oder was geht schief.

Kuehly

Anmeldungsdatum:
15. Oktober 2006

Beiträge: 282
Zitieren
23. April 2010 16:12

Hi André,

ich denke mal, die Pfade zu den Dateien, auf die du verweist stimmen. Das wäre zu Not noch zu prüfen. Es sind aber auch noch drei Fehler in dem Code.

Erstens: Du klammerst komplett alles, was im Head steht mit <style></style> ein. Zwischen den style-Tags steht normalerweise CSS. In deinem Fall sind sie aber erstmal unnötig, und so wie sie im Code stehen sowieso falsch, deshalb müssen sie raus.

Zweitens: 

1
<link> rel="stylesheet" href="../../../jon1012-smoothgallery-205a5d5/css/jd.gallery.css" type="text/css" media="screen" </link>

kann man so nicht schreiben. Richtig heißt es: 

1
<link rel="stylesheet"  href="../../../jon1012-smoothgallery-205a5d5/css/jd.gallery.css" type="text/css" media="screen" />

Drittens: Du schreibst hier den Code für deine Gallery und gibst dem obersten div eine ID (id="Gallery"). 

1
2
3
4
5
6
...
<body>
<div id="Gallery">
  <div id="gallery1" class="galleryElement">
    <h2>Disneys Velocity</h2>
...

Auf diese ID musst du hier verweisen: 

1
2
3
4
5
...
function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
timed: false
...

Die ID steht genau hier: "($('myGallerySet'), {". Wie man sieht stimmen diese nicht überein, deshalb funktioniert es nicht.

Danach solltest du die Datei in jedem normalen Internetbrowser (z.B. Firefox) anschauen können.

Gruß, Jan

lestat0585

(Themenstarter)

Anmeldungsdatum:
28. April 2009

Beiträge: 66
Zitieren
24. April 2010 00:13 
<!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>
<style>

<script src="../../../jon1012-smoothgallery-205a5d5/scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="../../../jon1012-smoothgallery-205a5d5/scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="../../../jon1012-smoothgallery-205a5d5/scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../../jon1012-smoothgallery-205a5d5/css/jd.gallery.css" type="text/css" media="screen" />
<script src="../../../jon1012-smoothgallery-205a5d5/scripts/jd.gallery.set.js" type="text/javascript"></script>

<script type="text/javascript">

function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
timed: false
});
}
window.addEvent('domready', startGallery);

</script>
</style>
</head>
<body>
<div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
    <h2>Disneys Velocity</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      
      <a href="http://www.socialmediarelease.de/wp-content/gallery/splitsecond-screenshots/thumbs/thumbs_docks_racing_16.jpg" title="open image" class="open"></a>
      <img src="http://www.socialmediarelease.de/wp-content/gallery/splitsecond-screenshots/docks_racing_16.jpg" width="540" height="320" border="0" alt=""  class="full">
      <img src="http://www.socialmediarelease.de/wp-content/gallery/splitsecond-screenshots/thumbs/thumbs_docks_racing_16.jpg" class="thumbnail" />
    </div>
    </div>
    </div>
    
    </body>

Hab ich es jetzt richtig ?????

Kuehly

Anmeldungsdatum:
15. Oktober 2006

Beiträge: 282
Zitieren
24. April 2010 12:39

Ich würde mal sagen fast. Nur noch die <style>-Tags aus den Head raus machen, dann funktioniert es bei mir. Das hier sollte also gehen:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>

<script src="../../../jon1012-smoothgallery-205a5d5/scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="../../../jon1012-smoothgallery-205a5d5/scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="../../../jon1012-smoothgallery-205a5d5/scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="../../../jon1012-smoothgallery-205a5d5/css/jd.gallery.css" type="text/css" media="screen" />
<script src="../../../jon1012-smoothgallery-205a5d5/scripts/jd.gallery.set.js" type="text/javascript"></script>

<script type="text/javascript">

function startGallery() {
var myGallerySet = new gallerySet($('myGallerySet'), {
timed: false
});
}
window.addEvent('domready', startGallery);

</script>
</head>
<body>
<div id="myGallerySet">
  <div id="gallery1" class="galleryElement">
    <h2>Disneys Velocity</h2>
    <div class="imageElement">
      <h3>Item 1 Title</h3>
      <p>Item 1 Description</p>
      
      <a href="http://www.socialmediarelease.de/wp-content/gallery/splitsecond-screenshots/thumbs/thumbs_docks_racing_16.jpg" title="open image" class="open"></a>
      <img src="http://www.socialmediarelease.de/wp-content/gallery/splitsecond-screenshots/docks_racing_16.jpg" width="540" height="320" border="0" alt=""  class="full">
      <img src="http://www.socialmediarelease.de/wp-content/gallery/splitsecond-screenshots/thumbs/thumbs_docks_racing_16.jpg" class="thumbnail" />
    </div>
    </div>
    </div>
    
    </body>
</html>

– Jan

lestat0585

(Themenstarter)

Anmeldungsdatum:
28. April 2009

Beiträge: 66
Zitieren
25. April 2010 09:29

Hui erstmal danke grundsätzlich geht des erstmal. Aber er zeigt mir das Bild nicht an auf das ich verweise lediglich in klein bzw. in der Voransicht..... Wenn ich dann drauf klicke öffnet er den Link aber ich möchte ja das man es komplett vorher sieht....

Kuehly

Anmeldungsdatum:
15. Oktober 2006

Beiträge: 282
Zitieren
25. April 2010 14:46

Hi,

stimmt, das war bei mir genauso. Ich hab mir das jetzt gerade nochmal angeguckt. Es scheint an der SmoothGallery zu liegen. Wenn nur ein Bild in der Gallery ist, wird das große Bild nicht angezeigt. Sobald man noch ein Bild rein macht, funktioniert es.

Aber ich denke das sollte ja kein Problem darstellen. Wenn man eine Bildergallery erstellt, hat man normalerweise mehr als ein Bild.

Gruß, Jan

lestat0585

(Themenstarter)

Anmeldungsdatum:
28. April 2009

Beiträge: 66
Zitieren
25. April 2010 18:39

Genauso geht es. Vielen lieben Dank für die Hilfe. Machst du so Webdesign????

Kuehly

Anmeldungsdatum:
15. Oktober 2006

Beiträge: 282
Zitieren
26. April 2010 20:21

Bittebitte. Ich bin noch in der Ausbildung. Aber ich hatte immer mal wieder mit Webdesign zu tun. ☺

– Jan

lestat0585

(Themenstarter)

Anmeldungsdatum:
28. April 2009

Beiträge: 66
Zitieren
26. April 2010 20:40

Na ja ich denk für nen Koch stell ich mich ganz gut mit Rechnern an aber des hat mich überfordert.
Antworten |