Suche Rat, Hilfe

Muranoo · 09.04.2009

Hallo liebe Leser,
ich arbeite seit einer Woche ca. an meiner Website.
Nun hab ich alles soweit erledigt bis auf das letzte Teil.
Und dafür suche ich einige Code-Schnipsel bzw. ein Template oder so.

Kurze Vorgeschichte: Eines meiner Hobby's ist chatten in einer Comunity.
Nun möchte ich eine Art 'Magazin' von der Community - für die Community monatlich veröffentlichen.

Zuvor wollte ich es über PDF-Format veröffentlichen,
nun habe ich mich aber dazu entschlossen eine Webversion rauszubringen,
die Gründe sind ganz einfach: weil ich mehr Möglichkeiten habe das Magazin zu gestalten.

So, das Problem ist, ich weiß nicht welche Befehle ich dafür brauche damit ich sowas zusammenbekomm:
Ich habe diese Bilder im Paint gezeichnet damit Ihr wisst was ich mir in etwa vorstelle.

oder:

DJND · 09.04.2009

AW: Suche Rat, Hilfe

Bilder in Paint gezeichnet? Sieht aus wie ein Text, den man genauso gut in Word erfassen kann und ihn in eine HTML wandeln kann und dann als Index.html raufladen kann. Dann hättest Du das Layout, wie in den Bildern.

Muranoo · 09.04.2009

AW: Suche Rat, Hilfe

und ihn in eine HTML wandeln

wo soll ich das dann machen? :uhm:

psychomania · 09.04.2009

AW: Suche Rat, Hilfe

Du kannst das direkt in WORD machen.

Im Dateimenü findest du mehr!

Muranoo · 09.04.2009

AW: Suche Rat, Hilfe

es geht nich leute?
Ich habs in Microsoft Office Word 2007 gemacht & unter 'Seitenlayout' den text in 2 Spalten geteilt, wenn ich dann unter Speichern geh sagen wir mal index.html Dateityp: Webseite .. wirds trotzdem normal angezeigt und nicht wie ichs haben will. ôo

Maveric123 · 09.04.2009

AW: Suche Rat, Hilfe

Du kannst es doch auch gleich als 'Webseite' Speichern... Schau mal ins Menue 'Datei'

mikel199511 · 09.04.2009

AW: Suche Rat, Hilfe

also bei mir ist das mit dem word 2003 perfekt gegangen ^^

leohh · 09.04.2009

AW: Suche Rat, Hilfe

Ich waer ja mal so frech das multicolum modul von CSS3 vorzuschlagen aber

ist es (noch) nicht fertig / bzw. wird von den Browsern nicht unterstuetzt
scheinst du selber etwas weniger Ahnung davon zu haben

Eine andere Moeglichkeit waere z.B. , dass ich in einem vergangenen Projekt verwendet hatte und mir doch sehr gute Dienste erwiesen hat. Gut es ist eine partielle Loesung aber was hat Word mit HTML -bzw. CSS am Hut?!

cvdR · 09.04.2009

AW: Suche Rat, Hilfe

eine andere möglichkeit für einen anfänger ist -> wordpress!

warum?, weil! -> in 5 minuten installiert und du bist schon web 2.0 /*ironie */

Muranoo · 18.04.2009

AW: Suche Rat, Hilfe

Guten Morgen, ich bins nochmal.
Ich hab mir nun eine andere Website-Struktur aufgebaut und nun liegt ein letzter Stein im Weg, bevor mein Projekt fertig ist.

Ich habe mir zahlreiche TUT's angesehen, auch das für 90 Punkte und andere Themen zur Lightbox 2. Leider wird das für mich nicht genau genug erklärt, bzw. denke ich bestimmt zu kompliziert. Daher mein Hilferuf an euch, hat noch jemand von euch soviele Nerven für mich, um mir das genau zu erklären? :uhm:

Und zwar:
folgendes hab ich wie in zahlreichen TUT's beschrieben auch befolgt.

Ich habe die 4 Sachen in den header eingebaut.

HTML:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

und weiter mittig habe ich dann noch den link zum Bild

HTML:

<a href="screen.jpg" rel="lightbox" title="Screen">Screen</a>

ist der Code evtl. falsch?

so, und ab hier bleib ich hängen :rolleyes:

muss ich nun einen eigenen Ordner anlegen, wo ich das Bild drinnen liegen hab & mitsamt dann raufladen auf die Webspace? 2) Muss ich in irgendeiner Datei auch etwas ändern? oder so wie ich die ZIP gedownloadet hab, nachdem entpacken einfach hochladen auf die Webspace?

bzw. ich verstehe noch immer nicht die Erklärung:
Einmal das Bild in Groß und in Klein speichern

