komische Abstände, FAQ schon gelesen

[Teratek]

Hallo Forum,

ich versuche gerade eine neue Startseite zu generieren und verändere einen Code. Leider funzt das nicht so wie gewünscht.
Die CSS Datei hat folgenden Ausschnitt

.box-blue .box-c {
        height:169px;
        padding:15px 25px 50px 25px;
        position:relative;
}
.box-blue p {
        font-family:Tahoma, Arial, sans-serif;
        line-height:19px;
        color:#34616d;
        padding:0 0 19px 0;
}
.box-blue ul {
        list-style:none;
        position:relative;
        margin:-5px 0 0 0;
}
.box-blue ul li {
        background:url(images/neu.gif) no-repeat 1px 1px;
        border-top:1px dotted #6a5353;
        border-bottom:1px dotted #6a5353;
        line-height:30px;
        padding:0 0 0 30px;
}
.box-blue ul lu {
        background:url(images/neu-pr.gif) no-repeat 1px -2px;
        border-top:1px dotted #6a5353;
        border-bottom:1px dotted #6a5353;
        line-height:40px;
        padding:0 0 0 30px;
}
.box-blue ul lo {
        background:url(images/euro.gif) no-repeat 1px 0px;
        border-bottom:1px dotted #6a5353;
        line-height:30px;
        padding:0 0 0 30px;
}
.box-blue ul la {
        background:url(images/bullet.gif) no-repeat 1px 0px;
        border-bottom:1px dotted #6a5353;
        line-height:30px;
        padding:0 0 0 30px;
}

In der
index.html steht

 <div class="box-blue left">
          <h2>News</h2>
          <div class="box-c">
            <ul>
              <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
              <lu><a href="#">Sed in mi in mauris fermentum </a></lu>
              <lu><a href="#">Donec sit amet tellus massa, nonctus</a></lu>
              <lo><a href="#">Curabitur vestibulum tortor sed</a></lo>
              <lo><a href="#">Praesent mollis nisi a mies</a></lo>
              <li><a href="#">Donec sit amet </a></li>
            </ul>
          </div>
        </div>

Das Ergebnis sieht so aus wie im Anhang. Die Abstände sind unterschiedlich und ich hab schon alles probiert. Für nen erfahrenen CSSler sicher kein Ding.
Hoffe ihr könnt mir helfen

Gruß
Christian

 

[bdt600]

Rechne mal deine Zeilenhöhen und Paddings Top/Bottom zusammen, da reichen deine 169px für die Box nicht aus.

 

[Cheffchen]

Hallo,

also der box eine freste höche zu geben ist schon schlecht da fehlerquelle wie @bdt600 schon schrieb. einfach keine höhe.
dann was soll das li lu lo?
du hast nur das li eine höche gegeben die anderen nicht.
es währe wohl auch besser alles mit li zu machen und halt den unteren eine eigene classe zu geben.

Cheffchen

 

[Teratek]

Vielen Dank für die Hinweise.
Das Skript ist vorgefertigt und ich verändere es nur.
Die li lo lu la erlauben es mir recht einfach passende Bilder zum Text hinzuzufügen. Hab das mal ausprobiert, weil ich gelesen haben man könnte auch seine eigenen Tags definieren. Wenn ich ein -img scr- einfüge sieht es blöd aus.
Ich hab jetzt etwas mit der Höhe gespielt aber ohne Erfolg.
Bei den Zeilen wo das NEU Bildchen ist paßt ja der Abstand zur nächsten Zeile. Nur die anderen Bilder werden abgeschnitten. Wo stellt man das ein?

 

[Banana_Jones]

ein <li> wird vom Browser - solang nichts anderes definiert ist - ersteinmal als Blockelement dargestellt. Deine <lu> und <lo> kennt der Browser nicht und weiß demnach auch nicht, wie sie dargestellt werden sollen. Hier sieht es danach aus, als würden sie als inline-Elemente dargestellt. Inline-Elemente haben im Gegensatz zu Block-Elementen keine Höhe, da kannst du lang spielen.
Lösung: Kipp deine <lu> und ersetze sie durch <li> mit entsprechenden CSS-Klassen

 

[Cheffchen]

genau

 

[bdt600]

genau

Cheffchen, was sollen solch' sinnbefreite Posting??? :( Das kann man unter jeder richtigen Antwort schreiben! Wie war das mit Quantität und Qualität???

 

[Cheffchen]

