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
alle Beiträge 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]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1912116 - 31.12.2009, 13:03:01
TaTTii 08
Nicht registriert


Ich schon wieder :-O
Alsoooo ich habe es endlich geschafft mit diesen Menü mit mehreren Unterlinks...
Klappt auch wunderbar (-:
Schon wieder trotzdem danke und schon wieder liebe Grüße. :p
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1913177 - 02.01.2010, 00:11:48
milkahäschen
Nicht registriert


Ist ja wunderbar, dass wenigstens anderen geholfen werden konnte, nur der Threaderstellerin nicht. :-P

[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1916019 - 06.01.2010, 03:49:24
DJ el rubio
Nicht registriert


Guten Morgen :-D

Ich melde mich wieder mal, da ich einige Probleme/Fragen zu den Code an sich habe.

1. Ist es irgendwie möglich, dass ich innerhalb einer Seite auch <div>-Tags und ähnliche Tags verwenden kann, ohne das Problem so bekommen, dass am Ende wieder keine Seite sich öffnen lässt? Gibt es eine Alternative dazu?

Beispiel: <div align="right">...Absatz rechtsbündig...</div>


2. Muss man unbedingt eine ganze Seite hintereinander schreiben, oder gibt es eine andere Lösung dafür, wo man es nicht unbedibngt machen muss?

Beispiel:

a)
Code:
"Hallo<br><br>Mein Name ist DJ el rubio.<br><br><br>Tschüß!"


b)
Code:
"Hallo

Mein Name ist DJ el rubio.


Tschüß!"



Ich bedanke mich im Vorraus, wenn jemand bei meinem Problem helfen kann.


Mit knuddelige Grüße
DJ el rubio :-D
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1916149 - 06.01.2010, 12:06:59
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Antwort auf: DJ el rubio
Guten Morgen :-D

Ich melde mich wieder mal, da ich einige Probleme/Fragen zu den Code an sich habe.

1. Ist es irgendwie möglich, dass ich innerhalb einer Seite auch <div>-Tags und ähnliche Tags verwenden kann, ohne das Problem so bekommen, dass am Ende wieder keine Seite sich öffnen lässt? Gibt es eine Alternative dazu?

Beispiel: <div align="right">...Absatz rechtsbündig...</div>

Was genau soll das sein?!
Die Ausrichtung deiner Inhalte, hat absolut gar nichts mit der Zugaenglichkeit deiner Inhalte zu tun.

Html:
<div style="float: right;"> &hellip; Dein Text &hellip; </div>

Das hier waere dafuer anzuwenden.
Allerdings muesstest du dann passend dazu auch das float wieder aufheben.
Html:
<br style="clear:both; display:block; height:1px; margin:-1px 0 0 0">


Antwort auf: DJ el rubio

2. Muss man unbedingt eine ganze Seite hintereinander schreiben, oder gibt es eine andere Lösung dafür, wo man es nicht unbedibngt machen muss?

Setzt du deinen Inhalt in einen umschliessenden Container, so kannst du fuer die Zeilenumbrueche innerhalb des Containers, eine eigene Regel bestimmen, die dann wiederrum dein 'Design' nicht afektiert.
Html:
<style>#page-wrap br { display: none; height: 0; }</style>
<div id="page-wrap">
   <div id="contents">
      <p>Hallo,
      <p>Mein Name ist DJ el rubio.
      <p>Tschüß!
   </div>
</div>

Der zweite Container, ist einfach nur Gewohnheit von mir und hat nichts weiter mit dem Beispiel zu tun.
Hier werden, dann die Zeilenumbrueche nicht mehr beachtet - obwohl sie im Quellcode natuerlich immer noch sichtbar sind.
Im Uebrigen, ist es sehr schwer ( wahrscheinlich aber auch nur fuer mich ), deine Fragestellung zu interpretieren.


Bearbeitet von huendchen (06.01.2010, 12:10:30)
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: huendchen] - #1916351 - 06.01.2010, 16:29:05
DJ el rubio
Nicht registriert


HuHu,

okay die erste Frage war bisschen blöd gestellt, weil ich micht nicht immer sogut ausdrücken kann. :-[
Ich meine damit, ob man innerhalb einer Seite ebenfalls einen <div ......></div>-Tags wie Linksbündigkeit, Rechtsbündigkeit, Flipcontainer, usw. einbauen kann, ohne das am Ende wieder selbe Problem wie mit dem " innerhalb einer Seite entsteht. Mein Problem besteht beim Flipcontainer, der mit einem <div>-Tag beginnt und auch mit so einem endet. (Den Hauptcode habe ich nicht vergessen, der die Klappfunktion konfiguriert). Gibt es irgendeine Möglichkeit, dass man auch Flipcontainer innerhalb einer Seite einbinden kann, das am Ende alle Links wieder funktionsfähig sind?


Die zweite Lösung klappt wunderbar, vielen Dank nochmals. :)