Matte · 18.04.2009

AW: Suche Rat, Hilfe

Also... liegen deine Bilddateien direkt im Stammverzeichniss? der Pfad zum "screen.jpg" verweist ja praktisch direkt aufs Stammverzeichniss deiner HP. Für gewöhnlich liegen Bildateien in Ordnern wie z.B. "img" oder "images" ..

Ausserdem solltest du mal beschreiben was auf deiner Homepage jetzt passiert, also welcher Fehler auftritt.

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Wofür ist das letzte "/" ?

Gruß

Matte

Muranoo · 18.04.2009

AW: Suche Rat, Hilfe

Hallo Matte,
nein, ich hab nen Ordner 'Bilder' dort befindet sich diese Datei screen.jpg

Wofür der letzte Slash stehen sollte, bin ich eigentlich auch überfragt, ich habe diesen code nur kopiert :lol:

Muss ich dann meine recht.html -Datei in den Ordner lightbox2_deutsch kopieren und dann zusammen hochladen oder muss ich dass einzeln hochladen, sprich nur den Ordner mit ligthbox2_deutsch und danach die recht.html -Datei extra hochladen?

Matte · 18.04.2009

AW: Suche Rat, Hilfe

Gib mal den Link zum Tutorial. Ich versuch das dann morgen früh mal nachzubasteln. Hatte auch grade mit Lightbox angefangen.
Aber erst nach Feierabend

Auf jeden Fall müsste dann aber der Code in deinem Fall <a href="bilder/screen.jpg" rel="lightbox" title="Screen">Screen</a> lauten.

Von hier aus kann ich das aber schlecht rausfinden.... ich guck morgen früh mal

Castordesigns · 18.04.2009

AW: Suche Rat, Hilfe

Matte schrieb:
Also... liegen deine Bilddateien direkt im Stammverzeichniss? der Pfad zum "screen.jpg" verweist ja praktisch direkt aufs Stammverzeichniss deiner HP. Für gewöhnlich liegen Bildateien in Ordnern wie z.B. "img" oder "images" ..

Ausserdem solltest du mal beschreiben was auf deiner Homepage jetzt passiert, also welcher Fehler auftritt.

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Wofür ist das letzte "/" ?

Gruß

Matte

das letzte / ist weil es ein Tag ist ohne inhalt. Bedeutet, dass er geschlossen sein soll und man schreibt den um strict zu bleiben

sein Problem ist eher dass er gar nicht weiss, wie die Bilder verlinken...

Muranoo schrieb:
Guten Morgen, ich bins nochmal.
Ich hab mir nun eine andere Website-Struktur aufgebaut und nun liegt ein letzter Stein im Weg, bevor mein Projekt fertig ist.

Ich habe mir zahlreiche TUT's angesehen, auch das für 90 Punkte und andere Themen zur Lightbox 2. Leider wird das für mich nicht genau genug erklärt, bzw. denke ich bestimmt zu kompliziert. Daher mein Hilferuf an euch, hat noch jemand von euch soviele Nerven für mich, um mir das genau zu erklären? :uhm:

Und zwar:
folgendes hab ich wie in zahlreichen TUT's beschrieben auch befolgt.

Ich habe die 4 Sachen in den header eingebaut.

HTML:

<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

und weiter mittig habe ich dann noch den link zum Bild

HTML:

<a href="screen.jpg" rel="lightbox" title="Screen">Screen</a>

ist der Code evtl. falsch?

so, und ab hier bleib ich hängen

muss ich nun einen eigenen Ordner anlegen, wo ich das Bild drinnen liegen hab & mitsamt dann raufladen auf die Webspace? 2) Muss ich in irgendeiner Datei auch etwas ändern? oder so wie ich die ZIP gedownloadet hab, nachdem entpacken einfach hochladen auf die Webspace?

bzw. ich verstehe noch immer nicht die Erklärung:
Einmal das Bild in Groß und in Klein speichern

Zip entpacken und Ordner /images und /js hochladen

danach, wei du es gesagt hast folgende Dinge in den Header deiner HTML datei schreiben:

HTML:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

ich nehme an du hast bereits eine CSS Datei. Deshalb kannst du in den /css ordner deines zip files gehen und den code aus dieser Datei kopieren und in dein bereits bestehende CSS datei einfügen

HTML:

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }

#imageData{    padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }    
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }            
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}         

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

Jetzt lädst du Bilder rauf, die in deiner Gallerie angzeigt werden sollen. (Ich würde einen Ordner /gallery erstellen)

jetzt musst du die in deiner html datei auch verlinken. Z.B. durch

HTML:

