nicht angemeldet
Hallo,
ich bastel gerade ein neues Wordpress-Theme und komme an einer Stelle partout nicht weiter, ein reines CSS-Problem:
Das Dokument hat folgende Struktur: Container, inkl. Sidebar, Main (inkl. Content mit Margin nach rechts für Sidebar, rechts floatende Sidebar und clearendem Footer) und absolut positionierten Navigationselementen im Anschluß.
Das Problem: Auf der Startseite hab ich den Wordpress-Loop mit Vorschauen, in den Postings tauchen jeweils nach rechts gefloatete Bilder auf. Egal, ob ich im post-div oder im entry-div cleare: die standardkonformen Browser (z.B. Firefox 2 und Opera 9) ziehen mir die erste Inhaltsbox so lang wie die Sidebar hoch ist. An der Stelle komme ich nicht weiter :-/
Alternativ hab ich auch schon die clearfix-Methode versucht und die clearfix-Klasse wahlweise dem post-div und beitrag-div mitgegeben, aber ohne Erfolg.
Woran liegt es? Die gefloatete Sidebar ist doch aus der Struktur raus und die rechts gefloateten Bilder löse ich doch auch per clear-div auf!? Ab der zweiten Box klappt es ja auch einwandfrei ...
Wäre schön, wenn mir wer weiterhelfen könnte. Ist mein erstes float-Layout :-/
Danke!!
Viele Grüße,
Steve
Hier mal der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Seitentitel</title>
<style type="text/css">
<!--
/* Allgemeines */
* {
margin: 0;
padding: 0;
}
body {
font: 95% Arial, Helvetica, sans-serif;
color: #333;
text-align: center;
background: navy;
background-position: bottom center;
padding-bottom: 20px;
}
a img {
border: 0;
}
small {
color: #666;
background: transparent;
}
/* Schriftkonzept */
h1, h2, h3, #navoben li {
font-family: Georgia, "Times New Roman", Times, serif;
}
h1, h2, h3, h1 a, h2 a, h3 a {
color: #a12121;
background: transparent;
font-weight: normal;
font-style: italic;
text-decoration: none;
}
h1, h1 a {
font-size: 1.1em;
}
h2, h2 a {
font-size: 1em;
}
h3, h3 a, #navoben li a {
font-size: 0.9em;
}
p, #menu li a, #menu li li a, small {
font-size: 0.8em;
}
#menu li li a {
font-size: 80%;
}
/* Grundstruktur */
#container {
color: #000;
width: 760px;
position: relative;
margin: 0 auto;
background: red;
text-align: left;
}
#header {
width: 760px;
height: 90px;
position: absolute;
top: 0;
left: 0;
display: block;
color: #404040;
background: #404040;
}
#logo {
display: block;
width: 220px;
height: 90px;
color: #fff;
background: transparent;
position: absolute;
top: 0;
left: 540px;
}
#main {
color: #000;
line-height: 1.2em; /* gegen Peekaboo Bug */
background: transparent;
padding-top: 110px;
}
p.footer {
clear: both;
height: 68px;
color: #666;
background: #666;
}
#sidebar {
float: right;
display: inline;
width: 210px;
color: #000;
background: white;
}
#content {
margin: 0 240px 0 25px;
color: #000;
background: transparent;
}
/* Navigation oben */
#navoben {
position: absolute;
top: 55px;
left: 25px;
height: 25px;
width: 495px;
list-style-type: none;
}
#navoben li {
display: inline;
}
#navoben a {
display: block;
float: left;
color: #fff;
background: transparent;
text-decoration: none;
padding: 1px 10px;
}
/* Navigation Sidebar */
#menu {
width: 200px;
padding: 46px 0 0 0;
background: yellow;
}
.scotch {
display: block;
height: 46px;
width: 205px;
background: transparent; /* die Navigation hat im Original oben und unten ein Klebeband. Unten gings nur per Span einzubinden */
}
#menu li {
display: inline;
}
#menu li a {
display: block;
width: 187px; /* Tan Hack vs. Box Modell IE 5.5: 175px + 10px padding-left + 2px border */
wid\th: 175px;
color: #666;
background: transparent;
text-decoration: none;
padding: 0px 0px 2px 10px;
}
#menu h2 {
padding: 5px;
border-top: 1px dashed #666;
width: 187px; /* Tan Hack vs. Box Modell IE 5.5: 185px + 2px border */
wid\th: 175px;
position: relative;
font-weight:bold;
}
#menu li a, #menu h2, #menu div {
border-left: 1px solid #e2c8a7;
border-right: 1px solid #e2c8a7;
}
#searchform div {
width: 187px; /* Tan Hack vs. Box Modell IE 5.5: 175px + 10px padding-left + 2px border */
wid\th: 175px;
padding: 0px 0px 2px 10px;
}
#searchsubmit, #searchform #s {
border: 1px solid #e2c8a7;
color: #a12121;
background-color:#fff;
padding:1px;
line-height:1.2em;
}
#searchform #s {
width: 95px;
padding: 3px;
paddin\g: 2px;
}
/* Formatierungen im content-Bereich */
.post {
padding: 5px;
margin:20px 0;
border: 1px solid red;
width:492px;
widt\h:480px;
background-color: #fff;
}
img.beitrag_re,
img.beitrag_li {
padding: 3px;
border: 1px solid #8b928a;
background-color: #fff;
}
img.beitrag_re {
float: right;
margin: 3px 0px 0px 10px;
}
.home .quer {
width:120px;
height: 80px;
}
.home .hoch {
height: 120px;
width: 80px;
}
-->
</style>
</head>
(der Part ab <body> folgt in der Antwort, da das Posting zu lang ist. Bitte zusammensetzen)