Rubi.
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1916423 - 06.01.2010, 18:02:19
Scnappi
Nicht registriert



Ich verstehe es ehrlich gesagt immer noch nicht wirklich. Hast du vielleicht einen Link, wo man sich das Problem ansehen kann?
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1916487 - 06.01.2010, 19:15:26
KnuddelWelli

Registriert: 03.09.2003
Beiträge: 5.769
Ort: Egelsbach
Wie gesagt, einfach maskieren: " -> \"
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1916489 - 06.01.2010, 19:18:22
DJ el rubio
Nicht registriert


Ich möchte gerne mehrere Auf/Einklappe-Texte (wie das beispiel unten auf meiner HP) auf meiner Knuddelshomepage auf der Seite 5 einbauen, aber wenn ich es tue, dann lässt sich keine Seite mehr öffnen. Die Anführungszeichen etc. habe ich schon zu ' umgewandelt, aber irgendwie klappt es trotzdem nicht. ?-)
Kann es daran liegen, das der Auf/Einklappe-Text-Code mit einem </div> endet?





Rubi.
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #1916907 - 07.01.2010, 10:27:26
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Warnung! Spoiler!
Html:
<style><!--
    * {margin: 0; padding: 0}
    body { text-align: center }
    page-wrap { text-align: left; width: 600px; margin: 0 auto }
    #page-wrap br { display: none; height: 0; }
    span.invisible{display: none}
    br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 }
--></style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"><!--
    $(document).ready(function() {
        $('.hideme:not(:first)').hide();
        $("a.mlink").click(function() {
            $('.hideme').hide();
            $($(this).attr("href")).show();
        });
        $("button").click(function () {
            $("span.invisible").toggle();
            
        });
    return false;
    });
--></script>

<div id="page-wrap">
    <ul id="menue">
        <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>
    
    <div id="contents">
        <div class="hideme" id="on">
            <p>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.
        </div>
    
        <div class="hideme" id="tw">
            <p>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.
            <p>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.
        </div>
    
        <div class="hideme" id="th">
            <p>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.
            <p>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.
            <p>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.
            <p>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.
        </div>
    
        <div class="hideme" id="fo">
            <p>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.
        </div>
    
        <div class="hideme" id="fi">
            <p>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.
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim <button>liess mich</button> <span class="invisible" style="color: red;">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</span>. 
               Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </div>
    </div><!-- endContents -->
</div><!-- endPage-Wrap -->


Ich versteh dich immer noch nicht.
Lorem ipsum gegen deine Inhalte austauschen, evtl. noch das Style anpassen und du hast keine Probleme mit dem Maskieren von Anfuehrungszeichen.
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: huendchen] - #1918648 - 10.01.2010, 03:55:27
DJ el rubio
Nicht registriert


So habe heute den Code ausgestet und auch wenn der Code ein anderer als der andere ist, hat es mein Problem gelöst. Ich danke euch herzlich, auch wenn ich micht nicht so gut ausdrücken kann. ich melde mich wieder, falls ich nochmals Probleme habe, was ich aber nicht befürchte.


Ciao. :-]



Rubi.
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: KnuddelWelli] - #2051130 - 30.07.2010, 16:22:53
TaTTii 08
Nicht registriert


Antwort auf: KnuddelWelli
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!
<pre><<span class="bbcodekeyword">script</span> <span class="bbcodekeyword">language</span>=<span class="bbcodestring">"javascript"</span> <span class="bbcodekeyword">type</span>=<span class="bbcodestring">"text/javascript"</span>>

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;
}
}

</<span class="bbcodekeyword">script</span>>

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

<<span class="bbcodekeyword">center</span>><<span class="bbcodekeyword">div</span> <span class="bbcodekeyword">style</span>=<span class="bbcodestring">"padding:10px; overflow-y:auto; width:400px; height:200px;"</span>><<span class="bbcodekeyword">div</span> <span class="bbcodekeyword">id</span>=<span class="bbcodestring">"inhalt"</span>>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).</<span class="bbcodekeyword">div</span>></<span class="bbcodekeyword">div</span>></pre></div>

Bei Fragen, melde dich einfach. :)


