diverse fragen bezüglich navigation und links/verweisen auf meiner homepage

[blackarchitect]

hallo,

ich habe jetzt innerhlab von 2 wochen meine homepage gebaselt, ohne jegliche vorkenntnisse. jetzt habe ich noch ein paar fragen bei denne ihr mir vielleicht helfen könnt. ich würde mich sehr freuen.

erstmal meine homepage.

index
(seid gestern online ;Jump, aber hal tnoch nicht fertig!!dachte es ist aber zum besprechen besser wenn ihr seht was ich meine)

so

also

1. ich möchte auf den beiden seiten architektur und design gerne neben den aufgerufenden bildern (mitte, iframe) in die rechte spalte einen erläuterungstext stellen, für jedes bild ein anderer. wie mache ich das?

ich habe es jetzt schon mit java (onlick usw) verusucht, nach doppellinks mit html usw gesucht, aber ich bekomm es niocht hin. dachte erst, ich könnte den iframe einfach so groß machen, das ich bild und text auf eine seite (im iframe) lege, aber ich denke es ist suboptimal wenn ich 30 eigene seiten anlege. das wars also nicht. wie ich bild und text als css div öffnen weiß ich nicht.dann hab ich jetzt 2 iframes, aber das problem ist ein ähnliches. ich hab keine ahnung wie ich das einfach und simpel lösen kann.

2. würde ich gerne dann auch in der rechten spalten (wen möglich und nicht zu komplex) bei manchen bildern noch unter dem text praktisch ein gleiche, kleinere bildergalerie haben.(prinzip: linke seite projekte oder einzelbilder, werden in der mitte dargestellt und rechts beschrieben/und teilweise bei projekten rechts noch weitere bilder dargestellt,nicht links)

3. kann man auch per css einen text klassieren, als div id z.b?

4.wie kann ich meine seite optimieren?ich bin ja noch rookie, hab extra keinen editor (frontpage) benutzt sondern arbeite mit scritptly, weil ich geelsen habe, das sei sauber wenn man von hand programmiert. ich weiß aber nicht ob meine html und css quelltexte sauber sind (d.h. schneller seiten aufbau).

5.ich würde gerne auch unter den bildern mittig den namen des bilds/projekts darstellen, mit links und rechts pfeilen die durch die galerie führen, anlog zu der link-unten liegenden navigation, allerdings halt nur innerhlab der galerien, nicht das man z.b. auf kontakt springt.hatte das auch schon mit java.script probiert, per index, aber irgendwie hab ich probleme mit java.script, scriptly färbt viele function/tag rot, obwohl javahistory:back oder so funktiniert.

6.

bei 2 freunden wurde auf der start seite entweder die unteren wörter übereinander oder die startseite 2 mal angezeigt. beide benutzen firefox.komisch.

7. mit dem hintergrundfarbe git es noch probleme, aber ich werde nach der arbeit mal probieren , das mitphotoshop websicher zu machen.deshalb entschuldigt, de rhintergrund meiner hompage ist eher pastell-orange als gelb.

so den html quelletxt bekommt ihr ja auf meine homepage, die css psote ich mal

oh, ist zu lang, hänge den kopletten code an,

die gekürzte version hier

body
       {
          background-image:url("../img/back1024.gif");
          background-position: right;
          background-repeat:no-repeat;
          margin: 0;
          padding: 0;
          background-color: white;
          color: #000000;
          font-family:century gothic;
          font-size: 100.01%;
       }

p  {
            color: #9A9692;
            font-size: 12pt;
            font-family:century gothic;
            position:absolute;

       }



h1   {
            color: #9A9692;
            font-size: 14pt;
            font-family:century gothic;
            position:absolute;
            font-weight: normal ;
       }

#mainwindow1, #mainwindow2
       {
           background-image:url("../img/main2.gif");
           background-position:center;
           background-color: transparent;
        /*   margin: auto 10% 10% auto;  */
           margin-bottom: 50px;
           margin-top: 20%;
           margin-right: 10%;
           margin-left:auto;
         /*   position: absolute; */
           height: 500px;
           width: 1000px;
          /* right: 15%;  */
        }


#mainwindow1
        {
         background-image:url("../img/main1b.gif");
         }

#mainwindow2
        {
         background-image:url("../img/main2b.gif");
         }



#text1
          {
           background-color:transparent;
           margin-top: 90px;
           margin-left:70px;
           position:absolute;
           width: 300px;
           height: 300px;
        }


