Impressum · Kontakt · Hilfe
Besucher online · Mitglieder



Portal > Foren > Ausschreibungssprachen und clientseitige Programmierung > HTML, XML und CSS > YAML, Inhalt links, Sidebar rechts, Inhalt vor Sidebar im Quelltext
Antwort
 
Themen-Optionen
Alt 22.03.2007, 15:23   Nach oben    #1
Ben
Erfahrener Benutzer
 
Benutzerbild von Ben
 
Registriert seit: 02.12.2004
Ort: Remagen
Beiträge: 4.583
Standard YAML, Inhalt links, Sidebar rechts, Inhalt vor Sidebar im Quelltext

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.

Geändert von Ben (22.03.2007 um 16:56 Uhr). Grund: rechts gegen links ausgetauscht.
Ben ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 15:36   Nach oben    #2
Bleistift
Erfahrener Benutzer
 
Benutzerbild von Bleistift
 
Registriert seit: 31.12.2006
Ort: Zürich
Beiträge: 289
Standard

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?
__________________
. <-- This is Punkt. Copy Punkt into your signature to help him on his way to world domination.
Bleistift ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 15:39   Nach oben    #3
Ben
Erfahrener Benutzer
 
Benutzerbild von Ben
 
Registriert seit: 02.12.2004
Ort: Remagen
Beiträge: 4.583
Standard

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.
Ben ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 15:47   Nach oben    #4
Artemis
Semantic Web Fanatic
 
Benutzerbild von Artemis
 
Registriert seit: 03.06.2006
Beiträge: 236
Standard

Das einzige, was ich mir jetzt so vorstellen kann ist folgendes:
HTML-Code:
<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.
__________________
Applikations-Programmierung:
BlitzMax, BlitzPlus

Webentwicklung:
PHP, (X)HTML, CSS, JavaScript, MySQL


Artemis ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 15:53   Nach oben    #5
Ben
Erfahrener Benutzer
 
Benutzerbild von Ben
 
Registriert seit: 02.12.2004
Ort: Remagen
Beiträge: 4.583
Standard

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?
Ben ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 16:55   Nach oben    #6
$traight-$hoota
Erfahrener Benutzer
 
Benutzerbild von $traight-$hoota
 
Registriert seit: 15.09.2005
Ort: Königreich Flieden
Beiträge: 491
Standard

Zitat:
Zitat von Ben
YAML, Inhalt links, Sidebar rechts, Inhalt vor Sidebar im Quelltext
Zitat:
Zitat von Ben Beitrag anzeigen
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.
__________________
Weißt Bescheid - Scheiß wie weit
$traight-$hoota ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 16:57   Nach oben    #7
Ben
Erfahrener Benutzer
 
Benutzerbild von Ben
 
Registriert seit: 02.12.2004
Ort: Remagen
Beiträge: 4.583
Standard

Danke. Fehler im ersten Beitrag korrigiert.

Hm, habe ich noch nicht ausgestet. Warum auch immer. Werde das mal machen.
Danke.
Ben ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 17:00   Nach oben    #8
$traight-$hoota
Erfahrener Benutzer
 
Benutzerbild von $traight-$hoota
 
Registriert seit: 15.09.2005
Ort: Königreich Flieden
Beiträge: 491
Standard

für das 3-1-2 layout musst du bei col1 folgendes ändern:
css Code:
  1. margin-left:-100%;
  2. width:75%;
und col3 halt display: none
__________________
Weißt Bescheid - Scheiß wie weit
$traight-$hoota ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 17:30   Nach oben    #9
dago
Erfahrener Benutzer
 
Registriert seit: 17.11.2005
Ort: Rheinland-Pfalz, Osthofen
Beiträge: 122
Standard

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:
HTML-Code:
#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!
Angehängte Dateien
Dateityp: zip yaml.zip (2,2 KB, 3x aufgerufen)
dago ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 17:31   Nach oben    #10
Ben
Erfahrener Benutzer
 
Benutzerbild von Ben
 
Registriert seit: 02.12.2004
Ort: Remagen
Beiträge: 4.583
Standard

Hm,
Datei: basemod_3-1-2.css
Code:
@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.

Geändert von Ben (22.03.2007 um 17:33 Uhr).
Ben ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 17:45   Nach oben    #11
Ben
Erfahrener Benutzer
 
Benutzerbild von Ben
 
Registriert seit: 02.12.2004
Ort: Remagen
Beiträge: 4.583
Standard

Hallo,
Zitat:
Zitat von dago Beitrag anzeigen
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.
Ben ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 17:47   Nach oben    #12
dago
Erfahrener Benutzer
 
Registriert seit: 17.11.2005
Ort: Rheinland-Pfalz, Osthofen
Beiträge: 122
Standard

@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?
dago ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 17:48   Nach oben    #13
Ben
Erfahrener Benutzer
 
Benutzerbild von Ben
 
Registriert seit: 02.12.2004
Ort: Remagen
Beiträge: 4.583
Standard

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

Aber
Zitat:
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?
Ben ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 17:50   Nach oben    #14
dago
Erfahrener Benutzer
 
Registriert seit: 17.11.2005
Ort: Rheinland-Pfalz, Osthofen
Beiträge: 122
Standard

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.
dago ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 17:54   Nach oben    #15
Ben
Erfahrener Benutzer
 
Benutzerbild von Ben
 
Registriert seit: 02.12.2004
Ort: Remagen
Beiträge: 4.583
Standard

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" ...
Ben ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 18:12   Nach oben    #16
dago
Erfahrener Benutzer
 
Registriert seit: 17.11.2005
Ort: Rheinland-Pfalz, Osthofen
Beiträge: 122
Standard

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?
dago ist offline  
Add Post to del.icio.usBookmark Post in TechnoratiDiesen Beitrag zu Mister Wong hinzufügen!
Mit Zitat antworten
Alt 22.03.2007, 18:13   Nach oben    #17
Ben
Erfahrener Benutzer
 
Benutzerbild von Ben
 
Registriert seit: 02.12.2004
Ort: Remagen
Beiträge: 4.583
Standard

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?