<a href="gallery/bild1.jpg" rel="lightbox" title="my caption">image #1</a>
[LIST=1]
[*]"<a href="gallery/bild1.jpg" beschreibt den Pfad deines bildes vom Stammverzeichnis ausgesehen
[*]rel="lightbox" Ist DAS wichtige element weil dann die Galleriefunktion "angewendet wird"
[*]title="Beschreibung" ist die Beschreibung des Bildes
[*]image #1 wird angezeigt wenn das Bild nicht geladen werden kann.
[/LIST]
[*]Falls du eine "Gruppe" von zusammengehörigen Bildenr hast musst du nach dem rel="lightbox" noch in Eckigen klammern die "Gruppe" nennen, dann werden die Zusammengefasst.
[HTML]<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Ich hoffe ich konnte dir helfen...

Muranoo · 18.04.2009

AW: Suche Rat, Hilfe

Gott lass es Hirn regnen :'(
Irgendwas stimmt immer noch nicht.

Hier mal ein Bildscreen wie es im Browser angezeigt wird :mad:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>April-Ausgabe</title>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
  body, p a {
    color: black; background-color: #D7A7ED;
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em;
    min-width: 41em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
  }
  h1 {
    font-size: 1.5em;
    margin: 0 0 1.7em; padding: 0.2em;
    text-align: center;
    background-color: #F0C1FF;
    border: 1px ridge silver;
  }
  html>body h1 {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }
  ul#Navigation {
    font-size: 0.83em;
    float: left; width: 18em;
    margin: 0 0 1.2em; padding: 0;
    border: 1px dashed gray;
  }
  ul#Navigation li {
    list-style: none;
    margin: 0; padding: 0.5em;
  }
  ul#Navigation a {
    display: block;
    padding: 0.2em;
    font-weight: bold;
  }
  ul#Navigation a:link {
    color: black; background-color: #F0C1FF;
  }
  ul#Navigation a:visited {
    color: #666; background-color: #F0C1FF;
  }
  ul#Navigation a:hover {
    color: black; background-color: #F0C1FF;
  }
  ul#Navigation a:active {
    color: white; background-color: gray;
  }
  div#Info {
    font-size: 0.9em;
    float: right; width: 12em;
    margin: 0 0 1.1em; padding: 0;
    background-color: #F0C1FF; border: 1px dashed gray;
  }
  div#Info h2 {
    font-size: 1.33em;
    margin: 0.2em 0.5em;
  }
  div#Info p {
    font-size: 1em;
    margin: 0.5em;
  }
  div#Inhalt {
    margin: 0 12em 1em 16em;
    padding: 0 1em;
    border: 1px dashed gray;
    background-color: #F0C1FF;
  }
  * html div#Inhalt {
    height: 1em;  /* Workaround gegen den 3-Pixel-Bug des Internet Explorers */
  }
  div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0.2em 0;
  }
  div#Inhalt p {
    font-size: 1em;
    margin: 1em 0;
  }
  p#Fusszeile {
    clear: both;
    font-size: 0.9em;
    margin: 0; padding: 0.1em;
    text-align: center;
    background-color: #EEEECC; border: 1px solid gray;
  }
