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

Soundcloud Widget auf Hintergrundbild platzieren

M

molotok

Neues Mitglied
Hallo zusammen,

Ich muss dringend eine ganz simple Website für mein Tonstudio fertigstellen und hab da noch ein Problem mit der Einbettung von einem Soundcloud-Widget. Wäre super, wenn mir jemand weiterhelfen könnte, da ich einfach zu wenig Zeit habe, um die Lösung selber zu finden.

Die Website besteht nur aus einem Bild (960x720px), auf dem an einer bestimmten Stelle der Soundcloud-Musikplayer erscheinen soll. Der Embed-Tag für den Player lautet:

<object height="205" width="300"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F238868"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="205" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fplaylists%2F238868" type="application/x-shockwave-flash" width="300"></embed> </object>

Wie kann ich dieses Objekt auf dem Bild platzieren?
 
Werbung:
Tach auch,

molotok schrieb:
Ich muss dringend eine ganz simple Website für mein Tonstudio fertigstellen
Zum Vergrößern anklicken....
Eigentlich gehört so was ja ins Jobforum mit dem Hinweis, dass du doppelt bezahlst weil es heute noch fertig werden muss. Ist halt wie beim Zahnarzt Privat kostet, Kassenpatienten müssen warten.

molotok schrieb:
Die Website besteht nur aus einem Bild (960x720px), auf dem an einer bestimmten Stelle der Soundcloud-Musikplayer erscheinen soll.
Zum Vergrößern anklicken....
OK weil es so einfach ist.

hier ist der Html-Quellcode.
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tonstudio Hier Name und Stadt einfügen</title>
        
        <style>
        * {margin:0;padding:0;}
        html{
            background-color:black;
        }        
        body  {
            position:relative;
            background-image:url(hier die URL vom Bild einfuegen);
            width: 960px;
            height: 720px;
            margin: 0 auto;
            border: 1px solid red;
        }
        div#player {
            position:relative;
            top:100px;
            left:100px;
            width:300px;
            height:205px;
        }        
        </style>
    </head>
    <body>
        <Div id="player">
             <object height="205" width="300"> <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fp laylists%2F238868"></param> <param name="allowscriptaccess" value="always"></param> <embed allowscriptaccess="always" height="205" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Fp laylists%2F238868" type="application/x-shockwave-flash" width="300"></embed> </object>
        </div>
    </body>
</html>
 
Werbung:
Wow, das ist ja cool, wie einfach das geht! Den roten Rand ums Bild hab ich auch wegbekommen, den Hintergrund auf weiss gestellt und das Widget richtig platziert. Jetzt müsste ich nur noch wissen, wie ich das ganze Bild etwas weiter nach unten bekomme.
(Ich kauf mir gleich heute ein Buch über Webdesign, damit ich in Zukunft keine so banalen Fragen mehr stellen muss. Aber ich bin echt froh, dass ich die Site gleich aufs Netz stellen kann.)
 
Jetzt müsste ich nur noch wissen, wie ich das ganze Bild etwas weiter nach unten bekomme.
Zum Vergrößern anklicken....

Hier muss du jetzt aufpassen:
Der Einfachheit halber um so wenig Elemente wie möglich zu benutzen, habe ich hier das body-Tag auf 960 Pixel Breite und eine Höhe von 720 Pixel gesetzt. Damit ein Hintergrund eingefärbt werden kann, habe ich das HTML-Element mit einer Farbe versehen.
Ich wollte damit deutelich machen das man alle zur Verfügung stehende Elemente verwenden kann. Die Seite beginnt bereits bei dem HTML-Element, was viele nicht wissen. Sie schreiben dann Div-Element dazu und verwenden häufig die ID Wrapper um es dann im CSS ansprechen zu können. Beides ist gar nicht notwendig wenn man sich einmal richtig mit CSS beschäftigt und auch mal mit den zur Verfügung stehenden Grundelementen rumspielt. Auch werden viel zu viele IDs und Klassen vergeben, anstatt die Fähigkeiten von CSS voll auszureizen.

Genug der Einleitung. Verschieben lässt sich ein Element in dem wir zum Beispiel einen Abstand zum Elternelement mitgeben.
Unser Elternelement ist HTML und unser Element das wir verschieben wollen ist das Body-Element.

Wir möchten das Body-Element weiter nach unten haben. Wir nehmen also die obere Kante vom Rahmen, also Border und geben dem einen Abstand mit. Abstände nach aussen sind Margins.

Im CSS lautet das dann wie folgt:
HTML: 
body  {
            position:relative;
            background-image:url(hier die URL vom Bild einfuegen);
            width: 960px;
            height: 720px;
            margin: 0 auto;
            border: 1px solid red;
            margin-top:30px;
        }

Wir haben aber schon margin im CSS stehen mit der Angabe 0 auto. Das stimmt und diese Angabe wird mit unserer neuen Angabe überschrieben, da unsere neue Angabe danach erfolgt. Alternativ könnten wir auch folgendes schreiben: margin: 30px auto 0 auto; Die angaben werden von oben im Uhrzeigersinn gelesen. Also an Position 12Uhr oder oben steht 30 Pixel Abstand, danach folgt rechts mit der Angabe Auto (wir überlassen es dem Browser den Wert zu errechnen) und nach unten sind es 0 Pixel Abstand. Danach folgt die Position links und da nehmen wir wieder Auto.

Man merkt also, alles ganz einfach.

Ein Buch ist übrigens nicht notwendig, da steht auch nur drin was man im Internet kostenlos zu lesen bekommt und je nach Qualität des Autors sogar noch weniger.

Einfach hier lesen:
Dokumentation
 
Werbung:
Danke für die Erklärungen! Funktioniert alles bestens. Sieht sogar in jedem Browser gleich aus. Da war ich mir früher anderes gewohnt, als ich mal versuchte, Webseiten zu programmieren.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben