[Ben]

Hallo,
ich würde gerne YAML für ein Layout verwenden.

Inhalt links, Sidebar rechts. So, jetzt gibt es eine Beispieldatei, die ja eigentlich genau die Struktur hat, die ich verwenden möchte. Allerdings möchte ich, dass der Inhalt vor der Navigation im Quelltext steht.

Grund ist einfach, dass der Inhalt wichtiger ist und aufgrund der Optimierung für Suchdienste dementsprechend weit oben im Quelltext vorzufinden sein sollte.

Kann mir da vielleicht jemand helfen? Ich habe da nun rumgespielt, aber so wirklich hinbekommen habe ich es nicht.
Ich habe dann noch versucht mit dieser Datei zu arbeiten und einfach eine der beiden Float-Spalten wegzulassen, aber irgendwie .. ich komm mir schon vor, wie ein "DAU".

Beispiele können gerne an den beiden oben verlinkten (oder jedem anderen YAML-Beispiel) dargestellt werden.
Ich danke vielmals.

Grüße, Ben.

[Bleistift]

Man kann es mit der Suchmaschinenoptimierung auch übertreiben... Ich denke nicht, das die Position extrem relevant ist. Hast du evt. einen glaubhaften Beweis dafür?

[Ben]

Vorab:
Keine Diskussion dazu in diesem Thread!

Ich habe das hier und da mal gelesen und von diesem und jenem mal gehört. Konkrete Links kannst du ja selbst mal suchen.

So, back to topic.

[Artemis]

Das einzige, was ich mir jetzt so vorstellen kann ist folgendes:

<div id="wrapper">
  <div id="inhalt"></div>
  <div id="sidebar"></div>
</div>
<div id="head"></div>
<div id="navigation"></div> 

Und dann den wrapper, head und navigation absolut positionieren. Hab sowas auch mal probiert, ist auch nicht so viel rumgekommen bei.

[Ben]

Hi,
na ich will nichts Eigenes schreiben. Ich will YAML dafür nutzen.

Das, was du jetzt dargestellt hast, ist ja nicht auf YAML bezogen, oder sehe ich das falsch?

[$traight-$hoota]

Zitat von Ben

YAML, Inhalt links, Sidebar rechts, Inhalt vor Sidebar im Quelltext

Zitat von Ben

Inhalt rechts, Sidebar rechts.

ja was den nu??
also ich gehe mal davona us, dass du es so haben möchtest, wie z. B. in deinem Blog, also die Sidebar rechts vom Inhalt.
dann schnapp die doch einfach das 2-1-3- bzw. 3-1-2-Layout und lass die linke spalte weg.

[Ben]

Danke. Fehler im ersten Beitrag korrigiert.

Hm, habe ich noch nicht ausgestet. Warum auch immer. Werde das mal machen.
Danke.

[$traight-$hoota]

für das 3-1-2 layout musst du bei col1 folgendes ändern:

margin-left:-100%;
width:75%;
 

und col3 halt display: none

[dago]

Hi Ben

Also erstmal verstehe ich auch nicht den Grund der Verschiebung. Aber ok.

Interessant ist es allerdings für mich, dass du unbedingt YAML nutzen möchtest, obwohl du nicht an die von YAML vorgeschriebene Reihenfolge dicht halten möchtest. Leider ist YAML so aufgebaut, dass wenn du dich an die Regeln hält, du auch glücklich damit bist. Aber wenn nicht, kann es sehr im Wege sein oder die Sache unnötig verkomplizieren.

Nun jut, erstmal müsste man natürlich wissen was für Design du denn genau realisieren möchtest. Möglich währe es nämlich den Header-Bereich nach unten zu erweitern und die Navigation dann auf diesen Platz fest zu positionieren. Aber damit stellst du dich dem Grundkonzept von YAML quer.

Hab mal ein Beispiel abgeändert. Am besten lädst du dir auch den kompletten Archiv herunter. Also ich hab hier die Navigation nach unten verschoben:
yaml/layout_storage/layout_2col_right_vlines.html

und in der Datei
yaml/css/modifications/basemod_2col_right_vlines.css

folgendes hinzugefügt:

#header { padding-bottom: 28px; }
#nav { position: absolute; top: 152px; left: 0; margin: 0 12px; }

Die Dateien sind angehängt!


