1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

html/css frage

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Skib, 19.01.10.

  1. Skib

    Skib Gala

    Dabei seit:
    24.12.07
    Beiträge:
    52
    Hi,
    ich bin grade dabei eine Portfolio Website zu erstellen. Dabei habe ich ein Problem. Ich möchte, dass der content (wenn man auf einen Menüeintrag klickt) auf der offenen Seite wie ein overlay reingeladen wird. Kann mir da jemand bei helfen, ich bin noch Anfänger auf dem Gebiet. Angehängt ein screenshot wies ausschaun soll.
    Danke schonmal im Voraus.
    skib
     

    Anhänge:

    • page.jpg
      page.jpg
      Dateigröße:
      21,7 KB
      Aufrufe:
      109
  2. hillepille

    hillepille Roter Seeapfel

    Dabei seit:
    19.07.09
    Beiträge:
    2.121
    hi, das kannste mit css, einem div und ein bißchen javascript lösen:
    CSS:
    #ida{
    display:none;
    }

    HTML:
    <div id="ida">
    bla bla bla
    </div>

    <a href="javascript:void(0);" onclick="javascript:document.getElementById('ida').style.display=block;">Div zeigen</a>

    mit dem grundgerüst kannste dir ja ein paar funktionen in javascript schreiben. alternativ würde ich dir jquery empfehlen das ist ein javascript-framework das recht einfach zu bedienen ist.
     
  3. Skib

    Skib Gala

    Dabei seit:
    24.12.07
    Beiträge:
    52
    danke schonmal, aber wie gesagt, ich bin Anfänger und komme grade damit nicht zurecht. Ich habe jetzt mal das was du mir da geschrieben hast in meinen Quelltext eingefügt, funktionieren tuts nicht. Was müsste ich denn im Javascript schreiben? Ahja, mit Javascript habe ich gar keine Erfahrung (ausser "hello world" :D).
     
  4. hillepille

    hillepille Roter Seeapfel

    Dabei seit:
    19.07.09
    Beiträge:
    2.121
    hier ne beispieldatei
     

    Anhänge:

    • bsp.zip
      Dateigröße:
      536 Bytes
      Aufrufe:
      53
  5. Skib

    Skib Gala

    Dabei seit:
    24.12.07
    Beiträge:
    52
    ok, das funktioniert soweit, jedoch ist es nicht genau das was ich wollte. Nun erscheint zwar der content, jedoch wenn ich auf einen anderen Menüeintrag klicke (habe mal probehalber 2 gemacht) erscheint der zweite unter dem ersten und ersetzt ihn nicht. Idealer Weise sollte der durchsichtige Schwarze Hintergrund immer da bleiben und nur immer wieder neuer Content reingeladen werden. Zum Beispiel wenn ich auf Home bin stehen news da und wenn ich dann auf foto klicke wird ne lightbox oder so reingeladen. Ich habe die Page mal hochgeladen: http://medesign.me.funpic.de/index.html
    danke für die Hilfe.

    edit: wahh.. des schaut im FF ja brutal ***** aus... oh mann warum sind die browser so verschieden?!
     
    #5 Skib, 19.01.10
    Zuletzt bearbeitet: 19.01.10
  6. hillepille

    hillepille Roter Seeapfel

    Dabei seit:
    19.07.09
    Beiträge:
    2.121
    hi, ja ich wollte dir nicht die komplette seite schreiben! :) jetzt haste doch n aufhänger an dem du dich entlanghangeln kannst. aber ohne jegliche kenntnisse html, css und javascript kannste das auch wahrscheinlich vergessen.
    als ansatzpunkt: die divs müssen eindeutige ids haben. wenn div 'ida' heisst dann muss div b anders heißen. auf jeden button kannste dann den entsprechenden namen in die js-funktion legen. also bei <div id="idb"></div> muss der funktionsaufruf angepasst werden auf sichtbar('idb'): wenn du dann weitermachst solltest du in der funktion alle anderen divs wieder unsichtbar schalten.
     
  7. hillepille

    hillepille Roter Seeapfel

    Dabei seit:
    19.07.09
    Beiträge:
    2.121
    hier die anpassung für die ersten beiden divs von dir:

    function sichtbar(feld){
    if (document.getElementById('' + feld + '')) {
    document.getElementById('' + feld + '').style.display = (document.getElementById('' + feld + '').style.display == "none") ? "block" : "none";
    }
    }
    function unsichtbar(feld){
    if (document.getElementById('' + feld + '')) {
    document.getElementById('' + feld + '').style.display = "none";
    }
    }

    aufruf in onclick="javascript:sichtbar('content2');unsichtbar('content');"
     
  8. hillepille

    hillepille Roter Seeapfel

    Dabei seit:
    19.07.09
    Beiträge:
    2.121
    anbei die datei überarbeitet mit wechselnden divs
     

    Anhänge:

  9. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    Also bei den Antworten stellen sich mir die Nackenhaare!:mad:
    Für jeden Inhalt eine separate DIV ist absoluter Blödsinn und produziert nur unnötiges Markup. Zudem wird die JavaScript Funktion dadurch unnötig komplex, da beim Einblenden von A die DIVs B,C,D,E und womöglich irgendwann F und G ausgeblendet werden müssen.

    Mach eine <div id="content"></div> und lade den Inhalt mit jQuery. Wie du das jQuery Script im Head einbindest weißt du ja oder?

    Dann mach ein Script:
    function divloader(url){
    $("#content").load(url);
    }

    Die Buttons machst du dann jeweils:
    <a href="" onclick="divloader('datei1.html');return false;">Inhalt1</a>
    <a href="" onclick="divloader('datei2.html');return false;">Inhalt2</a>
    usw.

    In den Dateien, die du mit jQuery lädst, schmeißt du alles bis auf den Inhalt raus. <html>, <head>,<body> etc. alles raus, da du diese Tags sonst doppelt hast.
    In Datei1 z.B.
    <h1>Überschrift</h1>
    <p>Dein Inhalt</p>
    <img src="noch ein Bild dazu.jpg" />

    Ohne irgendwelche umschliessenden Tags.

    Eigentlich solltest du dann auch noch eine Fall-Back Lösung einbauen, für Besucher ohne JavaScript, aber das würde jetzt den Rahmen sprengen.
     
  10. Skib

    Skib Gala

    Dabei seit:
    24.12.07
    Beiträge:
    52
    danke für die Antworten. Das Ding mit jQuery interessiert mich. Ich habe jetzt mal schnell ein tut auf deren Seite überflogen. Und hab einfach das erstbeste hergenommen. bedeutet, dass ich jQuery so eingebunden habe:
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    function divloader(url){
    $("#content").load(url);
    }
    </script>
    bewegen tut sich aber nichts...
    achja und der button noch:
    <li class="home"><a href="" onclick="divloader('home.html');return false;"><img src="img/home.png"></img></a></li>
     
  11. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    Liegt die jquery.js auch sicher im selben Ordner wie deine HTML Datei? Kannst du die ganzen Dateien mal zippen und posten?
     
  12. Skib

    Skib Gala

    Dabei seit:
    24.12.07
    Beiträge:
    52
  13. hillepille

    hillepille Roter Seeapfel

    Dabei seit:
    19.07.09
    Beiträge:
    2.121
    das ist mir auch klar, aber wenn du oben mal gelesen hättest auf jquery habe ich auch schon verwiesen. und wenn du dir auch die fragen mal angeschaut hättest dann wäre auch dir ggf. aufgefallen, dass der fragesteller ein anfänger ist. ich wollte ihm die grundsätzliche arbeit mit divs und javascript näherbringen, keine lösung. aber deine antwort war ja soviel besser, das hat er genauso wenig verstanden! :) und ich stehe schon auf dem standpunkt erstmal das grundsätzliche verstehen dann die kür!
     
  14. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    Er hat mein Beispiel prinzipiell Verstanden! Ich hatte einen Fehler bei der Funktionsdeklaration, deshalb lief es nicht.
    Und lieber kniffelt er selber ein wenig an einer Lösung, als das er eine schlechte Umsetzung kopiert. Er soll hierbei ja was lernen, oder?

    BTT
    Tausch mal das JavScript gegen:
    <script type="text/javascript">
    jQuery(document).ready(function(){
    divloader= function (url){
    $("#content").load(url);
    }
    divloader('startseite.html');
    });
    </script>

    Dann noch das display:none; bei #content raus und schon löft die Sach. In Startseite entsprechend deinen Inhalt für die Startseite rein, dieser wird dann beim Laden der Seite geladen. Kannst natürlich auch auf einen Button legen.
     
  15. Skib

    Skib Gala

    Dabei seit:
    24.12.07
    Beiträge:
    52
    Das geht doch in genau die Richtung, die ich mir vorgestellt habe. Nur gibt es (natürlich) weiter Probleme... Unzwar wenn ich nun auf Home drücke kommt statt der home.html einfach die index.html glaub ich. Kannst du dir das noch mal anschauen bitte?
    http://rapidshare.com/files/337808170/Archiv.zip

    edit: Habe den Fehler gefunden... war mein Fehler ich habe h1 genommen, dabei ist die schon im css definiert...

    Vielen Dank nochmal
     
  16. Skib

    Skib Gala

    Dabei seit:
    24.12.07
    Beiträge:
    52
    Und jetzt kommt die wahrscheinlich bleedste Frage. Wie schaff ich des, dass des im FF und Safari gleich ausschaut. Ich hab so das dumme Gefühl, dass ich dazu mein CSS anpassen muss.
     
  17. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    Ich würde es im Firefox gerade rücken. Also solang am CSS werkeln, bis es im Firefox so aussieht, wie du es haben willst.
    Danach den Gegencheck im Safari. Wobei da eigentlich keine großartigen Abweichungen auftauchen sollten. Du verwendest ja den HTML5 Doctype, der eigentlich jeden gängigen Browser in den standardkonformen Modus versetzt.

    Pack auf jeden Fall den Link zum CSS in den Head, der hat im Body nichts zu suchen ;)
     

Diese Seite empfehlen