tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
6
ZUGRIFFE
2158
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 07.08.06 13:14 #1
    alloisxp alloisxp ist offline Mitglied Bronze
    Registriert seit
    Sep 2004
    Beiträge
    31
    Hallo!

    Ich habe folgende Liste:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12

    <ul id="nav">
 
    <li>Test
        <ul>
            <li style="list-style-image: url('xerks.jpg')"><a href="">bla1</a></li>
            <li><a href="">bla2</a></li>
            <li><a href="">bla3</a></li>
            <li><a href="">bla4</a></li>
        </ul>
    </li>
 
</ul>

    Wie man sieht habe ich versucht den Punkt "bla1" mit einem Bild zu unterlegen.

    Über:
    <li style="list-style-image: url('xerks.jpg')"><a href="">bla1</a></li>
    Leider jedoch funktioniert es so nicht
    Woran kann das liegen?
    Ich wende es wohl irgendwie falsch an, hm aber leider kein funktionstüchtiges Beispiel gefunden
     
  2. 07.08.06 13:18 #2
    Maik Tutorials.de Gastzugang
    Die Formatierung des Bullet-Zeichens wird auf das ul-Element angewendet.

    Siehe hierzu auch SELFHTML: Stylesheets / CSS-Eigenschaften / Listenformatierung / list-style-image.
     
  3. 07.08.06 13:25 #3
    alloisxp alloisxp ist offline Mitglied Bronze
    Registriert seit
    Sep 2004
    Beiträge
    31
    Oh, ich sehe gerade, das ist ja leider gar nicht was ich suche

    Ich brauch eigentlich etwas wie ich die Liste mit nem Hintergrundbild versehe... nicht etwas wie ich diese Stichpunktegrafik verändere.

    Oh, ich ar wohl auf der falschen Spur... geht ja ganz normal wie sonst auch immer, da hat mir einer extra ne mail geschickt das man das anders macht und dann das naja... sorry

    Edit:
    Aber eine sinnvolle Frage kann ich dann doch noch stellen!

    Die Liste von oben ist noch aktuell.
    Ich hab das dank diesem Forum hier als suckerfish Dropdown gebaut, blax scrollt sich also bei mouseover aus...

    Nun ist es aber so das der Text in diesen Listen per PHP erzeugt wird und unterschiedlich lang sein kann.

    ich habe eine extra css datei in der

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

    ul {
  padding: 0;
  margin: 1;
  list-style: none;
  }
 
li {
  margin: 1;
  float: left;
  position: relative;
  width: 10em;
  }
 
li ul {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
  }
 
li > ul {
    top: auto;
    left: auto;
    }
 
li:hover ul, li.over ul{ display: block; }

    dies steht.

    Denke das ist das entscheidende:

    Code :
    1
2
3
4
5
6

    li {
  margin: 1;
  float: left;
  position: relative;
  width: 10em;
  }

    Um die Breite geht es nämlich, ich möchte nämlich KEINE Zeilenumbrüche haben in der Liste, die Breite soll sich je nach längstem Text in der Liste anpassen.
    Wenn ich nun aber die width einstellung weglasse dann stehen plötzlich alle Listenelemente nebeneinander anstatt untereinander
    Was natürlich nicht hinnehmbar ist

    Jemand eine Ahnung wie ich das richtig hinbekomme was ich will?
    Geändert von alloisxp (07.08.06 um 13:48 Uhr)
     
  4. 07.08.06 13:29 #4
    Maik Tutorials.de Gastzugang
    In diesem Fall kannst du dies mit der background-image-Eigenschaft realisieren.
     
  5. 07.08.06 13:50 #5
    alloisxp alloisxp ist offline Mitglied Bronze
    Registriert seit
    Sep 2004
    Beiträge
    31
    Ui jetzt hab ichs editiert und noch ne offene Frage drin, aber jemand hat noch druntergeschrieben zu der Frage davor, also wie gesagt:

    Ich müsste wissen wie krieg ich die Breite an den (dynamischen) Text orientiert hin ohne das in dem suckerfishdropdown die Elemente nebeneinander stehen?
    (mehr in meinem vorletzten Post)

    Achja und noch ne Frage gleich:

    Ich hab das jetzt so in einer Tabellenzeile:

    Code :
    1