Ist nur ein Beispiel. Möglich währe noch mit BORDER, MARGIN zu arbeiten. Ja, kommt eben auf das konkrete Design an!

[Ben]

Hm,
Datei: basemod_3-1-2.css

@media screen
{

/* #col1 wird zur mittleren Spalte */
#col1 {
  width: 75%;
  float:left;
  margin-left: -100%;
  margin-right: 25%;
}

/* #col1 wird zur rechten Spalte */
#col2 {
  width: 25%;
  float:right;
  margin-right: 0%;
}

/* #col3 wird zur linken Spalte */
#col3 {
  display: none;
}

Anzusehen hier: http://dev.klaile.com/yaml/layout_st...out_3-1-2.html

Bin ich dumm? Die Angaben da werden gar nicht übernommen.


[Nachtrag]
@dago:
Habe deinen Beitrag gerade erst gelesen. Werde das erstmal austesten, was du da gemacht hast und dann noch etwas dazu schreiben. Danke.

[Ben]

Hallo,

Zitat von dago

Also erstmal verstehe ich auch nicht den Grund der Verschiebung. Aber ok.

ich habe da mal einen separaten Thread zu eröffnet, um die Diskussionsthemen nicht zu vermischen.

Danke für dein Beispiel, allerdings ist es ja durchaus auch möglich einfach diese Datei hier "yaml/layout_storage/layout_2col_left_vlines.html" mit einer breiteren linken Spalte zu verwenden, oder?

Bin ich jetzt gerade erst drauf gekommen. *g*
Müsste doch eigentlich das sein, was ich will.


PS:
Dein Beispiel sieht aber auch komisch aus .. hab mich erst erschreckt.


PSS:
Alle Links zu den Beispieldateien sind nur temporär verfügbar.

[dago]

@Ben
Du hast doch unter yaml/css/layout_3-1-2.css bereist das fertige Layout. Wie nimmst du nicht es und passt es deinen wünschen entsprechend an?

[Ben]

Hallo,
das Layout wird trotz der Änderungen (#col3: display: none nicht so angezeigt, wie ich will .. Sind ja trotzdem noch drei Spalten da.

Aber

Danke für dein Beispiel, allerdings ist es ja durchaus auch möglich einfach diese Datei hier "yaml/layout_storage/layout_2col_left_vlines.html" mit einer breiteren linken Spalte zu verwenden, oder?

[dago]

Ben!

lade dir erstmal das komplette Archiv herunter bevor du dich hier weiter unnötig herumquellst:
http://www.yaml.de/mint/pepper/tillk...2_06123101.zip

Dann sieht auch mein Beispiel ganz anders aus.

[Ben]

Nur weil ich nicht alles hochgeladen habe, heißt das nicht, dass lokal nicht alles vorliegt.

Fazit ist, dass deine Änderungen im Quelltext zu sehen sind, die Anzeige aber etwas verunglückt ist.
YAML habe ich schon vor einigen Tagen heruntergeladen.

Und ich betone nochmals mein "aber" ...

[dago]

Also bei mir sieht das ganze so aus:
http://www.dg-server.de/yaml/layout_...ht_vlines.html

Ich hab nämlich nur die zwei Dateien angehängt. Die sind natürlich abhängig von YAML-Dateien. Oder nutzt du ein anderen Browser als IE7 und Firefox?

[Ben]

Hm, ne. Sehe das nun bei dir richtig. Komisch, aber nicht so wichtig. Das find ich schon noch raus, woran das liegt.

Nochmal auf das "aber" eingehen?

[dago]

Bei dem vom mir benutztem Beispiel sind doch nur zwei Spalten. Brauchst du die dritte? Wenn nicht, tue auf diese Vorlage doch umsteigen.

[$traight-$hoota]

Zitat von Ben

Bin ich dumm? Die Angaben da werden gar nicht übernommen.

liegt vielleicht dadran, dass die Datei nicht existiert...

[Ben]

Nein. Aber ich kann doch auch genauso gut das hier verwenden.
http://www.yaml.de/layout_storage/la...ft_vlines.html

Und die linke Spalte einfach breiter machen. Quasi die Breiten vertauschen. Dann hat sich das ja alles erledigt. (Eigentlich hat es sich das schon längst und ich versuche das hier nur irgendwie rüberzubringen -)