Beiträge von wisdomsoz

wisdomsoz · 21. Juli 2018

Okay, nvm, ich hab es schon gelöst.

Kann geschlossen werden.

Ich musste den Knoten zum Einbinden der CSS Datei in einen <head> Knoten machen.

wisdomsoz · 21. Juli 2018

Hi,

ich hätte durchaus Interesse, ich hätte da echt Bock drauf!

Bin auch gerade dabei, html und css zu lernen und kreativ bin ich auch.

Biete mich da gerne an, denn ich bin da auch noch am Anfang!

wisdomsoz · 21. Juli 2018

Hallo,

ich bin gerade dabei, mich mit Web-Entwicklung zu beschäftigen.

Ich habe mit html jetzt meine erste kleine Portfolio Seite entwickelt und mit css etwas gestaltet.

Anfangs habe ich die css Anweisungen alle im header der html (index.php) Datei gehabt, jetzt will ich die CSS Anweisungen aus Gründen der Übersichtlichkeit aber in eine extra Datei auslagern und in meine index.php einbinden.

Soweit habe ich das auch geschafft, nur ein kleines Problem ist aufgetreten.

Wenn ich die Seite lade (lokal auf meinem Rechner), blitzt ganz kurz der Seiteninhalt unformatiert auf. Anschließend sieht die Seite wieder so aus wie sie soll.

Ich habe schon gegoogelt, man bezeichnet das ja wohl als "FOUC", allerdings habe ich keine hilfreichen Lösungsansätze gefunden.

Anbei der Code, vielleicht weiß jemand von euch was ich anpassen muss:

CSS: style.css

.bar {
                text-align: center;
                vertical-align: center;
                 // margin-left: 80px;
            }
                .bar a.home {
                 vertical-align: center;
                margin-right: 1cm;
                 color: white;
                 text-decoration: none;
                 padding: 14px 16px;
                 border-bottom: 1px solid white;
                 border-radius: 5px;
                 
            }
                .bar a.about {
                 vertical-align: center;
                 margin-right: 1cm;
                 color: white;
                 text-decoration: none;
                 padding: 14px 16px;
                 border-bottom: 1px solid white;
                 border-radius: 5px;
            }
                .bar a.contact {
                 vertical-align: center;
                 margin-right: 1cm;
                 color: white;
                 text-decoration: none;
                 padding: 14px 16px;
                 border-bottom: 1px solid white;
                 border-radius: 5px;
            }
                .bar a.faq {
                 margin-left: 0cm;
                 color: white;
                 text-decoration: none;
                 padding: 14px 16px;
                 border-bottom: 1px solid white;
                 border-radius: 5px;
            }
            .banner {
                text-align: center;
                margin-top: 10cm;
                font-size: 60pt;
                font-family: "Times New Roman", Times, serif;
                color: white;
            }
            
            .banner .portfolio {
                align: right;
                font-size: 15pt;
            }
            
            body {
                background-image: url("./img/background.jpg"); 
                background-color: #cccccc;
            }
            
            .content {
                font-family: "Times New Roman", Times, serif;
                color: white;

                margin-left: auto;
                margin-right: auto;

            }

Alles anzeigen

HTML

<!DOCTYPE html>
<html>
    <header>
        <link href="style.css"  type="text/css" rel="stylesheet">
        <title> test </title>
    </header>
    <body>
        <div class="bar">
            <a class="home" href="home.php"> Home </a>
            <a class="about" href="about.php"> About </a>
            <a class="contact" href="contact.php"> Contact </a>
            <a class="faq" href="faq.php"> FAQ </a>
        </div>

        <div class="banner">
            <p> bjoern </p>
        </div>
        
        <div class="content"; style="width: 600px; height: 300px";>
            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. 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.
        </div>
        

    </body>
</html>

Alles anzeigen

Beiträge von wisdomsoz

FOUC nach Auslagern von CSS Anweisungen in seperate Datei

Suche Lernpartner (Web)

FOUC nach Auslagern von CSS Anweisungen in seperate Datei