Du bist nicht angemeldet. [Anmelden]
Übersicht der Foren        Kalender     Hilfe   Forumsknigge
Knuddels.de-Forum » Das Forum » Archive » Hilfe & Fragen zur Knuddels-HP »

Fragen zum zweispaltigen Layout
Seite 1 von 2 1 2 > alle
Optionen
Thema bewerten
Fragen zum zweispaltigen Layout - #1908826 - 26.12.2009, 18:58:29
milkahäschen
Nicht registriert


Hallöchen! :-]

Und zwar was mich interessieren würde:

Bezugnehmend auf diesen Thread stellt sich mir jetzt die Frage:

Wie bringe ich das in ein Layout. Ich habe schon recherchiert, mit Phase 5 herumprobiert etc. pp. aber ich komme einfach nicht weiter.

Ich hätte das gerne als Layout mit mehreren Unterseiten. Also, dass auf der linken Seite die Menü-Links sind und auf der rechten Seite öffnet sich dann der Inhalt mit Unterseiten zum weiterklicken d.h. ich bräuchte ja mehrere "Container" schätze ich.

Da es ohne IFrame zu funktionieren scheint, gefällt mir das sehr gut nur technisch funktioniert es bei mir noch nicht so ganz. Kann mir da jemand weiterhelfen bzw. versteht mich denn überhaupt jemand? %-)

[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1908836 - 26.12.2009, 19:18:15
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
Achtung, ist ein langer Code.
Schaus dir einfach mal in Ruhe an, vielleicht steigst du ja so schon durch. Muss eventuell noch angepasst werden, hab den grade aus ner alten Sicherung von mir rauskopiert. :)

Warnung! Spoiler! 
<script language="javascript" type="text/javascript">

function ausgabe(NR) {
	switch(NR) {
		case 1:
			document.all.inhalt.innerHTML = "Text auf der ersten Seite.";
			break;
		case 2:
			document.all.inhalt.innerHTML = "Text auf der zweiten Seite.";
			break;
		case 3:
			document.all.inhalt.innerHTML = "Text auf der dritten Seite.";
			break;
	}
}

</script>

<div style="text-align:center;"><b><a href="javascript:void(0);" onclick="ausgabe(1);">Seite 1</a> &#9643; <a href="javascript:void(0);" onclick="ausgabe(2);">Seite 2</a> &#9643; <a href="javascript:void(0);" onclick="ausgabe(3);">Seite 3</a></b></div>

<center><div style="padding:10px; overflow-y:auto; width:400px; height:200px;"><div id="inhalt">Hier muss der Inhalt stehen, der beim Laden der Seite angezeigt werden soll (wenn das das gleiche wie unter Seite 1 sein soll, muss man hier das gleiche reinschreiben wie bei case 1).</div></div>

Bei Fragen, melde dich einfach. :)
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: KnuddelWelli] - #1908911 - 26.12.2009, 21:43:50
milkahäschen
Nicht registriert


Oh wow vielen lieben Dank für die schnelle Antwort. (-:

Jetzt weiß ich nur nicht, wie ich das Menü auf die linke Seite bekomme und den Inhalt (Content) auf die rechte. Quasi in einer sichtbaren Tabelle mit dünnem Rand.

Und wie ich innerhalb des Contents weitere Verlinkungen einfügen kann. Also quasi als ->weiter - Link. :-[


Bearbeitet von milkahäschen (26.12.2009, 21:48:41)
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1909147 - 27.12.2009, 03:46:58
milkahäschen
Nicht registriert


Edit: Das mit der Tabelle hab ich hinbekommen. Innerhalb dieser kann ich das aber nicht machen oder? Wenn du verstehst was ich meine .... X-)
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1909157 - 27.12.2009, 04:46:13
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
Nein, verstehe leider nicht, was du meinst. Natürlich kannst du den Code auch in Verbindung mit einer Tabelle nutzen, wenn du das möchtest. Dann packst du den DIV aus meinem Code halt in die Tabellenzelle, wos rein soll. Wo ist das Problem?
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: KnuddelWelli] - #1909294 - 27.12.2009, 12:08:18
Scnappi
Nicht registriert


