[de-de] Problem mit Darstellung der Artikelliste

moon blake · 2011-01-26 20:31:16

Ich habe das Problem, dass in einer Artikelliste nach dem zuerst ausgeworfenen Artikelexzerpt ein großer, unschöner Zwischenraum entsteht. Nach allen weiteren Artikeln erschent nur der gewünschte Abstand. Das scheint mir ein Txp-Problem zu sein, nicht eines des CSS, denn wenn ich den von TXP generierten HTML-Quelltext samt css gesondert abspeichere und dann im Browser aufrufe, ist die Darstellung korrekt.

Der Code des Bausteines scheint mir unverdächtig:

<txp:if_individual_article>
<!-- Code fur Einzelartikeldarstellung-->
<txp:else />
<txp:permlink><txp:article_image class="bild_links" thumbnail="1" /></txp:permlink>
<h3><txp:permlink><txp:title /></txp:permlink></h3>
<txp:excerpt /> <txp:permlink>...mehr</txp:permlink>
<div class="defloat"></div>
</txp:if_individual_article>

Hat jemand eine Idee?

GugUser · 2011-01-26 21:42:46

Es wäre hilfreich, wenn du die URL der betreffenden Seite angeben würdest.

moon blake · 2011-01-26 21:47:54

Die Seite ist nicht online, nur lokal auf meinem Rechner. Ich kann aber den Code posten; mir ist nur nicht klar, welche Teile hier von Belang sein könnten.

GugUser · 2011-01-26 22:04:40

Der Teil, um den es geht im ausgegebenen HTML-Quelltext und das dazu gehörende CSS.

graumeister · 2011-01-27 02:15:29

“Darstellung” wird vom CSS geregelt. Sieh dir den CSS-Code fuer

an. Sieh die Seite im Chrome Browser an, Rechtsklick auf irgendein Element, “Inspect Element” waehlen, ueber den Artikel hovern und kucken, welches Element beim Hovern den Abstand blau einfaerbt. Dann klicken. Rechts im Inspektor siehst du die CSS-Regeln fuer das betreffende Element, such nach padding oder margin. Done.

merz1 · 2011-01-27 13:49:19

Oder Firefox + add-on Firebug + Rechtsklick ‘Element untersuchen’

moon blake · 2011-01-27 21:30:08

Ok, danke für die Hinwiese. Inzwischen bin ich auch der Meinung, dass es ein CSS-Problem ist, nicht eines von TXP. Insofern ist das hier off-topic.
Firebug habe ich mir installiert, wollte ich eh schon lange mal machen; ich weiß nicht, ob ich das auf die Schnelle alles verstanden habe. Aber: das Tool zeigt an der fraglichen Stelle nichts an. Das artikelexcerpt steht ordentlich in einem <p> und dann kommt der Link, auch der ist nicht größer als er sein soll und zu dem “defloat” (besteht übrigens nur aus einer clear-Anweisung) zeigt er nix, wohl weil es ein leeres div ist, vermute ich.
Noch eine Merkwürdigkeit: Safari zeigt an der Stelle zwar auch einen etwas größren Abstand, aber längst nicht so viel wie Firefox…..
Ich probiere weiter, sollte ich noch etwas Mitteilenswertes herausbekommen (vielleicht probier ich noch mal Chrome), poste ich das hier noch in der gebotenen Kürze. Aber wie gesagt: das hier ist kein CSS-Forum.

Last edited by Hilfsbuchhalter (2011-01-27 21:30:23)

GugUser · 2011-01-27 21:38:56

Von mir aus können wir die Frage schon fertig denken. Allerdings würde es mich, um weiter darauf einzugehen, schon interessieren, den entsprechenden HTML-Teil zusammen mit dem dazu gehörenden CSS zu sehen. Mir ist nicht klar, um was es mit diesem leeren <div class="defloat"></div> geht.

moon blake · 2011-01-27 22:05:24

Ok.

“Defloat” enthält wie gesagt nur ein clear, anderenfalls würden die Thumbnails immer in den vorigen Text rutschen, das klassische Problem beim Umfliessen mit Text und Bildpositionierung mit float: left. Ich weiß nicht, wo ich das clear sonst setzen sollte.

Hier das HTML nach der Navigation und auch ohne den html-body-Rahmen

<div id="left">
spaltentext
</div><!-- END #left -->
<!-- right -->
<div id="right">
<h3><em>Über uns</em></h3>
  <p>bla bla bla  <br>	
</div>    <!-- END #rightcolumn -->
<div id="maintext">
<h3><a rel="bookmark" href="http://localhost/txpfolder/index.php?id=6">Artikel 5</a></h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a rel="bookmark" href="http://localhost/txpfolder/index.php?id=6">...mehr</a>
<div class="defloat"></div>
<h3><a rel="bookmark" href="http://localhost/txpfolder/index.php?id=5">Artikel 4</a></h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <a rel="bookmark" href="http://localhost/txpfolder/index.php?id=5">...mehr</a>
<div class="defloat"></div>
<a rel="bookmark" href="http://localhost/txpfolder/index.php?id=4"><img src="http://localhost/txpfolder/images/6t.jpg" alt="Michail Schütte" class="bild_links" /></a>
<h3><a rel="bookmark" href="http://localhost/txpfolder/index.php?id=4">Artikel 3</a></h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.. <a rel="bookmark" href="http://localhost/txpfolder/index.php?id=4">...mehr</a>
<div class="defloat"></div>
<a rel="bookmark" href="http://localhost/txpfolder/index.php?id=2"><img src="http://localhost/txpfolder/images/3t.jpg"  class="bild_links" /></a>
<h3><a rel="bookmark" href="http://localhost/txpfolder/index.php?id=2">Artikel 2</a></h3>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a rel="bookmark" href="http://localhost/txpfolder/index.php?id=2">...mehr</a>
<div class="defloat"></div>
<h3><a rel="bookmark" href="http://localhost/txpfolder/index.php?id=1">Welcome to Your Site!</a></h3>
 <a rel="bookmark" href="http://localhost/txpfolder/index.php?id=1">...mehr</a>
