-
Tags per CSS anordnen
Hallo Allwissende :>
Ich sitze derzeit an dem Problem, dass ich die Tags vom Catalog nicht so formatieren kann, wie ich möchte, da es mir an CSS Klassen fehlt ;)
Die Tags sehen derzeit so aus:
[ ] Tag 1
[ ] Tag 2
[ ] Tag 3
usw.
Nun möchte ich sie allerdings so anordnen:
[ ] Tag 1 [ ] Tag 2
[ ] Tag 3
Um das Ergebnis zu bekommen, müsste ich die jeweiligen Tags ja nur per CSS floaten. Allerdings habe nur die Checkboxen eine Klasse und die Beschreibung eine weitere Klasse. Es müssten aber beide in einer Klasse sein (z.B. ein Div drum herum basteln mit einer bestimmten Klasse), um die - zum floaten notwendige - Breite angeben zu können.
Nun schaffe ich es aber einfach nicht, diesen Div da herum zu bauen.
Hat jemand Ideen? Vorschläge?
Benutze das filter_default Layout.
Vielen dank und liebe Grüße
Echo
-
dann musst du dem Template eine klasse hinzufügen. Kannst du mal den HTML Code posten wie das momentan aussieht, dann kann ich ev. besser helfen.
-
Auf die Idee, eine Klasse hinzuzufügen bin ich natürlich auch schon gekommen ;) Leider funktioniert es bei mir nicht so, wie es soll.
Hier aber mal der Code, vielleicht hab ich den Wald wieder vor lauter Bäumen nicht gesehen.
PHP-Code:
<?php if ($this->filterOptions): ?>
<div class="filter_group">
<div class="toggler">
Überschrift
</div>
<div class="accordion">
<?php if ($this->filter_headline): ?>
<<?php echo $this->filter_hl; ?>><?php echo $this->filter_headline; ?></<?php echo $this->filter_hl; ?>>
<?php endif; ?>
<?php foreach($this->filterOptions as $filterOption): ?>
<?php echo $filterOption; ?>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
<?php if ($this->rangeOptions): ?>
<div class="range_group">
<?php if ($this->range_headline): ?>
<<?php echo $this->range_hl; ?>><?php echo $this->range_headline; ?></<?php echo $this->range_hl; ?>>
<?php endif; ?>
<form method="post" id="<?php echo $this->table; ?>_range" action="<?php echo $this->action; ?>">
<div class="range">
<input type="hidden" name="FORM_SUBMIT" value="<?php echo $this->table; ?>" />
<input type="hidden" name="FORM_DATA" value="range" />
<?php foreach($this->rangeOptions as $rangeOption): ?>
<?php echo $rangeOption; ?>
<?php endforeach; ?>
</div>
</form>
</div>
<?php endif; ?>
<?php if ($this->dateOptions): ?>
<div class="date_group">
<?php if ($this->date_headline): ?>
<<?php echo $this->date_hl; ?>><?php echo $this->date_headline; ?></<?php echo $this->date_hl; ?>>
<?php endif; ?>
<form method="post" id="<?php echo $this->table; ?>_date" action="<?php echo $this->action; ?>">
<div class="date">
<input type="hidden" name="FORM_SUBMIT" value="<?php echo $this->table; ?>" />
<input type="hidden" name="FORM_DATA" value="date" />
<?php foreach($this->dateOptions as $dateOption): ?>
<?php echo $dateOption; ?>
<?php endforeach; ?>
</div>
</form>
</div>
<?php endif; ?>
<?php if ($this->searchOptions): ?>
<div class="search_group">
<?php if ($this->search_headline): ?>
<<?php echo $this->search_hl; ?>><?php echo $this->search_headline; ?></<?php echo $this->search_hl; ?>>
<?php endif; ?>
<form method="post" id="<?php echo $this->table; ?>_search" action="<?php echo $this->action; ?>">
<div class="search">
<input type="hidden" name="FORM_SUBMIT" value="<?php echo $this->table; ?>" />
<input type="hidden" name="FORM_DATA" value="search" />
<?php echo $this->searchOptions; ?>
</div>
</form>
</div>
<?php endif; ?>
<?php if ($this->sortOptions): ?>
<div class="sort_group">
<?php if ($this->sort_headline): ?>
<<?php echo $this->sort_hl; ?>><?php echo $this->sort_headline; ?></<?php echo $this->sort_hl; ?>>
<?php endif; ?>
<div class="sort">
<?php echo $this->sortOptions; ?>
</div>
</div>
<?php endif; ?>
<br />
<div class="clearall">
<a href="<?php echo $this->clearall; ?>" title="clear all filters">Filter zurücksetzen</a>
</div>
Danke schon mal :)
-
jetzt wäre ich dir noch dankbar wenn du den generierten (HTML) Code posten könntest.
-
Oh ;D Entschuldige.
HTML-Code:
<div class="widget filter_field_tl_tags">
<h3><label for="ctrl_filter_field_tl_tags">Art</label></h3>
<div id="ctrl_filter_field_tl_tags" class="checkbox_container"><input type="checkbox" name="tl_tags[]" id="opt_filter_field_tl_tags_0" class="checkbox" value="seite.html" checked="checked" onclick="window.location=this.value" /> <label for="opt_filter_field_tl_tags_0">Art löschen</label><br /><input type="checkbox" name="tl_tags[]" id="opt_filter_field_tl_tags_1" class="checkbox" value="test1.html" onclick="window.location=this.value" /> <label for="opt_filter_field_tl_tags_1">Tag Test 1</label><br /><input type="checkbox" name="tl_tags[]" id="opt_filter_field_tl_tags_2" class="checkbox" value="test2.html" onclick="window.location=this.value" /> <label for="opt_filter_field_tl_tags_2">Tag Test 2</label></div>
</div>
Habe mir erlaubt den Code mal stark abzukürzen, da es sich ja sowieso immer wiederholt ;) Adressen bitte nicht beachten, die wurden editiert :)
LG
Echo
-
Ich habe leider immer noch keine Lösung gefunden :/
-
Die Frage ist jetzt woher kommt den das <br /> liegt das im Template? Denn dieser verursacht den zeilenumbruch mittels
PHP-Code:
.filter_field_tl_tags br {display: none}
sollte das ausgeschalten sein, schöner wäre es natürlich wenn du das im Template direkt entfernen könntest
-
Ich frage mich, woher so einige Sachen im Template kommen oO"
Das ist nicht das, wonach ich suche :( Die Sachen stehen dann zwar nebeneinander, aber ich möchte ja gerne nur zwei Spalten haben. Dafür müsste ich dann den labels die Eigenschaft display: block; geben, um ihnen eine feste breite zu geben (z.B. 50%), das funktioniert aber wiederrum nicht, weil aufgrund des blocks ein Zeilenumbruch stattfindet.
Es ist zum Mäusemelken :o
-
Code:
display: inline-block;
/* oder */
display: inline-table;
oder sowas koennte helfen.
das Br kommt btw meiner Erinnerung nach aus den widgets selbst, welche tableless generiert werden, bin mir aber grad unsicher.