Html:
<!-- stylesheet für Layout -->
<style type="text/css"><!--
  #container {
      width: 800px; /* kann beliebig angepasst werden */
  }

  .left {
      float: left;
      width: 19%;
  }

  .right {
      float: right;
      width: 80%;
  }

  .clearer {
      clear: both;
      line-height: 0;
  }
--></style>

<!-- javascript für Unterseiten -->
<script type="text/javascript"> 
    function show(tag) 
    { 
        document.getElementById('kasten1').style.display = "none";
        document.getElementById('kasten2').style.display = "none";

        // Hier nichts mehr ändern!
        document.getElementById(tag).style.display = "block"; 
    } 
</script>

<!-- Hauptinhalte, Seitenstruktur -->
<div id="container">
    <div class="left">
        <ul>
           <li><a href="javascript:show('kasten1');">Kasten 1 zeigen</a></li>
           <li><a href="javascript:show('kasten2');">Kasten 2 zeigen</a></li>
        </ul>
    </div>
    <div class="right">
        <div id="kasten1" style="display:block;">
            <p>Kasten1 Inhalt</p>
        </div>
        <div id="kasten2" style="display:none;">
            <p>Kasten2 Inhalt</p>
        </div>
    </div>
    <br class="clearer" />
</div>


Ich finde es so einfacher... Da ist für mich der Code übersichtlicher. Man muss einfach oben im JavaScript immer eine Zeile mit dem neuen Kastennamen einfügen, darunter dann im Inhaltsbereich einen Kasten, der als id diesen Namen hat. Über die Links kann man dann einfach zwischen den Kästen wechseln.
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1910174 - 28.12.2009, 16:14:33
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Wieso denn so kompliziert?!
Html:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('article:not(:first)').hide();
                $("a.mlink").click(function() {
                    $('article').hide();
                    $($(this).attr("href")).show();
                });
            
            });
        </script>

Das Script, blendet alle Inhaltscontainer ausser dem Ersten aus und im spaeteren Verlauf eben diese Verstecken, zeigen Funktion

Das waere das js dazu.
Hier braucht man lediglich bei den Anker-Elementen den Klassenselektor mlink ( <a href="#a" class="mlink">Link</a> ), die Inhalte umschliesst man in einem article-tag und das war es. Voll dynamisch und auch einigermassen sauber, der KOT haelt sich auch in Massen.

Bsp.:
Warnung! Spoiler!
Html:
<nav>
                    <p>Menu
                    <ul>
                        <li><a class="mlink" href="#on" title="menue1">Menue 1</a>
                        <li><a class="mlink" href="#tw" title="menue2">Menue 2</a>
                        <li><a class="mlink" href="#th" title="menue3">Menue 3</a>
                        <li><a class="mlink" href="#fo" title="menue">&hellip;</a>
                        <li><a class="mlink" href="#fi" title="menue4">Menue x</a>
                    </ul>
                </nav>
                <section>
                    <article id="on">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</article>


Bearbeitet von KnuddelWelli (29.12.2009, 14:10:47)
Bearbeitungsgrund: längeren Code gespoilert, damit er nicht dauerhaft die Ansicht verzerrt
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: huendchen] - #1910597 - 29.12.2009, 05:29:33
DJ el rubio
Nicht registriert


Guten Morgen miteinander :-D

Da mir der HTML-Code sehr gut gefallen hat, habe ich ihn so in meiner Homepage übernommen und bisschen verändert.
Soweit zu gut. Es hat alles wunderbar funktioniert bis ich anschließend eine Grafik per <img src"URL" align="right"> innerhalb des Codes eingebunden habe.
Jetzt öffnet sich keine Seite mehr, wie man es auf meiner Homepage sehen kann. Weiß jemand wieso das so ist, oder kann es sein, dass man keine Grafiken miteinbinden kann?

Der HTML-Code lautet folgenderweise:

Warnung! Spoiler! (Langer HTML-Code)

Html:
<div align="left">
<script language="javascript" type="text/javascript">

