nicht angemeldet
Hallo Max,
HTML (5) und CSS aus dem 21. Jahrhundert ;-))
hier deine „default.html“
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Kraut und Rüben</title>
<link rel="stylesheet" type="text/css" href="formate.css">
</head>
<body>
<iframe src="frame.html"></iframe>
<section>
<h1>Willkommen</h1>
<nav>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
<a href="#">Google</a>
</nav>
</section>
</body>
</html>
und hier die „frame.html“
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Rüben im Kraut</title>
<style>
[code lang=css]body {
margin: 0;
}
section {
width: 283px;
background-color: lime;
margin: 2px;
}
p {
font-family: Arial, Sans-Serif;
margin: 0 0 10px 0;
}
p:last-child {
margin-bottom: 2px;
}
</style>
</head>
<body>
<section>
<p>111111111</p>
<p>…</p>
</section>
</body>
</html>[/code]
und die „formate.css“
body {
margin: 2px 10px;
}
iframe {
position:fixed;
top: 295px;
height: calc(100% - 298px);
width: 1000px;
background-color: Orange;
border: 1px solid Black;
}
section {
width: 1000px;
}
h1 {
text-align: center;
background-color: Cyan;
margin: 0;
}
nav {
white-space: nowrap;
text-align: center;
}
a {
text-decoration: none;
color: Black;
display: inline-block;
border-radius: 0 0 15px 15px;
width: 11%;
padding: 3px 3px 0 3px;
transition: .5s .25s;
border: 1px solid White;
border-top: none;
}
a:hover, a:focus {
background-color: Cyan;
text-shadow: 1px 1px 1px Gray;
padding-bottom: 12px;
transition: .5s;
outline: none;
border-color: Darkcyan;
}
Damit kannst du ein wenig herumspielen und vielleicht inspiriert es dich ein wenig tiefer in die neuen Möglichkeiten von HTML5 reinzuschnuppern.
Grüße Moritz
PS: nur mir dem aktuellen Firefox herumgespielt
Der Martin
Matthias Apsel
Gunnar Bittersmann
Auge