Verschiedene Probleme bei der Entwicklung einer Seite

hundebeinem · 27. April 2015

Guten Tag
Ich versuche mal meine Arbeit insgesamt abzusenden und meine Probleme auszuführen.

Die farbig hinterlegten Bereiche sind kein Design sondern
zum besseren Zurechtfinden gedacht.

1. Bildwechsler

HTML

<div id=bildwechsler>
    <img id="bild1" src="bilder/bild1.jpg" width="940" height="235" alt="See">
    <img id="bild2" src="bilder/bild2.jpg" width="940" height="235" alt="see">
</div>

Wenn ich in HTML die Bildgröße nicht angebe, sondern das in CSS angeben will, funktioniert der Bildwechsler nicht mehr.
Der Bildwechsler drängt über den Rand hinaus und ist nicht flexibel.
Unter "@media only screen and (max-width: XXXpx)"bekomme ich keinen Zugriff.

2. Navigation

Ab einer Bildschirmbreite von 650px, wenn also die Navigation ausgeblendet wird und der Menüschalter erscheint, funktioniert unter den zweiten Hauptmenü das Untermenü nicht mehr. Die Unterpunkte lassen sich nicht mit der Maus erreichen und die Verteilung des Untermenüs über css gelingt mir nicht.
Für den Menüschalter soll eigentlich das Bild "menu100x50"eingeblendet werden.
Es erscheint aber nur das Wort "Menü" sowie es über js eingetragen ist.
Wird die Navigation vertikal ausgerichtet, verschwindet sie hinter dem Bildwechsler.
Der Z-Index wirkt sich nicht aus.

Auslagerung von CSS und JS in die vorgesehenen Ordner

Sobald ich die Cods für den Schalter "toggleNavMain" und für den Bildswechsler aus der HTML-Seite herausnehme und über den "<head>"einbinden will, kommt keine Verbindung zustande. Sicher habe ich da Fehler gemacht, ich finde sie aber nicht.

CSS Probleme

Ich hatte die Absicht, die Bereiche <aside>und <div id="angebote"> mit einer automatischen Höhe zu versehen. Wenn ich das aber mache, fallen die Inhalte aus diesen Bereichen heraus und die Höhe wird 0.

Ich wäre für die Lösung sehr dankbar, denn ich komme nicht weiter.
Beste Grüße
Peter

Gestaltung HTML

HTML

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>GarciaNetz</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />




    <link href="css/gestaltung.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="boilerplate.css">
    <link rel=normalize.min.css href="css/normalize.css">
    <link href="css/slider.css" rel="stylesheet" type="text/css">
    <link href="js/slider.js" rel="stylesheet" type="text/css">




    <script type="text/javascript" src="js/toggleNavMain.js"></script>
    <script type="text/javascript" src="js/slider.js"></script>
    <link href="js/toggleNavMain.js">




    <link rel="shortcut icon" href="favicon.ico">







    <script type="text/javascript">




var bild1 = new Image();
bild1.src = 'bilder/bild1.jpg';
var bild2 = new Image();
bild2.src = 'bilder/bild2.jpg';
var bild3 = new Image();
bild3.src = 'bilder/bild3.jpg';




var bildoben = 0;
var bildunten = 1;
var op = 1;
var op_ie = 100;




var diebilder = new Array('bilder/bild1.jpg','bilder/bild2.jpg','bilder/bild3.jpg','bilder/bild2.jpg');
var lang = diebilder.length;




function slider() {
    var rahmen1 = document.getElementById('bild1');
    var rahmen2 = document.getElementById('bild2');

    rahmen1.src = diebilder[bildoben];
    rahmen2.src = diebilder[bildunten];
    rahmen1.style.opacity = '1';
    rahmen1.style.filter = 'alpha(opacity=100)';

    bildoben++;
    bildunten++;




    if((bildoben+1) == lang) {
        bildunten = 0;
    }
    if(bildoben == lang && bildunten == 1) {
        bildoben = 0;
        bildunten = 1;
    }
    window.setTimeout("slidemove()",3000);
}




function slidemove() {
    if(op > 0) {
        op = op - 0.1;
        op_ie = op_ie - 10;
        document.getElementById('bild1').style.opacity = op;
        document.getElementById('bild1').style.filter = 'alpha(opacity=' + op_ie + ')';
        window.setTimeout("slidemove()",100);
    } else {
        op = 1;
        op_ie = 100;
        window.setTimeout("slider()",0);
    }
}
    </script>
</head>