function ausgabe(NR) {
	switch(NR) {
		case 1:
			document.all.inhalt.innerHTML = "<big>Homepage</big><br><br>Willkommen auf meiner knuddelige Homepage von Knuddels.de.<br>Erstmal bedanke ich mich, dass ihr sie besusucht. Um mehr Informationen über mich und andere Sachen zu erhalten, so klicke auf die obige Links, dann öffnet sich ein entsprechender Bereich.<br><br>Ich wünsch Euch viel Spaß auf meiner Homepage.<br><br>Euer DJ el rubio";
			break;
		case 2:
			document.all.inhalt.innerHTML = "<big>About Me</big><br><br>Ich heiße Rubi, bin am 20. März 1991 in der kleine, aber schöne Stadt Remscheid geboren und somit 18 Jahre alt. Zurzeit lebe ich noch in Remscheid.<br><br><br><img scr="http://foto.knuddels.de/fotogalerie/knuddels.de/foto/221/dj_el_rubio_p.jpg?-7040448248688743163" align="right"> Wie die Sprache meines Nicknames verrät, bin ich Spanier. Aber die Sprache selbst behersche ich nicht perfekt, da ich von Anfang an nur deutsch gesprochen habe.<br><br>Von 2003 bis 2009 habe ich eine Gesamtschule besucht, wo ich am Ende den Abschluss <b>Fachoberschulreife (Realabschluss)</b> bekommen habe. Nach dem Schulbesuch besuche ich eine Berufsschule mit dem spezial Gebiet Technik. Dort werde ich 3 Jahre lang den Beruf <b>Informationsassistenten</b> (IT) erlernen.<br><br>Mein älterer Bruder ist vor paar Jahre nach Spanien ausgewandert, um einen Job zu bekommen. Derzeit ist er als Schreiner tätig. Wir sehen uns in der Regel jeden Sommer, wenn ich mit meinen Eltern nach Spanien fahre bzw. fliege.";
			break;
		case 3:
			document.all.inhalt.innerHTML = "Text auf der dritten Seite.";
			break;
		case 4:
			document.all.inhalt.innerHTML = "Text auf der vierten Seite.";
			break;
		case 5:
			document.all.inhalt.innerHTML = "Text auf der fünften Seite.";
			break;
		case 6:
			document.all.inhalt.innerHTML = "Text auf der sechsten Seite.";
			break;
	}
}

</script>

<div style="text-align:center;"><b><a href="javascript:void(0);" onclick="ausgabe(1);">Homepage</a> &#9643; <a href="javascript:void(0);" onclick="ausgabe(2);">About Me</a> &#9643; <a href="javascript:void(0);" onclick="ausgabe(3);">Seite 3</a> &#9643; <a href="javascript:void(0);" onclick="ausgabe(4);">Seite 4</a> &#9643; <a href="javascript:void(0);" onclick="ausgabe(5);">Seite 5</a> &#9643; <a href="javascript:void(0);" onclick="ausgabe(6);">Seite 6</a></b></div>
<hr>
<div style="padding:10px; overflow-y:auto; width:400px; height:1000px;"><div id="inhalt"><big>Homepage</big><br><br>Willkommen auf meiner knuddelige Homepage von Knuddels.de.<br>Erstmal bedanke ich mich, dass ihr sie besusucht. Um mehr Informationen über mich und andere Sachen zu erhalten, so klicke auf die obige Links, dann öffnet sich ein entsprechender Bereich.<br><br>Ich wünsch Euch viel Spaß auf meiner Homepage.<br><br>Euer DJ el rubio</div></div>
</div>


Wäre dankbar, wenn jemand die Lösung meines Problem wissen würde.



Rubi.
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1910669 - 29.12.2009, 10:39:45
Scnappi
Nicht registriert


Dieser Code ist sehr unpraktisch. Zum einen, weil du innerhalb des JavaScript-Strings auf besondere Zeichen achten musst und zum anderen weil du dein ganzes Markup in eine Zeile schreibst.

Wie du sieht schreibst du den Code zwischen zwei Anführungszeichen. Wenn du nun mit deinem img-Tag Attribute einfügst, die ebenfalls Anführungszeichen beinhalten, muss das so aussehen:
Html:
<img src\"URL\" alt=\"Alternativtext\" />


Ansonsten denkt das JavaScript, dass du mit den Anführungszeichen deine Eingabe beenden möchtest und wundert sich, was da nach dem abschließenden Anführungszeichen noch kommt.
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1910819 - 29.12.2009, 14:09:24
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
... oder du benutzt ' statt " für alle Tags, die innerhalb des Codes liegen. :) Dann brauchst du nicht die innenliegenden " zu maskieren.
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: KnuddelWelli] - #1910964 - 29.12.2009, 17:17:36
DJ el rubio
Nicht registriert


