• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bullet vor aktuellem Menü-Punkt

Status
Für weitere Antworten geschlossen.
papillona

papillona

Neues Mitglied
Hallo zusammen,
konnte leider noch keinen Thread zu diesem Thema finden. Ich möchte in meiner Sidebar NUR vor dem aktuellen Menüpunkt einen Bullet einfügen. Ich habe immerhin in der CSS-Datei schon die mehr oder minder richtige Stelle gefunden:

Code: 
.sidenav h1,.sidenav ul {
   padding-left: 12px;
   margin-top:15px;
}
.sidenav p {
   padding-left:12px;
}
.sidenav {
   background: #EEE;
   border: 1px solid #E5E5E5;
   float: left;
   width: 210px;
   /*padding-top:5px*/
   margin-bottom:5px;
}
.sidenav h1 {
   color: #666;
   font-size: 1.2em;
   height: 20px;
   margin-top: 0.5em;
}
.sidenav ul {
   margin: 0;
   padding:0;
}

.sidenav li {
   border-top: none;
   list-style: none;
   margin: 0;
   line-height:1px;
}
.sidenav li li {
   border-top: none;
   /*list-style: disc outside;*/
   padding-left:6px;
   margin: 0;
}

.sidenav a {
   text-decoration: none;
.sidenav li a {
   color: #777;
   display: block;
   font-size: 11pt;
   padding: 0px 0px 0px 14px;
   text-decoration: none;
   line-height:1.5em;
}

.sidenav li li a {
   color: #777;
   display: block;
   font-size: 10pt;
   padding: 0px 6px 0px 14px;
   text-decoration: none;
   line-height:1.5em;
}

.sidenav li li li a {
   color: #777;
   display: block;
   font-size: 9pt;
   padding: 0px 6px 0px 14px;
   text-decoration: none;
   line-height:1.5em;
}


.sidenav li a:hover {
   color: #111;
}

.selflink {
   font-weight: bold;
   color: black;
}
Das sind alle Angaben zur Sidebar (=Menü). Ich hätte jetzt die Anweisung list-style-type unter selflink geschrieben, denn wenn ich mit dem Firebug auf die Stelle in der Website gehe, wird angezeigt, dass es die Klasse selflink ist. Durch einen Test mit font-style:italic konnte ich auch feststellen, dass ich im Prinzip an der richtigen Stelle bin. Aber wenn ich die Bullet-Anweisung einfüge, passiert nix. :-( Was mache ich falsch? Oder muss ich praktisch für jede Ebene li eine Klasse .selflink li bzw. .selflink li li usw. erzeugen???

Über Hilfestellungen bin ich sehr dankbar!

LG Papillona
 
Der Liste wurden mit ul {margin:0 und padding:0} der platz für Bullets genommen. Darum funktioniert der Standardwert list-style-position : outside; nicht.

ul ist in der class sidenav layoutet.
Um das zu überschreiben mußt du .sidenav mit aufführen.

Code: 
.sidenav .selflink {
    font-weight : bold;
    list-style-position : inside;
    list-style-type : square;
  }
 
Hallo Neuroleptika,
danke für die Antwort. Heißt das jetzt, ich müsste nur diesen Code

Code: 
.sidenav .selflink {
    font-weight : bold;
    list-style-position : inside;
    list-style-type : square;
  }
einfügen? Muss ich woanders noch etwas verändern? Denn so sieht es weiterhin so aus wie bisher. :-(

LG Papillona
 
Hi,

meinst du mit Bullet die Listenaufzählungszeichen oder eine kleine individuelle Grafik als Aufzählungszeichen?

Grafisches Aufzählungszeichen:
Code: 
<ul>
  <li>Kiste 1</li>
  <li>Kiste 2</li>
  <li>Kiste 3</li>
</ul>
Die CSS dazu:
Code: 
ul li  {
    list-style-type:none;
    background:url(bullet_green.gif) no-repeat left 2px;
    padding:0 0 0 18px;
    margin:0 0 0 12px;
     }
Beliebige Zeichen als Aufzählungszeichen:
Code: 
<ul>
  <li><span>&ndash;</span>Kiste 1</li>
  <li><span>&ndash;</span>Kiste 2</li>
  <li><span>&ndash;</span>Kiste 3</li>
</ul>
CSS dazu:
Code: 
ul li  {
    list-style-type:none;
    background-image:none,
    padding:0,
    margin:0;
      }

ul li span  {
    margin-left:-1em;
     }
Trick: Aufzählung mit negativem margin nach links rücken.

Die Beispiele mußt du natürlich noch an deine Verhältnisse anpassen.:wink:

edit: zu langsam. Evtl. für neuroleptikas Beispiel noch zusätzlich mit text-indent arbeiten.
 
Hallo koslowski,
danke für die vielen Beispiele. Aber wenn ich immer ul li nehme, dann werden doch vor alle Punkte in der Liste bullets erstellt und ich möchte nur vor das aktuelle Element (also quasi da, wo ich mich gerade befinde), ein bullet haben.

Ja ich meinte, die kleinen Grafiken.

Wie ich im Prinzip das ganze anstelle, ist mir soweit ganz klar. Das Problem ist nur, dass ich es nicht hinbekomme, dass nur bei der einen Zeile ein Bullet erscheint und bei allen anderen nicht.

Ich habe in der Sidebar das Menü der Website eingerichtet, dass eben in Listenformat aufgebaut ist. Und wenn man in einem Kapitel ist, wird dieses zur Zeit in fetter Schrift hervorgehoben, damit der User sieht, wo er sich befindet. Zusätzlich zu der fetten Schrift soll nun noch ein Bullet davor, damit man auch ja nicht übersieht, wo man gerade ist. Deshalb glaube ich, dass es mit ul li nicht so einfach klappen wird, sondern eben für alle Punkte das Bullet erzeugt wird. :-(Und selflink scheint mir schon die richtige Adresse, aber mit dem weiter oben gezeigten Bsp von neuroleptika klappt es noch nicht.

Wenn ich noch ein text-indent von bspw. 5px hinzufüge, erreiche ich nur, dass der Text eben etwas nach rechts verrückt wird, aber ein bullet erscheint deshalb trotzdem nicht. :-(

LG Papillona
 
Hi,

papillona schrieb:
Hallo koslowski,
danke für die vielen Beispiele. Aber wenn ich immer ul li nehme, dann werden doch vor alle Punkte in der Liste bullets erstellt und ich möchte nur vor das aktuelle Element (also quasi da, wo ich mich gerade befinde), ein bullet haben.

Ja ich meinte, die kleinen Grafiken.

Wie ich im Prinzip das ganze anstelle, ist mir soweit ganz klar. Das Problem ist nur, dass ich es nicht hinbekomme, dass nur bei der einen Zeile ein Bullet erscheint und bei allen anderen nicht.

Ich habe in der Sidebar das Menü der Website eingerichtet, dass eben in Listenformat aufgebaut ist. Und wenn man in einem Kapitel ist, wird dieses zur Zeit in fetter Schrift hervorgehoben, damit der User sieht, wo er sich befindet. Zusätzlich zu der fetten Schrift soll nun noch ein Bullet davor, damit man auch ja nicht übersieht, wo man gerade ist. Deshalb glaube ich, dass es mit ul li nicht so einfach klappen wird, sondern eben für alle Punkte das Bullet erzeugt wird. :-(Und selflink scheint mir schon die richtige Adresse, aber mit dem weiter oben gezeigten Bsp von neuroleptika klappt es noch nicht.

Wenn ich noch ein text-indent von bspw. 5px hinzufüge, erreiche ich nur, dass der Text eben etwas nach rechts verrückt wird, aber ein bullet erscheint deshalb trotzdem nicht. :-(
LG Papillona
Zum Vergrößern anklicken....

versuchs mal mit mehr text-indent (mind. 10px)

Ach so, du willst die aktuelle Seite durch das bullet hervorheben.

Dann versuch einmal folgendes:

Erstmal für jede HTML-Seite eine id vergeben ( body id="startseite" z.B.)
Dann für jeden Menüpunkt eine id vergeben:
Code: 
<ul>
  <li id="navi01"><a><strong>Startseite</strong></a></li>
  <li id="navi02"><a href="impressum.htm">Impressum</a></li>
</ul>

<strong> ist dafür, das der Link der aktuellen Seite nicht auf sich selber zeigt.

CSS:
Code: 
a strong  {
    background:url(bullet.gif) no-repeat left 2px;
     } 
#navi a:hover,
#navi a:focus,
#startseite #navi01 a,
#startseite #navi01 strong,
#impressum #navi02 a,
#impressum #navi02 strong  {
    color:#farbe;
    background:#farbe url(bullet.gif) no-repeat left 2px;
     }

Für strong evtl. noch wegen font-weight:normal; überlegen damit nix hüpft.

Natürlich fehlen noch diverse padding/margin-Anpassungen für die Listenpunkte damit der bullet zu sehen ist.

Hoffe das hilft dir ein bißchen, ist nicht 1:1, hab nur die grundsätzliche Technik hingeschrieben.:wink:
 
papillona schrieb:
Hallo Neuroleptika,
danke für die Antwort. Heißt das jetzt, ich müsste nur diesen Code

Code: 
.sidenav .selflink {
    font-weight : bold;
    list-style-position : inside;
    list-style-type : square;
  }
einfügen? Muss ich woanders noch etwas verändern? Denn so sieht es weiterhin so aus wie bisher. :-(

LG Papillona
Zum Vergrößern anklicken....
Ich meinte deine alte Anweisung für .selflink gegen diese ersetzten.
Mit Hintergrundbildern wie es Koslowski beschrieb geht das aber viel schöner.
 
Hallo,
ehrlich gesagt, verliere ich grade so ein bisschen den Durchblick... :???: :-(

Alos ich hab hier noch mal aus der HTML-Datei aus der entsprechenden Stelle kopiert. Die Sache ist die, dass ich denke, dass ich das ganze nicht so "fest" im Code schreiben kann, weil ja die Links und die Ebenen in jedem pmwiki dynamisch und individuell erzeugt werden. Und ich mache das quasi in einem Template, dass für viele verschiedenen pmwikis dann verwendet wird. Und die Ebene, wo man sich gerade befindet, wird immer als .selflink deklariert (heißt das so?). Ich habe jetzt das Bsp von neuroleptika mit dem ursprünglichen selflink ersetzt, aber leider bekomme ich noch kein bullet. :-(auch ein Einrücken mit text-indent hat da nicht geholfen.

Sollte ich noch irgendwas anderes aus dem Code posten? Mit den vielen Sachen von koslowski blicke ich grade gar nix mehr. *heul*

Code: 
<div class="sidenav">
   <ul>
         <li>
              <a class="wikilink" href="http://....">blabla</a>
              <ul>
                    <li>
                         <a class="wikilink" href="http://...">blablabla</a>
                         <ul>
                               <li>
                                    <a class="wikilink" href="http://...">blablablabla</a>
                                     <ul>
                                           <li>
                                                <a class="selflink" href="http://...">blablablablabla</a>[
                                            </li>
                                     </ul>
                                </li>
                        </ul>
                  </li>
           </ul>
     </li>
   </ul>

</div>
Vielen Dank für Eure Hilfe!

LG Papillona
 
Hi Katharina,

umpf..., das Codebeispiel in deinem letzten Post sieht ja wüst aus.
Warum ist das denn so verschachtelt??

Hier einfach mal nen Link in dem Menüs gut erklärt werden:
Menütutorial

Hab dir ne pers. Nachricht woanders geschickt (wo du eben warst!);-)

Gruß
Koslowski
 
Moin Koslowski,

*ertappt* :oops: ...

Ja also mit dem Code-Wust ist das so: wir haben verschiedene pmwikis (wenn dir das was sagt?) und das pmwiki generiert dann irgendwie diese ganzen verschachtelten Links intern selber, da komme ich so ohne weiteres nicht ran. Ich bin dafür zuständig, die Template-Dateien HTML und CSS so zu bearbeiten, dass sie für jedes Wiki verwendet werden können: und das sieht dann nämlich in HTML so aus:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="$SkinDirUrl/transparentia.css" media="screen"/>
<!--HTMLHeader-->
<!--HeaderText-->
<title>$WikiTitle Testwiki</title>
</head>
<body>
     <div class="container">
        <div class="main">
           <div class="header">
               <div class="title">
                  <a href="$ScriptUrl"><img src="$UploadUrlFmt/Site/logo.jpg" border=0 width=880 height=150></a>
               </div>
           </div>

           <div class="topnav">
                <!--wiki:Site.TopNav-->
           </div>

          <div class="sidenav">
                <!--wiki:Main.SideBar $Group.SideBar Site.SideBar-->
          <div class="clearer"><!--<span></span>--></div>
       </div>

        <div class="editfloater" >
                    <!--wiki:Site.EditFloater-->
        </div>

       <!--TitleFmt-->
       <div class="breadcrumbs">
             <!--function:DisplayBreadcrumbs -->
       </div>
       <!--wiki:Site.Breadcrumbs-->
       <!--/TitleFmt-->

       <div class="content">
              <!--PageText-->
       </div>

      <!--PageLeftFmt-->

      <div class="footer2">
          <!--wiki:Site.Grouptrail-->
       </div>

     <div class="footer">
           <!--wiki:Site.Footer-->
       </div>

  </div>

<!--HTMLFooter-->
</body>
</html>
Immer, da wo etwas in HTML auskommentiert ist, passiert was im pmwiki und es wird praktisch eine HTML-Datei on the fly erzeugt. Dieses Template sieht ja ziemlich übersichtlich aus und das, was ich in dem letzten Post geschrieben hatte, ist dann die HTML-Datei, die sozusagen on the fly generiert wird. Und ich kann nur generelle Angaben machen, denn für jedes pmwiki wird ein neues Menü generiert und somit ändern sich bspw auch die Ebenen. Ich hoffe, wir reden jetzt nicht aneinander vorbei?

Die komplette CSS-Datei wollte ich jetzt nicht auch noch posten, weil das dann zu viel ist. Das merkwürdige ist ja, wenn ich in der CSS-Datei an der Stelle .selflink zum Bsp das font-weight:bold; entferne, passiert auch tatsächlich etwas wie erwartet. Es passiert eben nur nix, wenn ich Listen-Anweisungen verwende. Deshalb befürchte ich, dass ich irgendwie eine "gemischte" Klasse aus .selflink und ... tja was? ;-)

Hmmm habe mir das von dir empfohlene Tutorial angeschaut, aber leider nützt mir das nicht wirklich etwas. Was ich nicht verstehe: warum soll man denn Hintergrund-Grafiken verwenden, um Bullets zu erzeugen? Es gibt doch bei CSS die Anweisung list-style-image, wo man ein benutzerdefiniertes Bild als Bullet verwenden kann. Das hätte ich gerne verwendet, aber leider funzt es ja nicht.

Ich habe jetzt mal folgendes probiert:
Code: 
.sidenav li .selflink {
      list-style-type:square;
      font-weight:bold;
      list-style-position:outside;

}
Naja, aber da passiert auch nichts anderes. :-( Ich raff es nicht.

Hat noch jemand eine Idee?

Wenn du meinen Vorschlag möchtest mußt du das class="selflink" in das entsprechende <li> schreiben.
Zum Vergrößern anklicken....
@neuroleptika: das geht leider nicht, wie oben schon erwähnt. Also vielleicht geht es, wenn man in dem pmwiki-Ding irgendwie drinn rumprogrammiert, aber davon habe ich keine Ahnung und könnte mir vorstellen, dass mein(e) Vorgesetzte(n) das nicht so doll fänden. Naja, wenn es eben nicht geht, nur vor den aktuellen Punkt ein Bullet zu erzeugen, dann gehts halt nicht. ICh hätte halt nur gedacht, dass man das mit dem list-style-image rucki zucki hinzaubern kann. :mrgreen:

LG Katharina
 
Moin Katharina,

pmwiki kenn ich leider nicht.
Hast du mal einen Link dazu, dann schau ich da mal vorbei und guck wie das so gecodet ist.

Wenn irgendwas irgendwas codemäßiges generiert werde ich von Hause aus mißtrauisch. I.d.R. wird da nämlich Codeschrott generiert mit dem man nur Ärger hat.

Wenn man vernünftigen Code u. CSS per Hand schreibt funktionieren meine Beispiele für Bullets eigentlich sehr gut.

Mit list-style-image ist das so eine Sache. Egal ob url oder eines von den Standardzeichen, mit entsprechendem text-indent und list-style-position:inside; klappt das eigentlich gut, nur muss man ein bißchen probieren weil die unterschiedlichen Browser erst ab einer bestimmten Größe für text-indent (ca. 0.6em z.B.) das Aufzählungszeichen anzeigen.
Wie gesagt nicht list-style-position:outside; sondern list-style-position:inside; in Verbindung mit text-indent nehmen.

Teste es mal!:wink:

Gruß
Koslowski
 
So habe nun folgendes getestet:

Code: 
.sidenav li .selflink {
      list-style-type:square;
      font-weight:bold;
      list-style-position:inside;
      /*background-image:url(http://home.arcor.de/.../gryarrow.gif);
      background-repeat:no-repeat;*/
      text-indent:2em;
Aber da wird nur ganz toll der Text eingerückt aber sonst nix mit square oder so. Menno :evil:

Ich glaub, ich muss das echt mit so ner Hintergrundgrafik machen. Das wird das einfachste sein, wenn ich eine gescheite Grafik gefunden hab. :mrgreen:

Habe jetzt nun einfach eine Grafik auf meine Website hochgeladen und die dann eingebunden. Das geht zumindest, sieht nur ziemlich sch***e aus. Der Pfeil ist viel zu hoch. Boar ich hab keen Bock mehr... :???:

Einen Link schicke ich dir per PN.

Danke & Gruß
Katharina
 
Hi,

papillona schrieb:
So habe nun folgendes getestet:

Code: 
.sidenav li .selflink {
      list-style-type:square;
      font-weight:bold;
      list-style-position:inside;
      /*background-image:url(http://home.arcor.de/.../gryarrow.gif);
      background-repeat:no-repeat;*/
      text-indent:2em;
Aber da wird nur ganz toll der Text eingerückt aber sonst nix mit square oder so. Menno :evil:

Ich glaub, ich muss das echt mit so ner Hintergrundgrafik machen. Das wird das einfachste sein, wenn ich eine gescheite Grafik gefunden hab. :mrgreen:

Habe jetzt nun einfach eine Grafik auf meine Website hochgeladen und die dann eingebunden. Das geht zumindest, sieht nur ziemlich sch***e aus. Der Pfeil ist viel zu hoch. Boar ich hab keen Bock mehr... :???:

Einen Link schicke ich dir per PN.

Danke & Gruß
Katharina
Zum Vergrößern anklicken....

mmh, müßte eigentlich funktionieren.

vielleicht ist da irgendwo etwas im Quelltext das durch list-style-type:none; in Verbindung mit höherer Spezifität deinen square überschreibt.

Wenn das alles schon irgendwo online ist versuch doch mal im Firefox mit der Erweiterung Firebug rauszufinden, welche Styles wofür zuständig sind.

Falls du es noch nicht kennst, Firebug ist ein Hammertool, absolut unverzichtbar für Webentwickler.
Damit kannst du CSS-Styles ausschalten, ändern, neu editieren. Dir wird angezeigt für welches Element welche Styles zuständig sind usw. usw..
Ach ja, sämtliche Änderungen die du mit Firebug in den Styles vornimmst kannst du live sofort im Browser sehen.;-)

Gruß
Klaus
 
Hallo papillona, hallo koslowski.

Das Problem ist ja, das die class selflink im a-tag steht und nicht im li.
für a gibt es ja kein list-style-type. Das html kann papillona nicht verändern, wenn ich das richtig verstanden hab.

Mit .sidenav li .selflink sprecht ihr das a-Element an.

Eigentlich bleibt nur dem .sidenav li .selflink ein padding-left und backround-images zu geben.
 
Mahlzeit neuroleptika,

neuroleptika schrieb:
Hallo papillona, hallo koslowski.

Das Problem ist ja, das die class selflink im a-tag steht und nicht im li.
für a gibt es ja kein list-style-type. Das html kann papillona nicht verändern, wenn ich das richtig verstanden hab.

Mit .sidenav li .selflink sprecht ihr das a-Element an.

Eigentlich bleibt nur dem .sidenav li .selflink ein padding-left und backround-images zu geben.
Zum Vergrößern anklicken....

das hab ich noch gar nicht gesehen, danke für den Tip.:smile:

Glaube aber fast, das in diesem unsäglichen pmwiki-code noch diese oder jene unliebsame Überraschung für uns lauert.:sad:

Gruß
koslowski
 
Hi neuroleptika,schätze auch, dass es darauf hinausläuft. Das habe ich auch soweit hinbekommen, mir fehlt jetzt nur noch eine hübsche Grafik dafür. Ist doch aber echt doof. (und mein return funzt hier nicht mehr. oh gott... ich muss weg...) :lol: lg
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben