Wie integriere ich Hintergrundmusik auf meiner Website (html)?

Hallo!

Erst mal danke fürs Lesen! 👏

Ja, jetzt nach all meiner Verzweiflung bin auch ich hier gelandet. Und nein, ich hab eigentlich keine Ahnung von Html Codes.

Wie auch immer, ich möchte auf meiner Internetseite (erstellt mit dem Webpagebaukasten ,,Jimdo") automatisch Musik im Hintergrund abspielen lassen, da ich aber solch ein Add-On im Baukasten misse, müsste ich da dann selbst einen entsprechenden Html-Code eingeben. Und da fängt das Problem an. Ich finde Unzählige solcher Codes im Internet, aber verstehe weder wofür all diese Attribute stehen, noch wie ich da meine eigene Sounddatei in den Code einfügen kann (Also ich weiß, dass man die Quelle aus einem ,,Image link" ziehen kann, so ähnlich wie bei Links zu Bildern, aber weiter wurde ich auch nicht schlau). Ich hab die Sounddatei sowohl als mp3, als auch als Link, der dann zu Spotify führt. Wäre es schlau, sowas wie ein ,,Image Link" für die Datei zu ergattern? Wenn ja, auf welchen Plattformen kann man diese am besten hochladen?

Falls sich noch jemand fragt, was ich gerne als Antwort hätte, dann bitte einen Html Code zum Kopieren, worin ich dann nur diesen oben genannten Link einfügen muss 😄

PS: Ja, mir ist bewusst, dass dieses automatische Abspielen bei den meisten eher nicht beliebt ist, aber ich gehe kaum davon aus, dass jemand meinen Link zum Beispiel heimlich am Arbeitsplatz aufruft. Außerdem zerstört es meiner Meinung nach die Illusion, wenn man explizit auf solch einen Knopf drücken muss.

Vielen Dank im Vorraus!

Website, IT, HTML Code, website erstellen
1 Antwort
Html und css Menü am Handy anzeigen wie am Pc?

Ich möchte gern, dass mein Menü auf dem Smartphone genauso aussieht, wie am PC:

Wie müsste ich den Code dann verändern?

HTML:

<div id="menu">
   <ul>
       <li class="topmenu">
           <a href="">Text</a>
           <ul>
               <li class="submenu"><a href="">Text</a></li>
               
           </ul>
       </li>
       <li class="topmenu">
           <a href="">Text</a>
           <ul>
               <li class="submenu"><a href="">Text</a></li>
               <li class="submenu"><a href="">Text</a></li>
           </ul>
       </li>
       <li class="topmenu">
           <a href=""> Text</a>
           <ul>
               <li class="submenu"><a href="">Text</a></li>
               <li class="submenu"><a href="">Text</a></li>
           </ul>
   
       </li>
         <li class="topmenu">
           <a href=""></a>
       
   
       </li>
         <li class="topmenu">
           <a href=""> </a>
           <ul>
            
           </ul>
   
       </li>
         <li class="topmenu">
           <a href=""> </a>
           <ul>
               
           </ul>
   
       </li>
         <li class="topmenu">
                     <a href="Link zu Instagram">
<i class="fa fa-instagram" style="font-size: 105%; " > </a></i>
          
       </li>
   
</div> 

CSS:

   #menu {
    left:0;
top:0;
width:100%;
height:7%;
background: #5A7481;
z-index:4;
position: fixed;
   }
   #menu ul {
       list-style-type:none;
       list-style-image:none;
       margin:0;
       padding:0;
  
   }
   #menu li.topmenu {
       float:left;
       margin-top: 0%;
  padding-top: 0.%;
  padding-left: 0%;
  padding-right:15%;
   }
   .topmenu a {
       float:left;
       width:100%;
       text-align:center;
   }
   .topmenu ul{
       display:none;
   }
   .topmenu a, .submenu a{
       padding:10%;
       color:white;
       font-weight:bold;
       text-decoration:none;
       background-color:#5A7481;
       margin:0;
   }
   .submenu a{
       font-size:90%;
      
       position:relative;
       
   }
   #menu a:hover, .topmenu.on a {
       color:white;
       background-color:#5A7481 !important;
   }
   .topmenu:hover ul {
       display:block;
       z-index:500;
   }
Computer, HTML, Programmieren, CSS, HTML Code, Informatik
1 Antwort
HTML, CSS: Navigation funktioniert falsch?

Hallo, ich habe ein Problem. Und zwar habe ich folgende Webseite erstellt, jedoch ist meine Navigation nicht wie gewünscht dauerhaft am oberen Bildschirmrand, sondern ist einfach nur oben an meiner Webseite.

HTML:

<!DOCTYPE html>
<html>
  <head>
  <title>Webseite 2</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <meta charset="utf-8">
   
  </head>
   
  <body>
     
  <div class="navigation">
    <div class="wapper">
      <div id="logo"><p>S</p></div>
       
      <a target="_blank" href="#" >Kontakt</a>
      <a target="_blank" href="#" >Mehr</a>   
      <a target="_blank" href="#" >Shop</a>
      <a target="_blank" href="" >Home</a>
      
    </div>
  </div>
   
  <div id="banner">
  <img src="Bilder/banner.jpg">
  </div>
  <div>
    <p>  ....Text..... </p>   
  </div>
  </body>
</html>

CSS:

{
  margin: 0;
  padding: 0;
  font-family: fantasy;
}
.navigation {
   width: 100%;
  height: 100px;
  background-color: rgba(250,250,250,0.8);
  position: fixed;
  z-index: 10;
  flex-basis: 0px;
  flex-shrink: 1;
}
#logo{
  height: 80px;
  width: 80px;
  margin: 10px;
  float: left;
}
#logo p{
  line-height: 90px;
  color: black;
  font-size: 6em;
  font-family: Rocket Rinder;
}
.navigation a {
  color: black;
  font-family: Rocket Rinder;
  text-decoration: none;
  font-size: 2em;
  margin-right: 40px;
  line-height: 100px;
  float: right;
}
.navigation a:hover {
  color: blueviolet;
}
.wapper {
  width: 960px;
  max-width: 90%;
  margin: 0 auto;
}
#banner {
  z-index: 0;
  width: 100%;
  height: auto;  
  background-size: cover;
}
#banner img{
  width: 100%;
}   

Website, HTML, CSS, html5, HTML Code, CSS3, HTML 5
3 Antworten
Affiliate Seite - Filter auf Seiten & einfachere Methode zur Produkteinbindung?

Moin!

Ich bin gerade dabei meine erste Affiliate Seite aufzubauen, nur mal so nebenbei und aus Spaß an der Freude. Auf meiner Affiliate Seite möchte ich Musikinstrumente sowie Zubehör dafür anbieten. Als CMS nutze ich Wordpress.

So sieht es im Moment aus:

Zurzeit ist das alles noch recht kompliziert erstellt worden. Im Wordpress Editor schaut es für ein Produkt so aus:

[ads_space space="5"]
<h2>Harley Benton JB-20 SB Standard</h2>
[ads_row][ads_col col="cell"]

<a href="Bildlink" src="Bildquelle" alt="Harley Benton JB-20 Standard" width="150" height="150" /></a>

[/ads_col]

[ads_col col="cell"]
<ul>
     <li>Korpus: Pappel <span style="color: #00c700; font-size: large;"><strong>✓</strong></span></li>
     <li>Hals: geschraubt; Ahorn <span style="color: #00c700; font-size: large;"><strong>✓</strong></span></li>
     <li>Griffbrett: Roseacer <span style="color: #00c700; font-size: large;"><strong>✓</strong></span></li>
     <li>20 Bünde <span style="color: #00c700; font-size: large;"><strong>✓</strong></span></li>
</ul>
[/ads_col]

