Sie sind hier:

Website Baker CMS Forum

Website Baker CMS Forum » Websitebaker Anfänger » Installation

Trennstrich zwischen Menüpunkten

(21 posts) (3 voices)

Vor 5 months von Zinkengabel gestartet
Letzte Antwort von daniel

Tags:

Keine Tags bisher.

Zinkengabel

offline
Mitglied
Login to Send PM

Hallo,
ich habe ein desgintechnisches Problem. Bei meiner waagerechten Menüleiste möchte ich gern zwischen den einzelnen Menüpunkten einen Trennstrich einfügen, dieser darf sich beim klicken aber farblich nicht verändern.
Kann mir da jemand einen Tip geben?

Gruß Peter

vor 5 months veröffentlicht #
azoo

offline
Moderator
Login to Send PM

Hallo Zinkenlöffel,
schau dir mal in meinem Forum oben rechts das CSS der Navi an. Dort hat jeder Link einen bottom Border von 1px der sich farblich nicht verändert.
Nimm am besten den Firebug und untersuche die Sektion.

Ist es das was du willst?

Gruß azoo
copTa.de | Normag-Zorge | Debian-sid

vor 5 months veröffentlicht #
Zinkengabel

offline
Mitglied
Login to Send PM

Hallo azoo,
nein ich meinte schon waagerecht zwischen den Menüpunkten. Im Grunde so wie die Unterteilungsstriche (grün/weiß gestreift) zwischen den Menüpunkten auf der Webseite dieses Forums.

Gruß Peter

vor 5 months veröffentlicht #
azoo

offline
Moderator
Login to Send PM

Hallo Peter,
das löst man mit Grafiken.

Gruß azoo

vor 5 months veröffentlicht #
Zinkengabel

offline
Mitglied
Login to Send PM

Hallo azoo,
gibt es da keine andere Lösung? Ich will die Striche (ohne Muster) wirklich nur zwischen den Menüpunkten, nicht davor oder dahinter. Mit der Grafikvariante habe ich doch immer einen Strich zu viel, oder?

Gruß Peter

vor 5 months veröffentlicht #
azoo

offline
Moderator
Login to Send PM

Nein, hast du nicht da der grafische Strich nur an einer Seite dieser Einzelgrafik ist und durch die Wiederholung der Grafik für jeden Link ergibt sich diese Optik.
Und ja, du kannst es anders lösen.
Du kannst jedem Link ein border-right:1px dotted(o.ä.) #color; zuweisen nur dem letzten(rechts) nicht. Dann hast du auch die Optik.

Gruß azoo

vor 5 months veröffentlicht #
daniel

offline
Hausmeister
Login to Send PM
Hallo Peter,

wie wird denn Dein Menü erzeugt?
In einer Liste mit UL und LI oder z.B. in einer Tabelle?

Wenn in einer Liste, z.B. so:
```
<ul class="menu">
  <li><a href="Link1">Link Text1</a></li>
  <li><a href="Link2">Link Text2</a></li>
  <li><a href="Link3">Link Text3</a></li>
  <li>
    <ul>
      <li><a href="UntermenueLink1">UntermenueLink Text1</a></li>
      <li><a href="UntermenueLink2">UntermenueLink Text2</a></li>
      <li><a href="UntermenueLink3">UntermenueLink Text3</a></li>
    </ul>
      <a href="Link4">Link Text4</a></li>
  <li><a href="Link5">Link Text5</a></li>
</ul>
```
dann könntest du einfach unter die LI eine Linie ziehen, z.B. so:
```
ul#menu li {
  border-bottom: 1px solid #333;
}
```
Dann hätte jeds LI eine solide Linie an der Unterseite in einem dezenten Grau.

Wenn die Inline-Elemente A aus block angezeigt werden, kann man dafür auch die A-Elemente nehmen, z.B. so:
```
#menu a {
  display: block;
  width: 200px
  padding: 4px;
  border-bottom: 1px solid #333;
}
```
In diesem Beispiel werden alle Links (a) als Block-Elemente angezeigt. Somit ist es möglich sie auch in einem Bereich anzuklicken, in dem kein Text steht.
Ausserdem wäre hier alle Elemente 200 Pixel breit und haben einen Innenabstand von 4 Pixel in jeder Richtung (damit der Rand nicht direkt am LinkText ist). Der Untere Rand bekommt wieder eine Linie.

Wenn Dein Menü in einer Tabelle ist, kannst du auch z.B. das TD-Element verwenden um eine Linie am unteren Rand zu bekommen.

Die Linie muss aber nicht immer am unteren Rand sein. Ich habe z.B. im Template
DanFuh Business 03 eine gelbe Linie neben jedem Menüpunkt eingebaut, die mehrere Pixel stark ist. Zusätzlich bekommt jeder Menüpunkt eine gepunktete Linie wenn man mit der Maus über das A-Element fährt.

Hoffe das hilft dir etwas weiter.