#textrechts
          {
           background-color:transparent;
           margin-top: 90px;
           margin-left:500px;
           position:absolute;
           width: 300px;
           height: 300px;
        }


#button1
          {
           background-image:url("../img/buttonarchi2.gif");
           background-color: transparent;
           margin-top: 77px;
           margin-left:557px;
           height:323px;
           width: 75px;
           position:absolute;
           cursor : pointer;
        }



#arrow1
         {

            background:url(../img/arrow4.gif) ;
            width:  20px;
            height: 17px;
            text-align: left;
            background-repeat: no-repeat;
            position: absolute;
            margin-left: 38px;
            margin-top: 423px;
            cursor : pointer;
         }


#arrow2
         {

            background:url(../img/arrow5.gif) ;
            width:  20px;
            height: 17px;
            text-align: left;
            background-repeat: no-repeat;
            position: absolute;
            margin-left: 78px;
            margin-top: 423px;
            cursor : pointer;
         }

#arrow3
         {

            background:url(../img/arrow3.gif) ;
            width:  15px;
            height: 15px;
            text-align: left;
            background-repeat: no-repeat;
            position: absolute;
            margin-left: 60px;
            margin-top: 424px;
            cursor : pointer;
            z-index:2;

         }



#collage
          {
           background-image:url("../img/dreier2.gif");
           background-color: transparent;
           margin-top: 240px;
           margin-left:560px;
           height:161px;
           width: 417px;
           position: absolute;

        }


#vitaetext1
          {
           background-color:transparent;
           margin-top:90px;
           margin-left:70px;
           height:300px;
           width: 400px;
           position: absolute;

        }


img     {
          border: none !important; /*important nur zum testen*/
          display: block;
         }



.gshow
        {
          background-color:transparent;
          background-position: center;
          border: 1px black;
          height: 305px;
          width: 420px;
          margin: 75px auto auto 300px;
          position:absolute;
          padding:0;
       }


.gtext
        {
          background-color:silver;
          background-position: center;
          border: 1px black;
          height: 330px;
          width: 170px;
          margin: 75px auto auto 800px;
          position:absolute;
          padding:0;
       }


.gallery1
      {
          background-color:transparent;
          border: 1px solid #9A9692;
          height: 50px;
          width: 50px;
          margin: 75px auto auto 20px;
          position:absolute;
      }

.gallery2
      {
          background-color:transparent;
          border: 1px solid #9A9692;
          height: 50px;
          width: 50px;
          margin: 75px auto auto 75px;
          position:absolute;
      }



.p1   {
            color: #ff5500;
            font-size: 15pt;
            font-family:century gothic;
            margin-left: 118px;
            margin-top: 420px;
            text-decoration:none;
            cursor : pointer;
            position:absolute;
            z-index:2;
       }


.p2
       {
            color: #ff5500;
            font-size: 15pt;
            font-family:century gothic;
            margin-left: 238px;
            margin-top: 420px;
            text-decoration:none;
            cursor : pointer;
            position:absolute;
            z-index:2;
       }
.p3
       {
            color: #ff5500;
            font-size: 15pt;
            font-family:century gothic;
            margin-left: 318px;
            margin-top: 420px;
            text-decoration:none;
            cursor : pointer;
            position:absolute;
            z-index:2;
       }
.p4
       {
            color: #ff5500;
            font-size: 15pt;
            font-family:century gothic;
            margin-left: 498px;
            margin-top: 420px;
            text-decoration:none;
            cursor : pointer;
            position:absolute;
            z-index:2;
       }


.p1shadow   {
            background:url(../img/archishadow.gif);
            margin-left: 92px;
            margin-top: 418px;
            cursor : pointer;
            position:absolute;
            z-index:1;
            height:30px;
            width:150px;
       }


       }

uff, also ich hab kein gutes gefühl euch soviel zu lesen zu geben. ich hab versucht es ordenlich zu halten. wie gesagt, ich basle seit 2 wochen und möchte bis anfang nächster woche fertig sein, damit ich mich damit auch bewerben kann. wenn ihr ideen hätten wäre das super!!!wenn ihr keine lust habt, weil es glaub ich echt viel ist, wünsch ich euch ein schönes wochende


grüße christopher

vielen dank schon mal im vorraus

 

[blackarchitect]

mmhh