<body onload="slider()">




    <div id="container">
        <header>
            <nav id="navMain">
                <ul>
                    <li><span>Startseite</span></li>
                    <li>
                        <a href="#">Projekt 1 </a>
                        <ul>
                            <li><a href="#">Unterseite1.1 </a></li>
                            <li><a href="#">Unterseite1.2</a></li>
                            <li><a href="#">Unterseite1.3</a></li>
                        </ul>
                    <li><a href="#">Projekt 2</a></li>
                    <li><a href="#">Projekt 3</a></li>
                </ul>




                <!-- <div id="toggleNavMain">Menü
                <img src="bilder/menu100x50.png">
                </div>-->
            </nav>




            <div id="ueberschrlogo">
                <div id="h1">
                    <h1>
                        <p id="text">
                            <span id="textspan">I</span>m Div h1
                        </p>
                    </h1>
                </div>
                <img src="bilder/Logoweb1.png">
                <p id="vertrauen"> vertrauen,eine Bemerkung oder eine Ergänzung</p>
            </div>
        </header>
        <!-- [url]https://www.youtube.com/watch?v=LeHN5y1LweU--[/url]>
        <div id= bildwechsler>
        <img id="bild1" src="bilder/bild1.jpg" width="940" height="235" alt="See">
        <img id="bild2" src="bilder/bild2.jpg" width="940" height="235" alt="see">
        </div>




        <!-- <div id= bildwechsler>
        <img id="bild1" src="bilder/bild1.jpg" alt="See">
        <img id="bild2" src="bilder/bild2.jpg" alt="see">
        </div>
        -->




        <hr>
        <main id="main">
            <aside>
                <article id="leitfaden">
                    <h2>Leitartikel zur Seite</h2>
                    <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft</p>
                </article>
                <address id="anschrift">
                    Falk-Peter Garcia-Greno
                    Gottschedstrasse 22
                    04109 Leipzig
                    <br>
                    Tel: 0341 2229717
                    <br>
                    Mail: [email]service@garciagreno.de[/email]
                </address>
                <div id="karte">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2492.3673995721706!2d12.367366100000009!3d51.341154400000015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a6f789f618a5b7:0x1f7b30bc10773408!2sGottschedstraÃÂŸe,+04109+Leipzig!5e0!3m2!1sde!2sde!4v1428915811418" width="200" height="200"></iframe>
                </div>
            </aside>




            <div id="angebote">
                <article id="zielgruppe">
                    <h4>Ihre Zielgruppe definieren</h4>
                    <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu </p>
                </article>
                <article id="planung">
                    <h4>Projektplanung</h4>
                    Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu
                </article>
                <article id="kommunikation">
                    <h4>Kommunikation</h4>
                    <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu </p>
                </article>
                <article id="detail">
                    <h4>Details</h4>
                    <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu </p>
                </article>
            </div><!--angebote-->
        </main>




        <footer>
            <ul>
                <li><a href="#">Impressum</a></li>
                <li><a href="#">Datenschutz</a></li>
                <li><a href="#">AGB</a></li>
            </ul>
        </footer>
    </div> <!--container-->




    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>




    <script type="text/javascript">
$(document).ready(function() {
    // Klasse "js" per jQuery zum html-tag hinzufügen.
    $('html').addClass('js');
    var navToggle = ['<div id="toggleNavMain">Menü</div>'].join("");
    // Button zum Einblenden des Hauptmenüs wird per JavaScript erstellt und in den Header eingefügt 
    $("header").append(navToggle) 
});




$(function() {
    var pull = $('#toggleNavMain');
    menu = $('#navMain');
    menuHeight = menu.height();

    $(pull).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function(){
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
        menu.removeAttr('style');
    }
    });
});
    </script>
</body>
</html>

Alles anzeigen

GestaltungCSS

CSS

*{
	margin:0;
	padding:0;
}
body {
	background-color: Teal;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 0.9em;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}
#container {
	height: auto;
	max-width: 960px;
	box-sizing: border-box;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	background-color: Brown;
	border: 5px double #FFFFFF;
}
#navMain {
	width: auto;
	height: 2em;
	border: 3px solid  #000000;
	padding-top: 0.9em;
	padding-right: 2em;
	padding-bottom: 1.5em;
	padding-left: 6em;
	z-index: 2;
	background: #663399; /* Old browsers */
	background: -moz-linear-gradient(top,  #663399 0%, #995d99 47%, #995d99 57%, #663399 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#663399), color-stop(47%,#995d99), color-stop(57%,#995d99), color-stop(100%,#663399)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #663399 0%,#995d99 47%,#995d99 57%,#663399 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #663399 0%,#995d99 47%,#995d99 57%,#663399 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #663399 0%,#995d99 47%,#995d99 57%,#663399 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #663399 0%,#995d99 47%,#995d99 57%,#663399 100%); /* W3C */







filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#663399', endColorstr='#663399',GradientType=0 ); /* IE6-9 */




}