[ads_col col="cell"]
<div align="right"><span style="font-size: x-large;">99,-€</span></div>
<div align="right">» Mehr Details</div>
&nbsp;
<div align="right">[maxbutton id="1" url="Affiliate Link" ]</div>
[/ads_col][/ads_row]

<hr />

Das ist natürlich alles ziemliche Fummelarbeit und man muss echt aufpassen, dass man da nicht durcheinanderkommt.

Die erste Frage: Gibt es eventuell eine einfachere Methode wie ich die Produkte so untereinander aufbauen könnte wie auf dem Bild oben?

Die zweite Frage ist: Wie ist es möglich oben auf der Seite einen Filter hinzubekommen zum Beispiel für Hersteller. Dass der User dann darauf klickt, eine Liste mit Herstellern ausfährt und dann auf einen Hersteller klickt und anschließend nur E-Bässe von dem Hersteller angezeigt werden?

Ich hoffe meine Angaben reichen aus, ansonsten füge ich gerne noch was hinzu wenn ihr etwas wissen müsst. Vielen Dank im Voraus für produktive Hilfe!

Beste Grüße und schönes Wochenende.

Computer, Technik, Affiliate Marketing, Affiliate, Programmieren, CSS, Wordpress, Programmierung, HTML Code, Technologie, Webseitengestaltung, HTML-Editor
1 Antwort
Dünne Linie zwischen Divs im Mobile Modus?

Ich versuche gerade meine Webseite zu designen, und wenn ich sie auf dem Handy anschaue oder im Browser in den Mobile Modus wechsle (Rechtsklick, Untersuchen, oben links im neuen fenster auf Toggle Device) sehe ich zwischen zwei Divs eine dünne dunkle Linie, und ich weis nicht weshalb.

Ich möchte dass man sie nicht sieht, weis jemand weshalb die dort ist?

Der Code ist öffentlich auf meinem Server (Falls jemand das in 2019 liest, gehört die Domain nicht mehr mir!)

https://xhascox.com/

Screenshots:

hier noch der etwas gekürzte Code: (max 3000 zeichen wird leider kanpp)

CSS:

html, body, div, span, applet, object,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, sub, sup, tt, var,
b, u, i, center, footer, header {
	margin: 0;
	padding: 0;
	border: 0;
	border-color: transparent;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html, body {
    max-width: 100%;
    overflow-x: hidden;
	background-color: var(--background-color);
}
body {
	padding: 0;
	margin: 0;
}
h1 {
	margin: 0;
}
#center {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width-center);
	min-width:var(--min-width-center);
	width: var(--width-center);
	background-color: var(--background-color);
	overflow: hidden;
}
.main {
	padding: 20% 5% 20% 5%;
	height: 128px;
}
#main1 {
	min-width: var(--min-width-center);
	max-width: var(--max-width-center);
	background-color:var(--color-center-1);
	color: var(--font-color-h1);
}

main2 {

min-width: var(--min-width-center);
max-width: var(--max-width-center);
background-color: var(--color-center-2);
color: var(--font-color-h1);

}
#main3 {
	min-width: var(--min-width-center);
	max-width: var(--max-width-center);
	background-color: var(--color-center-3);
	color: var(--font-color-h1);
}

HTML:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
	<div id="widthdiv">
	</div>
		<div id="bar_side_left">
		</div>
		<div id="bar_tri">
		</div>
		<div id="bar">
		Main
		</div>
		<div id="center">
				<div class = "main" id="main3">
				<div id="main_text">
				<h1>
				XHASCOX 3
				</h1>
				</div>
			</div>	
			<div class = "main" id="main2">
				<div id="main_text">
				<h1>
				XHASCOX 2
				</h1>
				<p>
				- Python<br>
				</p>
				</div>
			</div>	
			<div class = "main" id="main1">
				<div id="main_text">
				<h1>
				XHASCOX 1
				</h1>
				</div>
			</div>
				<div class = "main" id="main4">
				<div id="main_text">
				<h1>
				XHASCOX 4
				</h1>
				</div>
			</div>				
    	</div>