Vielen Dank für Eure Hilfe, jetzt funktioniert alles wunderbar. :-)

Ich melde mich wieder, falls ich irgendwelche Probleme habe. :-D





Rubi.
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1911314 - 30.12.2009, 03:21:56
milkahäschen
Nicht registriert


Mmh ich merke aber bei mir gerade, dass ich dort nichts kopieren und einfügen kann. Also an Text, in die Tabelle. Wenn ich es jedoch manuell eintippe gehts. +.+
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1911319 - 30.12.2009, 03:53:41
milkahäschen
Nicht registriert


Editieren nicht mehr möglich!


Formatieren funzt auch nisch. :O (Schriftarten etc.)
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1911635 - 30.12.2009, 16:41:31
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
Hast du drauf geachtet, keine ", sondern ' zu benutzen? (Wenn du deine Frage(n) auf meinen Code beziehst...)
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: KnuddelWelli] - #1911860 - 30.12.2009, 23:13:37
milkahäschen
Nicht registriert


Ja hab ich. Funzt aber jetzt auch wieder nach ner halben Stunde Fummelei. :-D

Nur ich schätze, dass meine ganze Arbeit irgendwie fast umsonst war. X-)

Hab gerade mal zur Zwischenprüfung meinen Code in diesen Knuddels-Editor von medium22 eingefügt und da wurd dann irgendwie wieder alles gecrashed. Wohl gemerkt: Ich wollte das alles für die Knuddels-Homepage. Aber der zerstört das ja immer alles. :-(

Wie krieg ich das denn jetzt hin?
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1911903 - 31.12.2009, 00:24:13
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
Gute Frage, hab leider keine Ahnung, wie der funktioniert...
Mach am besten da wieder Zeilenumbrüche rein, wo welche hinsollen, und ansonsten eben keine, dann sollte es funktionieren.
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: KnuddelWelli] - #1912007 - 31.12.2009, 10:40:48
TaTTii 08
Nicht registriert