#navMain:after {
	content: '';
	clear: left ;
}




#navMain ul {
	margin: 0;
	padding: 0;
	text-align: center;
	z-index: 2;
}




#navMain li {
	list-style: none;
	float: left;
	position: relative;
	margin: 0.1em;/*Abstand zwischen den li-Elementen*/
	padding: 0.2;
	z-index: 2;
}




#navMain ul ul {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 2.5em;
	font: 0/0 serif;
	/* Unternavigation ausblenden */

	z-index: -1;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}




#navMain ul li:hover ul {
	font: inherit;
	z-index: auto;
	/*  Unternavigation einblenden */
}




#navMain ul ul li {
	float: none;
	margin-bottom: 0.2em;
}




#navMain a,
#navMain span {
	display: block;
	width: 8.4em;
	/* Breite den in li enthaltenen Elementen zuweisen */

	margin: 0.6em 0 0 0;
	padding: 0.4em;
	text-decoration: none;
	font-weight: bold;
	border: 1px solid  ;
	border-radius: 10px 10px 0 0;
	box-shadow: 0px 5px 10px white inset;
	color: gold;
	background-color:Purple;

	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}




#navMain ul ul a,
#navMain ul ul span {
	border-radius: 10px;
}




#navMain a:focus,
#navMain a:hover,
#navMain span {
	/* aktuelle Unterseite kennzeichnen */

	color:#0000CD;
	background-color: Snow;




}




#navMain a:focus,
#navMain a:hover {
	margin-top: 0;
	padding: 1.0em 0.4em 0.4em;
}




#navMain ul ul a:hover {
	margin: 0.6em 0 0 0;
	padding: 0.4em;
}




#navMain ul ul span {
	/* aktuelle Unterseite kennzeichnen */

	background-color:Green;
	color:black;
}




#toggleNavMain img {
	float: right;
	display: none;
}




header {
	background-color: Cyan;
	height: auto;
	width: auto;
	box-sizing: border-box;
	padding: 5px;
	margin: 5px;
	border: 3px solid #004848;
}
main {
	height: auto;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	padding: 3px;
	background-color: #FFFFFF;
	border: 5px solid #EE3387;
}
div#h1 {
	float: left;
	background-color: rgba(255,128,128,1);
	height: 40px;
	width: 40%;
	margin: 1px;
	padding: 1px;
	font-size: 12px;
} 
#textspan {
	float: none;
	font-size: 1.5em;
	line-height: 1em;
	font-family: unlock;
}
#ueberschrlogo {
	background-color: #FFFFFF;
	height: 120px;
	box-sizing: border-box;
	border: 5px solid #14BA4A;
	padding: 1px;
	margin: 1px;
}
#vertrauen {
	float: left;
	height: 1.3em;
	background-color: orchid;
	width: 40%;
	clear: left;
	margin-top: 0.3em;
	font-size: 0.95em;
}




#ueberschrlogo img {
	width: 110px;
	float: right;
	margin-right: 20px;
	max-width: 100%;




}
#bildwechsler {
	height: 235px;
	max-width: 100%;
	z-index:-1;
}




address {
	background-color: Ivory;
	width: 20%;
	float: left;
	padding: 0.5%;
	margin-top: 0.5em;
	margin-left: 2%;
}
#karte {
	background-color: Red;
	width: auto;
	float: right;
	height: auto;
	margin-top: 0.5px;
	padding-left: 0.5%;
	margin-right: 1%;
	}
#leitfaden {
	background-color: Bisque;
	width: 45%;
	float: left;
	margin: 0.5%;
	height: auto;
	}
#zielgruppe {
	background-color: Gold;
	width: 23%;
	float: left;
	margin-right: 0.5em;
	padding-left: 0.5em;
	height: auto;
}




