Dreispaltiges Layout - Mitte im Quelltext vorn

[Chrischan]

Hallo,

ich habe mir das ccs-template aqueous_light von http://www.sixshootermedia.com/free-templates/ heruntergeladen. Jetzt würde ich das Design aber gerne so anpassen, dass der content-div (die Mitte) am Anfang des Quelltexts steht. Momentan sind beide sidebars noch vor dem Hauptteil der Seite. Ich habe versucht, einfach den content-div im html-Teil nach oben zu kopieren, doch das zerhaut mir das Design. Leider komme ich da überhaupt nicht weiter. Hier mal der CSS-Code:

Code: Alles auswählen



body {
   font: 78.5%/1.6em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif;
   word-spacing:2px;
   color:#444;
   margin:20px;
   background:url(../images/body.jpg) #f6f6f6;
}

* {
   margin:0;
   padding:0;
   
}

#wrapper {
   background:#fff;
   border:3px solid #f1f1f1;
   max-width:1200px;
   width:expression(this.width > 320 ? "320px" : this.width);
   min-width:760px;
   margin:0 auto;
}

* html #wrapper
{
   w\idth: expression(document.documentElement.clientWidth > 1200 ? "1200px" : "auto");
}

#innerwrapper {
   margin:1px;
   background:url(../images/innerwrapper.jpg) top repeat-x;
   padding:20px;
}

#header input {
   width:150px;
   padding:5px;
   background:#fff;
   border:2px solid #f6f6f6;
   font:150% Arial;
   color:#999;
}

#header input:hover {
   border:2px solid #ccc;
}

#header input:focus {
   border:2px solid #79B5D6;
   color:#555;
}

#header form {
   padding:27px 25px 20px 25px;
   float:right;
   background:#fff;
   width:160px;
   margin:-20px -20px 0 0 !important;
   margin:-20px -10px 0 0;
   border:none;
}

#header h1 {
   float:left;
   font:250% Georgia;
   color:#333;
   padding:5px 20px 5px 5px;
   
   margin:0 20px 0 0;
}

#header h1 a {
   color:#333;
   text-decoration:none;
   
}

#header h1 a:hover {
   color:#111;
   
}

#header h2 {
   font:150% Georgia;
   font-weight:normal;
   color:#555;
   padding:14px 0 0 0;
   border:none;
}

#header h2 a {
   color:#555;
   text-decoration:none;
   border-bottom:2px solid #f6f6f6;
}


#header #nav {
   clear:both;
   background:url(../images/nav.jpg) top repeat-x #4F9EC9;
   border-bottom:2px solid #4F9EC9;
   border-top:2px solid #388CBA;
   border-left:2px solid #388CBA;
   border-right:2px solid #388CBA;
   padding:10px 10px 10px 0 !important;
   padding:4px 10px 10px 0;
}

#header a em {
   font-style:normal;
   text-decoration:underline;
}

#header #nav a {
   color:#fff;
   font:140% Trebuchet MS;
   text-decoration:none;
   padding:10px;
}

#header #nav a:hover {
   background:#4F9EC9;
}

#header #nav a.active {
   background:#4F9EC9;
}

#header #nav li {
   display:inline;
   list-style:none;
   margin:0 1px 0 0;
}

#header #subnav {
   background:#4F9EC9;
   padding:5px 7px 7px 7px;
   font:90% Verdana;
   color:#DEEDF5;
   border-bottom:2px solid #388CBA;
   border-left:2px solid #388CBA;
   border-right:2px solid #388CBA;
}

#header #subnav li {
   list-style:none;
   display:inline;
}

#header #subnav a {
   color:#DEEDF5;
   text-decoration:none;
   font:100% Verdana;
   padding:5px;
   border-bottom:2px solid #4F9EC9;
}

#header #subnav a:hover {
   border-bottom:2px solid #388CBA;
   color:#fff;
}

#header #subnav a.active {
   border-bottom:2px solid #388CBA;
   color:#fff;
}


#sidebar {
   background:#fff;
   width:210px;
   padding:10px 20px 20px 5px;
   float:left;
   color:#666;
}