Die Grafik, die azoo oben gezeigt hat ist übrigens die Effekt-Krafik aus dem Menü hier auf dieser Seite. Der Effekt entsteht indem nur ein Ausschnitt gezeigt wird. Bewegt man die Maus über die Grafik, wird diese verschoben.

Wenn Du evtl. einen Link (oder Code) zu der Seite hättest, auf der das Menü von Dir geändert werden soll, dann könnten wir Dir etwas konkreter helfen.

Viele Grüße,

Daniel
Meine Templates für Website Baker
vor 5 months veröffentlicht #
azoo

offline
Moderator
Login to Send PM

Ich weiß nicht ob ich, du den Themenstarter richtig verstehen. Ich dachte auch erst das er eine simple waagerechte Linie meint.
Dann dachte ich er meint die vertikalen Punkte aus der Navi dieses Portals.
Kann auch sein das ich überhaupt nix verstehe ;)

Gruß azoo

vor 5 months veröffentlicht #
daniel

offline
Hausmeister
Login to Send PM

Hmm, ja, Du hast recht.

Bei meiner waagerechten Menüleiste möchte ich gern zwischen den einzelnen Menüpunkten einen Trennstrich einfügen ...

Ich habe wohl das waagerechten übersehen.
Aber in diesem Fall ist mein Template DanFuh Business 03 doch ein ganz gutes Beispiel. Alle Menüpunkte haben links eine Linie. OK, das Menü ist nicht waagerecht, aber das ist ja nur eine Kleinigkeit.

Gruß Daniel

vor 5 months veröffentlicht #
azoo

offline
Moderator
Login to Send PM

Stop! Du hast schon recht, ich meinte anfangs er würde waagerechte Striche meinen, bis ich darauf kam das er die vertikalen striche DEINER waagerechten Navi hier im Portal meint.
*Hoffe ich*

vor 5 months veröffentlicht #
daniel

offline
Hausmeister
Login to Send PM

Ja, denke ich auch.

Habe Deine PM beantwortet (siehe Status :-) ).

Gruß Daniel

vor 5 months veröffentlicht #
azoo

offline
Moderator
Login to Send PM

Ja Dank dafür :) Habe auch gleich mal Gebrauch davon gemacht und einen Schreibfehler (bei dir *duck*) korrigiert.
Du hast geschrieben, "siehe Statur" wenn ich meinen Bauchansatz anschau, weiß ich grad nicht ob du durch meine DSL Leitung zu mir durchschauen kannst und das eine Anspielung war *lach* :)

Gruß Markus

vor 5 months veröffentlicht #
daniel

offline
Hausmeister
Login to Send PM

:-) Ja, Danke!

Ich spiele aktuell etwas mit meiner Signatur. Dabei ist mir aufgefallen, dass Font-Color herausgefiltert worden ist.
Font-Type geht auch noch nicht.
Ich denke ich werde das jetzt mal nachbessern.
Wenn Dir, oder irgend jemandem sonst irgend welche, tollen BB-Press Plugins einfallen, immer her damit.

Viele Grüße,

Daniel

vor 5 months veröffentlicht #
Zinkengabel

offline
Mitglied
Login to Send PM

Hallo,
und vielen Dank für eure Lösungsvorschläge. Entschuldigt, wenn ich mich missvertändlich ausgedrückt haben sollte. Also, das Menü ist waagerecht, die Trennstriche dazwischen senkrecht. Der Vorschlag von azoo mit border-right:1px dotted ist genau das, worauf ich selbst nicht gekommen bin und die Lösung meines Problems. Also vielen Dank noch einmal an dieser Stelle.
Gruß Peter

vor 5 months veröffentlicht #
daniel

offline
Hausmeister
Login to Send PM
Hallo Peter,

Super!

Kann man das Ergebnis schon bestaunen?

@Markus: Ich habe mal versucht die möglichen BB-Code Formatierungen aufzuschreiben, hier:
http://www.websitebaker-cms.de/foren/topic/zusatzlicher-bb-code-im-forum

Allerdings habe ich da noch einen kleinen Fehler. Evtl. hast Du ja eine Idee, oder irgend jemand.

Die Ausgabe des jeweils einzelnen Beittrags packe ich in die Variable
```
$post_text_output
```
Per str_replace baue ich dann alles um, das nicht als HTML-Code verarbeitet werden soll, z.B. so:
```
$post_text_output = str_replace('{', '{', $post_text_output);
$post_text_output = str_replace('}', '}', $post_text_output);
$post_text_output = str_replace('< ', '<', $post_text_output);
$post_text_output = str_replace('>', '>', $post_text_output);
```
Um aber z.B. für Links HTML-Code zu haben, baue ich auch ein paar Dinge wieder zurück
```
$post_text_output = str_replace('<a href="', '<a href="', $post_text_output);
$post_text_output = str_replace('</a>', '</a>', $post_text_output);
$post_text_output = str_replace('<img src="', '<img src="', $post_text_output);
```
Weil in Code-Bereichen Links und Bilder nicht als HTML ausgegeben, sonder der Code sichtbar sein soll, suche ich mit alle CODE-Bereiche und ändere dort wieder einige Zeichen, so:
```
$matches = array();
if (preg_match_all('@<code[^/>]*>(.*?)@imsx', $post_text_output, $matches)) {
foreach ($matches[1] as $codesection) {
        $codesection_orig = $codesection;

        $codesection = str_replace('< ', '<', $codesection);
        $codesection = str_replace('>', '>', $codesection);
        $codesection = str_replace('"', '"', $codesection);

  }
}
```
(Ich habe die Replacements sind nur in Auszügen hier eingefügt, das wäre sonst zu viel geworden)