#planung {
	background-color: Goldenrod;
	width: 23%;
	float: left;
	padding-left: 0.5em;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
	height: auto;
}
#kommunikation {
	background-color: Thistle;
	width: 23%;
	float: left;
	margin-right: 0.5em;
	padding-left: 0.5em;
	height: auto;
}
#detail {
	background-color: Wheat;
	width: 23%;
	float: left;
	padding-left: 0.5em;
	height: auto;
}
#angebote {
	background-color: Violet;
	height: 140px;
	box-sizing: border-box;
	border: 5px solid #33EE37;
}
aside {
	background-color: Peru;
	height: 220px;
	box-sizing: border-box;
	border: 5px solid #11000D;
}
footer {
	background-color:Plum;
	box-sizing: border-box;
	width: 100%;
	text-align: center;/*text zentriert in der Mitte*/
	border: 5px solid #2D32F2;
}
footer ul{
	background-color:Khaki;
	display:block;
	max-width:960px;
	text-align:left;
	margin-left:10%;
	}
footer ul li {
	background-color: Silver;
	display: inline; /*setzt die Listenelemente nebenainander*/
	line-height: 2em; /*Listenhöhe*/
	padding: 0em 0.9em 0em 1.0em; /*Abstand der Schrift im Listenelement*/
	}
footer ul li a {
	color: #000000;
	font-size: 14px;
	text-decoration: none;
	}




@media only screen and (max-width: 900px){
	#bildwechsler {
	max-width: 100%;
	z-index:-1;
}
	#ueberschrlogo {
	background-color: #FFFFFF;
	height: 105px;
}
	#ueberschrlogo img {
	width:95px;
}
	#angebote {
	height: 170px;
}
	#vertrauen {
	width: 50%;
	background-color:Tomato;

}
	#zielgruppe {
	width: 48%;
}
	#planung {
	width: 48%;
}
	#kommunikation {
	width: 48%;
}
	#detail {
	width: 48%;
}
}




@media only screen and (max-width: 768px){
	#vertrauen{
	background-color:Olive;
	width: 50%;
} 
	#navMain {
	padding-left: 4em;
}
	#ueberschrlogo img {
	width:90px;
}
	#leitfaden {
	width: 40%;
	padding-left:1em;
	font-size: 12px;
	}
	#leitfaden h2 {
	font-size: 14px;
	margin-bottom: 3px;	
}
	address {
	padding: 0.5%;
	font-size: 12px;
}
	#angebote {
	height: 170px;
	font-size:0.95em;
	padding-bottom:1px;
}
	#zielgruppe {
	width: 46%;
	margin-bottom:8px;
	font-size:12px;
}
	#planung {
	width: 46%;
	float:right;
	font-size:12px;
}
	#kommunikation {
	width: 46%;
	clear:left;
	font-size:12px;
}
	#detail {
	width: 46%;
	float:right;
	margin-right:5px;
	font-size:12px;
}
@media only screen and (max-width: 700px){
	 #toggleNavMain {
	margin-left:1.5%;
}
	#vertrauen {
	width: 50%;
	clear: left;
	margin-top: 0.3em;
	font-size: 0.9em;
	background-color:red;
}
	#ueberschrlogo {
	height: 80px;
}
	#ueberschrlogo img {
	width:78px;
}
	#navMain {
	padding-left: 1em;
}
	#h1 {font-size:1em;
}
	#textspan {
	font-size: 1.5em;
}
	address {
	display:none;
}




	#ueberschrlogo img {
	width:70px;
}
	#zielgruppe {
	width: 46%;
	margin-bottom:8px;
}
	#planung {
	width: 46%;
	float:right;
}
	#kommunikation {
	width: 46%;
	clear:left;
}
	#detail {
	width: 46%;
	margin-left:4%;
}
	#angebote {
	height: 150px;
	font-size:0.8em;
}
	#leitfaden {
	width: 60%;
	float: left;
	margin: 0.5%;
	height: auto;
	font-size:0.8em;
	}

}
@media only screen and (max-width: 650px){
	#vertrauen {
	width: 70%;
	margin-top: 0.2em;
	font-size: 0.8em;
	background-color:Blue;
}
	#navMain {
	display:none;
}
	#navMain li {
	float: none;
/*Liste soll beim Aufklappen vertikal angeordnet werden*/
}
	#navMain ul ul li {
	float: right;