2

     
Text Text2 ausklappbareListe

    jetzt ist es nur so das er automatisch einen Zeilenmbruch einbaut also die Liste auf ne neue Zeile packt was ich nicht will.
    Wie kann ich das verhindern. Habs schon mit float="left" versucht geht aber irgendwie nicht.
    Geändert von alloisxp (07.08.06 um 14:24 Uhr)
     
  6. 07.08.06 15:49 #6
    alloisxp alloisxp ist offline Mitglied Bronze
    Registriert seit
    Sep 2004
    Beiträge
    31
    Ok, nochmal zur Verdeutlichung:

    Ich habe folgenden (kompletten) code:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 
<head>
<title>Suckerfish Dropdowns</title>
 
<style type="text/css">
 
body {
    font-family: arial, helvetica, serif;
}
 
ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
}
 
li { /* all list items */
    float: left;
    position: relative;
    width: 10em;
}
 
li ul { /* second-level lists */
    display: none;
    position: absolute;
    top: 1em;
    left: 0;
}
 
li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
    top: auto;
    left: auto;
}
 
li:hover ul, li.over ul { /* lists nested under hovered list items */
    display: block;
}
 
#content {
    clear: left;
}
 
</style>
 
 
<script language="JavaScript">
<!--
 
function SymError()
{
  return true;
}
 
window.onerror = SymError;
 
//-->
</script>
 
<script type="text/javascript"><!--//--><![CDATA[//><!--
startList = function() {
    if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
            node = navRoot.childNodes[i];
            if (node.nodeName=="LI") {
                node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload=startList;
 
//--><!]]></script>
 
</head>
 
<body>
 
Test
<ul id="nav">
 
    <li>Sunfishes
        <ul>
            <li><a href="">Blackbanded sunfish</a></li>
            <li><a href="">Shadow bass</a></li>
            <li><a href="">Ozark bass</a></li>
            <li><a href="">White crappie</a></li>
        </ul>
    </li>
 
    <li>Grunts
        <ul>
            <li><a href="">Smallmouth grunt</a></li>
            <li><a href="">Burrito</a></li>
            <li><a href="">Pigfish</a></li>
        </ul>
    </li>
 
</ul>
 
</body>
 
</html>

    Seht ihr oben das Wörtchen "Test"?
    Wie kriege ich es hin das Test auf einer Zeile neben Sunfishes und Grunts steht aber das Dropdownmenü noch funktioniert wie auf http://www.blacksphere.de/testdir/suckerfish.html ?
     
  7. 07.08.06 16:40 #7
    Maik Tutorials.de Gastzugang
    Notiere das Wort "Test" in einem Block-Element und weise diesem die CSS-Eigenschaft float:left zu.
     
« Probleme mit <input> und css | Probleme mit Link-Ausrichtung »

Ähnliche Themen

  1. Kontaktformular mit CSS gestalten
    Von kanecorpse im Forum CSS
    Antworten: 35
    Letzter Beitrag: 30.12.09, 06:17
  2. Einladungskarte gestalten
    Von Alexander Groß im Forum Photoshop
    Antworten: 2
    Letzter Beitrag: 23.05.07, 23:07
  3. Formular mit CSS gestalten
    Von Rexo im Forum CSS
    Antworten: 20
    Letzter Beitrag: 29.11.05, 15:03
  4. FTP Server gestalten ?
    Von ZweiA im Forum HTML & XHTML
    Antworten: 4
    Letzter Beitrag: 01.09.04, 22:30
  5. DLL Listen- Absturz, Listen übergeben
    Von haemmer im Forum C/C++
    Antworten: 0
    Letzter Beitrag: 05.02.04, 21:00