Huhu :)
Ich benutze zur Zeit diesen Code, habe auch so keine Probleme mit. Allerdings kann ich jetzt diesen Code
Warnung! Spoiler!
Code:
<FONT style="FONT-WEIGHT: bold; FONT-SIZE: 40pt; COLOR: #E1174F; LINE-HEIGHT: 20px; FONT-FAMILY: Impact; LETTER-SPACING: -0pt; text-transform: uppercase; text-transform: none">Dein Töxt.</font>
nicht mehr verwenden. Ich hab mal versucht das" durch ein ' zu ersetzen, oder ein \ vor das " zu machen, wenn ihr versteht was ich meine :D Aber das funktioniert nicht. Kann mir bitte jemand helfen? :-)
LG, Kathi
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #2051133 - 30.07.2010, 16:25:55
DoUgHbOyS
Nicht registriert


Antwort auf: TaTTii 08
Allerdings kann ich jetzt diesen Code
Warnung! Spoiler!
Code:
<FONT style="FONT-WEIGHT: bold; FONT-SIZE: 40pt; COLOR: #E1174F; LINE-HEIGHT: 20px; FONT-FAMILY: Impact; LETTER-SPACING: -0pt; text-transform: uppercase; text-transform: none">Dein Töxt.</font>
nicht mehr verwenden. Ich hab mal versucht das" durch ein ' zu ersetzen, oder ein \ vor das " zu machen, wenn ihr versteht was ich meine :D Aber das funktioniert nicht. Kann mir bitte jemand helfen? :-)
LG, Kathi


Was funktioniert den nicht?
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #2051289 - 30.07.2010, 19:03:17
TaTTii 08
Nicht registriert


Also wenn ich dann den Code eingefügt habe und dann auf einen Link, z.B. "über mich" klicke, funktioniert das nciht. Der Text erscheint dann irgendwie nicht...
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #2051301 - 30.07.2010, 19:20:50
DoUgHbOyS
Nicht registriert


Fuege das

Html:
<FONT style="FONT-WEIGHT: bold; FONT-SIZE: 40pt; COLOR: #E1174F; LINE-HEIGHT: 20px; FONT-FAMILY: Impact; LETTER-SPACING: -0pt; text-transform: uppercase; text-transform: none">


einfach ueber den JavaScript-Teil ein, - und schliesse den <font>-Tag dann einfach am Ende des JavaScript-Teils. So sollte es dann bei dir aussehen:

Html:
<FONT style="FONT-WEIGHT: bold; FONT-SIZE: 40pt; COLOR: #E1174F; LINE-HEIGHT: 20px; FONT-FAMILY: Impact; LETTER-SPACING: -0pt; text-transform: uppercase; text-transform: none">
<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;
                case 4:
			document.all.inhalt.innerHTML = "Text auf der vierten Seite.";
                        break;
                case 5:
			document.all.inhalt.innerHTML = "Text auf der fünften Seite.";
	}
}

</script>
</font>
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #2052732 - 01.08.2010, 21:10:03
TaTTii 08
Nicht registriert


Funktioniert super, danke :)
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #2054157 - 03.08.2010, 15:24:24
TaTTii 08
Nicht registriert


Hey, klappt doch nicht.
Irgendwie kann ich garkeine Codes verwenden, die mit <font beginnen. Ich kann halt nicht mehr auf die anderen Seiten gehen. Solangsam bin ich echt am verzweifeln X-)

[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #2054536 - 03.08.2010, 22:27:20
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Was genau moechtest du denn nun -bzw. was genau funktioniert denn nicht?
[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: huendchen] - #2054563 - 03.08.2010, 22:49:00
milkahäschen
Nicht registriert


Also ich hab das jetzt mal bei FrontPage zum testen eingefügt und da geht das irgendwie überhaupt nicht. :-D X-)

[zum Seitenanfang]  
Re: Fragen zum zweispaltigen Layout [Re: ] - #2054572 - 03.08.2010, 22:53:31
TaTTii 08
Nicht registriert


Ja also ich hab ja halt den Code von Knuddelwelli genommen und einer über mir (sorry ich weiß jetzt grad den Nick nicht :D) hat mir das umgecodet, das ich jetzt z.B. <font size="5">text</font> benutzen kann, eben alle Codes womit man die Schrift verändern kann. Aber das geht nicht, ich kann dann nicht mehr auf die Seite 'Knuddels' oder 'Über mich klicken'. Da ist keine Reaktion. Normal Texte schreiben kann ich, da benutz ich ja keine Codes für.
LG, Kathi (-:
[zum Seitenanfang]  
alle Beiträge 1 2 > alle


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