CSS Problem, für Profis ein Klacks
Verfasst: 13.03.2010, 11:24
Auf die Gefahr hin, mich hier total zu blamieren, aber irgendwie raffe ich es nicht. Mich nervt in meinem Quelltext, dass die Navi, welche ziemlich lang ist, vor dem Text kommt. Ich denke das ist auch der Grund, weshalb Google sich so schwer mit der Indizierung tut, da die ersten ca. 70 Zeilen Code auf jeder Seite gleich sind. Eben die identische Navi und gleicher header.
So sieht die html jetzt aus (alle Texte und Bilder natürlich rausgenommen):
Die Navi ("sidebar")hat ganze 26 Links in der Liste. Diese möchte ich nun nach den Content setzen, ohne das sich das Layout ändert.
Die dazugehörige CSS sieht so aus (Auszug):
Für einen CSS/Html-Profi sicher ein Klacks. Also wie muss ich die html und css verändern, damit im Quelltext die Navi ( id="sidebar") hinter dem content (id="content") steht.
Hab schon einiges versucht und bei anderen Sites das gleiche auch hinbekommen. Vielleicht liegts am float....
So sieht die html jetzt aus (alle Texte und Bilder natürlich rausgenommen):
Code: Alles auswählen
<div id="header">
<div id="header-container">
<p>text</p>
<ul>
<li><a href="http://www.domain.de">Link1</a></li>
<li><a href="Http://www.domain.de">Link2</a></li>
</ul>
<br class="clear" />
</div>
</div>
<div id="container">
<div id="sidebar">
<p>Text</p>
<ul>
<li><a href="http://www.domain.de">Navi1</a></li>
<li><a href="http://www.domain.de">Navi2</a></li>
<li><a href="http://www.domain.de">Navi3</a></li>
</ul>
</div>
<div id="content">
<p>Ganz viel Text hier..</p>
<div class="articlemenu">
</div>
</div>
</div>
<div id="footer">
<div id="footercontent">
Text im footer
</div>
</div>
Die dazugehörige CSS sieht so aus (Auszug):
Code: Alles auswählen
#header {
background-image:url(../images/backgrounds/oben.jpg);
background-position:top;
background-repeat:repeat-x;
}
#header-container {
width:765px;
margin:0 auto;
padding:0px 0 0 0;
}
#container {
width:765px;
margin:0 auto;
}
#sidebar {
float:left;
width:220px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#777;
line-height:20px;
border-bottom:1px solid #eee;
}
#content {
margin:0 0 0 220px;
border-left:1px solid #eee;
}
#footer {
color: #999;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
clear: both;
margin: 50px 0;
padding: 15px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc
}
Hab schon einiges versucht und bei anderen Sites das gleiche auch hinbekommen. Vielleicht liegts am float....