Hey!
Also irgendwie verstehe ich das ganze nicht.
Ich suche eigentlich genau das, was ihr hier gepostet habt, aber naja ich bin zu blöd um dass zu kapieren ^^
Irgendwo habe ich so einen Code gefunden, der recht kurz war und wo ich leicht sehen konnte, welcher Teil in die linke und welcher Teil in die rechte Spalte kommt. Leider finde ich den nicht mehr und diese Codes hier verstehe ich aus welchem Grund auch immer nicht.
Weiß jemand welchen Code ich meine?
Liebe Grüße, Kathi (-:


Edit Also ich habe jetzt den ersten Code von Knuddelwelli genommen. Das einzige was ich da nicht verstehe ist dieses Hier muss der Inhalt stehen, der beim Laden der Seite angezeigt werden soll (wenn das das gleiche wie unter Seite 1 sein soll, muss man hier das gleiche reinschreiben wie bei case 1).

Aber so hab ichs endlich kapiert ^^


Bearbeitet von TaTTii 08 (31.12.2009, 10:45:20)
Bearbeitungsgrund: Edit
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1912008 - 31.12.2009, 10:48:09
TaTTii 08
Nicht registriert


Antwort auf: TaTTii 08
Hey!
Also irgendwie verstehe ich das ganze nicht.
Ich suche eigentlich genau das, was ihr hier gepostet habt, aber naja ich bin zu blöd um dass zu kapieren ^^
Irgendwo habe ich so einen Code gefunden, der recht kurz war und wo ich leicht sehen konnte, welcher Teil in die linke und welcher Teil in die rechte Spalte kommt. Leider finde ich den nicht mehr und diese Codes hier verstehe ich aus welchem Grund auch immer nicht.
Weiß jemand welchen Code ich meine?
Liebe Grüße, Kathi (-:


Edit Also ich habe jetzt den ersten Code von Knuddelwelli genommen. Das einzige was ich da nicht verstehe ist dieses Hier muss der Inhalt stehen, der beim Laden der Seite angezeigt werden soll (wenn das das gleiche wie unter Seite 1 sein soll, muss man hier das gleiche reinschreiben wie bei case 1).

Aber so hab ichs endlich kapiert ^^



Sooo... zum 1209723904732095 mal :x
Das mit dem Case1 da oben von Knuddelwelli habe ich kapiert.
Jetzt ist mein einziges Problem
dass ich den Text nicht in die rechte Spalte kriege, obwohl ich es so eingefügt habe.
Könnt ja mal auf meiner Homepage gucken oder ich schreib hier einfach meine Codes rein:

Warnung! Spoiler!
Code:
<div style="position:absolute;left:130px;top:325px;border: 1px solid #000000;padding:5px;width:230px;height:500px;font-family:Verdana;font-size:11px; background-color:#FFFFFF;">

<div style="text-align:center;"><b><a href="javascript:void(0);" onclick="ausgabe(1);">Seite 1</a> 
<a href="javascript:void(0);" onclick="ausgabe(2);">Seite 2</a>
<a href="javascript:void(0);" onclick="ausgabe(3);">Seite 3</a></b></div><center><div style="padding:10px; overflow-y:auto; width:400px; height:200px;"><div id="inhalt">HALLO</div></div>

</div> <div style="position:absolute;left:359px;top:325px;border: 1px solid #000000;padding:5px;width:510px;height:500px;font-family:Verdana;font-size:11px; background-color:#FFFFFF;">

<script language="javascript" type="text/javascript">function ausgabe(NR) {	switch(NR) {		case 1:			document.all.inhalt.innerHTML = "HALLO";			break;		case 2:			document.all.inhalt.innerHTML = "Text auf der zweiten Seite.";			break;		case 3:			document.all.inhalt.innerHTML = "Text auf der dritten Seite.";			break;	}}</script>



</div>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<br>

<table width=600 border=0 noborder cellpadding=0 cellspacing=0><tr><td><font face="Verdana,Geneva,Arial,Helvetica" size=2><div style="overflow:auto;width:740px;height:200px;border:1px solid #000000;background-color:#FFFFFF;padding:20pt;font-family:verdana;font-size:9pt;color:#000000;letter-spacing:1px;">


Bearbeitet von TaTTii 08 (31.12.2009, 10:53:38)
Bearbeitungsgrund: Doch nicht kapiert...
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1912016 - 31.12.2009, 11:06:52
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Es ist wirklich kein Wunder,dass du hier durcheinander kommst, wenn ich mir den Muell da so anschaue, den du fabriziert hast. Mir ist zwar klar, dass du es nicht besser koennen kannst aber es waere auch die Moeglichkeit gegeben im Totorialthread nachzusehen, wie das schneller und effektiver geht, mit weniger Code - ergo auch weniger Fehlerquellen.

Ich schau mal, heute Nachmittag hab ich noch ein wenig Zeit und dann erklaer ich dir das, ausfuehrlich mit Beispielen und - sollte ich es schaffen - mit einem Copy & Paste Script.

Aber einen Tipp, kann ich dir jetzt schon mal geben: K.I.S.S ;-)
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: huendchen] - #1912020 - 31.12.2009, 11:23:38
TaTTii 08
Nicht registriert


Antwort auf: huendchen
Es ist wirklich kein Wunder,dass du hier durcheinander kommst, wenn ich mir den Muell da so anschaue, den du fabriziert hast. Mir ist zwar klar, dass du es nicht besser koennen kannst aber es waere auch die Moeglichkeit gegeben im Totorialthread nachzusehen, wie das schneller und effektiver geht, mit weniger Code - ergo auch weniger Fehlerquellen.

Ich schau mal, heute Nachmittag hab ich noch ein wenig Zeit und dann erklaer ich dir das, ausfuehrlich mit Beispielen und - sollte ich es schaffen - mit einem Copy & Paste Script.

Aber einen Tipp, kann ich dir jetzt schon mal geben: K.I.S.S ;-)


Huhu :)
Ja den Thread habe ich mir schon ein paar mal angeguckt und auch gelesen ^^ Aber ich kapier dass einfach nicht.
Naja, ich les es mir nochmal durch und vielleicht habe ich aufeinmal einen Blitzgedanken oder wie auch immer :o)
Trotzdem danke schonmal und ganz liebe Grüße (-:
[zum Seitenanfang]  
Seite 1 von 2 1 2 > alle


Markiere alles als gelesen
Forums-Kontakt · Knuddels - Chat / Chatroom · [zum Seitenanfang]