diedVIPs

Design der Indexseite





html knowhow












Hintergrund Scrolling erstellen

Der header und der footer stehen fest. Dazwischen bewegt sich das main-Element. Natürlich kann man header und footer auch nicht fixed machen. Das main-Element sieht dabei aus, als ob es ein iframe wäre.
So sieht´s aus

Hier sehen Sie nix.
Die ganze Seite ist das Design.

Quellcode
<html>
<head>

<style type="text/css">
body,.wrapper {margin: 1px auto;max-width: 95em;}
header {position: fixed;top: 0px; left: 0px; right: 0px; text-align: center; width:100%;padding: 1px; background: #F1F3F4; border-bottom: 1px solid #d5d5d5;}
main {display: block; background: transparent; border-color: #8a9da8; text-align:center; min-width: 95%;}
</style>
</head>

<body>
<header>Hier irgend etwas ....</header>
<main>Irgend etwas ....</main>
<footer><div class="wrapper">Irgend etwas. Z.B. Hans Busch</footer>

</body>
</html>



Webseiten Layout

Mit diesem Seitendesign können Sie Ihre Seiten gestalten. Es ist nicht notwendig, daß man den Navblock und die seitlichen Contentblöcke verwendet.
So sieht´s in der Theorie aus

Quellcode dazu
<html>
<head>
<style>
* {box-sizing: border-box;}
body {font-family: Arial; padding: 10px; background: #f1f1f1; }

/* Header/Blog Title */
.header {padding: 30px; text-align: center; background: white; }

.header h1 {font-size: 50px;}

/* Style the top navigation bar */
.topnav {overflow: hidden; background-color: #333;}

/* Style the topnav links */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;}

/* Change color on hover */
.topnav a:hover {background-color: #ddd;color: black;}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn { float: left;width: 75%;}

/* Right column */
.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;}

/* Fake image */
.fakeimg {background-color: #aaa;width: 100%;padding: 20px;}

/* Add a card effect for articles */
.card {background-color: white;padding: 20px;margin-top: 20px;}

/* Clear floats after the columns */
.row:after {content: "";display: table;clear: both;}

/* Footer */
.footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px;}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn { width: 100%;padding: 0;}  }

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.topnav a {float: none;width: 100%;}  }
</style>
</head>
<body>

<div class="header">
<h1>My Website</h1>
<p>Resize the browser window to see the effect.</p>
</div>

<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" style="float:right">Link</a>
</div>

<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
<div class="fakeimg"><p>Image</p></div>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>

<div class="footer">
<h2>Footer</h2>
</div>

</body>
</html>
So sieht´s danach aus




Damit der Head aussieht, wie er aussieht

Damit die Überschrift so aussieht, wie Sie aussieht, muß man einige Sachen beachten. Wenn Sie Überschriften, wie <h1> oder <h2> benutzen, machen die einen unsichtbaren Rand um die Schrift. Mit einem <div>-Befehl können Sie das ändern und auch die genaue Position festlegen.
So sieht´s aus



Quellcode
<html>
<head>

<style type="text/css">
.auto-style1 {font-family: "Sigmar One";font-size: 1.5em;color: #008080;}
.auto-style23 {border-width: 0px;}
</style>
</head>

<body>
<div style="left: 1%; top: 1em; position:absolute; height: 2em; width: 5.6em">
<a href="index.html"><img src="Bilder/HKhlogo.jpg" style="width: 100%; height:auto;" alt="diedVIPs" class="auto-style23" /></a></div>
<div style="left: 6%; top: 0.9em; position:absolute; height: 1em; width: 22.8em; color: #790D97;">
<h1 style="font-size: 1.5em"><strong>Design der Indexseite</strong></h1></div/> <br/><br/><br/><br/>
<div style="left: 8%; top: 1.3em; position:absolute; height: 2em; width: 17.6em" class="auto-style1"><h2 class="auto-style1">html knowhow</h2></div/>
</body>
</html>



Steuerleiste am Computer

Ein wichtiges Steuerelement am Computer ist die Steuerleiste, mit der man ganz schnell auf die Programme zugreifen kann. Einfach per pic and drop hier einfügen.
So sieht´s aus