@bdt600: las es einfach, ich kommentiere doch auch nicht beiträge von dir dich ich unpassend oder nicht ganz so richtig finde oder?
(Quantität und Qualität: http://www.html.de/threads/objekt-innerhalb-einer-navigationsleiste-bewegen.50263/#post-347510)

Sag es doch einfach dann such ich mir ein anderes Forum.

Cheffchen

 

[bdt600]

Lass' du doch einfach solche Beiträge. Was sollen die bringen, außer deiner Postingzahl hochzutreiben? Die bringen niemanden etwas, ganz im Gegenteil. Man klickt sich in einen Thread, weil man glaubt, dass es etwas Neues gibt, und dann steht da nur so ein Käse!!!

 

[Teratek]

Habs hingekriegt. Danke nochmal für die Tips. Hab ne neue Klasse in meine CSS Datei eingetragen und hinter das LI gepackt.

Ich würde jetzt gerne noch direkt vor die class noch eine zweite class packen, die ein bestimmtes Datum anzeigt. Also direkt vor die kleinen blauen Bildchen andere blaue Pics, die ein Datum enthalten.

Wo muß ich mich da einlesen?

 

[Tronjer]

Für ein Bild innerhalb <li> binde dort ein weiteres Element mit einem <src> Image ein.

Aber ein Datum als Bild auszugeben ist eigentlich völlig sinnfrei.

 

[Teratek]

Das Datum in die Grafik einzubinden hat nur optische Gründe. Hatte das so gesehen:

<div class="date_panel"> 27<span>JAN</span> </div>

.date_panel {
        float: left;
        width: 70px;
        padding: 45px 0 0 0;
        margin-right: 10px;
        height: 91px;
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        color: #ffffff;
        background:url(images/date_background.gif) no-repeat top right;
}

Dabei werden die Zahlen innerhalb der Grafik angezeigt. So etwas ähnliches wollte ich auch machen.

 

[Elroy]

So etwas ähnliches wollte ich auch machen.

Warum machst du es dann nicht so wie du es da gesehen hast.

Bei deinem Beispiel wird dem Datum nur eine Hintergrundgrafik zugewiesen.

Falls du nicht weisst wie man einem Element zwei Klassen zuweist kann ich dir diese Lektüre empfehlen: http://www.thestyleworks.de/ref/se_class.shtml

Gruss
Elroy

 

[Teratek]

hab mir das mal angeguckt, leider funzt der erste Versuch nicht. Denkfehler?

.datum {
        background:url(images/datum.gif) no-repeat 1px 3px;
}
.neu {
        background:url(images/neu.gif) no-repeat 20px 3px;
}

<li class="datum neu"><a href="#">Lorem ipsum dolor sit amet.</a></li>

 

[Cheffchen]

hallö,

funktioniert nicht, ist eine super fehlerbeschreibung.
zeige doch mal das in Aktion und was dir anders vorgestellt hast.

cheffchen

 

[Elroy]

hab mir das mal angeguckt, leider funzt der erste Versuch nicht. Denkfehler?

Das kann so auch nicht funktionieren.

Ich dachte es handelt sich um ein Hintergrundbild, jetzt sind es auf einmal zwei.

Lies dir mal durch wie man zwei Hintergrundbilder einbindet. http://www.mediaevent.de/css/background-image-mehrere.html Dazu brauchst du keine zwei Klassen, das geht mit einer.

Gruss
Elroy

 

[Teratek]

Das war der richtige Tip. Danke

Mein Code ist jetzt

.dat1neupr {
        background:url(images/datumsfahne.gif), url(images/neu.gif);
        background-position: 1px 3px, 35px 3px;
        background-repeat: no-repeat;
}
.dat2neupr {
        background:url(images/datumsfahne.gif), url(images/neu-pr.gif);
        background-position: 1px 3px, 35px 3px;
        background-repeat: no-repeat;
}

<li class="dat1neupr"><a href="#">Lorem ipsum dolor sit amet.</a></li>
              <li class="dat2neupr"><a href="#">Sed in mi in mauris fermentum </a></li>

Ergebnis im Anhang.

Vielleicht sieht man jetzt was ich machen möchte. Ein Datumsbild mit einem freien Bild kombinieren.
Ich würde gerne in das linke Hintergrundbild das Datum variabel einsetzten wenn das geht, da ich sonst für jede Datums-Bild Kombination eine eigene Klasse anlegen müßte