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

Listensymbole definieren

D

Die einzig Wahre

Neues Mitglied
Hallo!
Ich möchte auf meiner Homepage gerne Twitter einführen. Um es an meine Homepage anzupassen, habe ich im Stylesheet die entsprechende Box definiert, in der sich Twitter befindet.

Code: 
.box1{
font-size: 14px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
background-color:#;
padding:10px;

margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#000;

}

Jetzt habe ich das Problem, dass die Aufzählungen der einzelnen Twitter-Nachrichten ziemlich doof aussieht. Und zwar in etwa so:

  • Nachricht 1
  • Nachricht 2
  • Nachricht 3
Ich würde gerne diese hässlichen Punkte anders haben. Gibt es eine Möglichkeit diese zu definieren? Ich habe unter images/cube.png eine Bilddatei, die ich gerne anstelle dieser Punkte ist. Geht das?
 
Du kannst den Listenelementen ein Hintergrundbild zuweisen
Code: 
li {background-image: url('images/cube.png');}
und die aufzählungszeichen mit
Code: 
li {list-style-type: none;}
ausblenden.

Es gibt zwar auch die Möglichkeit, per
Code: 
 ul {list-style-image: url('images/cube.png');}
eine Grafik als Aufzählungszeichen zu setzen, aber das sieht in fast jedem Browser unterschiedlich auch.
 
Erstmal vielen Dank!
Ich hab das aber noch nicht ganz hinbekommen. Also ich hab das jetzt eingefügt, sodass im css steht:

Code: 
.box1{
font-size: 14px;line-height: 15px;
font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
background-color:#;
padding:10px;

li background-image: url('images/cube.png');
li list-style-type: none;

margin-top:0px;
margin-left:0px;
margin-right:0px;
margin-bottom:0px;
vertical-align:top;
color:#000;

}
und dann die Box, in der sich Twitter befindet:

Code: 
<!--BOX 2-->
<div class="box1">
<h3 class="boxheader">Twitter </h3>
<div id="twitter_div">
<ul id="twitter_update_list"></ul>
</div>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/dieeinzigwahre.json?callback=twitterCallback2&amp;count=5"></script>
</div>
<!--ende BOX 2-->

Was muss ich denn in die Box schreiben, damit die Absätze da auch so definiert werden? Weil wenn ich nichts ändere, passiert nichts und die Punkte sind immer noch da. :)
 
Dein CSS für die Listenelemente ist falsch.
Code: 
li background-image: url('images/cube.png');
li list-style-type: none;
Da fehlen die geschweiften Klammern.

Entweder du schreibst es so, wie ich oben gezeigt habe, als eigenen Selektor für alle Listenelemente, oder wie in deinem Beispiel für alle Listenelemente in #box1
Code: 
#box1 ul li {
  background-image: url('images/cube.png');
  list-style-type: none;
}
 