OK, jetzt zu meiner Frage:

Was ist an meinem preg_match_all falsch?

Bei zwei aufeinander folgenden CODE-Bereichen wird leider nicht nur der Code als Code behandelt, sondern auch der Bereich dazwischen.

Viele Grüße,

Daniel
vor 5 months veröffentlicht #

azoo

offline

Moderator
Login to Send PM

Hi Daniel

Per str_replace baue ich dann alles um, das nicht als HTML-Code verarbeitet werden soll, z.B. so:


$post_text_output = str_replace('{', '{', $post_text_output);
$post_text_output = str_replace('}', '}', $post_text_output);
$post_text_output = str_replace('< ', '<', $post_text_output);
$post_text_output = str_replace('>', '>', $post_text_output);

Um aber z.B. für Links HTML-Code zu haben, baue ich auch ein paar Dinge wieder zurück


$post_text_output = str_replace('<a href="', '<a href="', $post_text_output);
$post_text_output = str_replace('</a>', '</a>', $post_text_output);
$post_text_output = str_replace('<img src="', '<img src="', $post_text_output);

$matches = array();
if (preg_match_all('@<code[^/>]*>(.*?)@imsx', $post_text_output, $matches)) {
foreach ($matches[1] as $codesection) {
        $codesection_orig = $codesection;

        <strong>$codesection = str_replace('< ', '<', $codesection);
        $codesection = str_replace('>', '>', $codesection);
        $codesection = str_replace('"', '"', $codesection);</strong>

  }
}

Hier fällt mir schonmal auf das du gleiches mit gleichem ersetzt.
Ich erkenne da den Sinn nicht.
Der Inhalt in Variable $post_text_output wird durch die Stringfunktion geschickt und nach z.b. dem a href="' durchsucht und nach dessen Auffinden direkt durch selbige Syntax ersetzt.
Somit bleibt alles wie es war.

Funtionsreferenz in gekürzter Form:
str_replace ( $search,  $replace,  $subject )

@<code [^/>]*>(.*?)@imsx

Dein regulärer Ausdruck ist aus meiner Sicht nicht ganz richtig aber von mir noch ungetestet.
Ich bin aber auch kein RegEx Profi, daher meine Bitte melde dich mal zu den obigen Punkten und dann sehen wir weiter.

vor 5 months veröffentlicht #

daniel

offline
Hausmeister
Login to Send PM

Hallo Markus,

schon einmal vielen Dank.
Das man nicht gleiches mit gleichem ersetzen sollte, ist mir schon klar.
Das sieht hier nur so aus, weil leider die HTML-Zeichen in normale Zeichen gewandelt werden.

Hier einfach mal der komplette Inhalt.
Ist nicht schön, aber ich bin ja auch kein Programmierer.

Im Zweifelsfall schaue ich mal ob es evtl. mittlerweile einen besseren Filter mit aktuellen BB-Press gibt.
Einen der Links im Code nicht als Link anzeigt.

Oder ich könnte auch noch anstelle von CODE TEXTAREA verwenden. Dann sollte auch nur der reine Quelltext angezeigt werden.

O.K. ich muss jetzt mal was arbeiten.

Bis dann.

Gruß Daniel

vor 5 months veröffentlicht #
azoo

offline
Moderator
Login to Send PM

Das sieht hier nur so aus, weil leider die HTML-Zeichen in normale Zeichen gewandelt werden.

Dann bin ich ja beruhigt;)

Was ist wenn du die php Funktion hightlight_string benutzt? Die verwendet den internen Ausgabepuffer und gibt dir die passenden Zeichen aus.

vor 5 months veröffentlicht #
daniel

offline
Hausmeister
Login to Send PM

keine schlechte Idee.

Aarbeitet aber leider nicht so wirklich mit dem BB-eigenen Ausgabefilter zusammen.

Gruß Daniel

vor 5 months veröffentlicht #
azoo

offline
Moderator
Login to Send PM

Ich verstehe aber nicht das BBpress da nichts eigenes und funktionierendes mitbringt.

vor 5 months veröffentlicht #
daniel

offline
Hausmeister
Login to Send PM

Doch, macht es ja.
Nur leider nicht so wie es soll.

Das hier war mein Initial-Problem >>

Gruß Daniel

vor 5 months veröffentlicht #

RSS feed for this topic

Antwort

Du musst angemeldet sein, um einen Beitrag zu schreiben.

Seitenanfang