Custom Blöcke in CSS
Eingetragen von LittleBit (46)am 04.10.2007 - 12:13 Uhr in
Hallo,
ich hampel grad mit dem Style für meine Seite rum. Begonnen hab ich damit das friendsforever Theme zu verwenden. Die Ähnlichkeiten sind inzwischen allerdings eher rudimentär. Dafür, daß ich von CSS nicht wirklich viel Ahnung hab bin ich damit schon recht zufrieden.
Meine Frage ist nun folgende:
Wenn auf einer Produktseite für den Webshop Bilder auftauchen wirds grad etwas knifflig für mich. Zuerst hab ich in TinyMCE einfach eine Tabelle reingeschmissen (bäh - paßt nicht zu CSS - weiß ich). In der Produktübersicht wurden die Tabellen allerdings zerrissen, weil die Tabellen nie geschlossen wurden (in der Einzelansicht gehts). Ich hab das zum Anlass genommen lieber mit CSS zu arbeiten...
Nun wollte ich einen Container verwenden, in dem links die Bilder und rechts der Text angezeigt wird.
< div >
< span class="productcontainer" >
< p >
< span class="prod_img" >
< img src="/drupalcms/files/u1/testbild.jpg" height="368" width="240" / >
< /span >
< /p >
< p >
< span class="prod_text" >
Testtext< /span >
< /p >
< /span >
< /p >Und style.css wie folgt erweitert:
p span.prod_img {
display:block;
float:left;
width: 40%
...
}
p span.prod_text {
display:block;
float:right;
width: 59%
...
}
div span.productcontainer {
display:block;
width: 99%;
...
}Bild und Text stehen auch wie erwartet nebeneinander. Änderungen am productcontainer wirken allerdings garnicht. Auch ein nachfolgendes div wird direkt unter dem rechten Block angehängt - also noch innerhalb des gedachten productcontainers.
Wenn ich mir die CSS Information für einen der Blöcke mit WebDeveloper anschaue, wird mir ... div > span.productcontainer > p > span.prod_text angezeigt (so wie ich das eigentlich auch erwartet habe).
Was mache ich falsch ?
Gruß,
Tom
PS: Wie krieg ich denn meinen HTML-Code hier noch gescheit angezeigt ?
- Anmelden oder Registrieren um Kommentare zu schreiben
Füge mal nach den beiden
am 08.10.2007 - 11:23 Uhr
Füge mal nach den beiden Blöcken (würde ich von span auf div ändern), ein style="clear:both" ein.
gruß pebosi
clear:both verbessert die
am 09.10.2007 - 10:41 Uhr
clear:both verbessert die Lage schon deutlich , hinterläßt mir derzeit aber noch ein kleines neues Problem:
Derzeit hab ich zunächst zwei Spalten - Sidebarleft und mainContentSidebarLeft. Innerhalb des mainContentSidebarLeft hab ich dann das obige Spiel betreiben wollen. Das clear:both wird das allerdings nicht nur innerhalb von
< div id="mainContentSidebarLeft" class="" > ...
angewendet, sondern wirkt auch auf die Sidebarleft.
Ergebnis ist, daß nach dem ersten Node alles auf gleiche Höhe gebracht wird und somit der zweite Node erst auf Höhe Unterkante Sidebarleft beginnt. Problem ist browserübergreifend. Hab ich die Möglichkeit das genauer zu steuern auf welchen Block sich das clear:both bezieht ?
Gruß,
Tom