Hey,
ich möchte es für einen Kunden möglich machen, dass er auf der Website, die ich mit HTML und CSS erstellt habe, die Bilder selber ändern kann und möchte hierfür ein CMS verwenden.
Vorgeschlagen wurde mir Websitebaker oder CMSimple. Ist das mit diesen Systemen möglich? Kann ich diese bereits offline testen oder müssen sie bei der Domain installiert werden?
Danke schonmal !
Liebe Grüße
Sundream
Hey,
ich möchte es für einen Kunden möglich machen, dass er auf der Website, die ich mit HTML und CSS erstellt habe, die Bilder selber ändern kann und möchte hierfür ein CMS verwenden.
Vorgeschlagen wurde mir Websitebaker oder CMSimple. Ist das mit diesen Systemen möglich? Kann ich diese bereits offline testen oder müssen sie bei der Domain installiert werden?
Danke schonmal !
Liebe Grüße
Sundream
Hey,
ich möchte gerne, dass die Navigation, wenn der Bildschirm kleiner als 550px ist über das Navigationsicon (hamburgericon) funktioniert und habe das mit css und js versucht, aber es tut sich nichts... Kann mir vielleicht jemand weiterhelfen? 
Danke schonmal !
HTML:
<head>
<title>Zimmerei Kohlhepp</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript">
$(document).ready(function(){
$('.menubutton').click(function() {
$('nav').slideToggle('slow');
});
});
</script>
<meta charset="UTF-8">
</head>
<body>
<div class="oben">
<section id="menubar">
<ul>
<li>
<a class="menubutton" href="#menu">
<img src="Bilder/hamburger.png">
</a>
</li>
</ul>
</section>
<header>
<img src="Bilder/Logo.jpg">
<h1>Zimmerei Kohlhepp</h1>
</header>
<nav class="nav">
<ul>
<li>
<a href="Index.html" class="active">Start</a>
<a href="Ueber_uns.html" >Über uns</a>
<a href="Leistungen.html" >Leistungen</a>
<a href="Kontakt.html" >Kontakt</a>
</li>
</ul>
</nav>
</div>
<section id="main">
<div class="braun">
<h2>Herzlich Willkommen!</h2><section id= "banner">
<img class="Banner" src="Bilder/Banner.jpg">
</section>
<article>
<img src="Bilder/Bild1.jpg"/>
<div class="Schrift">
<p > Starke Leistungen brauchen ein starkes Team! </p>
<p>Vom Dachstuhl bis zum kompletten Haus können wir Ihnen alles im Bereich Holzbau bieten!</p>
<p>Kontaktieren Sie uns und wir setzen Ihre Wünsche um!</p>
<p>Wir freuen uns auf Sie! </p>
</div>
</article>
<footer>
<ul>
<li><a href="Impressum.html" >Impressum</a></li>
</ul>
</footer>
</section>
</div>
</body>
</html>CSS:
/*General Style*/
html { background: url(Bilder/Hintergrund.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{font-size: 100%;
margin: 0em;
padding: 0em;
}
.braun {background: rgb(243,218,170);
margin:auto;
border-radius: 30px;
max-width: 1200px;
margin-top: 2em;
margin-bottom: 5em;
padding-bottom: 2em;}
.oben {background: white;
width: 100%;
}
h1 {font-size: 2.75em;
line-height: 1.8em;
font-family: Lobster;
font-weight: 100;
margin: 0em;
display: inline-block;
}
h2 {font-size: 2em;
line-height: 1.8em;
font-family: Yanone Kaffeesatz;
font-weight: bold;
letter-spacing: 0.1em;
margin: 0em;
padding: 0em;
padding-top: 0.5em;
padding-left:1em;
text-align: left;}
p {
text-align: center;
font-size:1.5em;
font-family: Yanone Kaffeesatz;
font-weight: normal;
text-align: left;
display: inline-block;
padding-left: 2.0em;
padding-top: 0em;
}
ul {
margin:0px;
padding: 0px;
}
li {list-style: square;
line-height: 1.25em;
font-family: Yanone Kaffeesatz;
font-weight: normal;
margin: 0.313em 0em 0.313em 0em;
padding: 0em;
text-align: justify;}
img {
width:60%;
height: auto;
max-width: 100%;
}
a {text-decoration: none;}
/* On top Bar */
#menubar{
display: block;
background: white;
}
#menubar ul {
display: block;
width:2em;
padding: 0em;
padding-top:0.9em;
}
#menubar ul li {
display: inline;
line-height: 0.1em;
}
#menubar ul li a.menubutton {
display: none;
}
#menubar ul li a img {width:100%;
padding-left: 2em;}
/*header*/
header {
display: inline-block;
background: white;
padding-left: 6em;
max-width: 40%;
}
header img {max-width: 8%;
height: auto;
padding-right: 1em;
}
/* Navigation */
nav {
display:block;
background: white;
text-align:center;
}
nav ul {
display: block;
}
nav ul li {
display: inline;
margin: 0em 0.188em 0em 0.188em;
}
nav ul li a {
color: black;
font-size:1.5em;
line-height: 2.5em;
padding: 0.563em 0.938em 0.375em 0.983em;
transition:background 0.2s;
-webkit-transition:background 0.2s;
}
nav ul li a:hover { background: rgb(136,114,103);
border-bottom: 0.188em solid #3e322d;
}
nav ul li a.active {border-bottom: 0.188em solid #3e322d;
}
/*Conten´t Area */
#main {
display: block;
width:96%;
max-width: 1200px;
margin: 0em auto;
padding:0em;
}
#main article { display: inline-block;
width: 100%;
vertical-align: top;
margin:0em;
padding: 0em;
}
#main article img {
max-width: 400px;
margin-top: 2em;
border: 5px solid rgb(75,69,53);
display: inline-block;
text-align: center;
margin-left: 2em;
}
.Schrift {display: inline-block;
position: relative;
max-width: 600px;
padding-top: -10em;
}
#banner {
display: block;
width:100%;
max-width: 1200px;
margin: 0em auto;
padding:0em;
}
#banner img {
max-width: 1200px;
width: 100%;
}
/* footer */
footer {
display: block;
text-align: right;
margin-top: 1em;
margin-bottom: -0.5em;
}
footer ul li { text-align: right;
padding-right: 3em;
list-style-type: none;
}
footer ul li a { color: black;
padding: 0.2em;
border: 3px solid rgb(75,69,53);}
/* Mobile Ansicht */
@media screen and (max-width: 800px){
body { font-size: 90%;
}
}
@media screen and (max-width: 600px){
#main article {
width:100%;
display: block;
margin: 0.625em 0em 0.625em 0em; }
#main article img {
margin-left: 1.3em;
width: 220px;
}
.Schrift p {
text-align: center;
max-width: 250px;}
.Schrift {margin-left: -1.9em;}
}
@media screen and (max-width: 550px) {
nav.nav {display: block !important ;}
body{font-size: 86%;}
#menubar ul li a.menubutton {
display: block;
}
nav { display: none;
height: auto;}
nav ul li {display: block;
margin: 0.3em 0em 0.3em 0em}
}Ich würd mich echt verdammt freuen, wenn jemand den Fehler findet!
Liebe Grüße
Sundream
Ich möchte gerne, dass die Navigation in der Mobilen Ansicht, also auf dem Handy, zu einer sich ausklappenden Navigation wird, wenn man auf das Hamburger Icon oben links klickt... Aber wenn man drauf klickt passiert nichts...
Hey,
ich bin grade am erstellen einer Website und habe Probleme mit dem responsiven Design und zwar mit der Navigation.
Das ist mein HTML Code:
<head>
<title>Zimmerei Kohlhepp</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200,300,700' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript">
$(document).ready(function(){
$('.menubutton').click(function() {
$('nav').slideToggle('slow');
});
});
</script>
<meta charset="UTF-8">
</head>
<body>
<div class="oben">
<section id="menubar">
<ul>
<li>
<a class="menubutton" href="#menu">
<img src="Bilder/hamburger.png">
</a>
</li>
</ul>
</section>
<header>
<img src="Bilder/Logo.jpg">
<h1>Zimmerei Kohlhepp</h1>
</header>
<nav class="nav">
<ul>
<li>
<a href="Index.html" class="active">Start</a>
<a href="Ueber_uns.html" >Über uns</a>
<a href="Leistungen.html" >Leistungen</a>
<a href="Kontakt.html" >Kontakt</a>
</li>
</ul>
</nav>
</div>
<section id="main">
<div class="braun">
<h2>Herzlich Willkommen!</h2><section id= "banner">
<img class="Banner" src="Bilder/Banner.jpg">
</section>
<article>
<img src="Bilder/Bild1.jpg"/>
<div class="Schrift">
<p > Starke Leistungen brauchen ein starkes Team! </p>
<p>Vom Dachstuhl bis zum kompletten Haus können wir Ihnen alles im Bereich Holzbau bieten!</p>
<p>Kontaktieren Sie uns und wir setzen Ihre Wünsche um!</p>
<p>Wir freuen uns auf Sie! </p>
</div>
</article>
<footer>
<ul>
<li><a href="Impressum.html" >Impressum</a></li>
</ul>
</footer>
</section>
</div>
</body>
</html>und das mein CSS dazu:
/*General Style*/
html { background: url(Bilder/Hintergrund.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body{font-size: 100%;
margin: 0em;
padding: 0em;
}
.braun {background: rgb(243,218,170);
margin:auto;
border-radius: 30px;
max-width: 1200px;
margin-top: 2em;
margin-bottom: 5em;
padding-bottom: 2em;}
.oben {background: white;
width: 100%;
}
h1 {font-size: 2.75em;
line-height: 1.8em;
font-family: Lobster;
font-weight: 100;
margin: 0em;
display: inline-block;
}
h2 {font-size: 2em;
line-height: 1.8em;
font-family: Yanone Kaffeesatz;
font-weight: bold;
letter-spacing: 0.1em;
margin: 0em;
padding: 0em;
padding-top: 0.5em;
padding-left:1em;
text-align: left;}
p {
text-align: center;
font-size:1.5em;
font-family: Yanone Kaffeesatz;
font-weight: normal;
text-align: left;
display: inline-block;
padding-left: 2.0em;
padding-top: 0em;
}
ul {
margin:0px;
padding: 0px;
}
li {list-style: square;
line-height: 1.25em;
font-family: Yanone Kaffeesatz;
font-weight: normal;
margin: 0.313em 0em 0.313em 0em;
padding: 0em;
text-align: justify;}
img {
width:60%;
height: auto;
max-width: 100%;
}
a {text-decoration: none;}
/* On top Bar */
#menubar{
display: block;
background: white;
}
#menubar ul {
display: block;
width:2em;
padding: 0em;
padding-top:0.9em;
}
#menubar ul li {
display: inline;
line-height: 0.1em;
}
#menubar ul li a.menubutton {
display: none;
}
#menubar ul li a img {width:100%;
padding-left: 2em;}
/*header*/
header {
display: inline-block;
background: white;
padding-left: 6em;
max-width: 40%;
}
header img {max-width: 8%;
height: auto;
padding-right: 1em;
}
/* Navigation */
nav {
display:block;
background: white;
text-align:center;
}
nav ul {
display: block;
}
nav ul li {
display: inline;
margin: 0em 0.188em 0em 0.188em;
}
nav ul li a {
color: black;
font-size:1.5em;
line-height: 2.5em;
padding: 0.563em 0.938em 0.375em 0.983em;
transition:background 0.2s;
-webkit-transition:background 0.2s;
}
nav ul li a:hover { background: rgb(136,114,103);
border-bottom: 0.188em solid #3e322d;
}
nav ul li a.active {border-bottom: 0.188em solid #3e322d;
}
/*Conten´t Area */
#main {
display: block;
width:96%;
max-width: 1200px;
margin: 0em auto;
padding:0em;
}
#main article { display: inline-block;
width: 100%;
vertical-align: top;
margin:0em;
padding: 0em;
}
#main article img {
max-width: 400px;
margin-top: 2em;
border: 5px solid rgb(75,69,53);
display: inline-block;
text-align: center;
margin-left: 2em;
}
.Schrift {display: inline-block;
position: relative;
max-width: 600px;
padding-top: -10em;
}
#banner {
display: block;
width:100%;
max-width: 1200px;
margin: 0em auto;
padding:0em;
}
#banner img {
max-width: 1200px;
width: 100%;
}
/* footer */
footer {
display: block;
text-align: right;
margin-top: 1em;
margin-bottom: -0.5em;
}
footer ul li { text-align: right;
padding-right: 3em;
list-style-type: none;
}
footer ul li a { color: black;
padding: 0.2em;
border: 3px solid rgb(75,69,53);}
/* Mobile Ansicht */
@media screen and (max-width: 800px){
body { font-size: 90%;
}
}
@media screen and (max-width: 600px){
#main article {
width:100%;
display: block;
margin: 0.625em 0em 0.625em 0em; }
#main article img {
margin-left: 1.3em;
width: 220px;
}
.Schrift p {
text-align: center;
max-width: 250px;}
.Schrift {margin-left: -1.9em;}
}
@media screen and (max-width: 550px) {
nav.nav {display: block !important ;}
body{font-size: 86%;}
#menubar ul li a.menubutton {
display: block;
}
nav { display: none;
height: auto;}
nav ul li {display: block;
margin: 0.3em 0em 0.3em 0em}
}Ich würde mich extrem freuen, wenn mir irgendjemand helfen kann !
Danke schonmal!
Ganz Liebe Grüße
Sundream
Wäre hier Wordpress eine Lösung?
Aber bringt das einem Kunden, der keine Ahnung von html und css hat dann was?
also kann das dann auch frei platziert werden undso?
Ich möchte, dass er zum Beispiel eine von mir erstellte Bildergalerie erweitern kann.
Hallo,
ich möchte für einen Kunden eine Website erstellen, aber dabei soll er später diese selber verwalten können.
Das heißt zum Beispiel Bilder oder ähnliches dann selbstständig hochladen können.
Leider habe ich auf dem Gebiet noch keine Erfahrungen gesammelt und meine websites bisher einfach mit html und css erstellt und weiß jetzt garnicht wie man bei sowas vorgeht und was man da am besten verwendet.
Ich hoffe ihr könnt mir helfen !
Liebe Grüße und danke schonmal !
Vielen, vielen Dank, das is grad voll die Erleichterung für mich !
Hallo ,
ich habe zwei Probleme mit meiner Website.
Das erste ist, dass ich die Website fertig gemacht habe und meinen Freunden geschickt haben, damit sie es ausprobieren.
Leider sieht es auf einem der Handys, auf dem noch der Standardbowser installiert ist so aus:
das Browsericon von dem Browser den sie verwendet sieht so aus:
(das zweite von links)
, bei eigentlich allen anderen Browsern funktioniert die Website perfekt und sieht so aus, wie es sein soll:
(so sollte die Website aussehen)
Hat jemand eine Idee, was da schief gelaufen ist und wie ich das Problem beheben kann?
Wäre wirklich für jede Hilfe dankbar...
Mein zweites Problem ist das Querformat des Handys auf dem die Navigation sich komisch nach oben verschiebt und somit ihre funktion verliert:
(Ansicht im Querformat)
Das ist in jedem Handybrowser außer dem vom Iphone so...
Auch hierfür habe ich keine Lösung.
Hier auch nochmal der Link zur Seite:
http://webuser.uni-weimar.de/~hike8574/Index.html
Danke schonmal für die Hilfe !
Liebe Grüße
Sundream
Hallo,
ich habe gestern schon was ähnliches geschrieben, aber leider noch keine hilfreiche Antwort bekommen, deswegen versuche ich es noch einmal, da ich wirklich verzweifelt bin.
Ich habe eine Website erstellt und jetzt ein Problem mit dem responsiven Design...
Vorallem Header und Navigaion verschieben sich komisch.
Hier der Link zu meiner Website:
http://webuser.uni-weimar.de/~hike8574/Index.html
Liebe Grüße
Sundream
Hallo Mr Murphy,
danke für die Antwort !
Wie genau meinst du das mit dem Inhalt?
Welche Vorgehensweise würdest du wählen?
Hast du eine gute Website oder einen Tipp, wie ich das jetzt noch ohne noch einmal komplett von vorne anfangen zu müssen ändern kann?
Liebe Grüße
Hallo,
ich muss für die Uni eine Website erstellen mit CSS und HTML und bin gerade am verzweifeln.
Ich habe den Code beim responsiven Teil für @media (max-width: 900px) und @media (max-width: 480px) geschrieben.
Genau bei den Größen und bei der meines Laptop- Bildschirms passt die Seite auch und ist genauso wie ich sie haben möchte, aber bei den Übergängen dazwischen sieht sie einfach schrecklich aus.
Vorallem der Header und die Navigation sind komisch verschoben, wenn man das Fenster kleiner zieht.
Hier ist der Link zu meiner Seite:
http://webuser.uni-weimar.de/~hike8574/Index.html
Hat jemand vielleicht eine Idee, wie ich das Problem lösen kann?
Liebe Grüße
Sundream