Beiträge von djheke

djheke

Oder etwas einfacher. Du könntest ja den Bewerbungsling ein border-bottom: geben. Ist zwar dann nicht mehr unter dem gelben Balken, aber ist doch egal.

Code

ul li:last-child a {
 background: #508cb1;
 border-bottom:10px solid red;
 padding-bottom:10px;
}

Ist ein Ersatz für Deine ID #sonderbutton.

djheke

Ich vermute mal das Ihr ,tachu, vor viele Fragen gestellt habt.

djheke

Wenn dein Link aussehen soll wie ein Button, könntest Du es so machen. Nur ein simples Beispiel.

HTML

<!DOCTYPE HTML>
<html lang="de">
<head>
 
<title>Button</title>
<meta charset="utf-8">
<style>
.button {
 border:1px solid #aaa;
 border-radius:5px;
 padding:3px 10px;
 text-decoration:none;
 color:#444;
 background:#eee;
 font:caption;
}
</style>
</head>
<body>


<a href="https://www.google.com" class="button">Nächste Seite</a>


</body>
</html>

Alles anzeigen

Um die zweite Frage kümmern wir uns später.

djheke

Code

ul li
{
    list-style: none;
    display: inline-block;
 }
ul li :hover
{
    background: orange;

}
ul li a
{
    color: #fff;
    text-decoration: none;
    display:block;
    padding:20px;
}

Alles anzeigen

Du muss Padding auf li a anwenden.

djheke

Zitat von chantalkueng

Weil ich mich mit Joomla besser auskenne.

Alles klar.

djheke

Warum bleibst du nicht bei WP? WP lässt sich auch als CMS nutzen.

djheke

Hier mal so als Anregung.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Balken</title>
<style>


* {
  margin:0;
 padding:0;
 box-sizing:border-box;
}


html,body {
 margin:5px;
 height:100%;
}


body {
 background:#ddd;
}


body:before  {
 content:"";
 position:absolute;
 top:3.125rem;
 left:0;
 right:0;
 display:block;
 height:6.25rem;
 
 background:orange;
 z-index:-1;
}


header {
 background:gray;
 height:6.25rem;
 padding:10px;
}


.wrapper {
 background:#fff;
 box-shadow:0 0 10px #000;
 width:80%;
 margin:0 auto;
 padding-top:2.25rem;
 height:100%;
}


main {
 padding:20px;
}
</style>
</head>
<body>
<div class="wrapper">
<header><h1>Meine Homepage</h1></header>
<main>
<h2>Hallo Welt</h2>
</main>
</div>
</body>
</html>

Alles anzeigen

djheke

Deine Antwort ( Und position:absolute schreibt man mit "E" ) ist sehr verwirrend.

https://www.w3schools.com/CSSref/pr_background-color.asp

djheke

Hier mal eine ältere Version .

HTML

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Komplette Zeilen bei unterschiedlicher Schriftgröße</title>
<style>
* {
 margin:0;
 padding:0;
 list-style:none;
 text-decoration:none;
 box-sizing:border-box;
}
div {
 margin:10px;
 padding:1em;
 border:1px solid #000;
 border-radius:5px;
 box-shadow:0 0 5px #000;
 width:300px;
 float:left;
 position:relative;
}


div p {
 overflow:hidden;
 float:left;
 max-height:4.5em; /*Vorgabehöhe:  1.5em(line-height) x 3 Zeilen = 4.5em */
 min-height:4.5em; 
 font-size:1em;
 line-height:1.5em;
}


div:hover p , div:focus p {
 max-height:none;
 height:auto;
}


div:after {
 content:"";
 position:absolute;
 width:10em;
 height:1.5em;
 background-image: linear-gradient(to right, transparent 0%, #fff 70%);
 font-weight:bold;
 right:5px;
 bottom:1em;
}


div:hover:after , div:focus:after {
 content:none;
}


h3 {
 padding-bottom:1em;
}
</style>
</head>


<body>
<div tabindex="0">
<h3>Überschrift</h3>
<p>
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.
</p>
</div>


<div tabindex="0">
<h3>Überschrift</h3>
<p>
Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis 
natoque penatibus et magnis. Lorem ipsum dolor sit amet, con sectet uer adip iscing elit.Lorem ipsum dolor sit amet, con sectet uer adip iscing elit. Aenean commodo 
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus.
</p>
</div>
<div tabindex="0">
<h3>Überschrift</h3>
<p>
Guten ABend ich hoffe wir finden eine Loesung.
</p>
</div>
</body></html>

Alles anzeigen

djheke

Upps! Hatte ich garnicht bemerkt, dass es so auch nicht funktioniert. Mir fällt jetzt nur noch ein die Reihenfolge im Marup zu ändern.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rating</title>
<style>




#form_wrapper fieldset label {
  unicode-bidi: bidi-override;
  direction: rtl;
}


#form_wrapper fieldset {
 border:none;
 padding:0;
}
#form_wrapper legend {
 margin-top:11px;
 width:100px;
 float:left;
}


#form_wrapper fieldset label:before {
 content:"\2606" ;
 color:gray;
 font-size:2rem;
}


#form_wrapper fieldset input:checked ~ label:before {
 content:"\2605" ;
 color:black;
}


#form_wrapper fieldset input , #form_wrapper b {
 position: absolute;
 clip: rect(1px, 1px, 1px, 1px);
}




 


</style>
</head>
<body>


<form id="form_wrapper" name="" action="" method="post">


<fieldset>
 <legend>Price:</legend>
 
  <input type="radio" name="price" id="price_star_5"><label for="price_star_5"><b>5 Sterne</b></label>
  <input type="radio" name="price" id="price_star_4"><label for="price_star_4"><b>4 Sterne</b></label>
  <input type="radio" name="price" id="price_star_3"><label for="price_star_3"><b>3 Sterne</b></label>
  <input type="radio" name="price" id="price_star_2"><label for="price_star_2"><b>2 Sterne</b></label>
  <input type="radio" name="price" id="price_star_1"><label for="price_star_1"><b>1 Stern</b></label>
</fieldset>   

<fieldset>
 <legend>Scalability:</legend>
  <input type="radio" name="scalability" id="scalability_star_5"><label for="scalability_star_5"><b>5 Sterne</b></label>
  <input type="radio" name="scalability" id="scalability_star_4"><label for="scalability_star_4"><b>4 Sterne</b></label>
  <input type="radio" name="scalability" id="scalability_star_3"><label for="scalability_star_3"><b>3 Sterne</b></label>
  <input type="radio" name="scalability" id="scalability_star_2"><label for="scalability_star_2"><b>2 Sterne</b></label>
  <input type="radio" name="scalability" id="scalability_star_1"><label for="scalability_star_1"><b>1 Stern</b></label>
</fieldset>
      <button type="reset">Eingaben zurücksetzen</button>
</form>
</body>
</html>

Alles anzeigen

djheke

Das sollte klappen

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rating</title>
<style>




#form_wrapper fieldset label {
  unicode-bidi: bidi-override;
  direction: ltr;
}


#form_wrapper fieldset {
 border:none;
 padding:0;
}
#form_wrapper legend {
 margin-top:11px;
 width:100px;
 float:left;
}


#form_wrapper fieldset label:before {
 content:"\2605" ;
 color:black;
 font-size:2rem;
}


#form_wrapper fieldset input:checked ~ label:before {
 content:"\2606" ;
 color:black;
}


#form_wrapper fieldset input {
 display:none;
}


#form_wrapper select {
 display:block;
}


</style>
</head>
<body>


<form id="form_wrapper" name="" action="" method="post">


<fieldset>
 <legend>Price:</legend>
  <label for="price_star_1">1</label><input type="radio" name="price" id="price_star_1">
  <label for="price_star_2">2</label><input type="radio" name="price" id="price_star_2">
  <label for="price_star_3">3</label><input type="radio" name="price" id="price_star_3">
  <label for="price_star_4">4</label><input type="radio" name="price" id="price_star_4">
  <label for="price_star_5">5</label><input type="radio" name="price" id="price_star_5">
</fieldset>   

