zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Onepager Website lädt mit MS Edge ewig -> Firefox, Chrome, Opera iOS normal schnell

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.09.2020, 11:24
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.09.2020
Beiträge: 4
chuck die pflanze befindet sich auf einem aufstrebenden Ast
Standard Onepager Website lädt mit MS Edge ewig -> Firefox, Chrome, Opera iOS normal schnell

Hallo zusammen,

ich hoffe, ich hab das richtige Forum nebst Unterforum (CSS) hier getroffen. Und ich hoffe auch, ich werde nicht gleich gesteinigt mit meiner Frage zum Problem. Also...

Als Website hatte ich mir einen schlichten Onepager vorgestellt. Da ich bei United Domains bin, gibt es da bereits eine Vorlage mit HTML und CSS kombiniert, die ich als Basis nehmen möchte.

https://blog.united-domains.de/2016/...age-anleitung/

https://blog.united-domains.de/wp-co...ge-Website.txt


Da ich nahezu keinerlei Erfahrung habe, ist es das Anpassen natürlich viel mit Trial and Error verbunden. Aber als Erscheinungsbild (ohne Inhalt) finde ich, es ist ganz schick geworden. (Die Seite ist noch nicht hochgeladen und die Bilder sind auf meiner Dropbox gespeichert).

Der HTML Code ist unten angezeigt und hier zur Einsicht bzw. Download:
https://www.dropbox.com/s/qtkbsy46vr...ge%20Test.html

Zum Problem: Die Website lädt mit MS Edge ewig. Auch sind die transparanten Farben der Navigationsleiste und des Hintergrundes nicht sichtbar. Mit Firefox, Chrome, Opera und auf iOS, ist alles in Ordnung und wie es sein soll.

Die HTML Datei bearbeite ich mit Wordpad++ und kann es dadurch direkt auf dem Rechner aufmachen, bzw. via Dropbox auf iOS testen.

Frage: Warum gibt es das Problem (Langsam & keine Transparenz) mit MS Edge? Ist das eventuell einfach zu lösen?


