Bildergalerie

fantaflascher · 26.07.2010

Ich hab da mal ein ganz großes Problem. Werkel gerade an meiner Page herum und wie immer ich will es selber machen denn nur dann kann ich sagen ja das habe ich gemacht. So ich habe jetzt die Startseite aufgebaut.

Code:

<!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">Hier geht es zur Galerie</a>
<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>

Die CSS sieht so aus

Code:

@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;
}

Jetzt versuche ich unter den Bereichen Fotos, Photoshop und Tutorials eine Galerie erstellen. Mit Lightroom geht es ja aber ich bekomme einfach nicht die richtige Farbe und größe hin.

Meine Frage wie löst ihr das Problem mir euren Bildern auf der Homepage?? Ich stehe im Moment auf dem Schlauch. Ach so noch eins ich habe keine Erfahrung in Flash.

Wäre für Tipps dankbar

LG

fantaflascher

cebito · 26.07.2010

AW: Bildergalerie

Wozu sind die ganzen leeren "p" und "strong" da außer um den Code unübersichtlicher zu machen? Und wo hast du denn versucht was einzubinden?

sokie · 26.07.2010

AW: Bildergalerie

ich versuche das immer nur mit dem allernötigsten markup, deshaöb kommen automatisch erzeugte Galerien meisst nicht in Frage. das Aussehen, kann man ja per css beliebig anpassen.

Code:

<div id="galerie">
  <a href="grossesBild1.jpg"><img src="thumbnail1.jpg" alt="vorschaubild" /></a>
  <a href="grossesBild2.jpg"><img src="thumbnail2.jpg" alt="vorschaubild" /></a>
  <a href="grossesBild3.jpg"><img src="thumbnail3.jpg" alt="vorschaubild" /></a>
  <a href="grossesBild4.jpg"><img src="thumbnail4.jpg" alt="vorschaubild" /></a>
</div>

da kann man dann einfach eine fancybox, cycle usw Galerie draus machen.
wenns etwas mehr sein darf:

Code:

  <a href="grossesBild1.jpg"><img src="thumbnail1.jpg" alt="vorschaubild" /><span>Platz für Caption</span></a>
usw...

fantaflascher · 26.07.2010

AW: Bildergalerie

@cebito
die <p> stehen noch drin weil ich sehen wollte wie es mit dem Text aussieht und wie ich ihn so gestalten kann. Hatte die Zeilen gelöscht aber noch icht die <p>
@sokie
Das Problem ist das ich ein Anfänger in dem Bereich bin und dachte ich kann das mit Lightroom gestalten.
Gerade css ist so ein Bereich den ich nur durch versuchen hinbekomme. Jetzt hänge ich gerade an der Navi. Der Header ist schon in der Mitte die Navi darüber und irgendwie bekomme ich die Navi einfach nicht so über den Header das alles gleich aussieht. Wälze Tutorials und Bücher und bin froh das die CSS bis auf die Navi schon funzt. Deshalb habe ich eben die Angst mir alles zu zerschießen wenn ich jetzt die Galerie einbaue.