/*	Liste Untermenü soll nach rechts ausweichen*/




}
	#ueberschrlogo img {
	width: 50px;
	float: right;
	margin-right: 15%;
	margin-top:10px;
	max-width: 100%;
}
	#toggleNavMain {
	 display:block;
	 position: absolute;
	 right: 40px;
	 top: 40px;
	 cursor:pointer;
}
	.js #navMain {display:none;}
	#navMain {
	display:none;
}
	#leitfaden {
	width: 45%;
	padding-left:1em;
	font-size: 12px;
	}
	#leitfaden h2 {
	font-size: 12px;
	margin-bottom: 3px;	
}
	#zielgruppe {
	width: 44%;
}
	#planung {
	width: 44%;
	margin-right:5px;
}
	#kommunikation {
	width: 44%;
}
	#detail {
	width: 44%;
	}
	#angebote {
	height: 200px;
	font-size:0.8em;
}
@media only screen and (max-width: 480px){
	#toggleNavMain {
	right:8%;
}
	#vertrauen {
	width: 90%;
	margin-top: 8px;
	font-size: 0.6em;
	background-color:Magenta;
}
	#ueberschrlogo {
	height: 70px;
	border: 3px solid #14BA4A;
	padding: 1px;
	margin: 1px;
}
	#ueberschrlogo img {
	width: 30px;
	float: right;
	margin-right: 18%;
	margin-top:8px;
}
	div#h1 {
	float: left;
	background-color: rgba(255,128,128,1);
	height: 30px;
	width: 60%;
	margin: 1px;
	padding: 1px;
	font-size:0.6em;
} 
	#textspan {
	font-size: 1.2em;
	line-height: 1em;
}
	aside {
	height:270px;
	border: 3px solid #11000D;
}




	#leitfaden {
	font-size:0.7em;
	width: 50%;
	}
	#leitfaden h2 {
	font-size: 0.8em;

}
	#karte {
	width: auto;
	float:left;
	}
	iframe {
		width:110px;
		height:110px;
		padding-left:0.5%;
}
	#angebote {
	height:190px;
	padding-bottom:1px;
}
	#zielgruppe {
	width: 44%;
	font-size:0.8em;
}
	#planung {
	width: 44%;
	margin-right:5px;
	font-size:0.8em;
}
	#kommunikation {
	width: 44%;
	font-size:0.8em;
}
	#detail {
	width: 44%;
	font-size:0.8em;
	}
}
@media only screen and (max-width: 320px){
	#vertrauen {
	width: 90%;
	margin-top:2%;
	font-size: 0.6em;
	background-color:Teal;
}
	#ueberschrlogo {
	height: 60px;
	border: 2px solid #14BA4A;
	padding: 1px;
	margin: 1px;
}
	#ueberschrlogo img {
	width: 30px;
	float: right;
	margin-right: 22%;
	margin-top:8px;
}
	div#h1 {
	font-size:0.5em;
	width: 60%;
	height: 20px;
}
	#toggleNavMain {




}
	aside {
	height:280px;
	border: 3px solid #11000D;
}
	#karte {
		margin-left:0.7%;

	}
	iframe {
		width:100px;
		height:100px;
		padding-left:1.5%;
}
	#angebote {
	height:195px;
	padding-bottom:1px;
}
footer ul li a {




	font-size: 0.7em;




	}
}




slider.css
[code=css]#bildwechsler {
	height: 240px;
	max-width: 100%;
	border: 2px solid green;
	box-sizing: border-box;
	padding-left: 0.2%;
	padding-right: 0.5%;
}




#bild1{
	position: absolute;
	z-index: 2;
	opacity: 1;
	filter: alpha(opacity=100);
	max-width:100%;





}




#bild2 {
	position: absolute;
	z-index: 1;
	opacity: 1;
	filter: alpha(opacity=100);
	max-width: 100%;
}




#bildwechsler {
    height: 240px;
    max-width: 100%;
    border: 2px solid green;
    box-sizing: border-box;
    padding-left: 0.2%;
    padding-right: 0.5%;
}




#bild1{
    position: absolute;
    z-index: 2;
    opacity: 1;
    filter: alpha(opacity=100);
    max-width:100%;







}




#bild2 {
    position: absolute;
    z-index: 1;
    opacity: 1;
    filter: alpha(opacity=100);
    max-width: 100%;
}

Alles anzeigen

Javascript

JavaScript

var bild1 = new Image();
bild1.src = 'bilder/bild1.jpg';
var bild2 = new Image();
bild2.src = 'bilder/bild2.jpg';
var bild3 = new Image();
bild3.src = 'bilder/bild3.jpg';




var bildoben = 0;
var bildunten = 1;
var op = 1;
var op_ie = 100;




var diebilder = new Array('bilder/bild1.jpg', 'bilder/bild2.jpg', 'bilder/bild3.jpg', 'bilder/bild2.jpg');
var lang = diebilder.length;