Code:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="ampTrax">
	<meta name="keywords" content="VT, Recording, Sounddesign, Theater, Live, Video, Licht, Ton, Light, Sound, Media">

    <title>ampTrax</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" type="text/css">

    <script src="https://use.fontawesome.com/5fb7047e6d.js"></script>

    <style>
        html {
          font-family: 'Open Sans', sans-serif;
          -ms-text-size-adjust: 100%;
          -webkit-text-size-adjust: 100%;
            box-sizing: border-box;
			scroll-behavior: smooth;
        }
		


        body {

            height:100%;
			overflow: scroll;
			background: #fff00;														/*Farbe bzw. Durchsichtigkeit Hintergrundbild*/
            margin-left: 0;
            margin-right: 0;
            color: #333;															/*Textfarbe gesamte Seite*/
            font-size: 15px;
            font-weight:300;
			-webkit-overflow-scrolling: touch;
        }
		
		body:after{
			content:"";
			position:fixed; /* stretch a fixed position to the whole screen */
			top:0;
			height:100vh; /* fix for mobile browser address bar appearing disappearing */
			left:0;
			right:0;
			z-index:-1; /* needed to keep in the background */
			background: url(https://dl.dropboxusercontent.com/s/2ckend9pmcutv5t/ampTrax_Hintergrundbild.JPG) center center;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
			background-size: cover;
		}

        p {
            margin: 5px 0;
            line-height: 25px;
        }

        a {
            text-decoration: none;
            color: #888;
        }

        h1 {
            font-size: 1.25rem;
        }

        b, strong {font-weight:400;}



        /* ========================================== */
        /* HEADER UND NAVIGATION */



        header {
            position: relative;
            margin: 10% auto 0%;												/*Abstand Logo nach oben und unten*/
            width: auto;
            max-width: 800px;
            height: auto;
            text-align: center;
        }
		
		.Logo {
			width: 100%;															/*Logo Style -> hier immer 100% Breite*/ 
			height: auto;
		}
		
		.Werbeblock {
			width: 100px;															/*Werbeblock Symbole Style -> hier immer 100% Breite*/ 
			height: 100px;
			margin: 5% auto 5%;
		}
			
		.Kontakt {
			width: 25%;															/*Kontakt Bild Style -> hier immer 100% Breite*/ 
			height: 25%;
		}

        nav {
            z-index: 9999;
            background-color: #00000090;											/*Hintergrundfarbe Navigationslinks*/
            margin-top: 0px;														/* Abstand zum Logo Top*/	
        }

        nav ul {
			display: table;
			width: 100%;
			list-style: none;
			margin: 0;														/* Abstand Hintergrund Navigationslinks zur 1. Sektion */
			padding: 0;	
			text-align: center;
        }

        nav ul li {
			display: table-cell;
			text-align: center;
            padding: 1em 1em;												/*Höhe Navigationsleiste Hintergrundfarbe bzw. Block und Abstand der Wörter*/
            color: #888;
        }

        nav ul li a {
            transition: color .5s ease;
            font-weight: 400;												/*Dicke der Navigationslinks Buchstaben*/
        }

        nav ul li a:hover,
        nav ul li a:active {
            color: #ffffff;											    	/*Farbe bei Mouse Over Links im Header*/
        }

		/* ========================================== */
        /* LINKS MOUSEOVER */

		a img.hover {
			display: none;
			width: 32px;
			height: 32px;
			margin-top: 0px;
		}
		
		a img.default {
			display: inherit;
			width: 32px;
			height: 32px;
			margin-top: 0px;
		}
		
		a:hover img.hover {
			display: inherit;
			width: 32px;
			height: 32px;
			margin-top: 0px;
		}
		
		a:hover img.default {
			display: none;
			width: 32px;
			height: 32px;
			margin-top: 0px;
		}

        /* ========================================== */
        /* BLOECKE / BEREICHE DER SEITE */

        section {
            position: relative;
            margin: 0 auto;
            text-align: center;
        }

        section:nth-child(even) {
            background-color: #00000050; 										/*Hintergrundfarbe Textbereich Block 1,3,5,7,9,usw.*/
        }
		
		section:nth-child(odd) {
            background-color: #eef2f5; 									/*Hintergrundfarbe Textbereich Block 2,4,6,8,10,usw. Werbeblock*/
        }

        figure {
            margin: 0;
        }

        figure img {
            max-width: 100%;
        }

        .multicolumn {
            -webkit-perspective:1;

            /* Anzahl Spalten */
            -webkit-column-count: 2; /* Ch, Saf, And, BB  */
            -moz-column-count: 2; /* Fx */
            column-count: 2; /* IE 10, Op 11.1+ */

            /* Abstand Spalten */
            -webkit-column-gap: 4em;
            -moz-column-gap: 4em;
            column-gap: 4em;
        }

        .one-column {
            margin-bottom: 60px;
        }

        .one-column p {
            margin-bottom: 1.5rem;
        }


        article {
            overflow: hidden;
            width: 50%;
            display: table-cell;
            padding-right: 50px;
        }

        article h3  {
            margin: 10px 0;
        }


        figcaption {
            display: inline-block;
            line-height: 25px;
            margin-top: 20px;
            max-width: 75%;
        }

        figcaption span {
            display: block;
            margin-bottom: 10px;
            font-weight: 400;
       }

        .callout {
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            padding: 0 10px 30px;
            width: auto;
            max-width: 800px;																	/*Breite des Textbereiches*/
        }

        .callout a {
            text-decoration: underline;
        }

        .callout a:hover {
            color: #333;
        }

        .callout > h2 {
            font-weight: 300;
            font-size: 30px;																	/*Überschriftgröße der Teilbereiche THEATER, FOH..., usw.*/
            text-align: center;
        }

        .callout > ul {
            padding-left: 1rem;
        }
        .callout > ul li {
            margin: 5px 0;
        }


        .definition-list dt {
            margin-bottom: 0.21rem;
            font-weight:400;
        }

        .definition-list dd {
            margin: 0 0 1.5rem 0;
        }

        .secondary-heading {
            font-weight: normal;
            font-size: 15px;																	/*Größe zweite Überschrift*/
            color: #000000;																		/*Farbe zweite Überschrift*/
        }

        .competency-heading {
            margin-top: 60px;
            font-weight: 400;
        }

        /* Lebenslaufbild oben */
        .cliped-image {
            border-radius: 100%;
            /* ff */

            /* Clip-Path als Alternative
            -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
            */
        }

        .zitat-image {
            display: inline-block;
            padding-right: 2px;
            width: 45px;
            height: 45px;
            vertical-align: top;
            line-height: 50px;
            text-align: center;
            background: #12a8b5;
        }

        .zitat-image + p {
            display: inline-block;
            margin: -5px 0 0 20px;
            width: 90%;
        }

        .section-arrow {
            position: relative;
            top: -20px;
            display: inline-block;
            width: 40px;
            height: 40px;
            background: #a0adb7;														/*Farbe des Kreis mit Pfeil nach unten*/
            border-radius: 50%;
            line-height: 40px !important;
            text-align: center;
            color: #fff;																/*Farbe des Pfeils des Kreis mit Pfeil nach unten*/
        }

        .back-to-top-button {
            position: relative;
            top: -40px;
            display: inline-block;
            width: 70px;
            height: 70px;
            background: #12a8b5;														/*Farbe des Kreis mit Pfeil nach oben*/
            border-radius: 50%;
            line-height: 70px !important;
            text-align: center;
            color: #fff;																/*Farbe des Pfeils des Kreis mit Pfeil nach oben*/
        }


        /* ========================================== */
        /* FOOTER */
        footer {
            clear: both;
            position: relative;
            margin: 160px auto 0;
            width: auto;
            height: 100px;
            text-align: center;
            background: #333;
            color: #7d7d7d;
        }

        footer a:hover {
            color: initial;
            text-decoration: underline;
        }

        footer .footer-copyright {
            margin: -40px auto 0; /* -40px --> gleicher Wert wie bei .back-to-top-button */
            max-width: 800px;
            text-align: left;
            padding-left: 10px;
        }

        footer i.rotate {
            /* Pfeil nach oben - rotieren */
            -webkit-transform: rotate(180deg); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
            -ms-transform: rotate(180deg); /* IE 9 */
            transform: rotate(180deg); /* IE 10, Fx 16+, Op 12.1+ */
        }


        /* ========================================== */
        /* HELFER-KLASSEN */

        .text-center {
            text-align: center;
        }

        .text-left {
            text-align: left !important;
        }

        .clear {
            clear: both;
        }

        .mt30 {
            margin-top: 35px !important;
        }

        .motto {
            margin-bottom: 50px;
        }

        .hr-small {
            margin: -20px auto 30px;
            width: 140px;																				/*Breite der Unterstrichlinie der Überschriften THEATER, FOH..., usw. */
            border: solid 2px #000000;																	/*Farbe der Unterstrichlinie der Überschriften THEATER, FOH..., usw. */
        }

        .font-licence {
            margin-top: 10px;
            font-size: 11px;
        }

        /* ========================================== */
        /* ICONS */
        .icons-social-media {
            list-style: none;
            padding-left: 0;
        }

        .icons-social-media > li {
            display: inline-block;
            padding: 0 7px 0 7px;
            color: #888;
        }

        .icons-social-media > li i {
            font-size: 20px;
        }

        .icons-social-media > li i:hover {
            color: #333;
            transition: color .5s ease;
        }

        .icon-location {
            color: #12a8b5;
            font-size: 25px !important;
        }

        .icon-mail {
            color: #12a8b5;
            font-size: 20px !important;
        }


        /* ========================================== */
        /* MEDIA QUERIES FUER RESPONSIVE LAYOUT */

        @media (max-width: 726px) {
            .motto  {
                text-align: center;
            }
            .motto  p {
                margin-top: 10px;
            }
        }

        @media (max-width: 641px) {
            article {
                display: block;
                width: 100%;
            }
            figure {
                margin: 30px auto 0;
            }
            figcaption {
                display: block;
                width: 55%;
                margin: 0 auto;
            }

            .multicolumn {
                -webkit-column-gap: 2em;
                -moz-column-gap: 2em;
                column-gap: 2em;
            }
        }
/*######################################################TESTBEREICH################################################################*/
/*######################################################TESTBEREICH################################################################*/
/*######################################################TESTBEREICH################################################################*/
/*######################################################TESTBEREICH################################################################*/



    </style>

</head>

<body>

<!-- ==================================================TESTBEREICH================================================================= -->
<!-- ==================================================TESTBEREICH================================================================= -->
<!-- ==================================================TESTBEREICH================================================================= -->
<!-- ==================================================TESTBEREICH================================================================= -->



<!-- ============================================================================================================================== -->
<!-- HEADER -->

<header id="header-start"> 		
	<img src="https://dl.dropboxusercontent.com/s/z61u7c9iixt46uh/ampTrax%20728x90%232%20wei%C3%9F.png" 										
	class="Logo"
	alt="ampTrax Logo">
<!-- ampTrax Logo mit Verweis auf CSS Logo -->	

<!--	
    <nav>
        <ul>
            <li><a href="#block-3">ARBEIT</a></li>
            <li><a href="#block-4">KONTAKT</a></li>
        </ul>
    </nav>
-->	


</header>


<header id="header-start"> 
	<nav>
        <ul>
            <li><a href="#block-2">
				<img class="default" src="https://dl.dropboxusercontent.com/s/2u9vy55dayd2erh/Lautsprecher%20128x128%20grau.png"/>
				<img class="hover" src="https://dl.dropboxusercontent.com/s/go39f8wz909vzj5/Lautsprecher%20128x128%20mouseover%20white.png"/>
			</a></li>
			<li><a href="#block-4">
				<img class="default" src="https://dl.dropboxusercontent.com/s/iyxhe0e7i41w7v9/Gluehbirne%20128x128%20grau.png"/>
				<img class="hover" src="https://dl.dropboxusercontent.com/s/j4l402gbz3iwlot/Gluehbirne%20128x128%20mouseover%20white.png"/>
			</a></li>
			<li><a href="#block-6">
				<img class="default" src="https://dl.dropboxusercontent.com/s/zmg27jkgumu22ne/Videotechnik%20128x128%20grau.png"/>
				<img class="hover" src="https://dl.dropboxusercontent.com/s/wheiq1ef0isaq1n/Videotechnik%20128x128%20mousover%20white.png"/>
			</a></li>
			<li><a href="#block-8">
				<img class="default" src="https://dl.dropboxusercontent.com/s/8ieul5huzsyae8h/Vorhang%20128x128%20grau.png"/>
				<img class="hover" src="https://dl.dropboxusercontent.com/s/oeih9ezuxubhsz2/Vorhang%20128x128%20mouseover%20white.png"/>
			</a></li>
			<li><a href="#block-10">
				<img class="default" src="https://dl.dropboxusercontent.com/s/fdev26rcsw6vs2u/Computer%20Kontakt%20128x128%20grau.png"/>
				<img class="hover" src="https://dl.dropboxusercontent.com/s/8ya066hs3w9ouc9/Computer%20Kontakt%20128x128%20mouseover%20white.png"/>
			</a></li>
        </ul>
    </nav>
</header>	



<!-- ============================================================================================================================== -->
<!-- BLOCK 1 -->
<section id="block-1">
    <div class="callout text-left">
        <h2>ARBEIT</h2>
        <hr class="hr-small"/>


        <h3 class="secondary-heading">EINE SPALTE</h3>
        <div class="one-column">
            <p>
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
			   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
				At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.
            </p>



			
        </div>

        <h3 class="secondary-heading">ZWEI SPALTEN</h3>
        <div class="multicolumn">
            <p>
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
			   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
			   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>

        <h3 class="competency-heading">MEINE KOMPETENZEN:</h3>

        <ul>
            <li>Dies und Das</li>
            <li>Jenes auch</li>
            <li>Das sowieso</li>
            <li>Und überhaupt</li>
            <li>Bla Bla Blub</li>
        </ul>
    </div>
</section>

<!-- ============================================================================================================================== -->
<!-- BLOCK 2 -->
<section id="block-2">
	<div>
		<img src="https://dl.dropboxusercontent.com/s/go39f8wz909vzj5/Lautsprecher%20128x128%20mouseover%20white.png" 										
		class="Werbeblock"
		alt="ampTrax Logo">
		<!-- ampTrax Logo mit Verweis auf CSS Logo -->		
	</div>
</section>

<!-- ============================================================================================================================== -->
<!-- BLOCK 3 -->
<section id="block-3">
    <i class="fa fa-chevron-down section-arrow" aria-hidden="true"></i>
    <div class="callout text-center">
        <h2>TONTECHNIK</h2>
        <hr class="hr-small"/>

        <article class="img-item">
            <figure>
                <img src="https://www.united-domains.de/beispiel-vorlage/images/bild_1.png" alt="Webapplikation">
                <figcaption>
                    <h3>
                        Livesound
                    </h3>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.
                </figcaption>
            </figure>
        </article>

        <article class="img-item">
            <figure>
                <img src="https://www.united-domains.de/beispiel-vorlage/images/bild_2.png" alt="Firmenplattform">
                <figcaption>
                    <h3>
                        Schallpegelmessung
                    </h3>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.
                </figcaption>
            </figure>
        </article>

        <br class="clear"/>
    </div>
</section>

<!-- ============================================================================================================================== -->
<!-- BLOCK 4 -->
<section id="block-4">
	<div>
		<img src="https://dl.dropboxusercontent.com/s/j4l402gbz3iwlot/Gluehbirne%20128x128%20mouseover%20white.png" 										
		class="Werbeblock"
		alt="ampTrax Logo">
		<!-- ampTrax Logo mit Verweis auf CSS Logo -->	
	</div>
</section>

<!-- ============================================================================================================================== -->
<!-- BLOCK 5 -->
<section id="block-5">
	<i class="fa fa-chevron-down section-arrow" aria-hidden="true"></i>
    <div class="callout text-left">
        <h2>LICHTECHNIK</h2>
        <hr class="hr-small"/>


        <h3 class="secondary-heading">EINE SPALTE</h3>
        <div class="one-column">
            <p>
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
			   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
				At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.
            </p>



			
        </div>

        <h3 class="secondary-heading">ZWEI SPALTEN</h3>
        <div class="multicolumn">
            <p>
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
			   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
			   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>

        <h3 class="competency-heading">MEINE KOMPETENZEN:</h3>

        <ul>
            <li>Dies und Das</li>
            <li>Jenes auch</li>
            <li>Das sowieso</li>
            <li>Und überhaupt</li>
            <li>Bla Bla Blub</li>
        </ul>
    </div>
</section>

<!-- ============================================================================================================================== -->
<!-- BLOCK 6 -->
<section id="block-6">
	<div>
		<img src="https://dl.dropboxusercontent.com/s/wheiq1ef0isaq1n/Videotechnik%20128x128%20mousover%20white.png" 										
		class="Werbeblock"
		alt="ampTrax Logo">
		<!-- ampTrax Logo mit Verweis auf CSS Logo -->	
	</div>
</section>

<!-- ============================================================================================================================== -->
<!-- BLOCK 7 -->
<section id="block-7">
    <i class="fa fa-chevron-down section-arrow" aria-hidden="true"></i>
    <div class="callout text-center">
        <h2>VIDEOTECHNIK</h2>
        <hr class="hr-small"/>

        <article class="img-item">
            <figure>
                <img src="https://www.united-domains.de/beispiel-vorlage/images/bild_1.png" alt="Webapplikation">
                <figcaption>
                    <h3>
                        Projektion
                    </h3>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.
                </figcaption>
            </figure>
        </article>

        <article class="img-item">
            <figure>
                <img src="https://www.united-domains.de/beispiel-vorlage/images/bild_2.png" alt="Firmenplattform">
                <figcaption>
                    <h3>
                        MadMapper
                    </h3>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.
                </figcaption>
            </figure>
        </article>

        <br class="clear"/>
    </div>
</section>

<!-- ============================================================================================================================== -->
<!-- BLOCK 8 -->
<section id="block-8">
	<div>
		<img src="https://dl.dropboxusercontent.com/s/oeih9ezuxubhsz2/Vorhang%20128x128%20mouseover%20white.png" 										
		class="Werbeblock"
		alt="ampTrax Logo">
		<!-- ampTrax Logo mit Verweis auf CSS Logo -->	
	</div>
</section>

<!-- ============================================================================================================================== -->
<!-- BLOCK 9 -->
<section id="block-9">
	<i class="fa fa-chevron-down section-arrow" aria-hidden="true"></i>
    <div class="callout text-left">
        <h2>BÜHNE</h2>
        <hr class="hr-small"/>


        <h3 class="secondary-heading">EINE SPALTE</h3>
        <div class="one-column">
            <p>
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
			   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
				At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit.
            </p>



			
        </div>

        <h3 class="secondary-heading">ZWEI SPALTEN</h3>
        <div class="multicolumn">
            <p>
               Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
			   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
			   At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
            </p>
        </div>

        <h3 class="competency-heading">MEINE KOMPETENZEN:</h3>

        <ul>
            <li>Dies und Das</li>
            <li>Jenes auch</li>
            <li>Das sowieso</li>
            <li>Und überhaupt</li>
            <li>Bla Bla Blub</li>
        </ul>
    </div>
</section>

<!-- ============================================================================================================================== -->
<!-- BLOCK 10 -->
<section id="block-10">
	<div>
		<img src="https://dl.dropboxusercontent.com/s/8ya066hs3w9ouc9/Computer%20Kontakt%20128x128%20mouseover%20white.png" 										
		class="Werbeblock"
		alt="ampTrax Logo">
		<!-- ampTrax Logo mit Verweis auf CSS Logo -->	
	</div>
</section>

<!-- ============================================================================================================================== -->
<!-- BLOCK 11 -->
<section id="block-11">
    <i class="fa fa-chevron-down section-arrow" aria-hidden="true"></i>
    <div class="callout text-center">
        <h2>KONTAKT</h2>
        <hr class="hr-small"/>

<img src="" alt="Kontakt"
	class="Kontakt"
	alt="Kontakt">
 
    </div>
</section>

<!-- ============================================================================================================================== -->
<!-- FOOTER -->
<footer>
    <a href="#header-start" class="back-to-top-button"><i class="fa fa-chevron-down rotate" aria-hidden="true"></i></a>
    <div class="footer-copyright">
        &copy; Das ist ein Blindtext

        <div class="font-licence">
            <a href="http://fortawesome.github.com/Font-Awesome/">FontAwesome</a> icons licensed under <a href="http://scripts.sil.org/OFL_web"> SIL OFL</a>.
        </div>
    </div>
</footer>

</body>
</html>
Vielen Dank schonmal
chuck
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.09.2020, 13:48
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Solange die Seite nicht online ist läßt sich dir nicht helfen. Sinnvoll wäre es aber auch, wenn du dann das Problem einkreist und uns sagst, was du versucht hast das Problem zu finden
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.09.2020, 23:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.09.2020
Beiträge: 4
chuck die pflanze befindet sich auf einem aufstrebenden Ast
Standard

Ich hab die Website noch nicht veröffentlicht, weil sie im Entstehen begriffen ist. Ich dachte es ginge ja das html herunterzuladen und einfach mit dem Browser zu öffnen. HTML und CSS sind in einer Datei und die Bilder sind in meine Dropbox verlinkt. Zum Versuch hab ich sie nun mal auf GitHub hochgeladen.

https://jenars.github.io

Komischerweise lädt es nun mit dem MS Edge um ein vielfaches schneller, als die HTML direkt vom Rechner zu öffnen. Aber die Transparenz ist immer noch nicht vorhanden. Kann das jemand bestätigen?

lg chuck

Geändert von chuck die pflanze (08.09.2020 um 23:09 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 09.09.2020, 09:09
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Und was hast du bisher getan um dein Problem einzugrenzen?
Es wäre hilfreich wenn du denen, von denen du Hilfe erwartest, ein bisschen unter die Arme greifen würdest und nicht erwartest das wir jetzt alle deine Seite auf jeden Punkt untersuchen um rauszufinden was du meinst.

Es wäre z.b. naheliegend wenn du das entsprechende Stück Code das du für verantwortlich hälst anzuschauen und z.b. separat auszuprobieren, um festzustellen ob der Edge damit prinzipiell umgehen kann.

Ich kann beim drüberschauen über die Seite nicht sofort feststellen, welche Transparenz du meinst und finde auch die Schnelle (ich suche nach opacity) auch keinen Code der diese angibt.
Mit Zitat antworten
  #5 (permalink)  
Alt 09.09.2020, 10:21
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Stelle auch sicher dass du die aktuelle Version von Edge verwendest, dann ist die Darstellung gleich wie in Chrome (da beide die selbe rendering-Engine verwenden)
Oder musst du aus einem speziellen Grund die alte Version von Edge unterstützen?
Mit Zitat antworten
  #6 (permalink)  
Alt 09.09.2020, 22:41
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.09.2020
Beiträge: 4
chuck die pflanze befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Und was hast du bisher getan um dein Problem einzugrenzen?
Es wäre hilfreich wenn du denen, von denen du Hilfe erwartest, ein bisschen unter die Arme greifen würdest und nicht erwartest das wir jetzt alle deine Seite auf jeden Punkt untersuchen um rauszufinden was du meinst.

Es wäre z.b. naheliegend wenn du das entsprechende Stück Code das du für verantwortlich hälst anzuschauen und z.b. separat auszuprobieren, um festzustellen ob der Edge damit prinzipiell umgehen kann.

Ich kann beim drüberschauen über die Seite nicht sofort feststellen, welche Transparenz du meinst und finde auch die Schnelle (ich suche nach opacity) auch keinen Code der diese angibt.
Ja sorry! ...ich bin da nicht so firm leider. Auf jeden fall danke schonmal für die Hilfe! Also für die Transparenz der Textbereiche die das Hintergrundbild durchscheinen lassen, ist folgender CSS Code zuständig:

Code:
        section:nth-child(even) {
            background-color: #00000050;
        }
Über die 50 im Farbcode, wird die Transparenz festgelegt. Für die Transparenz des Hintergrunds der Navigationslinks, ist dies genauso im CSS festgelegt:

Code:
        nav {
            z-index: 9999;
            background-color: #00000050;	
            margin-top: 0px;
        }
Damit hat nur MS Edge Probleme.

Zitat:
Zitat von cloned Beitrag anzeigen
Stelle auch sicher dass du die aktuelle Version von Edge verwendest, dann ist die Darstellung gleich wie in Chrome (da beide die selbe rendering-Engine verwenden)
Oder musst du aus einem speziellen Grund die alte Version von Edge unterstützen?
Hat das was du fragst etwas damit zu tun?

Code:
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
Das kommt aus der Vorlage von United Domains. Ich hab da ehrlich gesagt, keine Ahnung von. Ich hatte nur via Trial and Error die Vorlage angepasst. Mit Firefox, Opera, Chrome, iOS sah es immer gut aus. Nur mit Edge hab ich erst spät getestet und da viel mir die fehlende Transparenz auf, sowie das langsame rendern der HTML wenn sie vom Rechner direkt geöffnet wurde.

Edge wird vermutlich immer mit Windows geupdatet. Ich hab zumindest keine Funktion diesbezüglich seperat gefunden. Ich denke also, ich hab die aktuelle Version. Wie kann ich das rausfinden?

Ja tut mir leid, wenn ich hier total laienhaft rumdoktere. Ich find das Ergebnis eigentlich sehr hübsch. Es ging schnell und ich kann den Inhalt ebenso schnell selbst anpassen. Schade nur das Edge da nicht komplett mitmacht.

lg chuck

Geändert von chuck die pflanze (09.09.2020 um 22:43 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 10.09.2020, 08:43
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von chuck die pflanze Beitrag anzeigen
Ja sorry! ...ich bin da nicht so firm leider. Auf jeden fall danke schonmal für die Hilfe! Also für die Transparenz der Textbereiche die das Hintergrundbild durchscheinen lassen, ist folgender CSS Code zuständig:

Code:
        section:nth-child(even) {
            background-color: #00000050;
        }
Über die 50 im Farbcode, wird die Transparenz festgelegt. Für die Transparenz des Hintergrunds der Navigationslinks, ist dies genauso im CSS festgelegt:

Code:
        nav {
            z-index: 9999;
            background-color: #00000050;	
            margin-top: 0px;
        }
Damit hat nur MS Edge Probleme.
Grundsätzlich?
wie gesagt einfacher und für uns wäre es, wenn du dieses Problem erst mal selbst prüfst, z.b. in dem du eine Seite baust wo nur diese Eigenschaft sichtbar ist. Dann wüßtest du ob das Problem am Browser oder am Code liegt.

Ich hab jetzt mal schnell mit "edge transparenz background-color" gesucht und das gefunden https://stackoverflow.com/questions/...in-ie#48721517
Bezieht sich aber auf den IE.
Mit Zitat antworten
  #8 (permalink)  
Alt 10.09.2020, 14:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.09.2020
Beiträge: 4
chuck die pflanze befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von protonenbeschleuniger Beitrag anzeigen
Grundsätzlich?
wie gesagt einfacher und für uns wäre es, wenn du dieses Problem erst mal selbst prüfst, z.b. in dem du eine Seite baust wo nur diese Eigenschaft sichtbar ist. Dann wüßtest du ob das Problem am Browser oder am Code liegt.

Ich hab jetzt mal schnell mit "edge transparenz background-color" gesucht und das gefunden https://stackoverflow.com/questions/...in-ie#48721517
Bezieht sich aber auf den IE.
Ja das hatte mit Edge nie funktioniert. Du hast natürlich recht, ich bin halt absolut kein Profi. Noch nicht mal Anfänger, würde ich sagen. Dachte wenn alle anderen Browser es richtig rendern, muß es ja am Edge liegen.

Danke für den Link!! Das war die Lösung! Super!! Vielen Dank! Ist tatsächlich naheliegend einfach nach dem Problem wortwörtlich zu googeln. Wieder was gelernt.

Jetzt kann ich beginnen den ganzen Quatsch mal mit Inhalt zu füllen. Sicherlich taucht die eine oder andere Frage noch auf.

1001 Dank
lg chuck
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FireFox und Chrome benutzen CSS nicht, IE und Opera schon Martin69 CSS 7 07.02.2012 13:28
div -> Border -->> Wirkung opera firefox Holger (HMR) CSS 1 01.04.2005 18:44


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:08 Uhr.