Webdesign – die besten Beiträge

Wie bei html bei bild so copyright machen?

Also ich will dass bei jedem Bild so copyright an der Seite ist und habe so ein Code gemacht aber alle copyright sachen werden an einer Stelle angezeigt und nicht bei den Bildern.

       <figure>
            <img class="cover" src="https://cdnb.artstation.com/p/assets/images/images/019/622/599/large/-3.jpg?1564323970"style="object-position: 50% 100%;">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by Denis Nigmatullin on artstation
            </figcaption>  
           <img style="position: absolute; left: 70%; top: 27%; width: 250px;" src="https://i.pinimg.com/originals/ca/83/ed/ca83ed22042d9846d568682d956d09bf.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption>
           <img style="position: absolute; right:91%;  top: 0%; width: 100px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg/910px-Akhilleus_Patroklos_Antikensammlung_Berlin_F2278.jpg"> 
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);position: absolute; right:91%;  top: 0%;">
               Image by Bibi Saint-Pol on wikimedia
           </figcaption>  
            <img style="position: absolute; right: 91%;  top: 18%; width: 100px;" src="https://64.media.tumblr.com/55d89b8a87818f817ec8851154739637/tumblr_npwai2nq8T1tfr4rfo1_640.jpg">
            <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by sheepskeleton on artstation
            </figcaption>   
           <img style="position: absolute; right: 91%;  top: 42%; width: 100px;" src="https://i.pinimg.com/564x/c6/10/5f/c6105feba2db225b5d7e52af0e427584.jpg">
           <figcaption class="copyright right"style="color: rgb(83, 58, 3);">
               Image by altantrengsingf on artstation
           </figcaption> 
        <img style="position: absolute; right: 91%;  top: 65%; width: 100px;" src="https://i.pinimg.com/736x/df/71/bc/df71bc1594556b26d9383e37ece74da5.jpg">
    </p>
    </section>
Homepage, HTML, Webseite, CSS, HTML5, Code, Webdesign, Webentwicklung, Frontend

Richtige ARIA - Accessibility Auszeichnungen?

Heute geht es mir um eine korrekte ARIA - Accessibility Auszeichnung:

A) Die (TAB) Skip- Links

<!-- Skip links -->
<nav role="navigation" aria-label="skiplinks" id="skiplinks">
	<a href="#main-content" class="skip-link">Zum Haupt&shy;inhalt springen</a>
	<a href="#totop" class="skip-link">Zum Skip&shy;button springen</a>
	<a href="#foot-global"class="skip-link">Zum Footer springen</a>
</nav>

B) Meine Haupt - Navigation

<!-- HAUPT - Navigation -->
<nav id="main-nav" aria-label="MainNav">
  <details id="site-nav-heading">
	<summary aria-labelledby="site-nav-heading">Haupt-&shy;Navigation</summary>
	  <ul aria-labelledby="site-nav-heading">
		<li><a href="">Website Erika Mustermann</a></li>
		<li><a href="">Blog Max Mustermann</a></li>
	  </ul>
  </details>
</nav>

C) Ein INTERNES SKIPPEN zu einzelnen BLOG-ARTIKELN (geordnet nach Datum & Uhrzeit

<nav id="navigations" class="" aria-labelledby="skiptosection-label">
<h3 id="skiptosection-label" class="visually-hidden">Intern-Site-Navigation</h3>
<div class="skipsection-links">
<details>
	<summary class="site-navigation-header">Inhalt</summary>					
		<ul class="site-nav-skiplinks">
			<li><a href="#blogartikel05">20-02-2024<span>13:00 Uhr</span></a></li>
			<li><a href="#blogartikel04">12-02-2024<span>14:30 Uhr</span></a></li>
		</ul>
</details>
</div>
</nav>

D) Zum Schluss noch der Nach-OBEN (SKIP - to - Top) Button

<!-- SKIP - to TOP LINK -->	
<nav id="skiptop" aria-labelledby="skiptop-label" class="scroll-top-wrapper">
<h2 class="visually-hidden">Skip-to-TOP</h2>
	<div id="skiptop-label" class="scroll-top_link">
		<a href="#skip-to-top"><span>skip to top</span></a>
	</div>
</nav>

Bitte das mal zu korregieren.

HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung

Ist es möglich bei <details> & <summary> den Marker (zum Beispl. mit einem SVG) zu ändern?

Ich möchte bei <details> & <summary> den Marker , der ja momentan noch ein aufrechters Dreieck ist , mit einem eigenen SVG ändern. Einmal hätte ich die einzelnen SVG (bars-solid.svg & times-solid.svg) in einem Ordner auf dem Server, aber ich habe dort auch Font Awesome 5.

Folgendes habe ich ausprobiert, hat aber leider keinen Effekt:

details summary::-webkit-details-marker {
        background: url(../web-fonts/SVG/bars-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }    

    details[open] summary::-webkit-details-marker,
    details[open] summary::marker {
      background: url(../web-fonts/SVG/times-solid.svg) center no-repeat;
        color: transparent;
        font-size: 2.1rem;
        font-weight: bold;
    }

Oder geht dies NUR mit einem ::after pseudo.element.

Könnt ihr mir es bitte mal zeigen?

<summary>Menü</summary>
   <ul>
       <li><a href="">Impressum &amp; rechtliches</a></li>
       <li><a href="">Website Erika Mustermann</a></li>
       <li><a href="">Blog Max Mustermann</a></li>
       <li><a href="">Blog Erika Mustermann</a></li>
   </ul>
</details>

Zusätzlich zu diesem Sandwich-Button würde ich in kleiner 
Schrift unter dem Botton dann noch Menü stehen haben.

Könnt ihr mir bitte helfen?

Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Webdesign, Webentwicklung

Meistgelesene Beiträge zum Thema Webdesign