function slider() {
    var rahmen1 = document.getElementById('bild1');
    var rahmen2 = document.getElementById('bild2');




    rahmen1.src = diebilder[bildoben];
    rahmen2.src = diebilder[bildunten];
    rahmen1.style.opacity = '1';
    rahmen1.style.filter = 'alpha(opacity=100)';




    bildoben++;
    bildunten++;
    if ((bildoben + 1) == lang) {
        bildunten = 0;
    }
    if (bildoben == lang && bildunten == 1) {
        bildoben = 0;
        bildunten = 1;
    }
    window.setTimeout("slidemove()", 3000);
}
function slidemove() {
    if (op > 0) {
        op = op - 0.1;
        op_ie = op_ie - 10;
        document.getElementById('bild1').style.opacity = op;
        document.getElementById('bild1').style.filter = 'alpha(opacity=' + op_ie + ')';
        window.setTimeout("slidemove()", 100);
    } else {
        op = 1;
        op_ie = 100;
        window.setTimeout("slider()", 0);
    }
}




// JavaScript toggleNavMaain




$(document).ready(function () {
    $('html').addClass('js'); // Klasse "js" per jQuery zum html-tag hinzufügen.
    var navToggle = ['<div id="toggleNavMain">Menü</div>'].join("");
    $("header").append(navToggle) /* Button zum Einblenden des Hauptmenüs wird per JavaScript erstellt und in den Header eingefügt */
});