schade, anscheinend hat keiner von euch eine idee. vielleicht hab ich zuviel geschrieben oder nicht klar mein problem dargestellt, oder falsches forum.

ich bin immer noch nicht weiter dabei wollte ich heute unbedingt fetig werden, zumindest mit den technischen aspekten.

also wenn irgendjeamnd auch nur ne idee hat, dann postet sie bitte, details kann ich mir dann vielleicht auch selber suchen, aber ich glaube ich habe einen denkfehler, vor allem mit dem problem, das ich beschreibungstexte haben möchte neben meinen bilder, das ist sehr wichtig für mich.


gruß christopher

 

[ingoS]

Hallo blackarchitect,
zunächst einmal hast du nicht gerade lange gewartet, ehe du dein Thema wieder nach oben geschoben hast. Wenn es innerhalb eines Tages keine Antworten gibt, heißt das noch lange nicht, dass keiner mehr vorbeikommt, der helfen kann oder dass dein Thema gar "untergeht". Habe bitte in Zukunft etwas mehr Geduld.

Zu deinen Fragen:

1.: Ich kann nicht verstehen, warum du Beschreibung und Bild nicht in einen Frame zusammenzufassen möchtest. Wenn ohnehin jedes Bild eine eigene Seite und eine eigene Beschreibung hat, bräuchtest du ja, wenn du für Bild und Beschreibung getrennte Seiten erstellst, doppelt so viele Seiten, also nicht nur 30 sondern 60.

Ich verstehe auch nicht ganz, warum im Quelltext der IFrame nach den kleinen Bildern kommt.:shock:

Jedenfalls schlage ich hier vor, einfach den IFrame zu verbreitern und Bild und Beschreibung zusammen in eine Seite im IFrame zu packen. Wenn ich nicht einen ganz großen Denkfehler mache oder deine Beschreibung missverstanden habe, sollte das die Methode mit dem geringsten Aufwand sein.


2.: Auch diese Untergalerie würde ich mit dem Beschreibungstext in die gleiche Seite, die dann im IFrame angezeigt wird, packen. Da du die kleine Galerie wahrscheinlich nicht immer mitkopieren willst, wenn du die darin enthaltenen Bilder vergrößert anzeigen willst, schlage ich vor, für die Seiten mit kleinerer Galerie einen weiteren IFrame in den IFrame mit der kleineren Galerie zu schachteln. Dieser "innere" IFrame enthält dann wieder nur Bild und Beschreibung.


3.: Ja, aber das tust du doch bereits auf deiner Seite. Überall, wo id="blabla" steht, findest du in style3.css im Ordner css die entsprechende Formatierung, zugewiesen in der Form:

#blabla
{
color: #554789;
}

4.: Die Geschwindigkeit des Seitenaufbaus hat nicht notwendigerweise etwas mit sauberem Code zu tun. Höchst lobenswert ist die Nichtverwendung von Frontpage. Ob dein Code so wie er ist in Ordnung ist, kannst du mit Validatoren feststellen.
Für HTML:
Der offizielle: The W3C Markup Validation Service (nur englisch)
Einer auf Deutsch: HTML / XHTML / XML / WML Validator
Für CSS: The W3C CSS Validation Service
Einfach die URL eingeben und dir die Fehler ausgeben lassen. Wir haben sogar einen Extra-Thread für Validierungsfehler im HTML-und-XHTML-Unterforum.
Auf gar keinen Fall darfst du im Rahmen deiner gegenwärtigen Definitionen Umlaute im Quelltext verwenden. Einer der Validatoren bricht daran schon zusammen und will nicht weitermachen.
Die Kommentare <!--- blablabla ---> haben am Anfang und am Ende einen Strich zu viel und müssten in der Form <!-- blablabla --> stehen.


5.: Ich würde für die Pfeile kein JavaScript verwenden sondern die "echten" Links auf die jeweilig vorherige und nächste Seite. Das verursacht zwar geringfügig mehr Arbeit, ist aber sicherer.


6.: Ich benutze auch Firefox und kann das Problem nicht erkennen, auch nicht mit anderen Auflösungen.


Das wird dir wohl hoffentlich ein wenig weitergeholfen haben.

 

[blackarchitect]

also, danke erstmal.

sorry, wollte mich nicht ,,vordränggeln'', ich warte demnächst länger.

Zu 1 und 2