#sidebar h2 {
   font:160% Arial;
   color:#333;
   margin:10px 0 10px 0;
   border:none;
}

#sidebar h3 {
   color:#999;
   font:100% Verdana;
   font-weight:bold;
   letter-spacing:1px;
   margin:0 0 -10px 0;
}

#sidebar p {
   margin:15px 0;
}

#sidebar p.news {
   background:#fefefe;
}

#sidebar p.news a.more {
   color:#ccc;
   display:block;
   text-align:right;
   font:80% Verdana;
   text-transform:uppercase;
   letter-spacing:1px;
   text-decoration:none;
   padding:10px 0;
}

#sidebar p.news a:hover {
   color:#666;
}

#sidebar .subnav {
   border-top:1px solid #fafafa;
}

#sidebar .subnav li {
   list-style:none;
   padding:5px;
   border-bottom:1px solid #fafafa;
}

#sidebar .subnav li a {   
   color:#ccc;
   text-decoration:none;
   display:block;
}

#sidebar .subnav li a:hover {
   color:#666;
}

#sidebar .subnav li a b {
   float:right;
   display:none;
   color:#666;
}

#sidebar .subnav li a:hover b {
   display:inline;
}

#sidebar input {
   padding:4px;
   background:#f6f6f6;
   border:1px solid #ccc;
   color:#777;
   font:90% Verdana;
   width:190px;
}

#sidebarright {
   width:170px;
   float:right;
   padding:10px 0 0 20px;
   background:url(../images/sidebarright.jpg) top left no-repeat;
}

#sidebarright p {
   font:90% Verdana;
   color:#777;
   line-height:20px;
   margin:10px 0;
}

#sidebarright h2 {
   font:140% Arial;
   color:#333;
   margin:10px 0;
   border:none;
}

#sidebarright ul {
   margin:10px 0 10px 15px;
   font:90% Verdana;
}

#sidebarright ul li {
   margin:5px 0;
}

#sidebarright a {
   border-bottom:1px dotted #eee;
   color:#444;
   text-decoration:none;
}

#sidebarright a:hover {
   border-bottom:1px solid #ccc;
}


#content {
   margin:0 210px 0 240px;
   padding:20px 0 0 20px;
}

#contentnorightbar {
   margin:0 0 0 240px;
   padding:20px 0 0 20px;
}

p {
   margin:15px 0;
   line-height:22px;
}

h2 {
   font:190% Arial;
   color:#79B933;
   border-bottom:2px solid #f6f6f6;
}

h2 a {
   color:#79B933;
   text-decoration:none;
}

h2 a:hover {
   color:#5F9128;
}


#footer {
   clear:both;
   border-top:1px solid #eee;
   padding:10px;
   margin:30px 0 0;
}

a {
   color:#222;
}

a:hover {
   text-decoration:none;
}

h3 {
   font:140% Trebuchet MS;
   margin:10px 0;
}

#content ul {
   margin:15px 0 15px 0;
   line-height:25px;
   padding:15px 0 15px 15px;
   border-top:1px solid #eee;
   border-bottom:1px solid #eee;
   color:#79B933;
}
#content ul span {
   color:#444;
}
#contentnorightbar ul {
   margin:15px 0 15px 20px;
   line-height:25px;
   padding:15px 0;
   border-top:1px solid #eee;
   border-bottom:1px solid #eee;
   color:#79B933;
}
#contentnorightbar ul span {
   color:#444;
}

img {
   padding:1px;
   background:#ccc;
   border:4px solid #f6f6f6;
}

form {
   padding:10px;
   border:1px solid #f6f6f6;
}

label {
   display:block;
   font-weight:bold;
   color:#444;
   margin:5px 0;

}
input {
   width:300px;
   padding:4px;
   border:none;
   border-bottom:1px dotted #ccc;
   font:90% Verdana;
   color:#777;
}

textarea {
   width:400px;
   padding:4px;
   font:90% Verdana;
   border:1px solid #eee;
   height:200px;
   display:block;
   color:#777;
}

p img {
   float:left;
   margin:0 10px 0 0;
}

blockquote p {
   font:160% Georgia;
   color:#aaa;
   padding:0 10% 0 0;
   line-height:30px;
}




