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:
.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;
}<!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>