Jetzt sind aber leider gar keine Listenelemente mehr da :( Habe es so, wie du es zuletzt geschrieben hattest, in die css geschrieben, aber wie gesagt, jetzt ist gar nicht mehr da.
 
OK, mein kleiner Fehler, box1 ist eine Klasse, keine ID, also muss es so heißen

Code: 
.box1 ul li {
  background-image: url('images/cube.png');
  list-style-type: none;
}
Allerdings solltest du auf das Tabellenlayout und die veralteten Attribute und Tags verzichten. Tabellen zeichnen tabellarische Daten aus und dienen nicht zum Layout. Das Layout wird mit CSS gemacht.

Hier z.B. verwendest du ein veraltetes Tag.
Code: 
<i>"JUNE"</i>
Richtig wäre in diesem Fall
HTML: 
<span>"JUNE"</span>
Code: 
span {font-style: italic;}

Abstände werden auch nicht durch das hinzufügen von <br /> erzeugt, sondern mit margin und padding per CSS.
 
Wenn ich # durch . ersetze, dann hab ich wieder keine Listenelemente. Habs auch hochgeladen.

Ich würde es sehr gerne moderner machen, aber ich kann sowas nicht. ^^ Hab das Layout auch nur von einer Seite gedownloadet und passe es jetzt an. Ich hätte keine Ahnung, wie ich das ohne Tabellenlayout machen sollte.

Warum sollte man es denn nicht mit dem Tabellenlayout machen? Ich höre so oft, dass das Mist ist, genau wie Frames. Aber was genau ist so schlimm? Hat das was mit der Darstellungsweise in den unterschiedlichen Browsern zu tun?
 
ich hab mir eben überlegt, dass ich statt der listensymbole einfach ein "»" gleich bei Twitter einsetze, wäre wohl das einfachste. Nur gefällt mir das Aussehen bei Twitter nicht so ganz. Habe das Aktuelle hochgeladen. Würde gerne den Text der Twitter Nachrichten weiter links haben, der ist ja im Moment relativ zentral. Wo kann ich das denn ändern?
 
Die einzig Wahre schrieb:
Wenn ich # durch . ersetze, dann hab ich wieder keine Listenelemente.
Zum Vergrößern anklicken....
Dann hast du etwas falsch gemacht, denn die CSS-Eigenschaften entfernen nur die Aufzählungszeichen und geben die URL zu einer Grafik an. Wenn der Pfad natürlich nicht stimmt, wird auch keine Grafik angezeigt.

Ich würde es sehr gerne moderner machen, aber ich kann sowas nicht.
Zum Vergrößern anklicken....
Das lässt sich lernen.
Ich hätte keine Ahnung, wie ich das ohne Tabellenlayout machen sollte. Warum sollte man es denn nicht mit dem Tabellenlayout machen? Ich höre so oft, dass das Mist ist, genau wie Frames. Aber was genau ist so schlimm? Hat das was mit der Darstellungsweise in den unterschiedlichen Browsern zu tun?
Zum Vergrößern anklicken....
Die Antwort und viele weitere findest du in den Artikeln, zu denen die Links führen.

Die einzig Wahre schrieb:
ich hab mir eben überlegt, dass ich statt der listensymbole einfach ein "»" gleich bei Twitter einsetze, wäre wohl das einfachste. Nur gefällt mir das Aussehen bei Twitter nicht so ganz. Habe das Aktuelle hochgeladen. Würde gerne den Text der Twitter Nachrichten weiter links haben, der ist ja im Moment relativ zentral. Wo kann ich das denn ändern?
Zum Vergrößern anklicken....
Im CSS, indem du den margin der Listenelemente selber festlegst und nicht durch den Browser bestimmen lässt.
 
Habs jetzt mal anders gemacht, ich denke das dürfte schon eher deinen Ansprüchen genügen :)

Bloß hab ich da jetzt ein kleines Problem bei dem Layout. Unten rechts schließen die Bereiche nicht so ab, wie es sein soll. Richtig wird es rechts unten dargestellt, der Footer hat also einen eigenen kleinen Kasten, wo (c) und so drin steht. Aber auf der rechten Seite ist es nicht so und ich krieg es seit Stunden nicht hin ^^ Der Footer soll auch komplett vom links nach rechts gehen (also im weissen Bereich), das tut er im Moment ja auch nicht.

Homepage von Jana Thies
 
Die einzig Wahre schrieb:
Warum sollte man es denn nicht mit dem Tabellenlayout machen?
Zum Vergrößern anklicken....
Weil es ohne Sinn ist.

Aber was genau ist so schlimm? Hat das was mit der Darstellungsweise in den unterschiedlichen Browsern zu tun?
Zum Vergrößern anklicken....
Nein. HTML hat nichts mit dem Aussehen zu tun. Das macht allein CSS.

Aber Dein Inhalt wird dann falsch interpretiert. Wenn Du etwas als Tabelle auszeichnest, werden tabellarische Daten erwartet. Wenn Du einen Inhalt als Überschrift verstanden haben willst, dann musst Du es mit dem entsprechenden Tag für "Überschrift" auszeichnen, ein <div id="Ueberschrift">blabla</div> ist keine Überschrift, weil es nicht als solche ausgezeichnet ist.

HTML ist nur für die logische Auszeichnung Deines Inhalts da. Wenn Du das außerdem noch strikt vom Aussehen (Layout und Design nur in CSS!) trennst, wirst Du weit weniger Probleme bekommen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben