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

Sammelthread für Fragen zu den Tutorialen
Optionen
Thema bewerten
Sammelthread für Fragen zu den Tutorialen - #1800743 - 11.07.2009, 23:46:28
Scnappi
Nicht registriert


Hallo,

in Anlehnung an den Thread für Tutoriale und Codehilfen eröffnen wir hiermit einen Sammelthread für Fragen, die auftauchen können.

Dadurch erhalten die Tutorial-Autoren weniger Post im Chat und können bequem über das Forum antworten. Die Fragenden haben den Vorteil, dass vielleicht auch jemand anderes ihre Frage beantworten kann und sie somit schneller Hilfe bekommen! :-)

Kroko
[zum Seitenanfang]  
Re: Sammelthread für Fragen zu den Tutorialen [Re: ] - #1801085 - 12.07.2009, 15:31:21
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Ergaenzend zu Scnappis Zweispaltiges Layout (ohne Tabelle!) moechte ich hier noch eine zweite Methode anfuehren, die alle modernen Browser* verstehen.

Das Markup bleibt das gleich, lediglich das dafuer noetige CSS aendert sich ein bisschen.
Html:
<style>
   #container { display: table; width: 800px;      }
   .column    { display: table-cell;               }
</style>
<!--[if lte IE 8]><style>
   #container { overflow: hidden;                  }
   .column    { float: left; width: 33%;           }
<style><![endif]-->

Hier bedient man sich der erweiterten Darstellungsmodie.
Der Umschliessende Container verhaelt sich wie eine Tabelle und diesem wird auch die Ausgangsbreite zugewiessen. Die Kindelemente ( hier mit colum bezeichnet ) verhalten sich wie Tabellen zellen (td) und teilen sich bruederlich den zur Verfuegung stehenden Platz.
Der IE erkennt jedoch diese Anzeigemodie nicht und deshalb muessen wird hier im Zweiten Block, noch mal extra floats einfuehren mit entsprechenden Breiten fuer die Zellen.

Somit sieht der Quelltext dann folgender massen aus:
Html:
<style>
   #container { display: table; width: 800px;      }
   .column    { display: table-cell;               }
</style>
<!--[if lte IE 8]><style>
   #container { overflow: hidden;                  }
   .column    { float: left; width: 33%;           }
<style><![endif]-->

<div id="container">

   <div class="column">
      <p>Inhalt der Linken spalte.
   </div>

   <div class="column">
      <p>Inhalt der rechten Spalte</p>
   </div>

</div>

Das nur als 'moderne' Ergaenzung ohne den eigentlich Thread weiter zu stoeren. Scnappi war eben eine Stunde schneller als ich :-)

*moderne Browser*: Safari, Chrome, Opera 9.63/10, Mozilla Firefox 3.5 ( Die IE-Familie unterstuetzt diese Anzeigeart bis dato ueberhaupt nicht. )
[zum Seitenanfang]  
Re: Sammelthread für Fragen zu den Tutorialen [Re: huendchen] - #1966553 - 30.03.2010, 20:39:35
Scnappi
Nicht registriert


Hi,

ich hole diesen Thread mal kurz aus der Versenkung. Da ich im Moment Zeit und Lust habe, Tutoriale zu schreiben, würde ich mich freuen, wenn ihr ein paar Anregungen hättet, wozu ich schreiben kann. Mir selbst fällt nichts ein im Moment, weil für mich vielleicht viele Sachen, die ich auf meiner HP mache, selbstverständlich sind. Wenn ihr aber irgendwelche Wünsche habt, wenn ihr Problene habt, bei denen ihr mal irgendwann stecken geblieben seid, wenn ihr irgendwo mal was gesehen habt, was ihr auch gerne mal machen würdet, dann schlagt es einfach hier vor und ich schau mal, ob ich was dazu schreiben kann. Vielleicht kommen mir ja auch andere zuvor. *g*

Kroko
[zum Seitenanfang]  
Re: Sammelthread für Fragen zu den Tutorialen [Re: ] - #1966671 - 30.03.2010, 22:29:04
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Antwort auf: Scnappi
Da ich im Moment Zeit und Lust habe, Tutoriale zu schreiben, würde ich mich freuen, wenn ihr ein paar Anregungen hättet, wozu ich schreiben kann.

Dann fang doch mal an mit Fotogalerien.
Bei vielen sehe ich immer diese Flashanimationen mit Fotos.
Es gibt aber viele, einfachere Methoden, mit denen das zu Realisieren ist ( css, jquery etc. )

Noch mehr Anregungen gefaellig ;)
[zum Seitenanfang]  
Re: Sammelthread für Fragen zu den Tutorialen [Re: huendchen] - #1966700 - 30.03.2010, 22:57:24
Scnappi
Nicht registriert


Vielleicht welche ohne jquery. *g* JavaScript ist nicht so mein Ding. Damit kann ich nur so ganz simple Sachen.
[zum Seitenanfang]  
Re: Sammelthread für Fragen zu den Tutorialen [Re: ] - #1966712 - 30.03.2010, 23:12:28
huendchen

Registriert: 29.03.2007
Beiträge: 2.385
Antwort auf: Scnappi
Vielleicht welche ohne jquery. *g* JavaScript ist nicht so mein Ding. Damit kann ich nur so ganz simple Sachen.

Ich schrieb bewusst jQuery.
Wird an der Zeit, dass du dich damit auseinander setzt.
Vllt. kannst du so auch noch was dazu lernen - hast doch eh grad Ferien.
[zum Seitenanfang]  
Re: Sammelthread für Fragen zu den Tutorialen [Re: huendchen] - #2055328 - 04.08.2010, 20:06:48
Scnappi
Nicht registriert


Ich erhielt gerade im Chat eine Frage zu meinem Tutorial Zweispaltiges Layout, in der es darum ging, dass nicht beide spalten gleich groß sein sollen, wofür das Tutorial ja eigentlich ausgelegt war. Es folgt eine Ergänzung für unterschiedliche Breiten.

Die Markup-Struktur ändert sich geringfügig:
Html:
<div id="container">
   <div id="left">
      <p>Inhalt der Linken spalte.</p>
   </div>
   <div id="right">
      <p>Inhalt der rechten Spalte</p>
   </div>
   <br class="clearer" />
</div>


Der Stylesheet sieht so aus:
Html:
<style type="text/css"><!--
  #left {
      float: left;
      width: 190px; /* Breite der linken Spalte beliebig anpassen */
  }

  #right {
      float: right;
      width: 500px; /* Breite der rechten Spalte beliebig anpassen */
  }

  #container {
      width: 700px;
      /* Spaltenbreiten addieren und eine kleine Pufferzohne frei halten (hier 10px) */
  }

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


Für mehr als die kurzen Kommentare im Stylesheet habe ich an Erklärungen gerade nicht viel Zeit, sorry.
[zum Seitenanfang]  


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