Guten Tag,
Eine Webseite wurde mit einem Baukastensystem erstellt. Das Banner soll über die Navigation. Da dies mit dem Baukastensystem nicht möglich ist, möchte ich das selbst einstellen. Wie bewerkstellige ich dies? (kenne mich mit coden nicht so aus)
Im Anhang ist ein Screenshot. In den blassgrünen Bereich soll das Banner hin.
Gruss und vielen Dank
Da der Code zu lang ist: Hier der Link zur Page/Quellcode: http://www.5g-frei.ch/
Wusste jetzt nicht genau, wo das hin gehört, so schreibe ich es hier.
Ich möchte die Gestaltungsmöglichkeiten von Webbaukastensystemen kennenlernen.
Ichhabe eine Webseite mit dem Hoststar.ch-Baukastensystem erstellt,welches grosse Einschränkungen mit sich bringt. BestimmteLayout-Elemente können nicht verändert/verschoben werden. Eserlaubt auch keine Log-In Funktion zu internem Bereich fürMitglieder. Gewünscht ist: Bei Klick auf Menüpunkt "InternerBereich" soll Name und Passwort abgefragt werden. RichtigeEingabe: Weiterleitung zum internen Bereich.
Habe dabeinur wenige geeignete Baukastensysteme gefunden. 1bluist jenes, was dem bis jetzt am ehesten entspricht:https://webbaukasten.1blu.de/de-DE/. Der Support sagtezur Log-In Funktion zu internem Bereich für Mitglieder, folgendes:"Einzelne Bereiche Ihrer Webseite können mit einemPasswort-Schutz versehen werden." Ist dies nun das gleiche? Wasfür ein Baukastensystem käme sonst noch in Frage?
Soll auch responsive sein.
Vielen Dank
Klappt. Vielen Dank.
Entfernt, da es nicht ganz funktionierte. Nochmals eingefügt. Fast ganz am Ende, bei div id mitte
<!DOCTYPE HTML>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox layout</title>
<meta name="description" content="5G-freie Schweiz.ch - Informationen über 5G">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin:0;
padding:0;
}
body {
background-color: #4e535d;
display:flex;
flex-direction:column;
}
header {
width: 100%;
height: 170px;
background-image: url("./images/Test3.jpg");
color: white;
text-align: center;
font-family: "Alien Encounters", "Arial Black", Verdana;
}
#unten img {
margin-top:16px;
height: 62px;
}
#oben img {
height: 164px;
width: 1901px;
}
nav {
list-style-type: none;
background-color:#2e3545;
width:calc(100% - 10px);
}
nav li {
display: inline-block;
margin-left: -4px;
}
nav a {
display: inline-block;
color: white;
font-family: Arial, Verdana, Sans-serif;
font-size: 0.83em;
font-weight:600;
height:100%;
width:100%;
padding:17px 16px 20px 6px;
text-decoration:none;
}
nav >ul> li:nth-child(1){
background-color: #6e7481;
border-left: 2px solid #4e535d;
border-right: 2px solid #4e535d;
width: 140px;
text-align:center;
margin-left: 485px;
}
nav >ul> li:nth-child(2){
background: #6e7481;
width: 170px;
text-align: center;
}
nav >ul> li:nth-child(3){
background: #6e7481;
border-left: 2px solid #4e535d;
border-right: 2px solid #4e535d;
width: 110px;
text-align: center;
}
nav >ul> li:nth-child(4){
background: #6e7481;
border-right: 2px solid #4e535d;
width: 110px;
text-align: center;
}
main{
display:flex;
flex-direction:row;
}
#left,#rechts{
flex:1;
margin:110px;
padding:55px;
color: #e6e6e6;
font-family: Arial, Verdana, sans-serif;
font-size: 0.77em;
}
#mitte{
flex:6;
display:flex;
flex-direction:column;
margin:-15px 0 0px 0;
}
#mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf{
min-height: 100px;
font-family: Arial, Verdana, sans-serif;
font-size: 0.77em;
height:auto;
margin-bottom:10px;
background-color: #55607e;
padding-top:85px;
padding-left:85px;
padding-bottom:105px;
padding-right:85px;
}
#mitte_eins{
color:white;
margin-top: 1.8em;
text-align: justify;
}
#mitte_eins img{
float:right;
padding:0 0 0px 10px;
}
#mitte_zwei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_zwei img{
float:right;
padding:0 0 10px 10px;
}
#mitte_drei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_drei img{
float: right;
padding:0 0 10px 10px;
}
#mitte_vier{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_vier img{
float:right;
padding:10px 0 10px 10px;
}
#mitte_fünf{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_fünf img{
float:right;
padding:10px 0 10px 10px;
}
footer{
display:flex;
background-color: #2e3545;
height:135px;
justify-content: space-between;
align-items: center;
font-family: Arial, Verdana, sans-serif;
color: #d7d7d8;
padding: 10px;
margin-top:-6px;
}
.footer_left {
margin-left: 475px;
margin-top: 5px;
font-size: 0.8em;
line-height: 2.2em;
}
.footer_right{
text-align: right;
margin-right:475px;
margin-top: 5px;
font-size: 0.8em;
line-height: 2.2em;
}
.footer_center{
font-size:0.7em;
margin-top: 90px;
}
a {text-decoration: none;
}
</style>
<body>
<header>
<div id="oben">
<img class="bildheader" src="Test3.jpg" alt="Header">
</div>
</header>
<nav>
<ul class="nav">
<li><a href="index.html">Neuigkeiten</a></li>
<li><a href="#buecherverzeichnis">Studien & Berichte</a></li>
<li><a href="rezensionen.html">Videos</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="left">
Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.
</div>
<div id="mitte">
<div style="line-height:2.2;" id="mitte_eins">
Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br>
Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br>
<a href="rezensionen.html#mitte_eins" style="color: white">Das Plocher-Energie-System - Ernstfried Prade, Roland Plocher <b> neu </b></a> <br><br>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/TAbuqoDSngU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div id="rechts">
Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.
</div>
</main>
<footer>
<div class="footer_left">
<b>Unser Netzwerk</b>
<p>www.asdfs.ch<p><p>www.asdraesas.ch</p><p>www.ehsdfsde.ch</p></div>
<div class="footer_center">
<p><u>@ 2019 5G-frei.ch</u></p></div>
<div class="footer_right">
<b>Andere Webseiten</b><p>www.asdergsegaserasdfs.ch</p><p>www.zrerrseserser.ch</p><p>www.tzrdrtedrtsdre.ch</p></div>
</footer>
</body>
</html>Ich habe eine Seite mit Flexbox. Nun möchte ich ein Video von einer anderen Webseite responsive in die Seite einbauen. Ich habe einfach mal den iFrame des Videos kopiert und dort, wo es hin soll, eingefügt und ihm ein width="100%" height="100%" gegeben. Nun ist das Video bei voll offener Seite so breit wie der Div-Container breit ist, in der Höhe wird es jedoch zusammengedrückt. Wenn ich den Text oberhalb kürzer mache, wird es auch nicht grösser.
Was ist im zugehörigen Div-Container nun anzugeben?
<!DOCTYPE HTML>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox layout</title>
<meta name="description" content="5G-freie Schweiz.ch - Informationen über 5G">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin:0;
padding:0;
}
body {
background-color: #4e535d;
display:flex;
flex-direction:column;
}
header {
width: 100%;
height: 170px;
background-color: #4e535d;
color: white;
text-align: center;
font-family: "Alien Encounters", "Arial Black", Verdana;
}
#unten img {
margin-top:16px;
height: 62px;
}
#oben img {
height: 164px;
width: 1901px;
}
nav {
list-style-type: none;
background-color:#2e3545;
width:calc(100% - 10px);
}
nav li {
display: inline-block;
margin-left: -4px;
}
nav a {
display: inline-block;
color: white;
font-family: Arial, Verdana, Sans-serif;
font-size: 0.83em;
font-weight:600;
height:100%;
width:100%;
padding:17px 16px 20px 6px;
text-decoration:none;
}
nav >ul> li:nth-child(1){
background-color: #6d7481;
border-right: 2px solid #4e535d;
width: 140px;
text-align:center;
margin-left: 485px;
}
nav >ul> li:nth-child(2){
background: #6d7481;
width: 170px;
text-align: center;
}
nav >ul> li:nth-child(3){
background: #6d7481;
border-left: 2px solid #4e535d;
border-right: 2px solid #4e535d;
width: 110px;
text-align: center;
}
nav >ul> li:nth-child(4){
background: #6d7481;
border-right: 2px solid #4e535d;
width: 110px;
text-align: center;
}
main{
display:flex;
flex-direction:row;
}
#left,#rechts{
flex:1;
margin:110px;
padding:55px;
color: #e6e6e6;
font-family: Arial, Verdana, sans-serif;
font-size: 0.77em;
}
#mitte{
flex:6;
display:flex;
flex-direction:column;
margin:-15px 0 0px 0;
}
#mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf{
min-height: 100px;
font-family: Arial, Verdana, sans-serif;
font-size: 0.77em;
height:auto;
margin-bottom:10px;
background-color: #55607e;
padding-top:85px;
padding-left:85px;
padding-bottom:105px;
padding-right:85px;
}
#mitte_eins{
color:white;
margin-top: 1.8em;
text-align: justify;
}
#mitte_eins img{
float:right;
padding:0 0 0px 10px;
}
#mitte_zwei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_zwei img{
float:right;
padding:0 0 10px 10px;
}
#mitte_drei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_drei img{
float: right;
padding:0 0 10px 10px;
}
#mitte_vier{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_vier img{
float:right;
padding:10px 0 10px 10px;
}
#mitte_fünf{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_fünf img{
float:right;
padding:10px 0 10px 10px;
}
footer{
background: #2e3545;
height: 55px;
text-align:center;
color:white;
font-family: Arial, Verdana, sans-serif;
font-size: 70%;
line-height:5.5;
margin:0 0px 0 0px;
margin-top: -3px;
}
a {text-decoration: none;
}
</style>
<body>
<header>
<div id="oben">
<img class="bildheader" src="Wolken.jpg" alt="Header">
</div>
</header>
<nav>
<ul class="nav">
<li><a href="index.html">Neuigkeiten</a></li>
<li><a href="#buecherverzeichnis">Studien & Berichte</a></li>
<li><a href="rezensionen.html">Videos</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="left">
Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.
</div>
<div id="mitte">
<div style="line-height:2.2;" id="mitte_eins">
Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br>
Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube-Videos, Bilder und Text. Hier ist Platz für Youtube Videos, Bilder und Text. <br><br>
<a href="rezensionen.html#mitte_eins" style="color: white">Das Plocher-Energie-System - Ernstfried Prade, Roland Plocher <b> neu </b></a> <br><br>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/TAbuqoDSngU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div id="rechts">
Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.<br><br> Hier könnten vielleicht Verweise gemacht werden auf wichtige Links. Hier könnten vielleicht verweise gemacht werden auf wichtige Links. Hier könnten vielleicht Verweise gemacht werden auf wichtige Links.
</div>
</main>
<footer>
@ 2019 5G-freie Schweiz.ch
</footer>
</body>
</html>Gruss
Ich möchte die Schrift Alien Encounters im Schriftzug des Headers haben. Diese Schrift ist aber auf vielen Systemen nicht erkennbar und mit den sicheren Schriften bin ich nicht glücklich. Wie füge ich nun ein Bild als Schriftzug im Header ein? Gäbe es noch eine andere Möglichkeit?
Soll dort hin:
Adresse Webseite: http://aufwachen.bplaced.net/
Code:
<!DOCTYPE HTML>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox layout</title>
<meta name="description" content="aufwachen.ch - Rezensionen und Bücher abseits des Mainstreams">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin:0;
padding:0;
}
body {
background-color: #4e535d;
display:flex;
flex-direction:column;
}
header {
width: 100%;
height: 212px;
background-color: #4e535d;
color: white;
text-align: center;
font-family: "Alien Encounters", "Arial Black", Verdana;
font-size: 1.55em;
}
header img {
margin-top:43px;
height: 78px;
width: 51px;
border-radius:50%;
}
nav {
list-style-type: none;
background-color:#2e3545;
width:calc(100% - 10px);
}
nav li {
display: inline-block;
margin-left:-4px;
}
nav a {
display: inline-block;
color: white;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
height:100%;
width:100%;
padding:20px 16px 20px 6px;
text-decoration:none;
}
nav >ul> li:nth-child(1){
background-color: #4e535d;
border-right: 2px solid #4e535d;
width: 82px;
text-align:center;
}
nav >ul> li:nth-child(2){
background: #1e1d24;
width: 174px;
text-align: center
}
nav >ul> li:nth-child(3){
background: #1e1d24;
border-left: 2px solid #4e535d;
border-right: 2px solid #4e535d;
width: 140px;
text-align: center;
}
nav >ul> li:nth-child(4){
background: #1e1d24;
border-right: 2px solid #4e535d;
width: 106px;
text-align: center;
}
main{
display:flex;
flex-direction:row;
}
#left,#rechts{
flex:1;
background: #4e535d;
margin-right:0px;
color:white;
padding:5px;
}
#mitte{
flex:6;
display:flex;
flex-direction:column;
margin:30px 0 10px 0;
}
#mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf,#mitte_sechs{
min-height:100px;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
height:auto;
margin-bottom:10px;
background: #4e535d;
padding:0px;
line-height: 1.5em;
}
#mitte_eins{
color:white;
margin-top:-2.3em;
margin-left:-8em;
text-align: justify;
}
#mitte_eins img{
padding:0 0 10px 10px;
}
#mitte_zwei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_zwei img{
float:right;
padding:0 0 10px 10px;
}
#mitte_drei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_drei img{
float: right;
padding:0 0 10px 10px;
}
#mitte_vier{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_vier img{
float:right;
padding:10px 0 10px 10px;
}
#mitte_fünf{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_fünf img{
float:right;
padding:10px 0 10px 10px;
}
#mitte_sechs{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_sechs img{
float:right;
padding:10px 0 10px 10px;
}
span {
font-weight: 700;
}
footer{
background: #4e535d;
height:45px;
text-align:center;
color:white;
font-family: Arial, Verdana, sans-serif;
font-size: 70%;
line-height:1.8;
margin:0 10px 0 10px;
}
</style>
<body>
<header>
<img class="bildheader" src="R1.jpg" alt="Profil">
<h1>AUFWACHEN.ch</h1>
</header>
<nav>
<ul class="nav">
<li><a href="#index">Start</a></li>
<li><a href="buecherverzeichnis.html">Bücherverzeichnis</a></li>
<li><a href="rezensionen.html">Rezensionen</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="left">
</div>
<div id="mitte">
<div id="mitte_eins"><img src="StartBild12.jpg" alt="Bücher abseits des Mainstreams" style="width:100%; margin: auto; padding: 0px 0px 0px 75px;">
</div>
</div>
<div id="rechts">
</div>
</main>
<footer>
Erstellt mit HTML/CSS. Mit freundlicher Unterstützung by basti1012
</footer>
</body>
</html>tyle54,
Lies doch nochmals, was oben steht.
Gruss
Habe das nicht eingefügt.
Lösche das jetzt raus.
Im Bplaced Forum wurde mir geantwortet, dass ich im Quellcode ein Skript von Kaspersky habe, durch das das Laden der Seite mindestens eine Minute dauert. Soll ich das herausnehmen?
Ok, funktioniert jetzt, nachdem ich sämtliche Dateinamen kleingeschrieben habe und das Sonderzeichen ü bei Bücherverzeichnis in ue geändert habe.
Herzlichen dank
Hat mit dem Hauptlink geklappt. Hab den ganzen Inhalt des Webseiten-Ordners in www getan. Wenn ich jetzt
aufwachen.bplaced.net eingebe, erscheint korrekt die Startseite. Aber die Links zu den anderen Bereichen funktionieren nicht. Da kommt der Fehler 404 von bplaced: gewünschte Seite nicht auffindbar.
?
- - - Aktualisiert - - -
mache morgen weiter, danke für die Antworten, bis dann.
Das / wurde irgendwie erzeugt. Habe das auch nicht angegeben. Siehe Bild Filezilla.
Getan. Nun steht bei Eingabe des Links in den Browser über den drei Dateien oben das [TABLE='width: 1824']
[TR='class: even']
[TD='class: indexcolicon, align: right'][Blockierte Grafik: http://aufwachen.bplaced.net/icons-sys/html.png][/TD]
[TD='class: indexcolname']Index.html/[/TD]
[TD='class: indexcollastmod, align: right']2018-06-26 14:58[/TD]
[TD='class: indexcolsize, align: right']-[/TD]
[/TR]
[/TABLE]
Dieses ist anklickbar und enthält alle Dateien der Webseite mit den jeweiligen Unterseiten, die sich bei Klick im Browser alle richtig öffnen.
Habe mich zum testen für bplaced entschieden. Registriert, FTP-Zugang erstellt, FileZilla runtergeladen. Daten hochgeladen. Jetzt erscheint nach Eingabe der Adresse im Browser nur:
Index of /
[TABLE='width: 1824']
[TR='class: indexhead']
[TH='class: indexcolicon, align: right'][Blockierte Grafik: http://aufwachen.bplaced.net/icons-sys/blank.png][/TH]
[TH='class: indexcolname']Name[/TH]
[TH='class: indexcollastmod, align: right']Last modified[/TH]
[TH='class: indexcolsize, align: right']Size[/TH]
[/TR]
[TR='class: indexbreakrow']
[TH='colspan: 4, align: right'][/TH]
[/TR]
[TR='class: even']
[TD='class: indexcolicon, align: right'][Blockierte Grafik: http://aufwachen.bplaced.net/icons-sys/pma.png][/TD]
[TD='class: indexcolname']MyAdmin.php[/TD]
[TD='class: indexcollastmod, align: right']2018-06-24 13:43[/TD]
[TD='class: indexcolsize, align: right']70[/TD]
[/TR]
[TR='class: odd']
[TD='class: indexcolicon, align: right'][Blockierte Grafik: http://aufwachen.bplaced.net/icons-sys/pga.png][/TD]
[TD='class: indexcolname']PgAdmin.php[/TD]
[TD='class: indexcollastmod, align: right']2018-06-24 13:43[/TD]
[TD='class: indexcolsize, align: right']70[/TD]
[/TR]
[TR='class: even']
[TD='class: indexcolicon, align: right'][Blockierte Grafik: http://aufwachen.bplaced.net/icons-sys/la.png][/TD]
[TD='class: indexcolname']live access.php[/TD]
[TD='class: indexcollastmod, align: right']2018-06-24 13:43[/TD]
[TD='class: indexcolsize, align: right']65[/TD]
[/TR]
[TR='class: indexbreakrow']
[TH='colspan: 4, align: right'][/TH]
[/TR]
[/TABLE]
Apache/2.4 Server at aufwachen.bplaced.net Port 80
Was ist das und wie weiter?
Gruss
So, habe es nochmals überarbeitet und in die ungefähre Form gebracht. Wenn ich das nun hochlade, sollte ich vorher noch etwas machen? Zum Beispiel Suchmaschinenoptimierung? Die Webseite in mehreren Browsern testen? etc. (Habe nur Chrome...) und welche Plattform wäre zu empfehlen für das hochladen?
<!DOCTYPE HTML>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Flexbox layout</title>
<meta name="description" content="Platzhalter - Ein kurze Beschreibung des Inhalts in Satzform">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin:0;
padding:0;
}
body {
background-color: #4e535d;
display:flex;
flex-direction:column;
}
header {
width: 100%;
height: 212px;
background-color: #4e535d;
color: white;
text-align: center;
font-family: "Alien Encounters", Arial, Verdana;
font-size: 1.55em;
}
header img {
margin-top:43px;
height: 78px;
width: 51px;
border-radius:50%;
}
nav {
list-style-type: none;
background-color:#2e3545;
width:calc(100% - 10px);
}
nav li {
display: inline-block;
margin-left:-4px;
}
nav a {
display: inline-block;
color: white;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
height:100%;
width:100%;
padding:20px 16px 20px 6px;
text-decoration:none;
}
nav >ul> li:nth-child(1){
background-color: #4e535d;
border-right: 2px solid #4e535d;
width: 82px;
text-align:center;
}
nav >ul> li:nth-child(2){
background: #1e1d24;
width: 174px;
text-align: center
}
nav >ul> li:nth-child(3){
background: #1e1d24;
border-left: 2px solid #4e535d;
border-right: 2px solid #4e535d;
width: 140px;
text-align: center;
}
nav >ul> li:nth-child(4){
background: #1e1d24;
border-right: 2px solid #4e535d;
width: 106px;
text-align: center;
}
main{
display:flex;
flex-direction:row;
}
#left,#rechts{
flex:1;
background: #4e535d;
margin-right:0px;
color:white;
padding:5px;
}
#mitte{
flex:6;
display:flex;
flex-direction:column;
margin:30px 0 10px 0;
}
#mitte_eins,#mitte_zwei,#mitte_drei,#mitte_vier,#mitte_fünf,#mitte_sechs{
min-height:100px;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
height:auto;
margin-bottom:10px;
background: #4e535d;
padding:0px;
line-height: 1.5em;
}
#mitte_eins{
color:white;
margin-top:-2.3em;
margin-left:-8em;
text-align: justify;
}
#mitte_eins img{
padding:0 0 10px 10px;
}
#mitte_zwei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_zwei img{
float:right;
padding:0 0 10px 10px; }
#mitte_drei{
color:white;
margin-top:5em;
text-align: justify;
}
#mitte_drei img{
float: right;
padding:0 0 10px 10px;
}
#mitte_vier{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_vier img{
float:right;
padding:10px 0 10px 10px;}
#mitte_fünf{
margin-top:5em;
color:white;
text-align: justify;
}
#mitte_fünf img{
float:right;
padding:10px 0 10px 10px;}
#mitte_sechs{
margin-top:5em;
color:white;
text-align: justify; }
#mitte_sechs img{
float:right;
padding:10px 0 10px 10px;}
span {font-weight: 700;}
footer{
background: #4e535d;
height:45px;
text-align:center;
color:white; font-family: Arial, Verdana, sans-serif;
font-size: 70%;
line-height:1.8;
margin:0 10px 0 10px;
}
</style>
<script type="text/javascript" src="http://gc.kis.v2.scr.kaspersky-labs.com/500E94EB-9086-9C49-B6B9-263517A328F0/main.js" charset="UTF-8"></script></head>
<body>
<header>
<img class="bildheader" src="R1.jpg" alt="Profil">
<h1>AUFWACHEN.ch</h1>
</header>
<nav>
<ul class="nav">
<li><a href="#start">Start</a></li>
<li><a href="bücherverzeichnis.html">Bücherverzeichnis</a></li>
<li><a href="rezensionen.html">Rezensionen</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
<main>
<div id="left">
</div>
<div id="mitte">
<div id="mitte_eins"><img src="StartBild12.jpg" alt="" style="width:100%; margin: auto; padding: 0px 0px 0px 75px;">
</div>
</div>
<div id="rechts">
</div>
</main>Wow, das ist ja der Hammer, vielen Dank!
Werde mich in den nächsten Tagen damit beschäftigen und alles weitere dann hier schreiben.
Gruss
Es soll am Schluss in Layout und Grössenverhältnis aussehen wie auf dem Bild. Mit dem blauen langen Balken.
Habe das Layout beim ersten Mal mit einer festen Grösse in 1294 x 1096 erstellt. Würde es jetzt aber gerne lieber responsive machen. Der Code ist eigentlich noch derselbe wie oben, ausser das Experiment mit dem Balken.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Aufwachen.ch</title><meta name="keywords" content="Lakhovsky, R. Clark, Wilhelm Reich, Bernd Senf, Kabat-Zinn, Siddhartha Buddha, Lebensenergie, Krebsheilung, Iboga, Tesla, Erfindungen, Elberfelder Bibel, Viktor Schauberger, Nebel Geld, Das Matriarchat, Codex Humanus, Roland Plocher">
<style>div.container { width: 100%;}
body {font-size: 100%;}
#header {position: relative;width: 1297px; height: 247px;background-color: #4e535d; color: white;margin-left: auto;margin-right: auto;margin-top: -8px;text-align: center; font-family: "Alien Encounters", Arial, Verdana; font-size: 1.5em;}
#header img {margin-top: 75px;}
h1 { margin-top: 17px;}
ul { position: relative; list-style-type: none; margin: 0; padding: 0; overflow: hidden; left: 304px;}
li { float: left; }
li a { display: block; color: white; text-align: center; padding: 21px 35px; text-decoration: none; font-family: Arial, Verdana, sans-serif; font-size: 0.815em;}
#logo {width: 200px;height: 20px;float: right;
}
</style>
</head>
<body>
<div id="header">
<img src="Bild1.jpg" alt="Profil"> <h1>AUFWACHEN.ch</h1></div>
<div id="logo"><img src="Test.jpg" alt=""></div>
<ul> <li style="padding-right: 5px; width: 72px; background-color: #4e535d; border-right: 4px solid #4e535d;"><a href="#start">Start</a></li> <li style="padding-right: 3px; background-color: #1e1d24; border-right: 2px solid #4e535d; border-left: 9px solid #4e535d"><a
href="#bücherverzeichnis">Bücherverzeichnis</a></li> <li style="padding-right: 1px; width: 138px; background-color: #1e1d24; border-right: 2px solid #4e535d;"><a href="#rezensionen">Rezensionen</a></li> <li style="background-color: #1e1d24; border-right: 2px solid #4e535d;"><a href="#kontakt">Kontakt</a></li> </ul>
</body>
</html>Danke für deine Arbeit.
Würde dennoch gerne wissen, wie ich sowas hinkriege (soll: 1294 x 1096):
Könnte man den langen dunkelblauen Balken und den kleinen grauen Balken ganz rechts irgendwie in eine nav packen? Oder wäre es besser, wenn ich gleich alles über ein graues grosses Hintergrundbild lege?
Jetzt noch einmal angefangen. Habe mich durch das w3schools ein wenig durchgearbeitet. Code ist valid. Habe aber das Problem, dass sich der Header bei Verkleinerung des Browsers nach links verschiebt. Woran könnte es liegen?
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aufwachen.ch</title>
<meta name="keywords" content="Lakhovsky, R. Clark, Wilhelm Reich, Bernd Senf, Kabat-Zinn, Siddhartha Buddha,
Lebensenergie, Krebsheilung, Iboga, Tesla, Erfindungen, Elberfelder Bibel, Viktor Schauberger, Nebel Geld, Das
Matriarchat, Codex Humanus, Roland Plocher">
<style>
div.container {
width: 100%;
}
body {
font-size: 100%;
}
#header {
position: relative;
width: 1297px;
height: 247px;
background-color: #4e535d;
color: white;
margin-left: auto;
margin-right: auto;
margin-top: -8px;
text-align: center;
font-family: "Alien Encounters", Arial, Verdana;
font-size: 1.5em;
}
#header img {
margin-top: 75px;
}
h1 {
margin-top: 17px;
}
.nav {
list-style-type: none;
margin: 0;
padding: 0;
margin-left: 304px;
overflow: hidden;
background-color: #1e1d24;
width: 1297px;
}
.nav li {
display: inline-block;
}
.nav a {
display: block;
color: white;
font-family: Arial, Verdana, sans-serif;
font-size: 0.8125em;
padding: 21px 16px;
text-decoration:none;
}
</style>
</head>
<body>
<div id="header">
<img src="Bild1.jpg" alt="Profil">
<h1>AUFWACHEN.ch</h1>
</div>
<ul class="nav">
<li style="background-color: #4e535d; border-right: 2px solid #4e535d; width: 82px; text-align: center;"><a
href="#start">Start</a></li>
<li style="width: 174px; text-align: center;"><a href="#bücherverzeichnis">Bücherverzeichnis</a></li>
<li style="border-left: 2px solid #4e535d; border-right: 2px solid #4e535d; width: 140px; text-align: center;"><a
href="#rezensionen">Rezensionen</a></li>
<li style="border-right: 2px solid #4e535d; width: 106px; text-align: center;"><a href="#kontakt">Kontakt</a></li>
</ul>
</body>
</html>Noch eine grundsätzliche Frage:
-Was wird optimalerweise in em und was in Prozent angegeben?
Bin für jede Verbesserung dankbar.
Gruss
Nun, vielleicht ist er kaputt. Ich habe mich dabei an den Aufbau von Tutorials im Internet gehalten. (Bin nicht html-kundig)
Im Browser scheint alles zu funktionieren bis jetzt. Könnte auch nochmals anfangen. Was müsste ich dann ändern?
Sollte ich mich an diese Struktur halten?:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Titel der Seite | Name der Website</title>
</head>
<body>
<!-- Sichtbarer Dokumentinhalt im body -->
<p>Sehen Sie sich den Quellcode dieser Seite an.
<kbd>(Kontextmenu: Seitenquelltext anzeigen)</kbd></p>
</body>
</html>