</body> 

habe nur noch nichts im Internet gefunden. Vorallem, weil es nur im mobilen Modus auftaucht.

Website, Web, HTML, Webseite, Programmieren, CSS, HTML Code, Webdesign, Webdevelopment
2 Antworten
HTML HILFE HTML?

Ich habe eine sehr wichtige Frage! Und zwar muss man ja wegen der neuen DSGVO Richtlinien, wenn man sich in einem Anmeldeformular einträgt, dem Datenschutz zustimmen oder?

Dies wird zumindest in diesem Informationsvideo ab der Minute 10:35 erläutert:

youtube.com/watch?v=P-_nRP0gEP0&list=WL&index=4&t=402s

Wenn das stimmt, dann sind ja diese Anmeldeformular nicht rechtskonform oder irre ich mir dort? Ich wollte nämlich genau deshalb eine extra Checkbox mit dem angebotenem Anmeldeformular (bei klick-tipp.com) verknüpfen, sodass man bsw. seine E-Mail-Adresse eintragen muss und auch mit der Datenschutzerklärung einverstanden sein muss, damit es dann weitergehen kann mit dem Opt-in-Prozess! Wenn das Häkchen dafür nicht gesetzt oder eine falsche E-Mail-Adresse oder überhaupt keine eingetragen (2 Bedingungen) wurde, soll einfach nur ROT eine kurze Fehlermeldung und Anweisung zur Korrektur erscheinen, ohne dass die Seite verlassen wird! Wie es halt bei fast allen anderen Anmeldeformularen auch schon der Fall ist. Allerdings besitze ich leider nicht die nötigen HTML-Kenntnisse dazu und wollte euch alle daher fragen, ob ihr das für mich und natürlich auch viele andere Nutzer, die davon profitieren werden erstellen könnt? Ich habe hier auch schon die 2 HTMLs, die beide miteinander verknüpft werden sollen für euch bereit gestellt!

1. HTML-Code, das Anmeldeformular:

<iframe class="ktv2" style="position: relative; display: inline-block; border: none; background: transparent none no-repeat scroll 0 0; margin: 0;" src="https://klicktipp.s3.amazonaws.com/userimages/90640/forms/138611/385bz23ypz8z366c.html" width="340" height="175" scrolling="no"></iframe>

2. HTML-Code, die Checkbox, um dem Datenschutz zuzustimmen:

<form><input id="love" name="love" type="checkbox" value="love" /> <label for="love"><label for="love">Datenschutz zustimmen</label></label></form>

Ich hatte mir gedacht die Checkbox direkt zwischen dem Feld wo man seine E-Mail-Adresse eintragen muss zu platzieren und zwischen dem Button für die Bestätigung darunter, also der Button der für die Weiterleitung auf die nächste Seite verantwortlich ist, damit es auch ja nicht übersehen wird! Und sehr wichtig, die Schrift soll etwas klein geschrieben sein, doch das Feld, um das Häkchen zu setzen soll etwas größer sein und das Häkchen soll auch gesetzt werden können, wenn man lediglich auf den Text für die Zustimmung des Datenschutzes rauf klickt, damit es für den Eintragenden viel leichter ist!

Ich hoffe, ich konnte mich hier jetzt einigermaßen verständlich ausdrücken, ansonsten könnt ihr auch gerne mal auf meiner Website luzides-träumen-erlernen.de vorbeischauen, um ein besseres Bild von den Vorstellungen und Verbesserungsvorschlägen von mir zu erhalten.

VIELEN DANK!

HTML, HTML Code, HTML-Editor
3 Antworten
Wie erreiche ich, dass immer die aktuellste Version eines Links angezeigt wird und wie kann man zusätzlich eine "Schleife" umsetzen?

Hallo,