</style>
</head>
<style type="text/css">
<!--
body {background:#D7A7ED;}
-->
</style>
<h1><font color="#4D6DF3">April-Ausgabe <img src="http://i42.tinypic.com/2jb70wx.gif"></font></h1>
<ul id="Navigation">
  <li><a href="editorial.html">Editorial</a></li>
  <li><a href="gewinnspiel.html">Mitmachen und Gewinnen</a></li>
  <li><a href="recht.html">Recht muss Recht bleiben</a></li>
  <li><a href="aktuell.html">Aktuell</a></li>
  <li><a href="leser.html">Leserbriefe</a></li>
  <li><a href="channelinserate.html">Channelinserate</a></li>
  <li><a href="smileytausch.html">Smileytausch</a></li>
  <li><a href="report.html">Report</a></li>
  <li><a href="interview.html">Interview</a></li>
  <li><a href="next.html">Blick in die nächste Ausgabe</a></li>
</ul>
<div id="Info">
  <h2><font color="#4D6DF3">Newsletter</font></h2>
  <p>Du willst das Journal vor allen anderen? Dann schreib uns eine Mail mit dem Inhalt 'Newsletter:<b>on</b>'
Und schon erhälst du das Journal mindestens einen Tag vor allen anderen!</p>
  <p>Du kannst den News-<br>letter auch wieder deaktivieren, indem du uns einfach eine Mail mit dem Betreff 'Newsletter:<b>off</b>' sendest.</p>
</div>
<div id="Inhalt">
  <p><b>Recht muss Recht bleiben</b><br>Manche Leute sind unbelehrbar. Sie werden nie verstehen, was Recht und Unrecht ist.<br><font color="#4D6DF3"><b>Wir haben uns gefragt:</b></font> <i>Ist es Unrecht, nach paar Wörtern kursiv schreiben zu colormuten?</i><br><br><font color="#4D6DF3"><b>Sachverhalt:</b></font><br>Murano begibt sich in den Channel Stammis, wo auch schon das ganze seinen Lauf nahm.<br>Folgender Mitschnitt wurde einem Screen entnommen, die genannten Nicknames erlaubten uns Sie zu nennen.<br><br><a href="bilder/screen.jpg" rel="lightbox" title="Screen">Screen</a>
<br><br><i>Zuckerbärli schrieb: kursiv zu schreiben ist aber lustig ._.<br><font color="red">Murano schrieb: schaut mörder aus :D</font><br>GiiGoLo LaTiiNo DaNiJeL schrieb: fiiiiX oiDaaaa ..<br><font color="red">Murano schrieb: krocha eudaa</font><br>Zuckerbärli schrieb: nix krocha<br>Zuckerbärli schrieb: ._. ._.</i><br><br>Kurze Zeit später folgt die Handlungsweise eines CM’s ohne zu verwarnen:<br><font color="red"><i><u>James (privat):</u></i></font> <i>Du wurdest soeben von (Nickname darf nicht genannt werden) im Channel Stammis gecolormutet. Begründung: Kursiv.</i>
<br><br><font color="red"><b>Auszug aus der CM-Doku:</b></font> Unabhängig von der Situation ist es aber immer das beste, wenn es dem Moderator gelingt, ein Mitglied ohne Anwendung der CM-Funktionen zur Einsicht zu bringen, denn so werden viele zukünftige Konflikte verhindert.<br><br>Viele werden darüber spekulieren, was denn nun wirklich gerechtfertigt ist/wäre oder nicht.<br>Abgesehen von diesem Vorfall wollen wir niemanden damit bloß stellen, sondern nur darauf auffordern das man es erst mit einem freundlichen Hinweis versuchen soll und erst bei Uneinsichtigkeit die Funktionen einsetzen soll. 
<br><br>Seitens <b>Knuddels-Journal</b>: Eine Verwarnung wäre angemessener gewesen.<br><br>Wurdest auch du mal Ungerecht behandelt?<br>Dann schreib uns eine Mail an <font color="#4D6DF3">Knuddels-Journal@gmx.at</font> und erzähl uns deine Geschichte. Oder du mailst uns deinen Leserbrief zu dieser Sache. Mehr dazu, weiter unten.</p>
</p>
</div>
 
<p id="Fusszeile">© Knuddels-Journal 2009</p>
<div style="float:left;"> <p><a href="index.html"><img src="http://i42.tinypic.com/sd3aiw.png" border="0" alt="Zurück"></a> </div>
<div style="float:right;"> <p><a href="index.html"><img src="http://i39.tinypic.com/j6gzeh.png" border="0" alt="Weiter"></a> </div>
<br style="clear:both;" />
</html>

und hier der Quelltext, vl. kann mir jemand weiterhelfen, bzw. wo genau gehört der .css code eingebaut? im Headbereich?

leohh · 18.04.2009

AW: Suche Rat, Hilfe

Den Fehler suchst du am besten genau Hier:

<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

Muranoo · 18.04.2009

AW: Suche Rat, Hilfe

<script type="text/javascript" src="js/scriptaculous.js?load=effects, builder"></script>

hab ich jz noch reingebn .. läuft immer noch nicht..
wo muss ich denn die css datei positionieren? oder kann ich die auch so extra hochladen?

leohh · 18.04.2009

AW: Suche Rat, Hilfe

Ja meine Guete, wie impementiert man denn seine Stylesheets?!
Entweder inline in deinem Code, wie du es bereits auch schon drin hast
oder extern, wie es bei der lightbox vorgeschlagen wird. Du solltest lediglich aufpassen
dass auf die richtigen Pfade referenziert wird.

Ansonsten gib uns mal Livecode ..
Prinzipiell vertraue ich persoenlich nicht darauf, dass hier geposteter Code dem Livecode entspricht.

Muranoo · 18.04.2009

AW: Suche Rat, Hilfe

bitte was?
welchen Livecode?

Ich will doch nur, damit die Lightbox läuft :eek:

Der Quellcode ist doch schon drinne ôo

Doitsu · 18.04.2009

AW: Suche Rat, Hilfe

Mit anderen worten, Huendchen will ein Link zu deiner Seite.

</style>
</head>
<style type="text/css">

</style>

Du machst 'nen Style-Tag zu, machst den Header zu, und danach wieder nen Style-Tag auf.. Wo is da der Sinn?
Den Body-Tag hast du auch geschickt weg gelassen ..