<div class="defloat"></div>
</div><!-- END #maintext -->
<div class="defloat"></div>
</div><!-- END #wrap_content -->
<div id="footer">text text </p> <img src="http://localhost/txpfolder/textpattern/txp_img/txp_slug105x45.gif" width="105" height="45" alt="Textpattern" title="" /></a></p></div><!-- END #footer -->
</div><!-- END #wrapper -->

und hier der relevante css-Code, ich hoffe, ich habe nichts vergessen…..

body {
/* 	text-align: center; */
	font-size: 1.3em;
        line-height: 1.8em; 
        font-family: "Georgia", serif;
}
* {margin: 0 px; padding: 0 px; border: 0px;}
div#wrapper {
	margin: 0px 40px;
	/* text-align: left; */
	background: #FAFAFA;
        width:960px;
}
div#wrap_content {}
/* linke Spalte------------*/
div#left { background-color: white; float: left; clear: both; width: 100px; padding-bottom: 10px;}
/* linke Spalte Ende------------*/
div.box {margin-bottom: 10px; background: url(images/rounded_box_bottom.gif) no-repeat left bottom;}
div.box h6, {margin-bottom: 0em; padding: 0.4em 1.0em 0em 1.0em; color: #FFFFFF; line-height: 1.0em; background: url(images/rounded_box_top.gif) no-repeat;}
p.boxtext {padding: 30px 10px 10px 10px; font-size: 0.9em; line-height: 1.4em; background: url(images/rounded_box_arrow.gif) no-repeat;
}
div#maintext {
	color: black;
	margin: 0px 160px 0px 110px;
	border: 1px solid #CCCCCC;
	background: #f0f0f0;
	padding: 20px 10px;
	clear: left;  
}
div#maintext a {padding-bottom: 1px;}
div#maintext a:link {border-bottom: 1px solid #E3004F;}
.excerpttext {
        padding: 0px 0px 20px 0px;
}
/* rechte Spalte------------*/
/* rechte Spalte Ende------------*/
div#footer {
	padding: 2px auto 4px auto;
	text-align: center;
	background: #CCCCCC;
	margin-top: 10px;
}
.bild_links {
float: left;
margin: 0px 10px 10px 0px;
}
.defloat {clear: both;}

Ich hoffe, das mit dem Code-Ausschnitten ist ok so…. (Ist es korrekt, dass man den Code nur ohne Leerzeilen posten kann? Ich arbeite sonst nicht mit Textile….)

GugUser · 2011-01-27 22:19:57

Du kannst auch Leerzeilen im Code machen, wenn du mit bc.. beginnst. Nach Code-Ende musst du dann mit p. weiter machen.

Ich schaue mir das mal an.

moon blake · 2011-01-27 22:20:58

Danke. ;-)

GugUser · 2011-01-27 22:33:53

Ein paar Dinge:

Du hast in <div id="maintext"> zwei verschiedene Inhaltsgruppen, wenn ich das so nennen darf. Einerseits <h3> mit folgendem <p>, anderseits Artikelbild innerhalb Link gefolgt von <h3> Und Text ohne <p>.

Das würde ich vereinheitlichen, und zwar immer mit <h3> am Anfang.

Somit könntest du im CSS #maintext h3 { clear: both; } angeben und sämtliche <div class="defloat"></div> eliminieren.

Und noch etwas: Klassen oder IDs sollten nicht z. B. “bild_links” heissen, sondern nach ihrer Bedeutung oder Funktion benannt werden, nicht nach gegenwärtigem Aussehen oder der Position.

Textpattern CMS

Textpattern CMS support forum

#1 2011-01-26 20:31:16

[de-de] Problem mit Darstellung der Artikelliste

#2 2011-01-26 21:42:46

Re: [de-de] Problem mit Darstellung der Artikelliste

#3 2011-01-26 21:47:54

Re: [de-de] Problem mit Darstellung der Artikelliste

#4 2011-01-26 22:04:40

Re: [de-de] Problem mit Darstellung der Artikelliste

#5 2011-01-27 02:15:29

Re: [de-de] Problem mit Darstellung der Artikelliste

#6 2011-01-27 13:49:19

Re: [de-de] Problem mit Darstellung der Artikelliste

#7 2011-01-27 21:30:08

Re: [de-de] Problem mit Darstellung der Artikelliste

#8 2011-01-27 21:38:56

Re: [de-de] Problem mit Darstellung der Artikelliste

#9 2011-01-27 22:05:24

Re: [de-de] Problem mit Darstellung der Artikelliste

#10 2011-01-27 22:19:57

Re: [de-de] Problem mit Darstellung der Artikelliste

#11 2011-01-27 22:20:58

Re: [de-de] Problem mit Darstellung der Artikelliste

#12 2011-01-27 22:33:53

Re: [de-de] Problem mit Darstellung der Artikelliste

Board footer