nicht angemeldet
hallo @ all, mache jetzt mal kein neuen thread auf,
ich hab jetzt eine genaue vorstellung wie ich meine seite möchte,
und das OHNE java-script <piep> sch....e........ </piep> :o)
habe mir dazu html5 näher angeschaut, aber sicherlich ist mein code noch nicht korrekt....
<!DOCTYPE html>
<html dir="ltr" lang="de-DE">
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<head>
<meta charset="UTF-8" />
<meta name="description" content="Waldfrieden -- Tassilo Sturm" />
<title>Waldfrieden -- Tassilo Sturm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="icon" href="img.ico" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/TEST.css"/>
<script>
document.createElement('article');
document.createElement('section');
document.createElement('aside');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('figure');
document.createElement('figcaption');
</script>
</head>
<body>
<div id="wrapper"> <!-- Anfang vom wrapper-Bereich -->
<header class="page_header"> <h1 class="ueberschrift">Waldfrieden -- Tassilo Sturm </h1></header>
<div id="sidebar_menueblock_li">
<aside id="block1">
<p>
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.
</p>
</aside>
<nav class="block3">
<ul>
<li> <a href="#">Link 1</a></li>
<li> <a href="#">Link 2</a> </li>
<li> <a href="#">Link 3</a> </li>
<li> <a href="#">Link 4</a> </li>
</ul>
</nav>
<aside id="block2">
<p><b>
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 e
</b></p>
</aside>
</div>
<section id="main">
<h5> </h5>
<article class="sidebar_textblock">
<h5> </h5>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</p>
<nav class="block3">
<ul>
<li> <a href="#">Bild 1</a></li>
<li> <a href="#">Bild 2</a></li>
<li> <a href="#">Bild 3</a> </li>
<li> <a href="#">Bild 4</a> </li>
<li> <a href="#">Bild 5</a> </li>
</ul>
</nav>
</article>
<article class="sidebar_fotoblock">
<h5> </h5>
<span class="bild">
<img src="fotos/20150409_020705_web_klein.jpg" width="850" height="478" alt="">
</span>
<span class="bild">
<img src="fotos/20150409_020705_web_klein.jpg" width="850" height="478" alt="">
</span>
<span class="bild">
<img src="fotos/20150409_020705_web_klein.jpg" width="850" height="478" alt="">
</span>
</article>
<article class="sidebar_menueblock_re">
<h5> </h5>
<p>
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.
</p>
</article>
</section>
<footer role="contentinfo"> </footer>
</div> <!-- ENDE vom wrapper-Bereich -->
</body>
</html>
und dazu:
/* CSS Document */
article, section, aside, hgroup, nav, header, footer, figure, figcaption {
display: block;
}
*{
margin: 0px;
padding: 0px;
}
body {
font-size: 100.01% ;
font-family: 'Ubuntu', sans-serif;
color: #000000; background-color: #ffffff;
width: 100%;
margin-left: 0px;
margin-top: 0px;
}
p.ueberschrift {
margin: 0; padding: 0;
margin-top: 0.2em; margin-bottom: 0.2em; margin-left: 0; margin-right: 0;
font-size: 1.6em;
list-style-type: none;
}
h1.ueberschrift {
margin: 0; padding: 0;
margin-top: 0.2em; margin-bottom: 0.2em; margin-left: 0; margin-right: 0;
font-size: 1.5em;
list-style-type: none;
}
h5 {
margin:0;
font-size:0;
}
p {
margin: 0; padding: 0;
font-size: 1.1em;
list-style-type: none;
}
img {
margin: 0; padding: 0;
width: 100%;
height: auto;
max-width: 100%;
}
.bild {
width: 850px;
display:inline-block;
}
#wrapper {
min-width: 840px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-left: 1em;
padding-right: 1em;
background-color:#f1f1f1;
border: 3px dotted green;
}
header {
padding-left: 0.1em;
padding-right: 0.1em;
padding-top: 1em;
padding-bottom: 0.4em;
border: 3px dotted grey;
}
aside#block1 {
padding-left: 1.5em;
padding-right: 1em;
padding-top: 1.5em;
padding-bottom: 1em;
border: 3px dotted yellow;
}
aside#block2 {
padding-left: 1.5em;
padding-right: 1em;
padding-top: 2em;
padding-bottom: 1em;
border: 3px dotted yellow;
}
nav.block3 {
padding-left: 1.5em;
padding-right: 1em;
padding-top: 2em;
padding-bottom: 1em;
width:65%;
border: 3px dotted mediumpurple;
}
article.sidebar_textblock {
padding-left: 1.5em;
padding-right: 1em;
padding-top: 2em;
padding-bottom: 1em;
width:88%;
display: inline-block;
border: 3px dotted red;
}
article.sidebar_menueblock_li {
padding-left: 1.5em;
padding-right: 1em;
padding-top: 2em;
padding-bottom: 1em;
width:65%;
display: inline-block;
border: 3px dotted cadetblue;
}
article.sidebar_menueblock_re {
padding-left: 1.5em;
padding-right: 1em;
padding-top: 2em;
padding-bottom: 1em;
width:80%;
display: inline-block;
border: 3px dotted cadetblue;
}
article.sidebar_fotoblock {
padding-left: 1.5em;
padding-right: 1em;
padding-top: 2em;
padding-bottom: 1em;
max-width:700px;
overflow: scroll;
display: inline-block;
border: 3px dotted cadetblue;
}
#article {
width: 76%;
padding-right: 1.2em;
padding-top: 2em;
padding-bottom: 2em;
float: right;
border: 3px dotted orange;
}
footer {
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
clear: both;
border: 3px dotted dimgray;
}
#sidebar_menueblock_li {
width:25%;
float: left;
border: 3px dotted blue;
}
section#main {
width: 73.5%;
display: inline-block;
border: 3px dotted orange;
}
.nav ul {
margin: 0;
padding: 0.2em;
padding-right: 1.6em;
float: right;
border: springgreen 1px dashed;
}
.nav li {
margin: 0;
padding: 0;
font-size: 1.1em;
list-style: none;
display: inline-block;
border: darkorange 1px dashed;
}
.nav a, footermenue span {
margin: 0;
padding: 0;
padding-left: 0.4em;
padding-right: 1em;
padding-top: 0.4em;
padding-bottom: 0.4em;
font-size: 1.1em;
display: inline-block;
border: red 1px dashed;
}
Nur eine Frage habe ich, wie bekomme ich es hin das die drei Fotos waagerecht in einer zeile stehen (ja ich weiss, das ein häßlicher scrollbalken entsteht, aber das ist O.K.!)
ich habe alles ausprobiert: über inline: block; bis diverse floats.......
aber was mache ich falsch?
fragende grüsse der einsiedelnde
JürgenB
Gunnar Bittersmann