genau das, dachte ich mri wäre haltnicht so gut, wenn ich für jedes bild eine eigende seite habe.
Ich hab es ja so gelöst bisher, das praktisch auf der gallerieseite ein thumbnail verlinkt ist mit einem bild, welches dann im iframe (der nur ein html gerüst enthält, sonst gar nichts)geöffnet wird. somit habe ich bisher nur 2 seiten für die komplette galerie. ich dachte mir das wäre die sinnvollste lösung, anstatt mit 30 html-seiten die bilder zu präsentieren.

das problem ist halt, das ich in der link href nur das bild (einen link) intergriert bekomme, wenn ich dort bild und text integrieren könnte, wäre das problem wahrscheinlich schon gelöst, oder halt ein doppel link, welcher den text dann in dem 2 iframe öffnet.

zu 3

ich meinte ob ich z.b.

#blauer text

{ inhalt: hier seht ihr die blauen bilder}

#blauer text 
{inhalt/text: hier seht ihr noch mehr blaue bilder}

frage zielte im endeffekt auch auf 1 und 2 zu,den dann könnte ich in dem link einerseits ein bild verlinken und eventuell z.b. div id= blauer text gelichzeitig öffnen.

4. danke, werde das ausprobieren.

5. ja, weiß nicht ob das klappt, weil ja z.b. die pfeile unten links (vor zurück), ja auch immer gleich bleiben (d.h. nicht neu geladen werden), da ja die bildergallerien wie in 1 und 2 beschrieben nur links sind, und keine neuen , eigenständigen seiten. das würde nur funktionieren, wenn ich halt 30 seiten habe, die alle unterschiedlich verlinkte pfeile haben.

6. super, das freut mich. wie gesagt, bin schon ein bißchen stolz bisher so weit gekommen zu sein.

lieben dank für deine antwort

 

[ingoS]

Ok, jetzt verstehe ich dein Problem mit der Beschreibung und den Bildern. Ich hatte nicht daran gedacht, dass die Bilder in gar keine html-Datei verpackt sind. Dennoch müssten doch dann aber die Beschreibungen als html-Dateien vorliegen, oder nicht? Du könntest einfach diese um das entsprechende Bild erweitern (<img src...> und so); das kostet nicht allzu viel Zeit. Natürlich ist es ein wenig aufwändig, aber das ist eben der Nachteil, wenn man mit Frames arbeitet.

Eine andere Möglichkeit, bei der du die Trennung von Bild und Beschreibung behalten könntest, wäre die Benutzung von JavaScript.
Das funktioniert zwar ganz ordentlich, aber auch nur, wenn der Besucher der Seite JavaScript aktiviert hat (oder der spezielle Codeschnipsel nicht irgendwie blockiert wird [Werbeblocker oder so...]). Eine einfache Möglichkeit wäre, die Thumbnails folgendermaßen zu verlinken:

<a href="bild1.jpg" target="galleryshow" onclick="window.open('bild1.jpg','galleryshow');window.open('beschreibung1.html','descriptionshow');">...</a>

Ich habe den IFrame, in dem die Beschreibung erscheinen soll, mal descriptionshow genannt.

Zur div-Frage: Ein div-Element ist nichts veränderliches. Du kannst es nicht wie einen Frame anwählen, wenn du ausschließlich HTML und CSS verwenden möchtest. Im Prinzip meinst du das hier:

#div 
{ 
content: "Hier steht ein Text";
}

Das funktioniert aber im Internet Explorer nicht.

Und noch mal die Pfeile: Hier sollte JavaScript, wenn du es unbedingt verwenden willst, eigentlich schon funktionieren. Ich habe es einige Male ausprobiert und es ging immer. Man kann ja sowieso nicht auf ein bestimmtes Bild z.B. von der Seite Kontakt aus zugreifen. Was natürlich nicht geht, ist das Blättern in der richtigen Reihenfolge, wie sie in den Thumbnails vorgegeben ist, wenn man nicht beim ersten Thumbnail anfängt. Hierzu bräuchtest du in der Tat Pfeile, die sich verändern. Das geht bestimmt auch irgendwie mit JavaScript, wenn du keine Extraseiten für die verschiedenen Pfeile willst, aber dazu solltest du einen Extrathread im JavaScript-Unterforum eröffnen. Wenn die Thumbnails aber immer zu sehen sind, sind diese Pfeile fürs Blättern in den Bildern dann nicht sowieso überflüssig?