<fieldset>
 <legend>Scalability:</legend>
  <label for="scalability_star_1">1</label><input type="radio" name="scalability" id="scalability_star_1">
  <label for="scalability_star_2">2</label><input type="radio" name="scalability" id="scalability_star_2">
  <label for="scalability_star_3">3</label><input type="radio" name="scalability" id="scalability_star_3">
  <label for="scalability_star_4">4</label><input type="radio" name="scalability" id="scalability_star_4">
  <label for="scalability_star_5">5</label><input type="radio" name="scalability" id="scalability_star_5">
</fieldset>


<fieldset>
 <legend>Performance:</legend>
  <label for="performance_star_1">1</label><input type="radio" name="performance" id="performance_star_1">
  <label for="performance_star_2">2</label><input type="radio" name="performance" id="performance_star_2">
  <label for="performance_star_3">3</label><input type="radio" name="performance" id="performance_star_3">
  <label for="performance_star_4">4</label><input type="radio" name="performance" id="performance_star_4">
  <label for="performance_star_5">5</label><input type="radio" name="performance" id="performance_star_5">
</fieldset>


<fieldset>
<legend>Usability:</legend>
  <label for="usability_star_1">1</label><input type="radio" name="usability" id="usability_star_1">
  <label for="usability_star_2">2</label><input type="radio" name="usability" id="usability_star_2">
  <label for="usability_star_3">3</label><input type="radio" name="usability" id="usability_star_3">
  <label for="usability_star_4">4</label><input type="radio" name="usability" id="usability_star_4">
  <label for="usability_star_5">5</label><input type="radio" name="usability" id="usability_star_5">
</fieldset>

</form>
</body>
</html>

Alles anzeigen

Valuewerte im Label zur Orientiereung eingetragen und keine Hover-Funktionalität.

djheke

Hier habe ich mal das Formular weiter gekürzt. Kannst ja mal probieren, ob es in puncto CSS funktioniert.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rating</title>
<style>




#form_wrapper fieldset label {
  unicode-bidi: bidi-override;
  direction: rtl;
}


#form_wrapper fieldset {
 border:none;
 padding:0;
}
#form_wrapper legend {
 margin-top:11px;
 width:100px;
 float:left;
}


#form_wrapper fieldset label:before {
 content:"\2606" ;
 color:red;
 font-size:2rem;
}


#form_wrapper fieldset input:checked ~ label:before {
 content:"\2605" ;
 color:red;
}


#form_wrapper fieldset input {
 display:none;
}


#form_wrapper select {
 display:block;
}


</style>
</head>
<body>


<form id="form_wrapper" name="" action="" method="post">


<fieldset>
 <legend>Price:</legend>
  <input type="radio" name="price" id="price_star_1"><label for="price_star_1"></label>
  <input type="radio" name="price" id="price_star_2"><label for="price_star_2"></label>
  <input type="radio" name="price" id="price_star_3"><label for="price_star_3"></label>
  <input type="radio" name="price" id="price_star_4"><label for="price_star_4"></label>
  <input type="radio" name="price" id="price_star_5"><label for="price_star_5"></label>
</fieldset>   

<fieldset>
 <legend>Scalability:</legend>
  <input type="radio" name="scalability" id="scalability_star_1"><label for="scalability_star_1"></label>
  <input type="radio" name="scalability" id="scalability_star_2"><label for="scalability_star_2"></label>
  <input type="radio" name="scalability" id="scalability_star_3"><label for="scalability_star_3"></label>
  <input type="radio" name="scalability" id="scalability_star_4"><label for="scalability_star_4"></label>
  <input type="radio" name="scalability" id="scalability_star_5"><label for="scalability_star_5"></label>
</fieldset>


<fieldset>
 <legend>Performance:</legend>
  <input type="radio" name="performance" id="performance_star_1"><label for="performance_star_1"></label>
  <input type="radio" name="performance" id="performance_star_2"><label for="performance_star_2"></label>
  <input type="radio" name="performance" id="performance_star_3"><label for="performance_star_3"></label>
  <input type="radio" name="performance" id="performance_star_4"><label for="performance_star_4"></label>
  <input type="radio" name="performance" id="performance_star_5"><label for="performance_star_5"></label>
</fieldset>


<fieldset>
<legend>Usability:</legend>
  <input type="radio" name="usability" id="usability_star_1"><label for="usability_star_1"></label>
  <input type="radio" name="usability" id="usability_star_2"><label for="usability_star_2"></label>
  <input type="radio" name="usability" id="usability_star_3"><label for="usability_star_3"></label>
  <input type="radio" name="usability" id="usability_star_4"><label for="usability_star_4"></label>
  <input type="radio" name="usability" id="usability_star_5"><label for="usability_star_5"></label>