Könnt ihr mir helfen? Für die Profis ist das bestimmt kein Problem

Danke,
Chrischan

[Manuel]

Wieso soll der Quellcode denn oben stehen, wenn er von der Reihenfolge aber eigentlich danach kommt? Es wäre sicher möglich, z.B. wenn die Mitte float: right; hat, genauso wie der rechte Container. Mehr Sinn macht es aber, wenn du von links anfängst und dann der Reihe nach vor gehst oder wo besteht da genau dein Problem?

[Ingo]

Hi.

So im Vorbeigehen : Im CSS von oben heißt es:

Code: Alles auswählen

sidebar       { float:left;  ... }
sidebarright  { float:right; ... }


Das bedeutet ja: "im Quelltext nachfolgende Elemente sollen um die
sidebars herumfließen". Setzt Du den 'content'-Div im Quelltext nun aber
vor die sidebars, fließt nix mehr - jedenfalls nicht der 'content'.

Wenn Du die Positonierung mittels 'float' behalten willst, fällt mir nichts
Praktikables ein, wie man die Reihenfolge im Quelltext ändern könnte, ohne dass
man dann wiederum zusätzliche Tricks einbauen müsste, die das Layout wiederum
komplizierter und fehleranfälliger machen ... .

Gruß, Ingo

[Chrischan]

Es geht mir darum, dass Google die Seite später besser spidert. Dazu sollte der wichtigste Code (also der Hauptteil) möglichst so weit oben im Quelltext stehen, wie möglich. Hier habe ich mal ne Seite wo es geklappt hat und so wie ich es möchte. Weiß halt nur nicht, das richtig umzusetzen http://www.jimmylin.info/templates/3colfixed.html

[Manuel]

Aber die Seite auf Grund von Google so umzubauen, dass sie fehleranfälliger ist? Zudem ist sie vielleicht nicht mehr valide, je nachdem was und wie du es machst und dann wird auch Google das abwerten. Somit hättest du keinen wirklichen Gewinn. Klar ist die Suchmaschinenoptimierung wichtig, ob das aber wirklich so viel bringt halte ich für fragwürdig.

Aber wie gesagt, wenn du float: right verwendest und danach ein Element hinzufügst, welches float: left hat, dann dürfte das eigentlich klappen. Probiers halt mal aus.

Lg,
Manuel

[Chrischan]

Funktioniert leider auch nicht. Habe jetzt den content-div nach oben im quelltext verschoben und float:right definiert. Die Sidebar habe ich dann einfach mal float:left geschrieben. Bleibt leider immer noch so, dass der mittlere div oben in der Mitte der Seite steht und die beiden Sidebars darunter, eine links, andere rechts Das muss doch irgendwie gehen

[Basti]

Ich hatte vor einiger Zeit auch mal so etwas wie du vor ... auch aus Gründen der Suchmaschinenoptimierung. Geklappt hat es aber nicht bzw. wäre es zu kompliziert und "unlogisch" von der Struktur geworden.

Und meine Seiten werden trotzdem gut indexiert.
Also wenn du wirklich etwas sinnvolles in Sachen Suchmaschinenoptimierung machen möchtest solltest du mehr auf so Sachen wie Keyworddichte und den Einsatz von speziellen HTML Tags wie <h1>, <em> und <strong> achten anstatt dich mit der Quelltextreihenfolge aufzuhalten.
Davon hast du wirklich mehr und ähnlich wie schon mein Vorgänger bezweifel ich, dass dir diese Änderung überhaupt einen spürbaren "Gewinn" bringen würde.

[Manuel]

Mal eine kurze Anmerkung:
Wikipedia hats tatsächlich ebenfalls getauscht. Das Menü links steht weiter unten im Quellcode...das hätte ich wirklich nicht erwartet, auch wenn ich diese Art der Optimierung für echt komisch halte und es eine Frage der Zeit sein wird, bis Google darauf reagiert. Sauberer und gut strukturierter Quellcode hilft da aber ebenfalls weiter, denn je unkomplizierter und besser der Quellcode, desto kürzer ist er meistens.