• Apfeltalk ändert einen Teil seiner Allgemeinen Geschäftsbedingungen (AGB), das Löschen von Useraccounts betreffend.
    Näheres könnt Ihr hier nachlesen: AGB-Änderung
  • Viele hassen ihn, manche schwören auf ihn, wir aber möchten unbedingt sehen, welche Bilder Ihr vor Eurem geistigen Auge bzw. vor der Linse Eures iPhone oder iPad sehen könnt, wenn Ihr dieses Wort hört oder lest. Macht mit und beteiligt Euch an unserem Frühjahrsputz ---> Klick

html/css frage

Skib

Skib

Gala
Registriert
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
    21,7 KB · Aufrufe: 123
hillepille

hillepille

Melrose
Registriert
19.07.09
Beiträge
2.508
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.
 
Skib

Skib

Gala
Registriert
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).
 
hillepille

hillepille

Melrose
Registriert
19.07.09
Beiträge
2.508
hier ne beispieldatei
 

Anhänge

  • bsp.zip
    536 Bytes · Aufrufe: 70
Skib

Skib

Gala
Registriert
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?!
 
Zuletzt bearbeitet:
hillepille

hillepille

Melrose
Registriert
19.07.09
Beiträge
2.508
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.
 
hillepille

hillepille

Melrose
Registriert
19.07.09
Beiträge
2.508
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');"
 
hillepille

hillepille

Melrose
Registriert
19.07.09
Beiträge
2.508
anbei die datei überarbeitet mit wechselnden divs
 

Anhänge

  • bspneu.zip
    620 Bytes · Aufrufe: 65
Slashwalker

Slashwalker

Winterbanana
Registriert
15.05.06
Beiträge
2.213
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.
 
Skib

Skib

Gala
Registriert
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>
 
Slashwalker

Slashwalker

Winterbanana
Registriert
15.05.06
Beiträge
2.213
Liegt die jquery.js auch sicher im selben Ordner wie deine HTML Datei? Kannst du die ganzen Dateien mal zippen und posten?
 
hillepille

hillepille

Melrose
Registriert
19.07.09
Beiträge
2.508
Slashwalker schrieb:
Also bei den Antworten stellen sich mir die Nackenhaare!
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.
Zum Vergrößern anklicken....
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!
 
Slashwalker

Slashwalker

Winterbanana
Registriert
15.05.06
Beiträge
2.213
hillepille schrieb:
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!
Zum Vergrößern anklicken....

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.
 
Skib

Skib

Gala
Registriert
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
 
Skib

Skib

Gala
Registriert
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.
 
Slashwalker

Slashwalker

Winterbanana
Registriert
15.05.06
Beiträge
2.213
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 ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2024 Apfeltalk | Made on a Mac
Oben Unten