</fieldset>

</form>
</body>
</html>

Alles anzeigen

Und, reicht es nich aus die Radio-Buttons auszuwerten?

djheke

Habe mal versucht Dein Formular zu vereinfachen.

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Salon Lifestyle by Sonja Nergiz</title>
<style>
#form_wrapper fieldset {
 border:none;
 padding:0;
}
#form_wrapper legend {
 margin-top:11px;
 width:100px;
 float:left;
}


#form_wrapper fieldset label:before {
 content:"\2606" ;
 color:#000;
 font-size:2rem;
}


#form_wrapper fieldset input:checked + label:before {
 content:"\2605" ;
 color:#000;
}


#form_wrapper fieldset input {
 display:none;
}


#form_wrapper select {
 display:block;
}


</style>
</head>
<body>
<div id="form_wrapper">
<form name="techform" action=/tech/3 method="post">


<input type="hidden" name="_token" value="hFFRHqcH9VV2b8I49tOODlsappyakYAXe4BmRcWz">


<fieldset>
 <legend>Price:</legend>
  <input type="hidden" name="price_1">
  <input type="checkbox" name="price_star_1" id="price_star_1">
  <label for="price_star_1"></label>


  <input type="hidden" name="price_2">
  <input type="checkbox" name="price_star_2" id="price_star_2">
  <label for="price_star_2"></label>


  <input type="hidden" name="price_3"">
  <input type="checkbox" name="price_star_3" id="price_star_3">
  <label for="price_star_3"></label>


  <input type="hidden" name="price_4">
  <input type="checkbox" name="price_star_4" id="price_star_4"">
  <label for="price_star_4"></label>


  <input type="hidden" name="price_4">
  <input type="checkbox" name="price_star_5" id="price_star_5">
  <label for="price_star_5"></label>
</fieldset>   

<fieldset>
 <legend>Scalability:</legend>
  <input type="hidden" name="scalability_1">
  <input type="checkbox" name="scalability_star_1" id="scalability_star_1">
  <label for="scalability_star_1"></label>

  <input type="hidden" name="scalability_2">
  <input type="checkbox" name="scalability_star_2" id="scalability_star_2">
  <label for="scalability_star_2"></label>

  <input type="hidden" name="scalability_3">
  <input type="checkbox" name="scalability_star_3" id="scalability_star_3">
  <label for="scalability_star_3" ></label>

  <input type="hidden" name="scalability_4">
  <input type="checkbox" name="scalability_star_4" id="scalability_star_4">
  <label for="scalability_star_4"></label>

  <input type="hidden" name="scalability_5">
  <input type="checkbox" name="scalability_star_5" id="scalability_star_5"">
  <label for="scalability_star_5"></label>
</fieldset>


<fieldset>
 <legend>Performance:</legend>
  <input type="hidden" name="performance_1">
  <input type="checkbox" name="performance_star_1" id="performance_star_1">
  <label for="performance_star_1"></label>

  <input type="hidden" name="performance_2">
  <input type="checkbox" name="performance_star_2" id="performance_star_2">
  <label for="performance_star_2"></label>

  <input type="hidden" name="performance_3">
  <input type="checkbox" name="performance_star_3" id="performance_star_3">
  <label for="performance_star_3"></label>

  <input type="hidden" name="performance_4">
  <input type="checkbox" name="performance_star_4" id="performance_star_4">
  <label for="performance_star_4"></label>

  <input type="hidden" name="performance_4"">
  <input type="checkbox" name="performance_star_5" id="performance_star_5"">
  <label for="performance_star_5"></label>
</fieldset>


