Sie sind nicht angemeldet.

    • [Hilfe: (x)HTML/CSS] Bildergalerie erstellen

    • fantaflascher

      Routinier

      • »fantaflascher« ist der Autor dieses Themas

    • Beiträge: 622

      Aktivitätspunkte: 3 210

      Registrierungsdatum: 28. Oktober 2009

      Wohnort:

      Beruf: Multimedia Designer, Pressefotograf, unabhängiger Autor in verschiedenen Fachverlagen

      Danksagungen: 65 / 38

      • Nachricht senden

    1

    Montag, 26. Juli 2010, 00:52

    Bildergalerie erstellen

    Ich will euch auchmal nerven. So hänge gerade an einer Webpage und da sollen einige Bildergalerien rein. Hatte es mit Lightroom probiert ist aber nicht das richtige finde ich. Wie lößt ihr das Problem wenn ihr Bildergalerien auf eure Page macht. Die galerie soll so sein das ich die normalen kleinen Bilder habe und wenn ich drauf klicke das sich das Bild vergrößert. Habe aber echt keine Ahnung von Flash also brauch ich eine andere Lösung.

    Quellcode

    		 
    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
70

    <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS Design Startseite </title>
<link rel="stylesheet" href="Css/stylesheet.css"/>
</head>

<body>
<div id="navigation">
<ul>
<div class="innen"></div>

</ul>
</div>
<div id="wrapper">
<div id="banner"><img src="Image/header.png" width="950" height="150" />
<div id="main">
<p>
<strong>Fotografie  </strong>
</p>
<p>
 Auf diesen Seiten stelle ich einige meiner Fotos vor die ich in der letzten Zeit gemacht habe. Ein paar davon finden Sie auch auf pixolino.de. Es kommt nicht darauf an welche Kamera Sie arbeiten sondern was Sie aus dem Motiv machen. Der beste Fotograf ist nur so gut wie sein gestaltetes Motiv.  <a href="Fotogalerie/index.html"[color=#ff0000]>Hier geht es zur Galerie<[/color]/a>da soll die Galerie gestartet werden + Navi 
<p>
</p>
<p>
</p>
<p>
</p>
<strong>Photoshop </strong>
</p>
<p>

Man kann viel mit Photoshop erreichen. Die einen erstellen Artworks die anderen nehmen Photoshop zum bearbeiten ihrer RAW Dateien. Hier auf dieser Seite zeige ich ein paar Arbiten von mir in Photoshop. Einige Arbeiten davon sind durch sehr gute Deutsche und Englische Tutorials entstanden. Andere aus einer Stimmung heraus oder für liebe Menschen bei denen ich mich bedanken wollte. 
</p>

<p>
<strong>Tutorials </strong>
</p>
<p>

Gerade Anfänger haben immer wieder Probleme in Photoshop Bilder zu gestalten. Es gibt sehr gute Tutorials doch die meisten Autoren setzen vorraus das man Erfahrungen in Photoshop hat. Auf meinem Youtube Kanal veröffentliche ich immer wieder neue Tutorials die für Anfänger gedacht sind. Hier kann man jedem Schritt folgen und versteht so wie man etwas in Photoshop gestalten kann. 
</p>

</div>
<div id="sidebar">
<strong></strong>
<p>
 <img src="Image/Bumen.png" width="250" height="100" />
 </p>

<p>
</p>
<strong></strong>
<p>
 <img src="Image/Valentinskarte.jpg" width="250" height="100" />
 </p>
 
 <strong></strong>
<p>
 <img src="Image/Bumen.png" width="250" height="100" />
 </p>
 
</div>
</div>
<div id="footer"
</div></div>
</div>
</body>
</html>


    CSS ist im Moment noch so

    Quellcode

    		 
    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

    @charset "utf-8";
body {
	background:#96b3bd;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFF;
	font-size:12px;
	line-height:18Px;
	margin:0px;
	padding:0px;
}
#navigation.innen,
#wrapper,
#footer{
	width:950px;
	text-align:left;
	margin:0 auto;
}
#sidebar,
#main {
	width:475px;
}
#main {
	float:left;
	border-top:2px #666;
	border-bottom:2px #666;
	
}
#sidebar {
	width:300px;
	float:right;
	margin:auto;
	padding:0px;
	border-top:2px #666;
	border-bottom:2px #666;
}
#footer {
	clear:both;
}

    2

    Montag, 26. Juli 2010, 07:09

    Es dürfte wohl kein Problem sein, eine große und eine Kleine Version des Bildes herzustellen und das ganze per Lightbox 2 einzubinden:
    http://www.huddletogether.com/projects/lightbox2/
    Ich weiß nicht wo da das Problem ist.
    Dann machst du 3 Divs nebeneinander oder 4 jenachdem wie breit deine Galerie sein soll, und dann baust du einfach die Bilder untereinander ein, einfach und sauber.

    Gruß
    finalarts.de: 100%

    Web- und Multimediadesign; Coding

    Ähnliche Themen

    • Grufix-Board.de - GFX Webdesign Foto & Coding Community

    Grafik-Tutorials | Coding-Tutorials | Ressourcen | SEO | Webdesign | HTML5
    W3C Validator

    Forensoftware: Burning Board® 3.1.6, entwickelt von WoltLab® GmbH