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
<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
<!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
*{
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
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/