andy
/
webdev
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

css

master
andy 2020-03-03 15:50:24 +01:00
parent 77672441ca
commit b44d483c1c
14 changed files with 301 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -48,4 +48,14 @@
* [Skeleton](http://getskeleton.com/) * [Skeleton](http://getskeleton.com/)
* [A Modern CSS Reset](https://hankchizljaw.com/wrote/a-modern-css-reset/) (Nur Reset-Funktion) * [A Modern CSS Reset](https://hankchizljaw.com/wrote/a-modern-css-reset/) (Nur Reset-Funktion)
### CSS Inhalte positionieren
* [CSS float – Positionieren und Umfließen](https://www.mediaevent.de/css/position-float.html)
* [CSS position](https://www.mediaevent.de/css/position.html)
* [Flexbox](https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/)
### Interne Links
* [float](html/float.html)
* [position](html/position)
* [flexbox](html/flex.html)
* [grid](html/grid.html)

2
css/code.css
View File

@ -34,7 +34,7 @@ code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
color: #657b83; /* base00 */ color: #657b83; /* base00 */
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em; font-size: .9em;
text-align: left; text-align: left;
white-space: pre; white-space: pre;
word-spacing: normal; word-spacing: normal;

29
css/position.css 100644
View File

@ -0,0 +1,29 @@
.bigbox{
width: 100%;
border: 2px solid yellowgreen;
padding: 1em 1em 0 1em;
position: relative;
min-height: 400px;
}
.box{
width: 32%;
height: 150px;
background-color: yellowgreen;
margin: 0 2% 2% 0;
overflow:auto;
}
.relative{
position: relative;
}
.absolute{
position: absolute;
bottom: -40px;
right: -40px;
}
.fixed{
position: fixed;
}
.sticky{
position: sticky;
top: 0;
}

22
css/struktur.css 100644
View File

@ -0,0 +1,22 @@
.bigbox{
width: 100%;
border: 2px solid yellowgreen;
padding: 1em 1em 0 1em;
}
.box{
width: 32%;
height: 150px;
background-color: yellowgreen;
margin: 0 2% 2% 0;
overflow:auto;
}
.floatleft{
float: left;
}
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}

8
css/style.css
View File

@ -11,13 +11,15 @@ header, footer{
background: #ddd background: #ddd
} }
header{ header{
background: linear-gradient(178deg, #000 0%,#000 70%,#fff 70%,#fff 100%); background:#000;
clip-path: polygon(0 0, 100% 0, 100% 60%, 0 200px);
} }
footer{ footer{
background: linear-gradient(2deg, #000 0%,#000 70%,#fff 70%,#fff 100%); background:#000;
clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 200px);
} }
header img{ header img{
padding-top: 62px; padding-top: 2px;
float: left; float: left;
} }
nav ul{ nav ul{

88
html/float.html 100644
View File

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Die HTML Struktur in Webseiten">
<title>HTML Struktur</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/code.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/struktur.css">
</head>
<body>
<header>
<div class="wrapper">
<a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
<nav role="navigation">
<ul>
<li><a href="float.html">Float</a></li>
<li><a href="position.html">Position</a></li>
<li><a href="flexbox.html">Flexbox</a></li>
<li><a href="grid.html">Grid</a></li>
</ul>
</nav>
</div>
</header>
<main role="main" class="wrapper">
<h1>Inhalt strukturieren mit css</h1>
<article>
<h2>Float</h2>
<div class="bigbox">
<div class="box floatleft"></div>
<div class="box clearfix"></div>
<div class="box floatleft"></div>
<div class="box floatleft"></div>
<div class="box clearfix"></div>
</div>
</article>
<article class="">
<h2>Die Boxen</h2>
<pre class="line-numbers language-html">
<code class="language-html">&lt;article&gt;
&lt;h2&gt;Float&lt;/h2&gt;
&lt;div class=&quot;box floatleft&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box clearfix&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box floatleft&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box floatleft&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box clearfix&quot;&gt;&lt;/div&gt;
&lt;/article&gt;
</code>
</pre>
<h2>& Der Clearfix</h2>
<pre class="line-numbers language-html">
<code class="language-css">.box{
width: 32%;
height: 150px;
background-color: yellowgreen;
margin: 0 2% 2% 0;
overflow:auto;
}
.floatleft{
float: left;
}
.clearfix:after {
content: ".";
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
</code>
</pre>
</main>
<footer>
<div class="wrapper">
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
</div>
</footer>
<script src="../js/code.js"></script>
</body>
</html>

2
html/formular.html
View File

@ -14,7 +14,7 @@
<body> <body>
<header> <header>
<div class="wrapper"> <div class="wrapper">
<img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"> <img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes">
<nav role="navigation"> <nav role="navigation">
<ul> <ul>
<li><a href="../index.html">Home</a></li> <li><a href="../index.html">Home</a></li>

2
html/formulare.html
View File

@ -15,7 +15,7 @@
<body> <body>
<header> <header>
<div class="wrapper"> <div class="wrapper">
<a href="../index.html"><img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a> <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
<nav role="navigation"> <nav role="navigation">
<ul> <ul>
<li><a href="semantik.html">Semantik</a></li> <li><a href="semantik.html">Semantik</a></li>

2
html/header.html
View File

@ -13,7 +13,7 @@
<body> <body>
<header> <header>
<div class="wrapper"> <div class="wrapper">
<a href="../index.html"><img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a> <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
<nav role="navigation"> <nav role="navigation">
<ul> <ul>
<li><a href="semantik.html">Semantik</a></li> <li><a href="semantik.html">Semantik</a></li>

2
html/navigation.html
View File

@ -14,7 +14,7 @@
<body> <body>
<header> <header>
<div class="wrapper"> <div class="wrapper">
<a href="../index.html"><img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a> <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
<nav role="navigation"> <nav role="navigation">
<ul> <ul>
<li><a href="semantik.html">Semantik</a></li> <li><a href="semantik.html">Semantik</a></li>

85
html/position.html 100644
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Die HTML Struktur in Webseiten">
<title>HTML Struktur</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/code.css">
<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="../css/position.css">
</head>
<body>
<header>
<div class="wrapper">
<a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
<nav role="navigation">
<ul>
<li><a href="float.html">Float</a></li>
<li><a href="position.html">Position</a></li>
<li><a href="flexbox.html">Flexbox</a></li>
<li><a href="grid.html">Grid</a></li>
</ul>
</nav>
</div>
</header>
<main role="main" class="wrapper">
<h1>Inhalt positionieren mit css</h1>
<article>
<h2>Float</h2>
<div class="bigbox relative">
<div class="box fixed"></div>
<div class="box absolute"></div>
<div class="box sticky"></div>
</div>
</article>
<article class="">
<h2>Die Boxen</h2>
<pre class="line-numbers language-html">
<code class="language-html">&lt;article&gt;
&lt;h2&gt;Float&lt;/h2&gt;
&lt;div class=&quot;bigbox relative&quot;&gt;
&lt;div class=&quot;box fixed&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box absolute&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;box sticky&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/article&gt;
</article>
</code>
</pre>
<h2>& Die Positionen</h2>
<pre class="line-numbers language-html">
<code class="language-css">.relative{
position: relative;
}
.absolute{
position: absolute;
bottom: -40px;
right: -40px;
}
.fixed{
position: fixed;
}
.sticky{
position: sticky;
top: 0;
}
</code>
</pre>
</main>
<footer>
<div class="wrapper">
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
</div>
</footer>
<script src="../js/code.js"></script>
</body>
</html>

2
html/semantik.html
View File

@ -14,7 +14,7 @@
<body> <body>
<header> <header>
<div class="wrapper"> <div class="wrapper">
<a href="../index.html"><img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a> <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
<nav role="navigation"> <nav role="navigation">
<ul> <ul>
<li><a href="semantik.html">Semantik</a></li> <li><a href="semantik.html">Semantik</a></li>

2
html/struktur.html
View File

@ -14,7 +14,7 @@
<body> <body>
<header> <header>
<div class="wrapper"> <div class="wrapper">
<a href="../index.html"><img src="../img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a> <a href="../index.html"><img src="../img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
<nav role="navigation"> <nav role="navigation">
<ul> <ul>
<li><a href="semantik.html">Semantik</a></li> <li><a href="semantik.html">Semantik</a></li>

23
index.html
View File

@ -14,7 +14,7 @@
<body> <body>
<header> <header>
<div class="wrapper"> <div class="wrapper">
<a href="index.html"><img src="img/logo_w.svg" alt="Mein logo" title="Der Titel meines Bildes"></a> <a href="index.html"><img src="img/logo.svg" alt="Mein logo" title="Der Titel meines Bildes"></a>
<nav role="navigation"> <nav role="navigation">
<ul> <ul>
<li><a href="html/semantik.html">Semantik</a></li> <li><a href="html/semantik.html">Semantik</a></li>
@ -87,14 +87,31 @@
<li><a href="https://purecss.io/">Pure.css</a></li> <li><a href="https://purecss.io/">Pure.css</a></li>
<li><a href="https://css.sitetent.com/">TentCSS</a></li> <li><a href="https://css.sitetent.com/">TentCSS</a></li>
<li><a href="http://getskeleton.com/">Skeleton</a></li> <li><a href="http://getskeleton.com/">Skeleton</a></li>
<li></li><a href="https://hankchizljaw.com/wrote/a-modern-css-reset/">A Modern CSS Reset</a> (Nur Reset-Funktion) <li><a href="https://hankchizljaw.com/wrote/a-modern-css-reset/">A Modern CSS Reset</a> (Nur Reset-Funktion)
</li> </li>
</ul> </ul>
<h3 class="mume-header" id="css-inhalte-positionieren">CSS Inhalte positionieren</h3>
<ul>
<li><a href="https://www.mediaevent.de/css/position-float.html">CSS float &#x2013; Positionieren und
Umflie&#xDF;en</a></li>
<li><a href="https://www.mediaevent.de/css/position.html">CSS position</a></li>
<li><a href="https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/">Flexbox</a></li>
</ul>
<h3 class="mume-header" id="interne-links-1">Interne Links</h3>
<ul>
<li><a href="file:///home/andy/cloud/schule/webdev/html/float.html">float</a></li>
<li><a href="file:///home/andy/cloud/schule/webdev/html/position">position</a></li>
<li><a href="file:///home/andy/cloud/schule/webdev/html/flex.html">flexbox</a></li>
<li><a href="file:///home/andy/cloud/schule/webdev/html/grid.html">grid</a></li>
</ul>
</main> </main>
<footer> <footer>
<div class="wrapper"> <div class="wrapper">
<p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p></div> <p><a title="Link zu Download" href="https://git.perin.work/andy/webdev">Download</a></p>
</div>
</footer> </footer>
<script src="js/code.js"></script> <script src="js/code.js"></script>
</body> </body>