ich habe folgendes Problem: Es gibt einen Essensplan mit Informationen, der sich mehrfach am Tag, teilweise alle paar Minuten minimal ändert. Dieser Plan besteht aus 2 Seiten. Des Weiteren gibt es einen weiteren Essensplan für die Folgewoche (auch mit 2 Seiten), der meistens am Donnerstag der Vorwoche auch angezeigt wird.

Derzeit ist es so, dass sich die Nutzer den Plan mehrmals am Tag jeweils als Link im Intranet aufrufen können. Leider schlägt der Cache des Browsers regelmäßig zu, d. h. der aktualisierte Plan wird nicht immer tatsächlich angezeigt. Cacheverwendung kann ich leider nicht abschalten, Strg+F5 funktioniert nicht zuverlässig. Zusätzlich ist zukünftig geplant, dass die Seiten permanent als Schleife auf einem separaten Monitor angezeigt werden.

Der Plan wird in Excel erstellt und in pdf umgewandelt. Nun kam mir die Idee den Plan als html zu speichern. Tests ergaben, dass dabei aber die Formatierungen nicht sauber umgesetzt werden.

Das Abspielen als Schleife könnte mithilfe eines ThinClients mit Firefox und/oder pdf-Reader erfolgen.

Nun meine Fragen:

1.   Wie kann ich sicherstellen, dass immer die aktuellste Version angezeigt wird?

2.   In welcher Form sollte man die Schleife programmieren? Als Idee hatte ich eine html-Version, die alle 10 Sekunden den Inhalt eines Ordners (max. 2 Dateien mit 4 Seiten) anzeigt bzw. die pdf-Datei aufruft, aber wahrscheinlich greift dann wieder der Cache…..

Oder denke ich viel zu umständlich und es gibt eine einfache Lösung?

Viele Grüße

franzius007

Computer, Website, Technik, PDF, Programmierung, HTML Code, Technologie
2 Antworten
HTML Schleife und if..else funktion?

Hallo,

ich möchte gerne eine Umfrage für die Uni machen, die ganzen Tools funktionieren aber nicht so, wie ich es will. Deshalb möchte ich gerne über HTML die Umfrage ändern.

Über das Tool habe ich eine Matrix-Frage generiert.
Ziel ist es, dass der Teilnehmer priorisiert und sich ein Ranking aufbaut.

Ich habe 16 Themen welche von "1" am wichtigsten bis "16" am wenigsten wichtig gerankt werden. Das ganze geht mit Radiobuttons also klicke ich die dazugehörige Zahl einfach an.
Problem: Ich kann nun jedes Thema mit dem gleichen Wert beantworten.
Damit da keine Fehler passieren können möchte ich nun gerne eine Schleife mit einer if.. else Funktion programmieren. Leider bin ich html einsteiger und komme nicht weiter. So habe ich mir das vorgestellt
for 1...16 ("Themen") if Button 1=blocked; switch Button 2

Habe das mit zwei Themen und den 16 Buttons hier kopiert:
ID 45 steht für das Thema und 373 - 417 für die 16 Buttons.
Aber wo, bzw wie kann ich die Schleife und die Funktion einbauen?
Kann mir jemand helfen?? :D

DANKE SCHONMAL =)

<tr><td class="question">Bewertung1)</td><td><input id="a_45_373" type="radio" name="data[117][45]" value="373" /><label for="a_45_373" style="display:none;"></label></td><td><input id="a_45_375" type="radio" name="data[117][45]" value="375" /><label for="a_45_375" style="display:none;"></label></td><td><input id="a_45_377" type="radio" name="data[117][45]" value="377" /><label for="a_45_377" style="display:none;"></label></td><td><input id="a_45_379" type="radio" name="data[117][45]" value="379" /><label for="a_45_379" style="display:none;"></label></td>

USW.

Computer, HTML, Programmierung, HTML Code
4 Antworten

Meistgelesene Fragen zum Thema HTML Code