Mehrere Ansprechbare Elemente ohne Zeilenumbruch

  • Vorab: Tut mir leid falls ich hier falsch bin o.ä. Ich hab nur ein kleines Problem und hoffe dass hier ventuell jemand fdie Lösung hat(:


    Ich hab versucht mit html und javascript mir einen lockscreen zusammenzubauen, alles was ich dafür gebraucht hab hab ich mir "erGooglet"^^


    Was ich gemacht habe:
    -Die Uhrzeit ausgeben
    -Dynamische Hintergrundbilder (jede halbe Stunde anderes)
    -3 Balken, die jeweils Stunden Minuten und Sekunden des/r aktuellen Tages, Stunde, Minute anzeigen (bspw: der Sekundenbalken wird mit jeder Sekunde immer voller bis die Minute voll ist und fällt dann auf 0 zurück.) Dabei ändert sich die Farbe der Balken von gelb zu rot.
    -Alle Wochentage stehen in einer Zeile nebeneinander und der aktuelle ist hervorgehoben (dick und etwas größere Schriftgröße)


    Und beim letzten Punkt liegt mein Problem.
    Im Header kündige ich 7 Elemente an, im Script - Part wird der aktuelle Wochentag erkannt und daraufhin die Schriftgröße des Elemnts erhöht mit dem der Tag übereinstimmt.
    Problem ist, dass alle Objekte nicht nebeneinander sondern untereinander stehen (Zeilenumbrüche!) und ich verstehs einfach nicht ^^
    Ich gehdanvon aus dass es am <div> im body liegt, dass zeilenumbrüche erzeugt, aber weis nicht wie ich es umgehen könnte. Ich muss die Elemente ja trennen um jedem eine ID zuzuweisen oder? ):


    Relevanter Quellcode:
    head:


    #date1, #date2, #date3, #date4, #date5, #date6, #date7 {



    text-transform: lowercase;


    }


    body:



    <div id="mo" style="font-size: 10px;"></div>




    <div id="di" style="font-size: 10px;"></div>



    <div id="mi" style="font-size: 10px;"></div>



    <p id="do" style="font-size: 10px;"></p>



    <p id="fr" style="font-size: 10px;"></p>



    <p id="sa" style="font-size: 10px;"></p>



    <p id="so" style="font-size: 10px;"></p>


    script:


    function calculateDate() {



    var wday = new Array("mo", "di", "mi", "do", "fr", "sa", "so");


    var currentTime = new Date();


    var weekday =
    wday[(currentTime.getDay()-1)];



    document.getElementById("mo").innerText = wday[0];


    document.getElementById("di").innerText = wday[1];


    document.getElementById("mi").innerText = wday[2];


    document.getElementById("do").innerText = wday[3];


    document.getElementById("fr").innerText = wday[4];


    document.getElementById("sa").innerText = wday[5];


    document.getElementById("so").innerText = wday[6];


    document.getElementById(weekday).setAttribute("style", "font-size: 20px;");



    }


    Wie gesagt mal eben "angelernt" ^^ (hab Programmierkenntnisse aus der Schule in Delphi/Turbopascal)
    Danke für jede Hilfe


    Falls der Fehler eher woanders im Quellcode ist, kann ich den auch noch posten

  • http://s14.directupload.net/file/d/3212/ziwarqid_jpg.htm


    Hier sieht man das ganze mal (hab den hintergrund rot gemacht damit man es besser sieht)
    Oben balken, uhrzeit.
    Dadrunter die wochentage, mo größer weil heute montag ist.
    Das problem ist, die wochentage sind untereinander (zeilenumbrüche) und nicht nebeneinander unter der uhrzeit wie ich es gerne hätte..
    Hoffe verstehst mein problem /:

  • Tut mir echt total leid aber ich weiß nicht was ich jetzt machen soll :S
    Den ganzen quellcode schicken? Oder was anderes? Sorry kenn mich leider echt garnicht aus, hab alles halt direkt am handy geschrieben und dann so direkt genutzt :S
    Das Problem ist doch schon, dass <div></div> zeilenumbrüche erzeugt oder?..

  • da is schon fehler nummer 2.. direkt aufm handy schreiben :)


    verbinde das ding mit dem pc, erstelle eine anständige html-datei mit sauber formatiertem code und lade die dann irgendwo hoch, so dass wir das ding live prüfen und zerpflücken können :)


    edit: und beschäftige dich mal mit css. die anordnung der elemente sollte ohne probleme mit floats, clears und co behoben werden können :)

  • Ok ich habs hinbekommen. Mir ist aufgefallen dass ich die bezeichnungen im kopf (date1, date2, etc) garnicht mehr verwende, waren vn einem alten versuch. Deswegen haben sie auch keinen einfluss auf den text gehabt.
    Hab jetzt im kopf dinge wie:
    #mo { position: absolute; top: 460px; left: 20px; color: white;}
    Eingefügt und es läuft ^^


    Danke für die hilfe