<fieldset>
<legend>Usability:</legend>
  <input type="hidden" name="usability_1">
  <input type="checkbox" name="usability_star_1" id="usability_star_1">
  <label for="usability_star_1"></label>

  <input type="hidden" name="usability_2">
  <input type="checkbox" name="usability_star_2" id="usability_star_2"">
  <label for="usability_star_2"></label>

  <input type="hidden" name="usability_3">
  <input type="checkbox" name="usability_star_3" id="usability_star_3">
  <label for="usability_star_3"></label>

  <input type="hidden" name="usability_4">
  <input type="checkbox" name="usability_star_4" id="usability_star_4"">
  <label for="usability_star_4"></label>

  <input type="hidden" name="usability_5">
  <input type="checkbox" name="usability_star_5" id="usability_star_5">
  <label for="usability_star_5"></label>
</fieldset>


  <select name="level">
   <option selected='selected' value="1">Strategic</option>
   <option  value="2">Tactical</option>
   <option  value="3">Operative</option>
  </select>

  <input type="submit" name="action" value="Next">


                      
 </form>
</div>
</body>
</html>

Alles anzeigen

Und zu Deinem Problem. Du hast direction:rtl vergessen zu notieren.

Code

.rating {
     unicode-bidi: bidi-override;
     direction:rtl; /* Diese Angabe fehl bei Dir ! */
     text-align: center;
 }

djheke

Hm, komich. Ich verstehe garnicht wie man 2004 auf JS setzen konnte, wo es bestimmt noch mehr JS verweigerer gab. Und ohne JS funktioniert die gesamte Navi nicht. Das ist nicht gut. Ich persönlich mag so 'ne Explorer Navi überhaupt nicht. Sieht irendwie antiquiert aus.

djheke

Warum soll denn die Überschriftenbox immer genauso hoch sein wie die Inhaltsbox?
Hier mal ein simple Beispiel.

HTML

<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style>
* {
 margin:0;
 padding:0;
}


.flex {
 display: flex;
 justify-content:center;
}




.spalte_33  { flex-basis:33.334%;  margin:10px; background:#eee; border:1px solid #000;}


.spalte_33 h2 {
 background:#aad;
 padding:10px;
}


.spalte_33 p {
  padding:10px;
}
</style>
</head>
 
<body>




 


<div class="flex">
  <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis nat</p>
 </article> 


   <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
   </article> 


  <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
   </article> 
</div>


<div class="flex">
  <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
   </article> 


  <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
   </article> 


  <article class="spalte_33">
    <h2>Information</h2>
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,</p>
   </article> 
</div>
</body>
</html>

Alles anzeigen

djheke

Crossposting
https://www.html.de/threads/linkfe…ebdesign.58033/

https://www.html.de/threads/linkfe…ebdesign.58033/Es reicht völlig aus, einen Link auf html.de zu posten.

djheke

Warum es nicht funktioniert- k. A.
Aber reicht sowas nicht völlig aus

Code

<audio controls>
  <source src="http://clou-online.de/downloads/Pauline - Es regnet (Radio Edit).ogg" type="audio/ogg">
  <source src="http://clou-online.de/downloads/Pauline - Es regnet (Radio Edit).mp3" type="audio/mpeg">
  <source src="http://clou-online.de/downloads/Pauline - Es regnet (Radio Edit).wav" type="audio/wav>
Ihr Browser unterstützt kein Audio Element.
</audio>

djheke

:before funktioniert nur im Zusammenhang mit content:
a:before {
content:"Text davor";
}

djheke

Wo willst du deine Frage noch überall stellen?
https://www.html-seminar.de/forum/thread/6…3%BCr-homepage/
https://www.html.de/threads/respon…homepage.58003/

djheke

Du hast doch schon hilfreiche Tipps bekommen. Etwas Eigeninitiative wäre nicht von Nachteil.
https://www.html.de/threads/meta-v…pt-nicht.57987/

Beiträge von djheke

HTML und CSS - Navigation → Sonderbereich

Schaltfläche

Schaltfläche

HTML und CSS - Navigation

Horizontales Dropdown menu

Horizontales Dropdown menu

Rand und weiche Schatten

tabelle verschiebt designe

Nur einen Teil eines Textes anzeigen lassen

Sterne rating falsch herum

Sterne rating falsch herum

Sterne rating falsch herum

Sterne rating falsch herum

Sternchen in CSS

Zweiteilige Boxen

Linkfehler in Responsive Webdesign

Audioplayer wird in Firefox nicht angezeigt

CSS Menü Formatierung

Responsives Design für Homepage

Meta viewport klappt nicht