Text soll nicht "ausfranzen"

Webdesign & Technik HTML & CSS
1

Hi,

das ist mein Problem der Text soll sich rechtsbündig an die blaue Linie richten (blaue Linie nur zur Verdeutlichung eingezeichnet), außer halt die “Überschriften” ala Bahnen, Lifte, Abfahrten, Highlight.
Irgendwie bin ich da grad total übervordert. Hoffe ihr könnt mir einen Tipp geben.

Mal der Entsprechende Code:

[code]
#info { font-size: 1em; }
.offen { color: #00F84F; }
.zu { color: #FF1E18; }
#innen { padding: 2px; }
.center { text-align: center; }



[/code]

Die Variabeln kommen von einem Javascript in einer externen Datei:

[code]var stand = “24.08.2011”;

var bahnen_anzahl = “4”; /* von 5 Bahnen */
var bahnen_anzahl_geschlossen = “1”;
var bahnen_offen = “Kreuzeckbahn, Alpspitzbahn, Hochalmbahn und Wank”;
var bahnen_geschlossen = “Hausberg”;

var lifte_anzahl = “0”; /* von 13 */
var lifte_anzahl_geschlossen = “13”;
var lifte_offen = “”;
var lifte_geschlossen = “Adamswiesenlift, Kreuzwankllift, Anfängerlift C1, Anfängerlift C2, Anfängerlift C3, Kinderland, Rimmler-Moos-Lift, Trägllift, Kandahar-Express, Hexenkesselbahn, Kreuzeckzubringer, Bernadeinlift und Längenfelderbahn”;

var abfahrten_anzahl = “0”; /* von 17 */
var abfahrten_anzahl_geschlossen = “17”;
var abfahrten_offen = “”;
var abfahrten_geschlossen = “Kochelbergabfahrt, Hornabfahrt, Tonihüttenabfahrt, Olympiaabfahrt, Kandaharabfahrt, Bayernhausabfahrt, Kreuzwanklabfahrten, Trögllifthang, Kreuzwanklumfahrung, Skiweg Kreuzjoch-Hexenkessel, Hexenkessel, Oberer Skiweg, Mittlerer Skiweg, Osterfelderabfahrt, Bernadeinabfahrt, Längerfelderabfahrt 1+2 und Hochalmweg”;

var extras_anzahl = “1”; /* von 2 */
var extras_anzahl_geschlossen = “1”;
var extras_offen = “Alpspix”;
var extras_geschlossen = “Rodelbahn”;[/code]

LG Flo

2

margin/padding?
Ich sehe da auch keinen plausiblen Grund, das alles mit JS zu generieren :astonished:

3

hi,

irgendwie bin ich zu blöd ich glaub ich greif jetzt einfach zu ner Tabelle … wollt ich zwar eigentlich nicht aber hilft ja nix … Trotzdem Danke!!

lg flo

//edit: Warum ich das mit Javascript komplett umsetzen will?
Die Daten/Variablen kommen von einer anderen Seite und sollte der Besucher kein Javascript aktiviert haben sieht er halt garnix anstatt nur nen Müll :wink:

4

Designe es zuerst mit CSS-Klassen und HTML. Anschließend erstellst du das HTML per Javaskript, das ist dann kein Problem mehr.

[code]

Überschrift

offen
asd

zu

[/code]

Dann die Überschrift normal, Klasse pisten mit padding-left (für Einrückung) und text-indent (Platz für Bild), in offen bzw. geschlossen dann Farbe und Bild setzen.

#infos .pisten { padding-left: 1em; text-indent: 16px; background-position: 1em 0; background-repeat: no-repeat; } #infos .offen { background-image: url("offen16x16.png"); color: green; } #infos .geschlossen { background-image: url("zu16x16.png"); color: red; }

5

Hi,

a) Was hat Franz mit deinem Text zu tun?
b) Bist du sicher, dass der Absatz rechtsbündig an der blauen Linie liegen soll?

6

hi,

okay danke … ich glaub ich weiß jetzt meinen Fehler warum’s nicht so klappen wollte. dieser Hacken (:heavy_check_mark:) bzw. dieses X (:heavy_multiplication_x:) sind keine Bilder sondern einfach Schriftzeichen. Wenn ich Bilder nimm und dann des Beispiel von progandy dann passts. THX!!

Hier noch mal Beispiel Bild:

Und der Entsprechende Code (sollte ihn mal jemand anders noch brauchen):

[code]
#infos { width: 30%; background-color: yellow; }
#infos .pisten {
padding-left: 2em;
text-indent: 0px;
background-position: 1em 0;
background-repeat: no-repeat;
}
#infos .offen {
background-image: url(“offen16x16.png”);
color: green;
}
#infos .geschlossen {
background-image: url(“zu16x16.png”);
color: red;
}

Überschrift

Kreuzeckbahn, Alpspitzbahn, Hochalmbahn und Wank

zu

[/code]

LG flo

7

Mit Dingbats sollte man im Web ohnehin nicht arbeiten, außer man bietet die Font gleich serverseitig mit an…