$(function () {
    var pull = $('#toggleNavMain');
    menu = $('#navMain');
    menuHeight = menu.height();




    $(pull).on('click', function (e) {
        e.preventDefault();
        menu.slideToggle();
    });




    $(window).resize(function () {
        var w = $(window).width();
        if (w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

Alles anzeigen

html-seminar.de/woltlab/attachment/787/html-seminar.de/woltlab/attachment/788/html-seminar.de/woltlab/attachment/789/html-seminar.de/woltlab/attachment/790/html-seminar.de/woltlab/attachment/791/

Basi · 27. April 2015

Hi, leider war der Beitrag sehr schwer lesbar und an einigen Stellen falsch formatiert. Ich habe mir die Freiheit genommen einige Leerzeilen zu entfernen, die Gliederung etwas mehr hervorzuheben und die Codeblöcke zu strukturieren, allgemein sollte die Form nun besser lesbar für alle sein.

wolf · 27. April 2015

Bitte lade deine Website in Zukunft auf einen Webspace hoch und schicke lieber den Link, anstatt 207882836 Zeilen Code zu Posten..

habe das mal für dich getan http://hcp-forum.lima-city.de/…wicklung%20einer_seite/0/
Dein Code habe ich auch ein bisschen aufgeräumt..

Hier das HTML

HTML

<!doctype html>
<html>
  <head>
    <title>GarciaNetz</title>




    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8">




    <link href="favicon.ico"        rel="icon">




    <link href="css/normalize.css"  rel="stylesheet">
    <link href="css/boilerplate.css"rel="stylesheet">
    <link href="css/slider.css"     rel="stylesheet">
    <link href="css/style.css"      rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">




    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/slider.js"></script>
    <script src="js/toggleNavMain.js"></script>
  </head>
  <body onload="slider()">
    <div id="container">
      <header>
        <nav id ="navMain">
          <ul>
            <li><span>Startseite</span></li>
            <li><a href="#">Projekt 1 </a>
          <ul>
            <li><a href="#">Unterseite1.1 </a></li>
            <li><a href="#">Unterseite1.2</a></li>
            <li><a href="#">Unterseite1.3</a></li>
          </ul>
            <li><a href="#">Projekt 2</a></li>
            <li><a href="#">Projekt 3</a></li>
          </ul>
          <!--
          <div id="toggleNavMain">Menü
            <img src="bilder/menu100x50.png">
          </div>
          -->
        </nav>
        <div id="ueberschrlogo">
          <div id="h1">
            <h1>
              <p id="text">
                <span id="textspan">I</span>m Div h1
              </p>
            </h1>
          </div>
          <img src="bilder/Logoweb1.png">
          <p id="vertrauen"> vertrauen,eine Bemerkung oder eine Ergänzung</p>
        </div>
      </header>
      <!-- https://www.youtube.com/watch?v=LeHN5y1LweU-->
      <div id="bildwechsler">
        <img id="bild1" src="bilder/bild1.jpg" width="940" height="235" alt="See">
        <img id="bild2" src="bilder/bild2.jpg" width="940" height="235" alt="see">
      </div>
      <!--
      <div id="bildwechsler">
        <img id="bild1" src="bilder/bild1.jpg" alt="See">
        <img id="bild2" src="bilder/bild2.jpg" alt="see">
      </div>
      -->
      <hr>
      <main id="main">
        <aside>
          <article id="leitfaden">
            <h2>Leitartikel zur Seite</h2>
            <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender körperlicher Betätigung, außer um Vorteile daraus zu ziehen? Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft</p>
          </article>
          <address id="anschrift" >
            Falk-Peter Garcia-Greno
            Gottschedstrasse 22
            04109 Leipzig
            <br>
            Tel: 0341 2229717
            <br>
            Mail: service@garciagreno.de
          </address>
          <div id="karte">
            <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2492.3673995721706!2d12.367366100000009!3d51.341154400000015!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a6f789f618a5b7:0x1f7b30bc10773408!2sGottschedstraÃÂŸe,+04109+Leipzig!5e0!3m2!1sde!2sde!4v1428915811418" width="200" height="200" ></iframe>
          </div>
        </aside>
        <div id="angebote">
          <article id="zielgruppe">
            <h4>Ihre Zielgruppe definieren</h4>
            <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu </p>
          </article>
          <article id="planung">
            <h4>Projektplanung</h4>
            Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu 
            </article>
          <article id="kommunikation">
            <h4>Kommunikation</h4>
            <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu </p>
          </article>
          <article id="detail">
            <h4>Details</h4>
            <p>Auch gibt es niemanden, der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn, es kommt zu </p>
          </article>
        </div><!--angebote-->
      </main>
      <footer>
        <ul>
          <li><a href="#">Impressum</a></li>
          <li><a href="#">Datenschutz</a></li>
          <li><a href="#">AGB</a></li>
        </ul>
      </footer>
    </div> <!--container-->
  </body>
</html>

Alles anzeigen

Mit den Mediaquerries hast du es etwas übertrieben oder?
Du ahst mehr Zeilen CSS um responsive zu werden als normales CSS

hundebeinem · 4. Mai 2015

Antwort für Forum Wolf

Danke für die Mühen.

Ich habe die Seite mal auf : http://hundebeinem.lima-city.de gestellt.

Ich denke das macht nur -Sinn, wenn ich auch die Zugangsdaten mitgebe, damit Änderungen ausprobiert werden können. BN: hundebeinem KW: $UB@]@MdhUp/o4vcY7v6

Nun ist zwar aufgeräumt, die von mir genannten Probleme
bestehen aber wie zuvor.

Nach jetzigem Stand
sind die Codes für JS und für slider.css aus der HTML-Seite entfernt und in die
dafür erstellten Ordner verschoben. Das Ergebnis ist wie oben beschrieben und
nun läuft auch der Bildwechsel nicht mehr.

Kann jemand helfen?

Beste Grüße

Peter

wolf · 4. Mai 2015

Hir mal das, was ich als rückgabe bekomme wenn ich deine Seite aufrufe [Blockierte Grafik: http://hcp-forum.lima-city.de/verschiedene_probleme_bei_der_entwicklung%20einer_seite/img/hcp_forum_hundebeinem_2015-05-04_16-14-36.png]

hundebeinem · 7. Mai 2015

Danke, aber ich kann die Meldungen nicht verstehen.
Wenn ich https://www.hundebeinem.lima-city.de/ eingebe, wird die Seite angezeigt.
Kannst du mir sagen was ich machen kann und warum ?
Hilft es, wenn ich die einzelnen Probleme mal voneinander getrennt darstelle?
Beste Grüße
Peter

Nitamud · 7. Mai 2015

Achte mal auf die Meldungen in der Browser-Konsole, wie man sie an wolfs Screen sehen kann. Die Meldungen dort sind meist detailliert und aufschlussreich

hundebeinem · 9. Mai 2015

Hallo
Ich muß meine Anfrage noch mal neu beginnen, denn ich komme mit euren Antworten nicht zurecht.
Warum?
Ich habe eine Seite vorgestellt, die einige Probleme hat. Diese habe ich auch beschrieben.
Basi hat mir gezeigt, daß man den Code übersichtlicher gestalten kann und daß es hilfreich ist, die Seite auf einen Serverzu laden.

Damit hatte ich aber keinen Hinweis zur Lösung eines der von mir genannten Probleme.
Wolf zeigte mir die Meldung der Bowserkonsole ohne diese zu kommentieren. Und mit dem Hinweis, ich hätte mir bei der Fragestellung nicht genug Mühe gegeben.
Auch damit konnte ich keines der von mir genannten Probleme näher kommen.
Nitamud hat mir dann auf die Frage, was denn Die Meldungen in der Konsole bedeuten, auch nicht auf diese Frage geantwortet sondern über anderes geschrieben, dessen Zusammenhang zu meinen Fragen ich nichterkennen kann.
So habe ich heute eine menge Beiträge ohne Inhalt.
Es kann ja sein, daß ich grundsätzlich etwas falsch mache. Dann sagt das bitte. Zu wenig Mühe gegeben ist kein konstruktiver Hinweis.
Beachtet bitte, daß ich kein Informatiker bin. Meine Kenntnisse habe ich nur aus Lehrmaterial zusammengetragen. Da kann ich meine Fragen nicht klüger stellen, als ich bin. Ich finde es auch ganz natürlich, wenn Ihr nicht alles wißt. "Politikerantworten" bringen aber wirklich nicht weiter.
Ich habe eigentlich große Hoffnung in Euch gesetzt, den Ihr habt mir vor einiger Zeit schon gut geholfen.
Meine Frage allgemein ist also, wie können wir verfahren? Mir ist bewußt, daß Ihr das alles nur freundlicherweise macht.
Ich könnte Meine Probleme in einzelne Seiten aufspalten, dann kann ich auch eine begrenztere Fragestellnung erarbeiten. Geht das?

Beste Grüße
Peter

wolf · 9. Mai 2015

Zitat von hundebeinem

Und mit dem Hinweis, ich hätte mir bei der Fragestellung nicht genug Mühe gegeben.

Sorry, aber WO?

Naja sagen wir es so, es wäre toll wenn du dir die Meldungen in der Console genauer anschaust, die Meldungen Übersetzt und dann dein Problem selber Lösen kannst. Wenn du nicht verstehst was die Meldung bedeutet, google -> stackoverflow hilft da meistens recht gut. Wenn dir das auch nicht hilft, dann einfach nochmal Explizit hier nachfragen.
Die Sache ist die das (ich denke) keiner hier wirklich Lust hat dir die Fehlermeldungen alle einzeln zu erklären.

Ich fange mal mit nummer 4 an 'slider is not defined' -> 'slider ist nicht definiert'
Dies lässt Rückschlüsse darauf zu, das die Funktion 'slider' nirgendwo als Funktion definiert wurde.
a) Schreibfehler im Name der Funktion
b) Entsprechende Datei wurde nicht geladen (Oder ein Fehler ist beim Parsen der Datei aufgetreten)

In deinem Fall ist b) der hacken, darauf weist Fehlermeldung 1 hin.. übrigens glöeiches Parse-Problem bei der anderen Datei.

Ich hoffe du verstehst was wir meinen.

Nitamud · 9. Mai 2015

Sry aber ich hab dir ziemlich eingies dazu per Pm erklärt, dass nicht inhaltslos war...

Zitat

In deiner externen Js-Datei(slider.js) ist die Angabe <script type="text/javascript"> nicht nötig und der Browser versteht diese nicht(es handelt sich um keinen js-Code).
In einer externen Datei für JavaScript kannst du nur JavaScript und kein HTML nutzen, lass dies weg.

Zum CSS , bei mir findet der Server die Datei https://www.hundebeinem.lima-city.de/css/responsive.css nicht und antwortet mit einem 404-Error(Datei nicht gefunden). Schau mal ob da eine falsche Pfadangabe die Schuld trägt

Noch eine kleine Anmerkung dazu:

Du solltest jQuery über https laden da sonst die ganze Website als unsicher eingestuft wird(kam dadurch fast nicht zur Seite).

mfg

hundebeinem · 11. Mai 2015

Hallo Nitamud, danke für die Antwort.
Den Ordner responsive.css gibt es nicht mehr.
Ich habe eine neue Version unter https://www.hundebeinem.lima-city.de/ eingestellt.
Dazu habe ich alles einfach auf den Server kopiert.
Kannst Du mir bitte sagen was Du meinst mit: Du solltest jQuery über https laden?
Wie gesagt, ich stecke im Lernprozeß.
Beste Grüße

wolf · 11. Mai 2015

Soorry, aber wenn du nicht mal weißt was https ist - dann weiß ich auch nicht ob man das als Lernprozess bezeichnen kann, außerdem 'jquery über https laden' wirst du wohl gerade so in Google eingeben können oder?
Wir helfen echt gerne gerne aber ein bisschen Eigeninitiative muss schon kommen.
Immernoch die Selben Fehler.
In eine JS Datei gehört KEIN

HTML

<script></script>

Es will und wird dir hier niemand das nochmal alles vorkauen!

Verschiedene Probleme bei der Entwicklung einer Seite

Jetzt mitmachen!

Teilen